Angular UI Router Nested State resolve in child states

Solution 1:

The way I find the ui-router exceptional, is in the behaviour you've just described.

Let's think about some entity, e.g. Contact. So it would be nice to have a right side showing us the list of Contacts, the left part the detail. Please check the The basics of using ui-router with AngularJS for quick overvie about the layout. A cite:

ui-router fully embraces the state-machine nature of a routing system. It allows you to define states, and transition your application to those states. The real win is that it allows you to decouple nested states, and do some very complicated layouts in an elegant way.

You need to think about your routing a bit differently, but once you get your head around the state-based approach, I think you will like it.

Ok, why that all?

Because we can have a state Contact representing a List. Say a fixed list from perspective of the detail. (Skip list paging filtering now) We can click on the list and get moved to a state Contact.Detail(ID), to see just selected item. And then select another contact/item.

Here the advantage of nested states comes:

The List (the state Contact) is not reloaded. While the child state Contact.Detail is.

That should explain why the "weird" behaviour should be treated as correct.

To answer your question, how to handle user state. I would use some very top sibling of a route state, with its separated view and controller and some lifecycle arround... triggered in some cycles

Solution 2:

Real Short answer is use:

$rootScope.$on("$stateChangeStart")

to listen for any scope changes and do appropriate actions.

Longer answer is, check out the fiddle: http://jsfiddle.net/jasallen/SZGjN/1/

Note that I've used app.run which means i'm resolving the user for every state change. If you want to limit it to state changes while authRoot is in the parentage, put the check for $stateChangeStart in the authRoot controller.