Recently Jigital had a go at creating some custom sections and trees in Umbraco. This is a summary of how we achieved it and what you can do to do the same thing yourself!. There may be better approaches, but it works!
Creating custom sections and trees in Umbraco with Angular
Firstly you need to create a folder inside the App_Plugins folder that is going to store all of your code and html to make everything work
The controller is what you will pass your data to and from. For example receiving data from an Angular resource which is then passed to a html file.
angular.module("umbraco").controller("YourControllerNameController", function ($scope, yourResourceName)
{
var vm = this;
var vm.YourObjectName = "";
var yourVariableName = yourResourceName.getAll().then(function(response) {
console.log(response);
vm.YourObjectName = response;
});
}
Here we are adding our controller YourControllerNameController to the umbraco module (so we can use it), defining an anon function,we are then calling a method definied in our resource and setting the response to our object.
We need to register our resource (where we get data from for example) with the umbraco.resources module
angular.module('umbraco.resources').factory(function($q, $http, umbRequestHelper)
{
}
);
the .factory is an Angular method which allows you to add some logic to a created object and return the created object
We are then specifing an anon function and the parameters for that function
Inside the function we could go to some c# code
return { getAll: function ()
{
return umbRequestHelper.resourcePromise($http.get("/Umbraco/Api/SomeController/SomeMethod"),"some fail message");
}
};
Here we specify a method called getAll that will return the data from our API.
This is where you will add your html to style the data you have recieved from your controller.
<div class="welcome-dashboard" ng-controller="YourControllerNameController as vm">
Here we are using the ng-controller directive (which attaches a controller class to the view)
<div ng-repeat="yourObject in vm.YourObjectName" style="margin-top:30px;">
<p>{{yourObject.key}}</p>
Here we are iterating over the object returned from the controller (This could be a string or int, but for this example we are assuming an array [])
Language files are used to translate the Umbraco backoffice user interface so that end users can use Umbraco in their native language. This is particularly important for content editors who do not speak English.
You could think of the package.manifest as the app.config of a .NETCore application
For example we may define the following. The javascript section is important as this is how the application will know about your .js and .css files you have created above!
{
"sections": [
{
"alias": "youralias",
"name": "yourName"
}
],
"dashboards": [
{
"alias": "yourDashboardAlias",
"view": "/App_Plugins/yourFolder/yourDashboardView.html",
"sections": [ "yourDashboardSectionName" ],
"weight": -10,
"access": [
{ "deny": "translator" },
{ "grant": "admin" }
]
}
],
"javascript": [
"~/App_Plugins/yourFolder/yourName.controller.js",
"~/App_Plugins/yourFolder/yourName.resource.js"
],
"css": [
"~/App_Plugins/yourFolder/yourName.css"
]
}
So in the end your folder structure will end up with something like this
App_Plugins/yourFolderName/Lang/yourLanguageFiles
App_Plugins/package.manifest
App_Plugins/yourName.controller.js
App_Plugins/yourName.resource.js
App_Plugins/yourNameTree.html
App_Plugins/yourNameDashboard.html
App_Plugins/yourName.css
