Angular Umbraco Binding Plugin

One of the major problems that I've faced while working with Angular and Umbraco is the fact that Umbraco is heavily based on server round trips when it comes to showing content on sites. Using Razor is easy and an intuitive way to access data from Umbraco sites, but it doesn't fit well with modern javascript setups. On the other hand, working with Angular on websites makes frontend development a breeze for a backender, but it gets a bit tricky when you have to access data from the underlying CMS, and often requires a lot of repetitive work when it comes to setting up models both in front and backend, and having controllers, services and so forth represented on both sides. The goal of this project was to eliminate some of that repetitive work, at least in the early stages of development.

So, what is the solution?

The solution is pretty simple. I hook up events in Umbraco to the Angular CLI, such as ContentType Created, Content Saved, and so forth, to it's corresponding Angular CLI. With this I create Angular components for each of my document types, with models that corresponds with the document type properties. These models are then populated with a service that takes the path from the Angular Routing and grabs the data from Umbraco's content cache.

With this binding a developer would be able to setup their document types in Umbraco Backoffice and when they are done, they would already have a fully functioning Angular setup to work with. All the files that are created are templated, so if a specific project requires extra services to be added to all components, it can be done in the templates before hand. The whole pipeline is also open, so developers can add extra post processing to both app generation and component generation, or remove it completely if they just want the components.

How does it work?

This image shows an example of a Page Not Found component being added, with the verbose setting turned off.

I use inheritance to structure the components as well, but this can be omitted by adding a flat attribute to the component creation attributes.

Because of the inheritance the component is located under page/page-not-found and Angular CLI takes care of putting the right path into the App Module.

The component is by default using a directive with the selector umbraco-components where it will add nested components, if any exists. If multiple properties with nested components exist the developer can add an "alias" attribute to the umbraco-components tag in the template, and the template will only render the components with that alias.

Apart from the component a model is also created for the component that can be accessed using {{model}} in the html template of the component. This model automatically gets the right property types of available or writes out a comment with what editor was used in Umbraco, so that the developer can add more types later, if they have their own property type editors.

To top it all off there is a metadata file that is updated on every content save, which allows the ng serve site to update with new content when it's available. This can also be used to fetch new data from the service when it's available, if the plugin is running on the server.

This POC supports:

- Multinode and Content Pickers
These are typed to the document type of the allowed content (or IPublishedContent if multiple types are allowed)

- Nested Content

- Primitive Values (bool, string, number)

- Images

- Member Restriction

- 404 Handling

And it is written using Angular CLI 7.3.4, Angular 7.2.7 and Umbraco 8.0.0

umbraco
umbraco 8
Angular