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

Question

I am looking for something that will be somewhat equivalent to the functionality of the UI-Router $rootScope.$on('$stateChange...' version 1.0. I know about the new $ transition service, but I cannot figure out exactly how to make it work the same.

I created a minimal reproducible plunker below to try to highlight how I use this service, and I hope to get some idea of ​​a new approach for this in v1.0 + UI-Router

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

Not only does the transition fail at each transition, but it does not work at all for child transitions. Is this expected behavior? It seems to work in a state of kinship, but it still appears only once (perhaps because caching is involved?). I would think that even if the "state" is loaded via the cache, the "transition" is still happening.

Interested in knowing the functionality you need here. Thanks!

Answer 1

1) Your plunker is broken, and the error leads to confusing results. To stop errors in the console, you need to add a track to your ng-repeat :

<P → angular.js: 13920 Error: [ngRepeat: dupes] Duplicates in the relay are not allowed. Use the expression "track by" to specify unique keys. Repeater: transition to transitions, duplicate key: line: initial loading main, repeating value: loading main

2) The globe * corresponds to only one state level. Use ** to match greedy (this will also match the child state) { to: '**' }

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

4) To better understand the transitions, 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 list with these changes: https://plnkr.co/edit/AO49n8biBBEnfnsxPbns?p=preview

Read the migration service documentation that describes each lifecycle hook:

• onBefore
• Onstart
• onExit (state capture)
• onRetain (state capture)
• onEnter (state capture)
• onfinish
• Onsuccess
• Onerror

Read the click criteria objects for more details on how you can target specific clicks .