Issue
The best I’ve found is http://www.ng-newsletter.com/posts/angular-ui-router.html. It doesn’t go as deep as, for example, the order in which $stateChangeStart
, exampleState.onEnter
, exampleState.resolve
, and exampleState.templateProvider
fire.
A great answer format would be clean. Something like:
-
Initial pageload of state foo:
- Angular lifecycle step 1
- UI router lifecycle step 1
- UI router lifecycle resolves occur
- UI router lifecycle onEnter fires
- Angular lifecycle step 2
-
State change foo -> bar
$stateChangeStart
event fires- foo
onExit
fires - bar
onEnter
Fires templateUrl
gets the template- UI router plugs back into the Angular lifecycle in the digest loop (or wherever).
-
Nested states
-
Multiple named views:
-
ui-sref clicked
Etc… Thanks!
EDIT: Debugging functions provided enough insight to meet the need. See my answer below for a snippet.
Solution
After some experimenting, I figured out how to see into the lifecycle well enough to debug my app and get a feel for what was happening. Using all the events, including onEnter, onExit, stateChangeSuccess, viewContentLoaded from here, gave me a decent picture of when things are happening in a way that’s more both more flexible and specific to my code than a written out lifecycle. In the app module’s “run” function, I placed:
This code would have saved me days of time and confusion if I started using it when I first started with Angular and UI-router. UI-router needs a “debug” mode that enables this by default.
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
console.log('$stateChangeStart to '+toState.name+'- fired when the transition begins. toState,toParams : \n',toState, toParams);
});
$rootScope.$on('$stateChangeError',function(event, toState, toParams, fromState, fromParams, error){
console.log('$stateChangeError - fired when an error occurs during transition.');
console.log(arguments);
});
$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
console.log('$stateChangeSuccess to '+toState.name+'- fired once the state transition is complete.');
});
$rootScope.$on('$viewContentLoading',function(event, viewConfig){
console.log('$viewContentLoading - view begins loading - dom not rendered',viewConfig);
});
/* $rootScope.$on('$viewContentLoaded',function(event){
// runs on individual scopes, so putting it in "run" doesn't work.
console.log('$viewContentLoaded - fired after dom rendered',event);
}); */
$rootScope.$on('$stateNotFound',function(event, unfoundState, fromState, fromParams){
console.log('$stateNotFound '+unfoundState.to+' - fired when a state cannot be found by its name.');
console.log(unfoundState, fromState, fromParams);
});
Answered By – Adam
Answer Checked By – Robin (AngularFixing Admin)