StateService | @uirouter/react
Options
All
  • Public
  • Public/Protected
  • All
Menu

Provides services related to ui-router states.

This API is located at router.stateService (UIRouter.stateService)

Hierarchy

  • StateService

Index

Accessors

$current

current

params

transition

Methods

defaultErrorHandler

  • defaultErrorHandler(handler?: (error: any) => void): (error: any) => void
  • Sets or gets the default transitionTo error handler.

    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
    });

    Parameters

    • Optional handler: (error: any) => void

      a global error handler function

        • (error: any): void
        • Parameters

          • error: any

          Returns void

    Returns (error: any) => void

    the current global error handler

      • (error: any): void
      • Parameters

        • error: any

        Returns void

get

go

  • Transition to a different state and/or parameters

    Convenience method for transitioning to a new state.

    $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: router.globals.$current, notify: true }. This allows you to use either an absolute or relative to argument (because of relative: router.globals.$current). It also allows you to specify * only the parameters you'd like to update, while letting unspecified parameters inherit from the current parameter values (because of inherit: true).

    Example:

    let app = angular.module('app', ['ui.router']);
    
    app.controller('ctrl', function ($scope, $state) {
      $scope.changeState = function () {
        $state.go('contact.detail');
      };
    });

    Parameters

    • to: StateOrName

      Absolute state name, state object, or relative state path (relative to current state).

      Some examples:

      • $state.go('contact.detail') - will go to the contact.detail state
      • $state.go('^') - will go to the parent state
      • $state.go('^.sibling') - if current state is home.child, will go to the home.sibling state
      • $state.go('.child.grandchild') - if current state is home, will go to the home.child.grandchild state
    • Optional params: RawParams

      A map of the parameters that will be sent to the state, will populate $stateParams.

      Any parameters that are not specified will be inherited from current parameter values (because of inherit: true). This allows, for example, going to a sibling state that shares parameters defined by a parent state.

    • Optional options: TransitionOptions

      Transition options

    Returns TransitionPromise

    A promise representing the state of the new transition.

href

  • Generates a URL for a state and parameters

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

    Example:

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

    Parameters

    • stateOrName: StateOrName

      The state name or state object you'd like to generate a url from.

    • Optional params: RawParams

      An object of parameter values to fill the state's required parameters.

    • Optional options: HrefOptions

      Options object. The options are:

    Returns string

    compiled state url

includes

  • Checks if the current state includes the provided state

    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

    Parameters

    • stateOrName: StateOrName

      A partial name, relative name, glob pattern, or state object to be searched for within the current state name.

    • Optional params: RawParams

      A param object, e.g. {sectionId: section.id}, that you'd like to test against the current active state.

    • Optional options: TransitionOptions

      An options object. The options are:

      • relative: If stateOrName is a relative state name and options.relative is set, .is will test relative to options.relative state (or name).

    Returns boolean

    Returns true if it does include the state

is

  • Checks if the current state is the provided state

    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>

    Parameters

    • stateOrName: StateOrName

      The state name (absolute or relative) or state object you'd like to check.

    • Optional params: RawParams

      A param object, e.g. {sectionId: section.id}, that you'd like to test against the current active state.

    • Optional options: { relative?: StateOrName }

      An options object. The options are:

      • relative: If stateOrName is a relative state name and options.relative is set, .is will test relative to options.relative state (or name).

    Returns boolean

    Returns true if it is the state.

lazyLoad

onInvalid

  • Registers an Invalid State handler

    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'));
      }
    });

    Parameters

    • callback: OnInvalidCallback

      invoked when the toState is invalid This function receives the (invalid) toState, the fromState, and an injector. The function may optionally return a TargetState or a Promise for a TargetState. If one is returned, it is treated as a redirect.

    Returns Function

    a function which deregisters the callback

reload

  • Reloads the current state

    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
    });

    Parameters

    • Optional reloadState: StateOrName

      A state name or a state object. If present, this state and all its children will be reloaded, but ancestors will not reload.

      Example:

      //assuming app application consists of 3 states: 'contacts', 'contacts.detail', 'contacts.detail.item'
      //and current state is 'contacts.detail.item'
      let app angular.module('app', ['ui.router']);
      
      app.controller('ctrl', function ($scope, $state) {
        $scope.reload = function(){
          //will reload 'contact.detail' and nested 'contact.detail.item' states
          $state.reload('contact.detail');
        }
      });

    Returns Promise<StateObject>

    A promise representing the state of the new transition. See StateService.go

target

transitionTo

  • Low-level method for transitioning to a new state.

    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');
      };
    });

    Parameters

    • to: StateOrName

      State name or state object.

    • Default value toParams: RawParams = {}

      A map of the parameters that will be sent to the state, will populate $stateParams.

    • Default value options: TransitionOptions = {}

      Transition options

    Returns TransitionPromise

    A promise representing the state of the new transition. See go

Generated using TypeDoc