angular-ui-router

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>;

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.<object>} - 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.<object>} - 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.<string, function>=} - 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.

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()

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);
    }
  });

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

call signature

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

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 ("<")](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];
  }

call signature

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

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

variable $inject

var $inject: string[];