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 object which maps resolve
keys to component bindings
.
A property of Ng2StateDeclaration or Ng2ViewDeclaration:
When using a component declaration (component: MyComponent
), each input binding for the component is supplied
data from a resolve of the same name, by default. You may supply data from a different resolve name by mapping it here.
Each key in this object is the name of one of the component's input bindings. Each value is the name of the resolve that should be provided to that binding.
Any component bindings that are omitted from this map get the default behavior of mapping to a resolve of the same name.
The Component
class to use for this view.
A property of Ng2StateDeclaration or Ng2ViewDeclaration:
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
.
A function which lazy loads the state definition (and child state definitions)
A state which has a lazyLoad
function is treated as a temporary
placeholder for a state definition that will be lazy loaded some time
in the future.
These temporary placeholder states are called "Future States".
lazyLoad
:A future state's lazyLoad
function should return a Promise to lazy load the
code for one or more lazy loaded StateDeclaration objects.
If the promise resolves to an object with a states: []
array,
the lazy loaded states will be registered with the StateRegistry.
Generally, of the lazy loaded states should have the same name as the future state;
then it will replace the future state placeholder in the registry.
In any case, when the promise successfully resolves, the placeholder Future State will be deregistered.
url
A future state's url
property acts as a wildcard.
UI-Router matches all paths that begin with the url
.
It effectively appends .*
to the internal regular expression.
name
A future state's name
property acts as a wildcard.
It matches any state name that starts with the name
.
UI-Router effectively matches the future state using a .**
Glob appended to the name
.
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.
An optional object used to define multiple named views.
Each key is the name of a view, and each value is a Ng2ViewDeclaration.
Unnamed views are internally renamed to $default
.
A view's name is used to match an active <ui-view>
directive in the DOM. When the state
is entered, the state's views are activated and then matched with active <ui-view>
directives:
The view's name is processed into a ui-view target:
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 StateRegistry.
import {FoldersComponent} from "./folders"; // StateDeclaration object var foldersState = { name: 'folders', url: '/folders', component: FoldersComponent, resolve: { allfolders: function(FolderService) { return FolderService.list(); } } }