What is the Angular ui-router lifecycle? (for debugging silent errors)

Viewed 24902

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:

  1. Initial pageload of state foo:

    1. Angular lifecycle step 1
    2. UI router lifecycle step 1
    3. UI router lifecycle resolves occur
    4. UI router lifecycle onEnter fires
    5. Angular lifecycle step 2
  2. State change foo -> bar

    1. $stateChangeStart event fires
    2. foo onExit fires
    3. bar onEnter Fires
    4. templateUrl gets the template
    5. UI router plugs back into the Angular lifecycle in the digest loop (or wherever).
  3. Nested states

  4. Multiple named views:

  5. ui-sref clicked

Etc... Thanks!

EDIT: Debugging functions provided enough insight to meet the need. See my answer below for a snippet.

5 Answers
Related