Class StateService

The error handler is called when a Transition is rejected or when any error occurred during the Transition. This includes errors caused by resolves and transition hooks.

Note: This handler does not receive certain Transition rejections. Redirected and Ignored Transitions are not considered to be errors by StateService.transitionTo.

The built-in default error handler logs the error to the console.

You can provide your own custom handler.

Example:

stateService.defaultErrorHandler(function() {
  // Do not log transitionTo errors
});

Returns the state declaration object for any specific state, or for all registered states.

Convenience method for transitioning to a new state.

$state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the currently active ancestor states).

Example:

let app = angular.module('app', ['ui.router']);

app.controller('ctrl', function ($scope, $state) {
  $scope.changeState = function () {
    $state.go('contact.detail');
  };
});

Returns the url for the given state populated with the given params.

Example:

expect($state.href("about.person", { person: "bob" })).toEqual("/about/bob");

A method to determine if the current active state is equal to or is the child of the state stateName. If any params are passed then they will be tested for a match as well. Not all the parameters need to be passed, just the ones you'd like to test for equality.

Example when $state.$current.name === 'contacts.details.item'

// Using partial names
$state.includes("contacts"); // returns true
$state.includes("contacts.details"); // returns true
$state.includes("contacts.details.item"); // returns true
$state.includes("contacts.list"); // returns false
$state.includes("about"); // returns false

Glob Examples when * $state.$current.name === 'contacts.details.item.url':

$state.includes("*.details.*.*"); // returns true
$state.includes("*.details.**"); // returns true
$state.includes("**.item.**"); // returns true
$state.includes("*.details.item.url"); // returns true
$state.includes("*.details.*.url"); // returns true
$state.includes("*.details.*"); // returns false
$state.includes("item.**"); // returns false

Similar to includes but only checks for the full state name. If params is supplied then it will be tested for strict equality against the current active params object, so all params must match with none missing and no extras.

Example:

$state.$current.name = 'contacts.details.item';

// absolute name
$state.is('contact.details.item'); // returns true
$state.is(contactDetailItemStateObject); // returns true

// relative name (. and ^), typically from a template // E.g. from the 'contacts.details' template

<div ng-class="{highlighted: $state.is('.item')}">Item</div>

Explicitly runs a state's StateDeclaration.lazyLoad function.

Registers a OnInvalidCallback function to be invoked when StateService.transitionTo has been called with an invalid state reference parameter

Example:

stateService.onInvalid(function(to, from, injector) {
  if (to.name() === 'foo') {
    let lazyLoader = injector.get('LazyLoadService');
    return lazyLoader.load('foo')
        .then(() => stateService.target('foo'));
  }
});

A method that force reloads the current state, or a partial state hierarchy. All resolves are re-resolved, and components reinstantiated.

Example:

let app angular.module('app', ['ui.router']);

app.controller('ctrl', function ($scope, $state) {
  $scope.reload = function(){
    $state.reload();
  }
});

Note: reload() is just an alias for:

$state.transitionTo($state.current, $state.params, {
  reload: true, inherit: false
});

This is a factory method for creating a TargetState

This may be returned from a Transition Hook to redirect a transition, for example.

The go method (which uses transitionTo internally) is recommended in most situations.

Example:

let app = angular.module('app', ['ui.router']);

app.controller('ctrl', function ($scope, $state) {
  $scope.changeState = function () {
    $state.transitionTo('contact.detail');
  };
});