Can you update the document for $stateChange* events?

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

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

Are there any examples of how to use $transitions?

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',
  ])

@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

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

@cawa-93

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

@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();

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

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

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

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

@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?

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.