abstract state indicator
An abstract state can never be directly activated. Use an abstract state to provide inherited properties (url, resolve, data, etc) to children states.
An inherited property to store state data
This is a spot for you to store inherited state metadata.
Child states' data
object will prototypally inherit from their parent state.
This is a good spot to put metadata such as requiresAuth
.
Note: because prototypal inheritance is used, changes to parent data
objects reflect in the child data
objects.
Care should be taken if you are using hasOwnProperty
on the data
object.
Properties from parent objects will return false for hasOwnProperty
.
The state name
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.
A Transition Hook called with the state is being entered. See: IHookRegistry.onEnter
A Transition Hook called with the state is being exited. See: IHookRegistry.onExit
A TransitionStateHookFn called with the state is being retained/kept. See: IHookRegistry.onRetain
Params configuration
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.
The parent state
Normally, a state's parent is implied from the state's name, 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
When using this property, the state's name should not have any dots in it.
Synchronously or asynchronously redirects Transitions to a different state/params
If this property is defined, a Transition directly to this state will be redirected based on the property's value.
If the value is a string
, the Transition is redirected to the state named by the string.
If the property is an object with a state
and/or params
property,
the Transition is redirected to the named state
and/or params
.
If the value is a TargetState the Transition is redirected to the TargetState
If the property is a function:
Resolve - a mechanism to asynchronously fetch data, participating in the Transition lifecycle
The resolve:
property defines data (or other dependencies) to be fetched asynchronously when the state
is being entered. After the data is fetched, it can be used in views, transition hooks or other resolves
that belong to this state, or to any views or resolves that belong to nested states.
Each array element should either be:
{ token: 'token', resolveFn: (http) => http.get('/'), deps: [ Http ] }
new Resolvable('token', (http) => http.get('/'), [ Http ])
{ provide: 'token', useFactory: (http) => http.get('/'), deps: [ Http ] }
Sets the resolve policy defaults for all resolves on this state
This should be an ResolvePolicy object.
It can contain the following optional keys/values:
when
: (optional) defines when the resolve is fetched. Accepted values: "LAZY" or "EAGER"async
: (optional) if the transition waits for the resolve. Accepted values: "WAIT", "NOWAIT", "RXWAIT"See ResolvePolicy for more details.
The url fragment for the state
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.
Named views
An optional object which defines multiple views, or explicitly targets specific named ui-views.
Incompatible with ^
Examples:
Targets three named ui-views in the parent state's template
Generated using TypeDoc
The StateDeclaration object is used to define a state or nested state. It should be registered with the $stateProvider.
// 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; } }