angular-ui-router Getting started with angular-ui-router Using transition events

Example

UI-Router exposes transition events that can be helpful for handling transition errors, handling/blocking transitions based on certain parameter values, custom authentication etc..

These events can be bound to $rootScope for a global effect or to $scope for a per controller effect.

---

$stateChangeError - This event is broadcasted when an attempt to change the state has failed and threw and error, this event fires a callback function with the following signature:

callback(event, toState, toParams, fromState, fromParams, error)

event: the event object

toState: the target state

toParams: the parameters passed to the target state

fromState: current state

fromParams: the parameters passed to the current state

error: the error object

---

$stateChangeStart - This event is broadcasted when a state transition started, this event fires a callback function with the following signature:

callback(event, toState, toParams, fromState, fromParams, options)

options: the state options object

$stateChangeSuccess - This event is broadcasted when a state transition completes, this event fires a callback function with the following signature:

callback(event, toState, toParams, fromState, fromParams, options)

---

$stateNotFound - This event is broadcasted when a state you requested to transition to was not found, this event fires a callback function with the following signature:

callback(event, unfoundState, fromParams, fromState)

unfoundState - an object representing the state that was not found

---

Example:

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
    $log.debug("$stateChangeSuccess: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, options: %o", event, toState, toParams, fromState, fromParams, options);
    // runs when the state has successfully changed
});

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
    $log.debug("$stateChangeStart: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, options: %o", event, toState, toParams, fromState, fromParams, options);
    // runs when the state has just started to transition
});

$rootScope.$on('$stateNotFound', function (event, unfoundState, fromParams, fromState) {
    $log.debug("$stateNotFound: event: %o unfoundState: %o, fromParams: %o, fromState: %o", event, unfoundState, fromParams, fromState);
    // runs when the state wsa not found
});

$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
    $log.debug("$stateChangeError: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, error: %o", event, toState, toParams, fromState, fromParams, error);
    // runs when there was an error while attempting to transition
});