Package org.angular.ts.ng

Interface RouterModuleDeclaration

@JsType(isNative=true, name="ng.RouterModuleDeclaration", namespace="<global>") public interface RouterModuleDeclaration
Module-owned router state tree declaration. Use this with [[NgModule.router]] when a module owns a route subtree. Child state names are relative to their parent unless they contain a dot.

  • Nested Class Summary

    Nested Classes
    Modifier and Type
    Interface
    Description
    static interface 
    RouterModuleDeclaration.GetComponentUnionType
     
    static interface 
    RouterModuleDeclaration.GetParentUnionType
     

  • Method Summary

    Modifier and Type
    Method
    Description
    static RouterModuleDeclaration
    create()
     
    jsinterop.base.JsPropertyMap<String>
    getBindings()
    An object which maps `resolve`s to [[component]] `bindings`.
    elemental2.core.JsArray<RouterModuleDeclaration>
    getChildren()
    Child states owned by this module route tree.
    RouterModuleDeclaration.GetComponentUnionType
    getComponent()
    The name of the component to use for this view.
    Object
    getController()
    The view's controller function or name The controller function, or the name of a registered controller.
    Object
    getData()
    An inherited property to store state data This is a spot for you to store inherited state metadata.
    String
    getName()
    The state name (required) A unique state name, e.g.
    Object
    getOnEnter()
    A state hook invoked when a state is being entered.
    Object
    getOnExit()
    A state hook invoked when a state is being exited.
    Object
    getOnRetain()
    A state hook invoked when a state is being retained.
    jsinterop.base.JsPropertyMap<Object>
    getParams()
    Params configuration An object which optionally configures parameters declared in the url, or defines additional non-url parameters.
    RouterModuleDeclaration.GetParentUnionType
    getParent()
    The parent state Normally, a state's parent is implied from the state's [[name]], e.g., `"parentstate.childstate"`.
    StatePolicyDeclaration
    getPolicy()
    Declarative state policy metadata consumed by AngularTS framework services.
    Object
    getRedirectTo()
    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: - The function is called with the current [[Transition]] - The return value is processed using the previously mentioned rules. - If the return value is a promise, the promise is waited for, then the resolved async value is processed using the same rules.
    Object
    getResolve()
    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.
    Object
    getTemplate()
    The HTML template for the view.
    Object
    getTemplateUrl()
    The URL for the HTML template for the view.
    String
    getUrl()
    The url fragment for the state A URL fragment (with optional parameters) which is used to match the browser location with this state.
    jsinterop.base.JsPropertyMap<Object>
    getViews()
    Named view declarations for this state.
    boolean
    isAbstract()
    Abstract state indicator An abstract state can never be directly activated.
    boolean
    isDynamic()
    Marks all the state's parameters as `dynamic`.
    void
    setAbstract(boolean abstract_)
    Abstract state indicator An abstract state can never be directly activated.
    void
    setBindings(jsinterop.base.JsPropertyMap<String> bindings)
    An object which maps `resolve`s to [[component]] `bindings`.
    void
    setChildren(elemental2.core.JsArray<RouterModuleDeclaration> children)
    Child states owned by this module route tree.
    default void
    setComponent(String component)
     
    default void
    setComponent(Component<Object,Scope,elemental2.dom.HTMLElement> component)
     
    void
    setComponent(RouterModuleDeclaration.GetComponentUnionType component)
    The name of the component to use for this view.
    void
    setController(Object controller)
    The view's controller function or name The controller function, or the name of a registered controller.
    void
    setData(Object data)
    An inherited property to store state data This is a spot for you to store inherited state metadata.
    void
    setDynamic(boolean dynamic)
    Marks all the state's parameters as `dynamic`.
    void
    setName(String name)
    The state name (required) A unique state name, e.g.
    void
    setOnEnter(Object onEnter)
    A state hook invoked when a state is being entered.
    void
    setOnExit(Object onExit)
    A state hook invoked when a state is being exited.
    void
    setOnRetain(Object onRetain)
    A state hook invoked when a state is being retained.
    void
    setParams(jsinterop.base.JsPropertyMap<Object> params)
    Params configuration An object which optionally configures parameters declared in the url, or defines additional non-url parameters.
    default void
    setParent(String parent)
     
    void
    setParent(RouterModuleDeclaration.GetParentUnionType parent)
    The parent state Normally, a state's parent is implied from the state's [[name]], e.g., `"parentstate.childstate"`.
    default void
    setParent(StateDeclaration parent)
     
    void
    setPolicy(StatePolicyDeclaration policy)
    Declarative state policy metadata consumed by AngularTS framework services.
    void
    setRedirectTo(Object redirectTo)
    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: - The function is called with the current [[Transition]] - The return value is processed using the previously mentioned rules. - If the return value is a promise, the promise is waited for, then the resolved async value is processed using the same rules.
    void
    setResolve(Object resolve)
    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.
    void
    setTemplate(Object template)
    The HTML template for the view.
    void
    setTemplateUrl(Object templateUrl)
    The URL for the HTML template for the view.
    void
    setUrl(String url)
    The url fragment for the state A URL fragment (with optional parameters) which is used to match the browser location with this state.
    void
    setViews(jsinterop.base.JsPropertyMap<Object> views)
    Named view declarations for this state.

  • Method Details

    • create

      @JsOverlay static RouterModuleDeclaration create()

    • getBindings

      @JsProperty jsinterop.base.JsPropertyMap<String> getBindings()
      An object which maps `resolve`s to [[component]] `bindings`. 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. #### Example: ```js app.router('foo', { resolve: { foo: ['FooService', function(FooService) { return FooService.get(); }], bar: ['BarService', function(BarService) { return BarService.get(); }] }, component: 'Baz', // The component's `baz` binding gets data from the `bar` resolve // The component's `foo` binding gets data from the `foo` resolve (default behavior) bindings: { baz: 'bar' } }); app.component('Baz', { templateUrl: 'baz.html', controller: 'BazController', bindings: { foo: '<', // foo binding baz: '<' // baz binding } }); ```

    • getChildren

      @JsProperty elemental2.core.JsArray<RouterModuleDeclaration> getChildren()
      Child states owned by this module route tree. Each child is lowered to a normal [[StateDeclaration]] before registration.

    • getComponent

      @JsProperty RouterModuleDeclaration.GetComponentUnionType getComponent()
      The name of the component to use for this view. The name of an AngularTS `.component()` which will be used for this view. Resolve data can be provided to the component via the component's `bindings` object. For each binding declared on the component, any resolve with the same name is set on the component's controller instance. Note: Mapping from resolve names to component inputs may be specified using [[bindings]]. #### Example: ```js .state('profile', { // Use the <my-profile></my-profile> component for this state. component: 'MyProfile', } ``` Note: When using `component` to define a view, you may _not_ use any of: `template`, `templateUrl`, `controller`.

    • getController

      @JsProperty Object getController()
      The view's controller function or name The controller function, or the name of a registered controller. The controller function will be used to control the contents of the [[directives.ngVIew]] directive. See: [[Ng1Controller]] for information about component-level router hooks.

    • getData

      @JsProperty Object getData()
      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. Use this for application metadata. Use `policy.navigation` for framework navigation decisions such as authentication, permissions, or redirects. 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`.

    • getName

      @JsProperty String getName()
      The state name (required) 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: [State] objects require unique names. The name is used like an id.

    • getOnEnter

      @JsProperty Object getOnEnter()
      A state hook invoked when a state is being entered. The hook can inject global services. It can also inject `$transition$` or `$state$` (from the current transition). ### Example: ```js app.router({ name: 'mystate', onEnter: (MyService, $transition$, $state$) => { return MyService.doSomething($state$.name, $transition$.params()); } }); ``` #### Example:` ```js app.router({ name: 'mystate', onEnter: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) { return MyService.doSomething($state$.name, $transition$.params()); } ] }); ```

    • getOnExit

      @JsProperty Object getOnExit()
      A state hook invoked when a state is being exited. The hook can inject global services. It can also inject `$transition$` or `$state$` (from the current transition). ### Example: ```js app.router({ name: 'mystate', onExit: (MyService, $transition$, $state$) => { return MyService.doSomething($state$.name, $transition$.params()); } }); ``` #### Example:` ```js app.router({ name: 'mystate', onExit: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) { return MyService.doSomething($state$.name, $transition$.params()); } ] }); ```

    • getOnRetain

      @JsProperty Object getOnRetain()
      A state hook invoked when a state is being retained. The hook can inject global services. It can also inject `$transition$` or `$state$` (from the current transition). #### Example: ```js app.router({ name: 'mystate', onRetain: (MyService, $transition$, $state$) => { return MyService.doSomething($state$.name, $transition$.params()); } }); ``` #### Example:` ```js app.router({ name: 'mystate', onRetain: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) { return MyService.doSomething($state$.name, $transition$.params()); } ] }); ```

    • getParams

      @JsProperty jsinterop.base.JsPropertyMap<Object> getParams()
      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. #### Example: ```js params: { param1: { type: "int", array: true, value: [] }, param2: { value: "index" } } ```

    • getParent

      @JsProperty RouterModuleDeclaration.GetParentUnionType getParent()
      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 ng-state="'childstate'">Child</a>` instead of `<a ng-state="'parentstate.childstate'">Child</a> When using this property, the state's name should not have any dots in it. #### Example: ```js var parentstate = { name: 'parentstate' } var childstate = { name: 'childstate', parent: 'parentstate' // or use a JS var which is the parent StateDeclaration, i.e.: // parent: parentstate } ```

    • getPolicy

      @JsProperty StatePolicyDeclaration getPolicy()
      Declarative state policy metadata consumed by AngularTS framework services. `policy.navigation` is inherited through the state tree and evaluated by the router's security navigation hook before resolves, controllers, or views run. `policy.transition.canExit` is evaluated before exiting states are torn down. `policy.retention` declares keep-alive route subtree behavior and can override router-wide retention defaults.

    • getRedirectTo

      @JsProperty Object getRedirectTo()
      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: - The function is called with the current [[Transition]] - The return value is processed using the previously mentioned rules. - If the return value is a promise, the promise is waited for, then the resolved async value is processed using the same rules. Note: `redirectTo` is processed as an `onStart` hook, before non-eager resolves. If your redirect function relies on resolve data, get the [[Transition.injector]] and request the resolve data with `getAsync()`. #### Example: ```js // a string .state('A', { redirectTo: 'A.B' }) // a {state, params} object .state('C', { redirectTo: { state: 'C.D', params: { foo: 'index' } } }) // a fn .state('E', { redirectTo: () => "A" }) // a fn conditionally returning a {state, params} .state('F', { redirectTo: (trans) => { if (trans.params().foo < 10) return { state: 'F', params: { foo: 10 } }; } }) // a fn returning a promise for a redirect .state('G', { redirectTo: (trans) => { let svc = trans.injector().get('SomeAsyncService') let promise = svc.getAsyncRedirectTo(trans.params.foo); return promise; } }) // a fn that fetches resolve data .state('G', { redirectTo: (trans) => { // getAsync tells the resolve to load let resolvePromise = trans.injector().getAsync('SomeResolve') return resolvePromise.then(resolveData => resolveData === 'login' ? 'login' : null); } }) ```

    • getResolve

      @JsProperty Object getResolve()
      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 may be used in views, transition hooks or other resolves that belong to this state. The data may also be used in any views or resolves that belong to nested states. ### As an array Each array element should be a [[ResolvableLiteral]] object. #### Example: The `user` resolve injects the current `Transition` and the `UserService` (using its token, which is a string). The [[ResolvableLiteral.eager]] flag controls whether the resolve starts at transition start instead of when the owning state is entered. The `user` data, fetched asynchronously, can then be used in a view. ```js var state = { name: 'user', url: '/user/:userId resolve: [ { token: 'user', eager: true, deps: ['UserService', Transition], resolveFn: (userSvc, trans) => userSvc.fetchUser(trans.params().userId) }, } ] } ``` ### As an object The `resolve` property may be an object where: - Each key (string) is the name of the dependency. - Each value (function) is an injectable function which returns the dependency, or a promise for the dependency. This style is based on AngularTS injectable functions. Dependency-bearing functions must use array annotation or a static `$inject` property. #### AngularTS Example: ```js resolve: { // If you inject `myStateDependency` into a controller, you'll get "abc" myStateDependency: function() { return "abc"; }, // Dependencies are annotated in "Inline Array Annotation" myAsyncData: ['$http', '$transition$' function($http, $transition$) { // Return a promise (async) for the data return $http.get("/foos/" + $transition$.params().foo); }] } ``` Note: You cannot mark individual entries as eager, nor can you use non-string tokens when using the object style `resolve:` block. ### 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* during the `Transition` have their resolves fetched. States that are "retained" do not have their resolves re-fetched. If you are currently in a parent state `parent` and are transitioning to a child state `parent.child`, the previously resolved data for state `parent` can be injected into `parent.child` without delay. Any resolved data for `parent.child` is retained until `parent.child` is exited, e.g., by transitioning back to the `parent` state. Because of this scoping and lifecycle, 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: - Views (the components which fill a `ng-view` tag) - Transition Hooks - Other resolves (a resolve may depend on asynchronous data from a different resolve) ### Injecting other things into resolves Resolve functions usually have dependencies on some other API(s). The dependencies are usually declared and injected into the resolve function. A common pattern is to inject a custom service such as `UserService`. The resolve then delegates to a service method, such as `UserService.list()`; #### Special injectable tokens - `Transition`: The current [[Transition]] object; information and API about the current transition, such as "to" and "from" State Parameters and transition options. - `'$transition$'`: A string alias for the `Transition` injectable - `'$state$'`: For `onEnter`/`onExit`/`onRetain`, the state being entered/exited/retained. - Other resolve tokens: A resolve can depend on another resolve, either from the same state, or from any parent state. #### Example: ```js // Injecting a resolve into another resolve resolve: [ // Define a resolve 'allusers' which delegates to the UserService.list() // which returns a promise (async) for all the users { token: 'allusers', resolveFn: (UserService) => UserService.list(), deps: [UserService] }, // Define a resolve 'user' which depends on the allusers resolve. // This resolve function is not called until 'allusers' is ready. { token: 'user', resolveFn: (allusers, trans) => _.find(allusers, trans.params().userId), deps: ['allusers', Transition] } } ```

    • getTemplate

      @JsProperty Object getTemplate()
      The HTML template for the view. 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 [[directives.ngVIew]] directive. This property takes precedence over templateUrl. If `template` is a function, it will be called with the Transition parameters as the first argument. #### Example: ```js template: "<h1>inline template definition</h1><div ng-view></div>" ``` #### Example: ```js template: function(params) { return "<h1>generated template</h1>"; } ```

    • getTemplateUrl

      @JsProperty Object getTemplateUrl()
      The URL for the HTML template for the view. A path or a function that returns a path to an html template. The template will be fetched and used to render the corresponding [[directives.ngVIew]] directive. If `templateUrl` is a function, it will be called with the Transition parameters as the first argument. #### Example: ```js templateUrl: "/templates/home.html" ``` #### Example: ```js templateUrl: function(params) { return myTemplates[params.pageId]; } ```

    • getUrl

      @JsProperty String getUrl()
      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. It may include path parameters, typed parameters, and query parameters.

    • getViews

      @JsProperty jsinterop.base.JsPropertyMap<Object> getViews()
      Named view declarations for this state. Each key targets an `ng-view`; each value is either a full view declaration or a string shorthand for `{ component: "componentName" }`. Examples: ```js views: { mymessages: "mymessages", messagelist: { component: "messageList" }, "^.^.messagecontent": "message" } ```

    • isAbstract

      @JsProperty boolean isAbstract()
      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.

    • isDynamic

      @JsProperty boolean isDynamic()
      Marks all the state's parameters as `dynamic`. All parameters on the state will use this value for `dynamic` as a default. Individual parameters may override this default using [[ParamDeclaration.dynamic]] in the [[params]] block. This default applies to all parameters declared on this state.

    • setAbstract

      @JsProperty void setAbstract(boolean abstract_)
      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.

    • setBindings

      @JsProperty void setBindings(jsinterop.base.JsPropertyMap<String> bindings)
      An object which maps `resolve`s to [[component]] `bindings`. 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. #### Example: ```js app.router('foo', { resolve: { foo: ['FooService', function(FooService) { return FooService.get(); }], bar: ['BarService', function(BarService) { return BarService.get(); }] }, component: 'Baz', // The component's `baz` binding gets data from the `bar` resolve // The component's `foo` binding gets data from the `foo` resolve (default behavior) bindings: { baz: 'bar' } }); app.component('Baz', { templateUrl: 'baz.html', controller: 'BazController', bindings: { foo: '<', // foo binding baz: '<' // baz binding } }); ```

    • setChildren

      @JsProperty void setChildren(elemental2.core.JsArray<RouterModuleDeclaration> children)
      Child states owned by this module route tree. Each child is lowered to a normal [[StateDeclaration]] before registration.

    • setComponent

      @JsOverlay default void setComponent(Component<Object,Scope,elemental2.dom.HTMLElement> component)

    • setComponent

      @JsProperty void setComponent(RouterModuleDeclaration.GetComponentUnionType component)
      The name of the component to use for this view. The name of an AngularTS `.component()` which will be used for this view. Resolve data can be provided to the component via the component's `bindings` object. For each binding declared on the component, any resolve with the same name is set on the component's controller instance. Note: Mapping from resolve names to component inputs may be specified using [[bindings]]. #### Example: ```js .state('profile', { // Use the <my-profile></my-profile> component for this state. component: 'MyProfile', } ``` Note: When using `component` to define a view, you may _not_ use any of: `template`, `templateUrl`, `controller`.

    • setComponent

      @JsOverlay default void setComponent(String component)

    • setController

      @JsProperty void setController(Object controller)
      The view's controller function or name The controller function, or the name of a registered controller. The controller function will be used to control the contents of the [[directives.ngVIew]] directive. See: [[Ng1Controller]] for information about component-level router hooks.

    • setData

      @JsProperty void setData(Object data)
      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. Use this for application metadata. Use `policy.navigation` for framework navigation decisions such as authentication, permissions, or redirects. 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`.

    • setDynamic

      @JsProperty void setDynamic(boolean dynamic)
      Marks all the state's parameters as `dynamic`. All parameters on the state will use this value for `dynamic` as a default. Individual parameters may override this default using [[ParamDeclaration.dynamic]] in the [[params]] block. This default applies to all parameters declared on this state.

    • setName

      @JsProperty void setName(String name)
      The state name (required) 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: [State] objects require unique names. The name is used like an id.

    • setOnEnter

      @JsProperty void setOnEnter(Object onEnter)
      A state hook invoked when a state is being entered. The hook can inject global services. It can also inject `$transition$` or `$state$` (from the current transition). ### Example: ```js app.router({ name: 'mystate', onEnter: (MyService, $transition$, $state$) => { return MyService.doSomething($state$.name, $transition$.params()); } }); ``` #### Example:` ```js app.router({ name: 'mystate', onEnter: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) { return MyService.doSomething($state$.name, $transition$.params()); } ] }); ```

    • setOnExit

      @JsProperty void setOnExit(Object onExit)
      A state hook invoked when a state is being exited. The hook can inject global services. It can also inject `$transition$` or `$state$` (from the current transition). ### Example: ```js app.router({ name: 'mystate', onExit: (MyService, $transition$, $state$) => { return MyService.doSomething($state$.name, $transition$.params()); } }); ``` #### Example:` ```js app.router({ name: 'mystate', onExit: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) { return MyService.doSomething($state$.name, $transition$.params()); } ] }); ```

    • setOnRetain

      @JsProperty void setOnRetain(Object onRetain)
      A state hook invoked when a state is being retained. The hook can inject global services. It can also inject `$transition$` or `$state$` (from the current transition). #### Example: ```js app.router({ name: 'mystate', onRetain: (MyService, $transition$, $state$) => { return MyService.doSomething($state$.name, $transition$.params()); } }); ``` #### Example:` ```js app.router({ name: 'mystate', onRetain: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) { return MyService.doSomething($state$.name, $transition$.params()); } ] }); ```

    • setParams

      @JsProperty void setParams(jsinterop.base.JsPropertyMap<Object> params)
      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. #### Example: ```js params: { param1: { type: "int", array: true, value: [] }, param2: { value: "index" } } ```

    • setParent

      @JsProperty void setParent(RouterModuleDeclaration.GetParentUnionType parent)
      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 ng-state="'childstate'">Child</a>` instead of `<a ng-state="'parentstate.childstate'">Child</a> When using this property, the state's name should not have any dots in it. #### Example: ```js var parentstate = { name: 'parentstate' } var childstate = { name: 'childstate', parent: 'parentstate' // or use a JS var which is the parent StateDeclaration, i.e.: // parent: parentstate } ```

    • setParent

      @JsOverlay default void setParent(StateDeclaration parent)

    • setParent

      @JsOverlay default void setParent(String parent)

    • setPolicy

      @JsProperty void setPolicy(StatePolicyDeclaration policy)
      Declarative state policy metadata consumed by AngularTS framework services. `policy.navigation` is inherited through the state tree and evaluated by the router's security navigation hook before resolves, controllers, or views run. `policy.transition.canExit` is evaluated before exiting states are torn down. `policy.retention` declares keep-alive route subtree behavior and can override router-wide retention defaults.

    • setRedirectTo

      @JsProperty void setRedirectTo(Object redirectTo)
      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: - The function is called with the current [[Transition]] - The return value is processed using the previously mentioned rules. - If the return value is a promise, the promise is waited for, then the resolved async value is processed using the same rules. Note: `redirectTo` is processed as an `onStart` hook, before non-eager resolves. If your redirect function relies on resolve data, get the [[Transition.injector]] and request the resolve data with `getAsync()`. #### Example: ```js // a string .state('A', { redirectTo: 'A.B' }) // a {state, params} object .state('C', { redirectTo: { state: 'C.D', params: { foo: 'index' } } }) // a fn .state('E', { redirectTo: () => "A" }) // a fn conditionally returning a {state, params} .state('F', { redirectTo: (trans) => { if (trans.params().foo < 10) return { state: 'F', params: { foo: 10 } }; } }) // a fn returning a promise for a redirect .state('G', { redirectTo: (trans) => { let svc = trans.injector().get('SomeAsyncService') let promise = svc.getAsyncRedirectTo(trans.params.foo); return promise; } }) // a fn that fetches resolve data .state('G', { redirectTo: (trans) => { // getAsync tells the resolve to load let resolvePromise = trans.injector().getAsync('SomeResolve') return resolvePromise.then(resolveData => resolveData === 'login' ? 'login' : null); } }) ```

    • setResolve

      @JsProperty void setResolve(Object resolve)
      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 may be used in views, transition hooks or other resolves that belong to this state. The data may also be used in any views or resolves that belong to nested states. ### As an array Each array element should be a [[ResolvableLiteral]] object. #### Example: The `user` resolve injects the current `Transition` and the `UserService` (using its token, which is a string). The [[ResolvableLiteral.eager]] flag controls whether the resolve starts at transition start instead of when the owning state is entered. The `user` data, fetched asynchronously, can then be used in a view. ```js var state = { name: 'user', url: '/user/:userId resolve: [ { token: 'user', eager: true, deps: ['UserService', Transition], resolveFn: (userSvc, trans) => userSvc.fetchUser(trans.params().userId) }, } ] } ``` ### As an object The `resolve` property may be an object where: - Each key (string) is the name of the dependency. - Each value (function) is an injectable function which returns the dependency, or a promise for the dependency. This style is based on AngularTS injectable functions. Dependency-bearing functions must use array annotation or a static `$inject` property. #### AngularTS Example: ```js resolve: { // If you inject `myStateDependency` into a controller, you'll get "abc" myStateDependency: function() { return "abc"; }, // Dependencies are annotated in "Inline Array Annotation" myAsyncData: ['$http', '$transition$' function($http, $transition$) { // Return a promise (async) for the data return $http.get("/foos/" + $transition$.params().foo); }] } ``` Note: You cannot mark individual entries as eager, nor can you use non-string tokens when using the object style `resolve:` block. ### 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* during the `Transition` have their resolves fetched. States that are "retained" do not have their resolves re-fetched. If you are currently in a parent state `parent` and are transitioning to a child state `parent.child`, the previously resolved data for state `parent` can be injected into `parent.child` without delay. Any resolved data for `parent.child` is retained until `parent.child` is exited, e.g., by transitioning back to the `parent` state. Because of this scoping and lifecycle, 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: - Views (the components which fill a `ng-view` tag) - Transition Hooks - Other resolves (a resolve may depend on asynchronous data from a different resolve) ### Injecting other things into resolves Resolve functions usually have dependencies on some other API(s). The dependencies are usually declared and injected into the resolve function. A common pattern is to inject a custom service such as `UserService`. The resolve then delegates to a service method, such as `UserService.list()`; #### Special injectable tokens - `Transition`: The current [[Transition]] object; information and API about the current transition, such as "to" and "from" State Parameters and transition options. - `'$transition$'`: A string alias for the `Transition` injectable - `'$state$'`: For `onEnter`/`onExit`/`onRetain`, the state being entered/exited/retained. - Other resolve tokens: A resolve can depend on another resolve, either from the same state, or from any parent state. #### Example: ```js // Injecting a resolve into another resolve resolve: [ // Define a resolve 'allusers' which delegates to the UserService.list() // which returns a promise (async) for all the users { token: 'allusers', resolveFn: (UserService) => UserService.list(), deps: [UserService] }, // Define a resolve 'user' which depends on the allusers resolve. // This resolve function is not called until 'allusers' is ready. { token: 'user', resolveFn: (allusers, trans) => _.find(allusers, trans.params().userId), deps: ['allusers', Transition] } } ```

    • setTemplate

      @JsProperty void setTemplate(Object template)
      The HTML template for the view. 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 [[directives.ngVIew]] directive. This property takes precedence over templateUrl. If `template` is a function, it will be called with the Transition parameters as the first argument. #### Example: ```js template: "<h1>inline template definition</h1><div ng-view></div>" ``` #### Example: ```js template: function(params) { return "<h1>generated template</h1>"; } ```

    • setTemplateUrl

      @JsProperty void setTemplateUrl(Object templateUrl)
      The URL for the HTML template for the view. A path or a function that returns a path to an html template. The template will be fetched and used to render the corresponding [[directives.ngVIew]] directive. If `templateUrl` is a function, it will be called with the Transition parameters as the first argument. #### Example: ```js templateUrl: "/templates/home.html" ``` #### Example: ```js templateUrl: function(params) { return myTemplates[params.pageId]; } ```

    • setUrl

      @JsProperty void setUrl(String url)
      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. It may include path parameters, typed parameters, and query parameters.

    • setViews

      @JsProperty void setViews(jsinterop.base.JsPropertyMap<Object> views)
      Named view declarations for this state. Each key targets an `ng-view`; each value is either a full view declaration or a string shorthand for `{ component: "componentName" }`. Examples: ```js views: { mymessages: "mymessages", messagelist: { component: "messageList" }, "^.^.messagecontent": "message" } ```