In this post, I show how to leverage css selectors to make styles specific to an AngularJS controller or directive. The technique seems obvious once it's pointed out but it's something I never thought of until recently. Hopefully this can also help others better organize css in their AngularJS applications.

In the previous post I looked at how the resolve property of an AngularJS route can be used to pass dependencies to a controller. In that example the resolve property in the route configuration called a service that returned a promise. The resolve property then passes the result of the promise to the controller when it is instantiated. The question that came up is what if there is an error and the promise is rejected instead of resolved? That's what I'll be answering in this post.

The resolve property is attached to a route in AngularJS to provide a list of dependencies for the route. The data from this list is injected into the route controller and if any of the dependencies are promises, the promise will be resolved before the controller is instantiated. This helps keep the controller clean because any data the controller depends on can be injected into it instead of the controller retrieving that data itself. This post will go through an example of using the resolve property and show the differences between using a resolve property versus putting the fetch code in the controller directly.

The example in this post shows how the $q service can be used to harness the power of javascript promises to perform application logic in an AngularJS application. This can help keep application code organized and separate responsibilities among controllers and services.