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
s to component bindings
.
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
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 name of the component to use for this view.
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
The name of an angular 1.5+ .component()
(or directive with
bindToController and/or scope declaration) which will be used for this view.
Resolve data can be provided to the component via the component's bindings
object (for 1.3+ directives, the
bindToController
is used; for other directives, the scope
declaration is used). For each binding declared
on the component, any resolve with the same name is set on the component's controller instance. The binding
is provided to the component as a one-time-binding. In general, components should likewise declare their
input bindings as one-way ("<").
Note: inside a "views:" block, a bare string "foo"
is shorthand for { component: "foo" }
Note: Mapping from resolve names to component inputs may be specified using bindings.
The view's controller function or name
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
The controller function, or the name of a registered controller. The controller function will be used to control the contents of the [[ui-view]] directive.
If specified as a string, controllerAs can be declared here, i.e., "FooController as foo" instead of in a separate controllerAs property.
See: Ng1Controller for information about component-level router hooks.
A controller alias name.
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
If present, the controller will be published to scope under the controllerAs
name.
See: https://docs.angularjs.org/api/ng/directive/ngController
Dynamic controller provider function.
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
This is an injectable provider function which returns the actual controller function, or the name of a registered controller. The provider will invoked during a Transition in which the view's state is entered. The provider is called after the resolve data is fetched.
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.
Makes all search/query parameters dynamic
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.
The scope variable name to use for resolve data.
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
When a view is activated, the resolved data for the state which the view belongs to is put on the scope. This property sets the name of the scope variable to use for the resolved data.
Defaults to $resolve
.
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 HTML template for the view.
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
HTML template as a string, or a function which returns an html template as a string. This template will be used to render the corresponding [[ui-view]] directive.
This property takes precedence over templateUrl.
If template
is a function, it will be called with the Transition parameters as the first argument.
Injected function which returns the HTML template.
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
Injected function which returns the HTML template. The template will be used to render the corresponding [[ui-view]] directive.
The URL for the HTML template for the view.
A property of Ng1StateDeclaration or Ng1ViewDeclaration:
A path or a function that returns a path to an html template. The template will be fetched and used to render the corresponding [[ui-view]] directive.
If templateUrl
is a function, it will be called with the Transition parameters as the first argument.
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 which defines multiple named views.
Each key is the name of a view, and each value is a Ng1ViewDeclaration.
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 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.
// 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; } }
Since this interface extends Ng1ViewDeclaration, any view declaration properties can be set directly on the state declaration and they will be applied to the view with the name
$default
. For example:var state = { name: 'foo', url: '/foo', template: '<h1>foo</h1>', controller: 'FooController' }
is simply syntactic sugar for:
If a state definition contains a
views:
object, any view properties set directly on the state are ignored. Thus, this is an invalid state defintion: