$stateChangeStart not being fired on v1.0

[brunolemos]

Works fine on v0.2.13

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        console.log('from', fromState.name, 'to', toState.name);
});

[dreamstu]

+1 on v1.0.0-alpha0

[ergo]

Same here on 1.0.0-alpha.4

[ergo]

Actually...
The $stateChange* events are deprecated. The $transitions.on* hooks are generally much more powerful. The events are not included by default, but can be re-enabled by including the stateEvents.js file (missing in 1.0.0-alpha.1; see #2655) from #2219

[samithaf]

Don't forget to add 'ui.router.state.events' as a dependancy for your project too

[christopherthielen]

Thanks all.

$stateChange* events are deprecated

The $stateChange* events are deprecated in 1.0. They are replaced with the $transitions.on* transition hooks.

However, they can be re-enabled for backwards compatibility by including stateEvents.js and depending on the 'ui.router.state.events' angular module.

<script src="stateEvents.js">

var myApp = angular.module('myApp', ['ui.router', 'ui.router.state.events']);

Note: the code in stateEvents.js re-implements the $stateChange* events using the new Transition Hooks

[yangmillstheory]

Are there any examples of how to use $transitions?

[christopherthielen]

@yangmillstheory @alexleung there are some samples in the alpha docs: http://angular-ui.github.io/ui-router/1.0.0-alpha.3/interfaces/transition.ihookregistry.html

See also the sample app: https://github.com/ui-router/sample-app/tree/master/app/routerhooks

[yangmillstheory]

Thanks @christopherthielen!

[anchengjian]

Can you update the document for $stateChange* events?

[cawa-93]

Can you help me?
I do not understand how I can save the state. In the previous version I set the event handler like this:

$scope.$on('$stateChangeSuccess', ($event, toState, toParams) => mySaveFunction(toState, toParams));

And at startup the application loads state like this:

{toState, toParams} = myLoadFunction();
$state.go(toState, toParams);

How do I have the same effect is achieved in the new version? How can I create an event handler that will receive information about the new state?

I tried to do something like this:

$transitions.onSuccess({to: true }, ($transition, $state) => {
// ...
});

But $state always are NULL.

[christopherthielen]

Can you update the document for $stateChange* events?

I see 10 thumbs up wanting updated docs, just letting you know they are found here: https://ui-router.github.io/docs/latest/modules/ng1_state_events.html

[christopherthielen]

@cawa-93

$transitions.onSuccess({ }, trans => {
  mySaveFunction(trans.to(), trans.params());
});

[mackelito]

@christopherthielen perhaps it would be nice to have a way too install the stateEvents.js thru a package.json file? perhaps add it as a separate module?

[samithaf]

State events file is packaged with ui.router so you can do following.

import uiRouter from 'angular-ui-router';
import 'angular-ui-router/release/stateEvents';

 angular
  .module('mario', [
    uiRouter,
    'ui.router.state.events',
  ])

[amir-s]

@christopherthielen Is there anyway to unhook?

Say in a controller, I hook to $transitions.onSuccess, I need to unhook from it when the component gets destroyed. Is it possible?

Update
I just found out the hook itself returns an unhook (deregister) function :)
so,

let unhook = $transitions.onSuccess({}, () => {})

unhook();

[DustinJSilk]

If only the docs were a little more simple I wouldn't have to spend a few days studying every aspect of the complicated $transition to ultimately figure out how to just grab one parameter before switching states. ugh

[ehsankhfr]

Maybe useful for any other user facing with the same issue:

https://ui-router.github.io/guide/ng1/migrate-to-1_0

[metakermit]

Here's a complete example of how to use new $transitions.