UI-Router v1.0+ $transitions Service in Angular 1.x

Question

I am looking for something that would be somewhat equivalent to the pre 1.0 version of UI-Router's $rootScope.$on('$stateChange...' functionality. I am aware of the new $transitions service but can't seem to figure out exactly how to get it to work the same way.

I've created a minimum reproducible plunker below to try and highlight how I am currently using the service and hope to get some insight into the new approach for accomplishing this in the v1.0+ UI-Router

https://plnkr.co/edit/ddabHc9oXEbqMoNZHYs2?p=preview

Not only does the transition not seem to fire on every transition, but it doesn't fire at all for child transitions. Is this the expected behavior? It does appear to fire on sibling states, but even still only appears to fire once (potentially because caching is involved?). I would think that even if the 'state' is loaded via cache a 'transition' is still happening.

Interested in knowing the desired functionality here. Thanks!

Answer 1

1) Your plunker is broken, and the bug is making the results confusing. You need to add a track by to your ng-repeat to stop the errors in the console:

> angular.js:13920 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: transition in transitions, Duplicate key: string:Started loading main, Duplicate value: Started loading main

2) The glob * matches only a single state level. Use ** to match "greedy" (it will then match the child state as well) { to: '**' }

3) All criteria keys are optional. If any are omitted, they implicitly match anything. Instead of { to: '**' }, I prefer an empty criteria object {}

4) To understand transitions better, use the UI-Router Visualizer and enable the ui-router trace service for transitions (check the console). app.run($trace => $trace.enable('TRANSITION'))

Here's an updated plunk with those changes: https://plnkr.co/edit/AO49n8biBBEnfnsxPbns?p=preview

Read the documentation for Transition Service which describes each lifecycle hook:

• onBefore
• onStart
• onExit (state hook)
• onRetain (state hook)
• onEnter (state hook)
• onFinish
• onSuccess
• onError

Read about hook criteria objects for more details about how you can target specific transitions.