[Composition] #angular

composition.md

Composition

It is important not to hide composition. It should be done centrally, at the root of the application.

In angular there are 2 different resources we must compose in order to build an application

• Using a composition root we map directives, controllers, and services into the injector.

• Using routing we compose views from HTML partials and controllers for each different application state.

composition root

In dependency injection we maintain a library of components at our disposal. We then assemble these into and application, by composition, using a composition root.

It is important for composition that each component (directives, controllers, services) is small and performs a well defined function. Complex components should be split to separate concerns.

These components fit together all in one place - the composition root. The composition root may be organised into multiple files so long as this aids clarity. Your composition root(s) should be in your library and included by your application main.js. That way if you have a development-only application, its main.js may include the same composition root(s) plus anything additional as an override.

We therefore need define only one module in the entire application. However that module must be dependent on the templates module. Meaning:

  angular.module('myApp', [ 'templates' ])

Where myApp should be customised to your application. This templates module is automatically generated from the HTML partials. The build system converts the HTML to a javascript routine that populates the angular template cache. This makes the partials immediately available to angular in a transparent manner.

routing

In a single page application it is critical that we encode application state in the route. This enables bookmarking and deep linking to reconstruct the page given only the URL.

For every change in view we need to encode state in the route. Where we have hierachical state, as with the angular UI-router, each layer of the state has its own HTML partial and recursively contains other views.

If you find your lowest-level partial is large it is likely you do not have sufficiently detailed state.

Ideally controllers are specified only in the routing. The controller specified here may be explicit, as an actual Class. In this case, there is no need to map any controller in the composition root.