AngularUI Router Dependent Resolves

April 14, 2017 by Chris Sherman

The resolve property of UI Router’s state definition delays changing state until data is loaded. This allows us to avoid entering states for which we don’t have necessary data, as well as prevents views from rendering in an unpredictable fashion when asynchronous requests finish at different times.

Dependent Resolves

In certain cases, some of the data we need to resolve depends on the value of another piece of data. UI Router handles this situation by giving us the ability to inject the result of sibling resolve properties.

Example

Consider a situation where a user is part of multiple organizations, and we want to display a list of these organizations. Before we can issue an API request for the user’s organizations, we need to know the identity of the user. To do this we’ll first resolve the user and then get the uuid property of the resolved user to issue the request for organizations. You can see this process in action in the $stateProvider configuration in the app.js file of the Plunker below.

AngularJS