StateDeclaration | UI-Router
Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface StateDeclaration

The StateDeclaration object is used to define a state or nested state. It should be registered with the [[$stateProvider]].

example

// StateDeclaration object
var foldersState = {
  name: 'folders',
  url: '/folders',
  resolve: {
    allfolders: function(FolderService) {
      return FolderService.list();
    }
  },
  template: "<ul><li ng-repeat='folder in allfolders'></li></ul>",
  controller: function(allfolders, $scope) {
    $scope.allfolders = allfolders;
  }
}

Hierarchy

Index

Properties

abstract: boolean

An abstract state can never be directly activated. Use an abstract state to provide inherited properties (url, resolve, data, etc) to children states.

An abstract state can never be directly activated. Use an abstract state to provide inherited properties (url, resolve, data, etc) to children states.

data: any
name: string

A unique state name, e.g. "home", "about", "contacts". To create a parent/child state use a dot, e.g. "about.sales", "home.newest".

A unique state name, e.g. "home", "about", "contacts". To create a parent/child state use a dot, e.g. "about.sales", "home.newest".

Note: States require unique names. If you omit this property, you must provide the state name when you register it with the [[$stateProvider]].

onEnter: Function
onExit: Function
onRetain: Function
params: object

A property of StateDeclaration:

A property of StateDeclaration:

An object which optionally configures parameters declared in the url, or defines additional non-url parameters. For each parameter being configured, add a ParamDeclaration keyed to the name of the parameter.

example

params: {
  param1: {
   type: "int",
   array: true,
   value: []
  },
  param2: {
    value: "index"
  }
}

Type declaration

  • [key: string]: any
parent: string | StateDeclaration

The parent state of this state can be specified using the name of the state, e.g., "parentstate.childstate". Alternatively, you can explicitly set the parent state using this property. This allows shorter state names, e.g., <a ui-sref="childstate">Child</a> instead of `Child

The parent state of this state can be specified using the name of the state, e.g., "parentstate.childstate". Alternatively, you can explicitly set the parent state using this property. This allows shorter state names, e.g., <a ui-sref="childstate">Child</a> instead of `Child

example

var parentstate = {
  name: 'parentstate'
}
var childstate = {
  name: 'childstate',
  parent: 'parentstate'
  // or use a JS var which is the parent StateDeclaration, i.e.:
  // parent: parentstate
}
reloadOnSearch: boolean
deprecated

define individual parameters as ParamDeclaration.dynamic

resolve: object

A property of StateDeclaration:

A property of StateDeclaration:

An object which defines dynamic dependencies/data that can then be injected into this state (or its children) during a Transition.

Define a new dependency by adding a key/value to the resolve property of the StateDeclaration.

  • The key (string) is the name of the dependency.
  • The value (function) is an injectable function which returns the dependency, or a promise for the dependency.
example

resolve: {
  // If you inject `myStateDependency` into a controller, you'll get "abc"
  myStateDependency: function() {
    return "abc";
  },
  myAsyncData: function($http) {
    // Return a promise (async) for the data
    return $http.get("/api/v1/data");
  }
}

Lifecycle

Since a resolve function can return a promise, the router will delay entering the state until the promises are ready. If any of the promises are rejected, the Transition is aborted with an Error.

By default, resolves for a state are fetched just before that state is entered. Note that only states which are being entered have their resolves fetched. States that are "retained" do not have their resolves re-fetched. If you are currently in a parent state A and are transitioning to a child state A.B, the previously resolved data for state A can be injected into A.B without delay.

Any resolved data for A.B is retained until A.B is exited, e.g., by transitioning back to the parent state A.

Because of this, resolves are a great place to fetch your application's primary data.

Injecting resolves into other things

During a transition, Resolve data can be injected into:

  • Transition Hooks, e.g., $transitions.onStart/onEnter
  • ui-view Controllers
  • TemplateProviders and ControllerProviders
  • Other resolves

Injecting other things into resolves

Since resolve functions are injected, a common pattern is to inject a custom service such as UserService and delegate to a custom service method, such as UserService.list();

A resolve function can inject some special values:

  • $transition$: The current Transition object; information and API about the current transition, such as "to" and "from" State Parameters and transition options.
  • Other resolves: This resolve can depend on another resolve, either from the same state, or from any parent state.
  • $stateParams: (deprecated) The parameters for the current state (Note: these parameter values are
example

resolve: {
  // Define a resolve 'allusers' which delegates to the UserService
  allusers: function(UserService) {
    return UserService.list(); // list() returns a promise (async) for all the users
  },
  // Define a resolve 'user' which depends on the allusers resolve.
  // This resolve function is not called until 'allusers' is ready.
  user: function(allusers, $transition$) {
    return _.find(allusers, $transition$.params().userId);
  }
}

Type declaration

  • [key: string]: Function
resolvePolicy: string | Object
todo

document this ;)

url: string

A property of StateDeclaration:

A property of StateDeclaration:

A URL fragment (with optional parameters) which is used to match the browser location with this state.

This fragment will be appended to the parent state's URL in order to build up the overall URL for this state. See UrlMatcher for details on acceptable patterns.

examples

url: "/home"
// Define a parameter named 'userid'
url: "/users/:userid"
// param 'bookid' has a custom regexp
url: "/books/{bookid:[a-zA-Z_-]}"
// param 'categoryid' is of type 'int'
url: "/books/{categoryid:int}"
// two parameters for this state
url: "/books/{publishername:string}/{categoryid:int}"
// Query parameters
url: "/messages?before&after"
// Query parameters of type 'date'
url: "/messages?{before:date}&{after:date}"
// Path and query parameters
url: "/messages/:mailboxid?{before:date}&{after:date}"
views: object

A property of StateDeclaration:

A property of StateDeclaration:

An optional object which defines multiple views, or explicitly targets specific ui-views.

  • What is a view config
  • What is a ui-view
  • Shorthand controller/template
  • Incompatible with ^

    Examples:

    Targets three named ui-views in the parent state's template

example

views: {
  header: {
    controller: "headerCtrl",
    templateUrl: "header.html"
  }, body: {
    controller: "bodyCtrl",
    templateUrl: "body.html"
  }, footer: {
    controller: "footCtrl",
    templateUrl: "footer.html"
  }
}
example
// Targets named ui-view="header" from ancestor state 'top''s template, and
// named `ui-view="body" from parent state's template.
views: {
  'header@top': {
    controller: "msgHeaderCtrl",
    templateUrl: "msgHeader.html"
  }, 'body': {
    controller: "messagesCtrl",
    templateUrl: "messages.html"
  }
}

Type declaration

  • [key: string]: _ViewDeclaration

Generated using TypeDoc