angular-ui-router

  • Version 1.0.30
  • Published
  • 3.43 MB
  • 1 dependency
  • MIT license

Install

npm i angular-ui-router
yarn add angular-ui-router
pnpm add angular-ui-router

Overview

State-based routing for AngularJS 1.x

Index

Variables

variable _default

const _default: string;

    Functions

    function getLocals

    getLocals: (ctx: ResolveContext) => TypedMap<any>;
    • TODO: find a place to move this

    function getNg1ViewConfigFactory

    getNg1ViewConfigFactory: () => ViewConfigFactory;

    function ng1ViewsBuilder

    ng1ViewsBuilder: (state: StateObject) => { [key: string]: Ng1ViewDeclaration };
    • This is a [[StateBuilder.builder]] function for angular1 views.

      When the [[StateBuilder]] builds a [[StateObject]] object from a raw [[StateDeclaration]], this builder handles the views property with logic specific to @uirouter/angularjs (ng1).

      If no views: {} property exists on the [[StateDeclaration]], then it creates the views object and applies the state-level configuration to a view named $default.

    function watchDigests

    watchDigests: typeof watchDigests;

      Classes

      class Ng1ViewConfig

      class Ng1ViewConfig implements ViewConfig {}

      constructor

      constructor(
      path: PathNode[],
      viewDecl: Ng1ViewDeclaration,
      factory: TemplateFactory
      );

        property $id

        $id: number;

          property component

          component: string;

            property controller

            controller: Function;

              property factory

              factory: TemplateFactory;

                property getTemplate

                getTemplate: (uiView: any, context: ResolveContext) => string;

                  property loaded

                  loaded: boolean;

                    property locals

                    locals: any;

                      property path

                      path: PathNode[];

                        property template

                        template: string;

                          property viewDecl

                          viewDecl: Ng1ViewDeclaration;

                            method getController

                            getController: (
                            context: ResolveContext
                            ) => IInjectable | string | Promise<IInjectable | string>;
                            • Gets the controller for a view configuration.

                              Returns

                              {Function|Promise.} Returns a controller, or a promise that resolves to a controller.

                            method load

                            load: () => Promise<this>;

                              class StateProvider

                              class StateProvider {}
                              • The Angular 1 StateProvider

                                The $stateProvider works similar to Angular's v1 router, but it focuses purely on state.

                                A state corresponds to a "place" in the application in terms of the overall UI and navigation. A state describes (via the controller / template / view properties) what the UI looks like and does at that place.

                                States often have things in common, and the primary way of factoring out these commonalities in this model is via the state hierarchy, i.e. parent/child states aka nested states.

                                The $stateProvider provides interfaces to declare these states for your app.

                              constructor

                              constructor(stateRegistry: StateRegistry, stateService: StateService);

                                method decorator

                                decorator: (name: string, func: BuilderFunction) => Function | this;
                                • Decorates states when they are registered

                                  Allows you to extend (carefully) or override (at your own peril) the stateBuilder object used internally by [[StateRegistry]]. This can be used to add custom functionality to ui-router, for example inferring templateUrl based on the state name.

                                  When passing only a name, it returns the current (original or decorated) builder function that matches name.

                                  The builder functions that can be decorated are listed below. Though not all necessarily have a good use case for decoration, that is up to you to decide.

                                  In addition, users can attach custom decorators, which will generate new properties within the state's internal definition. There is currently no clear use-case for this beyond accessing internal states (i.e. $state.$current), however, expect this to become increasingly relevant as we introduce additional meta-programming features.

                                  **Warning**: Decorators should not be interdependent because the order of execution of the builder functions in non-deterministic. Builder functions should only be dependent on the state definition object and super function.

                                  Existing builder functions and current return values:

                                  - **parent** {object} - returns the parent state object. - **data** {object} - returns state data, including any inherited data that is not overridden by own values (if any). - **url** {object} - returns a or null. - **navigable** {object} - returns closest ancestor state that has a URL (aka is navigable). - **params** {object} - returns an array of state params that are ensured to be a super-set of parent's params. - **views** {object} - returns a views object where each key is an absolute view name (i.e. "viewName@stateName") and each value is the config object (template, controller) for the view. Even when you don't use the views object explicitly on a state config, one is still created for you internally. So by decorating this builder function you have access to decorating template and controller properties. - **ownParams** {object} - returns an array of params that belong to the state, not including any params defined by ancestor states. - **path** {string} - returns the full path from the root down to this state. Needed for state activation. - **includes** {object} - returns an object that includes every state that would pass a $state.includes() test.

                                  #### Example: Override the internal 'views' builder with a function that takes the state definition, and a reference to the internal function being overridden:

                                  $stateProvider.decorator('views', function (state, parent) {
                                  let result = {},
                                  views = parent(state);
                                  angular.forEach(views, function (config, name) {
                                  let autoName = (state.name + '.' + name).replace('.', '/');
                                  config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html';
                                  result[name] = config;
                                  });
                                  return result;
                                  });
                                  $stateProvider.state('home', {
                                  views: {
                                  'contact.list': { controller: 'ListController' },
                                  'contact.item': { controller: 'ItemController' }
                                  }
                                  });

                                  // Auto-populates list and item views with /partials/home/contact/list.html,
                                  // and /partials/home/contact/item.html, respectively.
                                  $state.go('home');

                                  Parameter name

                                  The name of the builder function to decorate.

                                  Parameter func

                                  A function that is responsible for decorating the original builder function. The function receives two parameters:

                                  - {object} - state - The state config object. - {object} - super - The original builder function.

                                  {object} $stateProvider - $stateProvider instance

                                method onInvalid

                                onInvalid: (callback: OnInvalidCallback) => Function;
                                • Registers an invalid state handler

                                  This is a passthrough to [[StateService.onInvalid]] for ng1.

                                method state

                                state: {
                                (name: string, definition: Ng1StateDeclaration): StateProvider;
                                (definition: Ng1StateDeclaration): StateProvider;
                                };
                                • Registers a state

                                  ### This is a passthrough to [[StateRegistry.register]].

                                  Registers a state configuration under a given state name. The stateConfig object has the following acceptable properties.

                                  - **template** - {string|function=} - html template as a string or a function that returns an html template as a string which should be used by the uiView directives. This property takes precedence over templateUrl.

                                  If template is a function, it will be called with the following parameters:

                                  - {array.&lt;object&gt;} - state parameters extracted from the current $location.path() by applying the current state

                                  - **templateUrl** - {string|function=} - path or function that returns a path to an html template that should be used by uiView.

                                  If templateUrl is a function, it will be called with the following parameters:

                                  - {array.&lt;object&gt;} - state parameters extracted from the current $location.path() by applying the current state

                                  - **templateProvider** - {function=} - Provider function that returns HTML content string.

                                  - **controller** - {string|function=} - Controller fn that should be associated with newly related scope or the name of a registered controller if passed as a string.

                                  - **controllerProvider** - {function=} - Injectable provider function that returns the actual controller or string.

                                  - **controllerAs** – {string=} – A controller alias name. If present the controller will be published to scope under the controllerAs name.

                                  - **resolve** - {object.&lt;string, function&gt;=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $stateChangeSuccess event is fired. If any of the promises are rejected the $stateChangeError event is fired. The map object is:

                                  - key - {string}: name of dependency to be injected into controller - factory - {string|function}: If string then it is alias for service. Otherwise if function, it is injected and return value it treated as dependency. If result is a promise, it is resolved before its value is injected into controller.

                                  - **url** - {string=} - A url with optional parameters. When a state is navigated or transitioned to, the $stateParams service will be populated with any parameters that were passed.

                                  - **params** - {object=} - An array of parameter names or regular expressions. Only use this within a state if you are not using url. Otherwise you can specify your parameters within the url. When a state is navigated or transitioned to, the $stateParams service will be populated with any parameters that were passed.

                                  - **views** - {object=} - Use the views property to set up multiple views or to target views manually/explicitly.

                                  - **abstract** - {boolean=} - An abstract state will never be directly activated, but can provide inherited properties to its common children states.

                                  - **onEnter** - {object=} - Callback function for when a state is entered. Good way to trigger an action or dispatch an event, such as opening a dialog. If minifying your scripts, make sure to use the ['injection1', 'injection2', function(injection1, injection2){}] syntax.

                                  - **onExit** - {object=} - Callback function for when a state is exited. Good way to trigger an action or dispatch an event, such as opening a dialog. If minifying your scripts, make sure to use the ['injection1', 'injection2', function(injection1, injection2){}] syntax.

                                  - **reloadOnSearch = true** - {boolean=} - If false, will not retrigger the same state just because a search/query parameter has changed (via $location.search() or $location.hash()). Useful for when you'd like to modify $location.search() without triggering a reload.

                                  - **data** - {object=} - Arbitrary data object, useful for custom configuration.

                                  #### Example: Some state name examples

                                  // stateName can be a single top-level name (must be unique).
                                  $stateProvider.state("home", {});
                                  // Or it can be a nested state name. This state is a child of the
                                  // above "home" state.
                                  $stateProvider.state("home.newest", {});
                                  // Nest states as deeply as needed.
                                  $stateProvider.state("home.newest.abc.xyz.inception", {});
                                  // state() returns $stateProvider, so you can chain state declarations.
                                  $stateProvider
                                  .state("home", {})
                                  .state("about", {})
                                  .state("contacts", {});

                                  Parameter 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".

                                  Parameter definition

                                  State configuration object.

                                class UrlRouterProvider

                                class UrlRouterProvider {}
                                • Manages rules for client-side URL

                                  ### Deprecation warning: This class is now considered to be an internal API Use the [[UrlService]] instead. For configuring URL rules, use the [[UrlRulesApi]] which can be found as [[UrlService.rules]].

                                  This class manages the router rules for what to do when the URL changes.

                                  This provider remains for backwards compatibility.

                                  Deprecated

                                constructor

                                constructor(router: UIRouter);

                                method $get

                                $get: () => UrlRouter;

                                method deferIntercept

                                deferIntercept: (defer?: boolean) => void;
                                • Disables monitoring of the URL.

                                  Call this method before UI-Router has bootstrapped. It will stop UI-Router from performing the initial url sync.

                                  This can be useful to perform some asynchronous initialization before the router starts. Once the initialization is complete, call [[listen]] to tell UI-Router to start watching and synchronizing the URL.

                                  #### Example:

                                  var app = angular.module('app', ['ui.router']);
                                  app.config(function ($urlRouterProvider) {
                                  // Prevent $urlRouter from automatically intercepting URL changes;
                                  $urlRouterProvider.deferIntercept();
                                  })
                                  app.run(function (MyService, $urlRouter, $http) {
                                  $http.get("/stuff").then(function(resp) {
                                  MyService.doStuff(resp.data);
                                  $urlRouter.listen();
                                  $urlRouter.sync();
                                  });
                                  });

                                  Parameter defer

                                  Indicates whether to defer location change interception. Passing no parameter is equivalent to true.

                                method injectableHandler

                                static injectableHandler: (
                                router: UIRouter,
                                handler: IInjectable
                                ) => UrlRuleHandlerFn;

                                  method otherwise

                                  otherwise: (rule: string | RawNg1RuleFunction) => UrlRouterProvider;
                                  • Defines the path or behavior to use when no url can be matched.

                                    #### Example:

                                    var app = angular.module('app', ['ui.router.router']);
                                    app.config(function ($urlRouterProvider) {
                                    // if the path doesn't match any of the urls you configured
                                    // otherwise will take care of routing the user to the
                                    // specified url
                                    $urlRouterProvider.otherwise('/index');
                                    // Example of using function rule as param
                                    $urlRouterProvider.otherwise(function ($injector, $location) {
                                    return '/a/valid/url';
                                    });
                                    });

                                    Parameter rule

                                    The url path you want to redirect to or a function rule that returns the url path or performs a $state.go(). The function version is passed two params: $injector and $location services, and should return a url string.

                                    {object} $urlRouterProvider - $urlRouterProvider instance

                                  method rule

                                  rule: (ruleFn: RawNg1RuleFunction) => UrlRouterProvider;
                                  • Registers a url handler function.

                                    Registers a low level url handler (a rule). A rule detects specific URL patterns and returns a redirect, or performs some action.

                                    If a rule returns a string, the URL is replaced with the string, and all rules are fired again.

                                    #### Example:

                                    var app = angular.module('app', ['ui.router.router']);
                                    app.config(function ($urlRouterProvider) {
                                    // Here's an example of how you might allow case insensitive urls
                                    $urlRouterProvider.rule(function ($injector, $location) {
                                    var path = $location.path(),
                                    normalized = path.toLowerCase();
                                    if (path !== normalized) {
                                    return normalized;
                                    }
                                    });
                                    });

                                    Parameter ruleFn

                                    Handler function that takes $injector and $location services as arguments. You can use them to detect a url and return a different url as a string.

                                    [[UrlRouterProvider]] (this)

                                  method when

                                  when: (
                                  what: RegExp | UrlMatcher | string,
                                  handler: string | IInjectable
                                  ) => this;
                                  • Registers a handler for a given url matching.

                                    If the handler is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).

                                    If the handler is a function, it is injectable. It gets invoked if $location matches. You have the option of inject the match object as $match.

                                    The handler can return

                                    - **falsy** to indicate that the rule didn't match after all, then $urlRouter will continue trying to find another one that matches. - **string** which is treated as a redirect and passed to $location.url() - **void** or any **truthy** value tells $urlRouter that the url was handled.

                                    #### Example:

                                    var app = angular.module('app', ['ui.router.router']);
                                    app.config(function ($urlRouterProvider) {
                                    $urlRouterProvider.when($state.url, function ($match, $stateParams) {
                                    if ($state.$current.navigable !== state ||
                                    !equalForKeys($match, $stateParams) {
                                    $state.transitionTo(state, $match, false);
                                    }
                                    });
                                    });

                                    Parameter what

                                    A pattern string to match, compiled as a [[UrlMatcher]].

                                    Parameter handler

                                    The path (or function that returns a path) that you want to redirect your user to.

                                    Parameter ruleCallback

                                    [optional] A callback that receives the rule registered with [[UrlMatcher.rule]]

                                    Note: the handler may also invoke arbitrary code, such as $state.go()

                                  Interfaces

                                  interface Ng1Controller

                                  interface Ng1Controller {}
                                  • The shape of a controller for a view (and/or component), defining the controller callbacks.

                                    A view in UI-Router is comprised of either a component ([[Ng1ViewDeclaration.component]]) or a combination of a template (or templateProvider) and a controller (or controllerProvider).

                                    The controller object (or the component's controller object) can define component-level controller callbacks, which UI-Router will call at the appropriate times. These callbacks are similar to Transition Hooks ([[IHookRegistry]]), but are only called if the view is currently active.

                                    This interface defines the UI-Router component callbacks.

                                  method $onInit

                                  $onInit: () => void;

                                  method uiCanExit

                                  uiCanExit: (transition: Transition) => HookResult;
                                  • This callback is called when the view's state is about to be exited.

                                    This callback is used to inform a view that it is about to be exited, due to a new [[Transition]]. The callback can ask for user confirmation, and cancel or alter the new Transition. The callback should return a value, or a promise for a value. If a promise is returned, the new Transition waits until the promise settles.

                                    Called when: - The view is still active - A new Transition is about to run - The new Transition will exit the view's state

                                    Called with: - The new Transition

                                    Relevant return Values: - false: The transition is cancelled. - A rejected promise: The transition is cancelled. - [[TargetState]]: The transition is redirected to the new target state. - Anything else: the transition will continue normally (the state and view will be deactivated)

                                    #### Example:

                                    app.component('myComponent', {
                                    template: '<input ng-model="$ctrl.data" type="text">',
                                    bindings: { 'data': '<' },
                                    controller: function() {
                                    this.originalData = angular.copy(this.data);
                                    this.uiCanExit = function() {
                                    if (!angular.equals(this.data, this.originalData)) {
                                    // Note: This could also return a Promise and request async
                                    // confirmation using something like ui-bootstrap $modal
                                    return window.confirm("Data has changed. Exit anyway and lose changes?");
                                    }
                                    }
                                    }
                                    }

                                    Parameter transition

                                    the new Transition that is about to exit the component's state a HookResult, or a promise for a HookResult

                                  method uiOnParamsChanged

                                  uiOnParamsChanged: (newValues: any, $transition$: Transition) => void;
                                  • This callback is called when parameter values have changed.

                                    This callback can be used to respond to changing parameter values in the current state, or in parent/child states. This callback is especially handy when using dynamic parameters ([[ParamDeclaration.dynamic]])

                                    Called when: - The view is still active - A new transition has completed successfully - The state for the view (controller) was not reloaded - At least one parameter value was changed

                                    Called with:

                                    Parameter newValues

                                    an object containing the changed parameter values

                                    Parameter $transition$

                                    the new Transition which triggered this callback

                                    #### Example:

                                    angular.module('foo').controller('FancyCtrl', function() {
                                    this.uiOnParamsChanged = function(newParams) {
                                    console.log("new params: ", newParams);
                                    }
                                    });

                                  interface Ng1StateDeclaration

                                  interface Ng1StateDeclaration extends _Ng1StateDeclaration, Ng1ViewDeclaration {}
                                  • The StateDeclaration object is used to define a state or nested state. It should be registered with the [[StateRegistry]].

                                    #### Example:

                                    // StateDeclaration object
                                    var foldersState = {
                                    name: 'folders',
                                    url: '/folders',
                                    resolve: {
                                    allfolders: function(FolderService) {
                                    return FolderService.list();
                                    }
                                    },
                                    template: "<ul><li ng-repeat='folder in allfolders'>{{folder.name}}</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:

                                    var state = {
                                    name: 'foo',
                                    url: '/foo',
                                    views: {
                                    $default: {
                                    template: '<h1>foo</h1>',
                                    controller: 'FooController'
                                    }
                                    }
                                    }

                                    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:

                                    var state = {
                                    name: 'foo',
                                    url: '/foo',
                                    controller: 'FooController', // invalid because views: exists
                                    views: {
                                    header: {
                                    template: '<h1>header</h1>'
                                    }
                                    }
                                    }

                                  property onEnter

                                  onEnter?: Ng1StateTransitionHook | IInjectable;
                                  • 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:

                                    $stateProvider.state({
                                    name: 'mystate',
                                    onEnter: (MyService, $transition$, $state$) => {
                                    return MyService.doSomething($state$.name, $transition$.params());
                                    }
                                    });

                                    #### Example:`

                                    $stateProvider.state({
                                    name: 'mystate',
                                    onEnter: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) {
                                    return MyService.doSomething($state$.name, $transition$.params());
                                    } ]
                                    });

                                  property onExit

                                  onExit?: Ng1StateTransitionHook | IInjectable;
                                  • 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:

                                    $stateProvider.state({
                                    name: 'mystate',
                                    onExit: (MyService, $transition$, $state$) => {
                                    return MyService.doSomething($state$.name, $transition$.params());
                                    }
                                    });

                                    #### Example:`

                                    $stateProvider.state({
                                    name: 'mystate',
                                    onExit: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) {
                                    return MyService.doSomething($state$.name, $transition$.params());
                                    } ]
                                    });

                                  property onRetain

                                  onRetain?: Ng1StateTransitionHook | IInjectable;
                                  • 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:

                                    $stateProvider.state({
                                    name: 'mystate',
                                    onRetain: (MyService, $transition$, $state$) => {
                                    return MyService.doSomething($state$.name, $transition$.params());
                                    }
                                    });

                                    #### Example:`

                                    $stateProvider.state({
                                    name: 'mystate',
                                    onRetain: [ 'MyService', '$transition$', '$state$', function (MyService, $transition$, $state$) {
                                    return MyService.doSomething($state$.name, $transition$.params());
                                    } ]
                                    });

                                  property reloadOnSearch

                                  reloadOnSearch?: boolean;
                                  • Makes all search/query parameters dynamic

                                    ### Deprecation warning: use [[ParamDeclaration.dynamic]] instead

                                    Deprecated

                                  property views

                                  views?: {
                                  [key: string]: string | Ng1ViewDeclaration;
                                  };
                                  • 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: - ui-view address: an address to a ui-view - state anchor: the state to anchor the address to

                                    Examples:

                                    Targets three named ui-views in the parent state's template

                                    #### Example:

                                    views: {
                                    header: {
                                    controller: "headerCtrl",
                                    templateUrl: "header.html"
                                    },
                                    body: {
                                    controller: "bodyCtrl",
                                    templateUrl: "body.html"
                                    },
                                    footer: "footerComponent"
                                    }

                                    #### Example:

                                    // Targets named ui-view="header" in the template of the ancestor state 'top'
                                    // and the named `ui-view="body" from the parent state's template.
                                    views: {
                                    'header@top': {
                                    controller: "msgHeaderCtrl",
                                    templateUrl: "msgHeader.html"
                                    },
                                    'body': {
                                    controller: "messagesCtrl",
                                    templateUrl: "messages.html"
                                    }
                                    }

                                    ## View targeting details

                                    There are a few styles of view addressing/targeting. The most common is a simple ui-view name

                                    #### Simple ui-view name

                                    Addresses without an @ are anchored to the parent state.

                                    #### Example:

                                    // target the `<div ui-view='foo'></div>` created in the parent state's view
                                    views: {
                                    foo: {...}
                                    }

                                    #### View name anchored to a state

                                    You can anchor the ui-view name to a specific state by including an @

                                    #### Example: targets the <div ui-view='foo'></div> which was created in a view owned by the state bar.baz

                                    views: {
                                    'foo@bar.baz': {...}
                                    }

                                    #### Absolute addressing

                                    You can address a ui-view absolutely, using dotted notation, by prefixing the address with a !. Dotted addresses traverse the hierarchy of ui-views active in the DOM:

                                    #### Example: absolutely targets the <div ui-view='nested'></div> ... which was created in the unnamed/$default root <ui-view></ui-view>

                                    views: {
                                    '!$default.nested': {...}
                                    }

                                    #### Relative addressing

                                    Absolute addressing is actually relative addressing, anchored to the unnamed root state (""). You can also use relative addressing anchored to *any state*, in order to target a target deeply nested ui-views: The ui-view is targeted relative to the anchored state by traversing the nested ui-view names.

                                    #### Example: targets the <div ui-view='bar'></div> ... which was created inside the <div ui-view='foo'></div> ... which was created inside the parent state's template.

                                    views: {
                                    'foo.bar': {...}
                                    }

                                    #### Example: targets the <div ui-view='bar'></div> ... which was created in <div ui-view='foo'></div> ... which was created in a template from the state baz.qux

                                    views: {
                                    'foo.bar@baz.qux': {...}
                                    }

                                    #### Example: a view can relatively target a named ui-view defined on an ancestor using ^ (meaning "parent")

                                    views: {
                                    'foo@^': {...}, // foo@(parent state) (same as simply 'foo')
                                    'bar@^.^': {...}, // bar@(grandparent state)
                                    'baz@^.^.^': {...}, // baz@(great-grandparent state)
                                    }

                                    For additional in-depth details about how ui-view addressing works, see the internal api [[ViewService.match]].

                                    ---

                                    ## State template+controller and views: incompatiblity

                                    If a state has a views object, any state-level view properties ([[Ng1ViewDeclaration]]) are ignored. Therefore, if _any view_ for a state is declared in the views object, then _all of the state's views_ must be defined in the views object. The state declaration must not have any of the following fields: - component - bindings - resolveAs - template - templateUrl - templateProvider - controller - controllerAs - controllerProvider

                                  interface Ng1StateTransitionHook

                                  interface Ng1StateTransitionHook {}
                                  • The signature for Angular 1 State Transition Hooks.

                                    State hooks are registered as onEnter/onRetain/onExit in state declarations. State hooks can additionally be injected with $transition$ and $state$ for the current [[Transition]] and [[StateObject]] in the transition.

                                    Transition State Hooks are callback functions that hook into the lifecycle events of specific states during a transition. As a transition runs, it may exit some states, retain (keep) states, and enter states. As each lifecycle event occurs, the hooks which are registered for the event and that state are called (in priority order).

                                    #### See also:

                                    - [[IHookRegistry.onExit]] - [[IHookRegistry.onRetain]] - [[IHookRegistry.onEnter]]

                                    #### Example:

                                    onEnter: function() { console.log('Entering'); }

                                    Not minification-safe

                                    onRetain: function($state$) { console.log('Retained ' + $state$.name); }

                                    Annotated for minification-safety

                                    onExit: [ '$transition$', '$state', function($transition$, $state) {
                                    // always redirect to 'foo' state when being exited
                                    if ($transition$.to().name !== 'foo') {
                                    return $state.target('foo');
                                    }
                                    } ]

                                    Returns

                                    an optional [[HookResult]] which may alter the transition

                                  call signature

                                  (...injectables: any[]): HookResult;

                                    interface Ng1ViewDeclaration

                                    interface Ng1ViewDeclaration extends _ViewDeclaration {}

                                      property bindings

                                      bindings?: {
                                      [key: string]: string;
                                      };
                                      • An object which maps resolves 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.

                                        #### Example:

                                        $stateProvider.state('foo', {
                                        resolve: {
                                        foo: function(FooService) { return FooService.get(); },
                                        bar: 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
                                        }
                                        });

                                      property component

                                      component?: string;
                                      • The name of the component to use for this view.

                                        A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:

                                        The name of an [angular 1.5+ .component()](https://docs.angularjs.org/guide/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 ("&lt;")](https://docs.angularjs.org/api/ng/service/$compile#-scope-).

                                        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]].

                                        #### Example:

                                        .state('profile', {
                                        // Use the <my-profile></my-profile> component for the Unnamed view
                                        component: 'MyProfile',
                                        }
                                        .state('messages', {
                                        // use the <nav-bar></nav-bar> component for the view named 'header'
                                        // use the <message-list></message-list> component for the view named 'content'
                                        views: {
                                        header: { component: 'NavBar' },
                                        content: { component: 'MessageList' }
                                        }
                                        }
                                        .state('contacts', {
                                        // Inside a "views:" block, a bare string "NavBar" is shorthand for { component: "NavBar" }
                                        // use the <nav-bar></nav-bar> component for the view named 'header'
                                        // use the <contact-list></contact-list> component for the view named 'content'
                                        views: {
                                        header: 'NavBar',
                                        content: 'ContactList'
                                        }
                                        }

                                        Note: When using component to define a view, you may _not_ use any of: template, templateUrl, templateProvider, controller, controllerProvider, controllerAs.

                                        See also: Todd Motto's angular 1.3 and 1.4 [backport of .component()](https://github.com/toddmotto/angular-component)

                                      property componentProvider

                                      componentProvider?: IInjectable;
                                      • Dynamic component provider function.

                                        A property of [[Ng1StateDeclaration]] or [[Ng1ViewDeclaration]]:

                                        This is an injectable provider function which returns the name of the component to use. 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.

                                        #### Example:

                                        componentProvider: function(MyResolveData, $transition$) {
                                        if (MyResolveData.foo) {
                                        return "fooComponent"
                                        } else if ($transition$.to().name === 'bar') {
                                        return "barComponent";
                                        }
                                        }

                                      property controller

                                      controller?: IInjectable | string;
                                      • 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 [[directives.uiView]] 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.

                                      property controllerAs

                                      controllerAs?: string;
                                      • 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

                                      property controllerProvider

                                      controllerProvider?: IInjectable;
                                      • 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.

                                        #### Example:

                                        controllerProvider: function(MyResolveData, $transition$) {
                                        if (MyResolveData.foo) {
                                        return "FooCtrl"
                                        } else if ($transition$.to().name === 'bar') {
                                        return "BarCtrl";
                                        } else {
                                        return function($scope) {
                                        $scope.baz = "Qux";
                                        }
                                        }
                                        }

                                      property resolveAs

                                      resolveAs?: string;
                                      • 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.

                                      property template

                                      template?: Function | string;
                                      • 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 [[directives.uiView]] 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:

                                        template: "<h1>inline template definition</h1><div ui-view></div>"

                                        #### Example:

                                        template: function(params) {
                                        return "<h1>generated template</h1>";
                                        }

                                      property templateProvider

                                      templateProvider?: IInjectable;
                                      • 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 [[directives.uiView]] directive.

                                        #### Example:

                                        templateProvider: function(MyTemplateService, $transition$) {
                                        return MyTemplateService.getTemplate($transition$.params().pageId);
                                        }

                                      property templateUrl

                                      templateUrl?: string | Function;
                                      • 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 [[directives.uiView]] directive.

                                        If templateUrl is a function, it will be called with the Transition parameters as the first argument.

                                        #### Example:

                                        templateUrl: "/templates/home.html"

                                        #### Example:

                                        templateUrl: function(params) {
                                        return myTemplates[params.pageId];
                                        }

                                      interface RawNg1RuleFunction

                                      interface RawNg1RuleFunction {}

                                        call signature

                                        ($injector: $InjectorLike, $location: LocationServices): string | void;

                                          interface TemplateFactoryProvider

                                          interface TemplateFactoryProvider {}
                                          • Manages which template-loading mechanism to use.

                                            Defaults to $templateRequest on Angular versions starting from 1.3, $http otherwise.

                                          method useHttpService

                                          useHttpService: (useUnsafeHttpService: boolean) => any;
                                          • Forces $templateFactory to use $http instead of $templateRequest.

                                            UI-Router uses $templateRequest by default on angular 1.3+. Use this method to choose to use $http instead.

                                            ---

                                            ## Security warning

                                            This might cause XSS, as $http doesn't enforce the regular security checks for templates that have been introduced in Angular 1.3.

                                            See the $sce documentation, section Impact on loading templates for more details about this mechanism.

                                            *Note: forcing this to false on Angular 1.2.x will crash, because $templateRequest is not implemented.*

                                            Parameter useUnsafeHttpService

                                            true to use $http to fetch templates

                                          Namespaces

                                          namespace watchDigests

                                          namespace watchDigests {}

                                            variable $inject

                                            var $inject: string[];

                                              Package Files (6)

                                              Dependencies (1)

                                              Dev Dependencies (22)

                                              Peer Dependencies (1)

                                              Badge

                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/angular-ui-router.

                                              • Markdown
                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/angular-ui-router)
                                              • HTML
                                                <a href="https://www.jsdocs.io/package/angular-ui-router"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>