belle-workbook

Recommendations

Info

Create the View and ControllerWe will now finally setup a new view and controller, which follows previous tutorials, so haverefer to those for more details:The view:{{person.Name}}The controller:angular.module("umbraco").controller("My.PersonPickerController",function($scope, personResource){personResource.getAll().then(function(response){$scope.people = response.data;});});The flowSo with all these bits in place, all you need to do is register the property editor in a package.manifest - have a look at the first tutorial in this series. You will need to tell the package to loadboth your personpicker.controller.js and the person.resource.js file on app start.With this, the entire flow is:1. The view renders a list of people with a controller2. The controller asks the personResource for data3. The personResource returns a promise and asks the /my/PersonAPI APIController4. The APIController queries the database, which returns the data as stronglytyped Person objects5. The APIController returns those Person objects as json to the resource6. The resource resolve the promise7. The controller populates the viewEasy huh? - honestly though, there is a good amount of things to keep track of, but eachcomponent is tiny and flexible.
Wrap upThe important part of the above is the way you create an APIController call the database foryour own data, and finally expose the data to angular as a service using $http.For simplicity, you could also have skipped the service part, and just called $http directly inyour controller, but by having your data in a service, it becomes a reusable resource for yourentire application.Congratulations you have now completed this workshop and are now a fully qualifiedUmbraco Belle developer (ish)!!You have:-• Created a plugin• Defined a property editor• Injected your own JavaScript libraries and some 3rd party ones• Made the editor configurable• Connected the editor with native dialogs and services• Looked at koala pictures• Worked with the APIController to work with custom json dataCopyrightThe contents of this book were originally authored by Per Ploug and it’s content and allcopyright belongs to the Umbraco HQ.The original copy of this tutorial can be found online within the Umbraco Belledocumentation:-http://umbraco.github.io/Belle/#/tutorials/CreatingAPropertyEditor
Page 1 and 2: Umbraco Belle WorkshopBuilding your
Page 3 and 4: Step 1: Setting up a pluginThe firs
Page 5 and 6: Register the data type in UmbracoGo
Page 7 and 8: Now, clear the cache, reload the do
Page 9 and 10: So what did you just add?You just a
Page 11 and 12: You can inject whatever html you wa
Page 13 and 14: Setup APIController RoutesNext we n
Page 15: Create a Person ResourceNow that we

belle-workbook

Create successful ePaper yourself

Delete template?

Save as template?