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.
The class of the Component
to use for this view.
A property of Ng2StateDeclaration or Ng2ViewDeclaration:
The component class which will be used for this view.
Resolve data can be provided to the component using Dependency Injection. Currently, resolves must be injected
into the component using @Inject('key')
, where key
is the name of the resolve.
TODO: document ng2 shorthand, like ng1's shorthand: inside a "views:" block, a bare string "foo"
is shorthand for { component: "foo" }
An inherited property to store state data
This is a spot for you to store inherited state metadata. Child states' data
object will
prototypically inherit from the parent state .
This is a good spot to put metadata such as requiresAuth
.
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 Transition Hook called with the state is being retained. 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.
Resolve - a mechanism to fetch data, which participates in the transition lifecycle
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.
Sets the resolve policy for the state
This can be either "EAGER" or "LAZY". When "EAGER", the state's resolves are fetched before any states are entered. When "LAZY", the resolves are fetched when the state is being entered.
The default is "LAZY".
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(); } } }