# Interface ViewDeclaration

Interface for declaring a view

This interface defines the basic data that a normalized view declaration will have on it. Add any additional fields that the framework requires to that interface.

interface ViewDeclaration {
$context?: ViewContext;
$name?: string;
$type?: string;
$uiViewContextAnchor?: string;
$uiViewName?: string;
bindings?: { [key: string]: string };
component?: string;
componentProvider?: Injectable;
controller?: string | Injectable;
controllerAs?: string;
controllerProvider?: Injectable;
resolveAs?: string;
template?: string | Function;
templateProvider?: Injectable;
templateUrl?: string | Function;
}

- Defined in src/router/state/interface.ts:38

##### Index

### Properties

$context?
$name?
$type?
$uiViewContextAnchor?
$uiViewName?
bindings?
component?
componentProvider?
controller?
controllerAs?
controllerProvider?
resolveAs?
template?
templateProvider?
templateUrl?

## Properties

### `Optional`$context

$context?: ViewContext

The context that this view is declared within.

- Defined in src/router/state/interface.ts:74

### `Optional`$name

$name?: string

The raw name for the view declaration, i.e., the [[StateDeclaration.views]] property name.

- Defined in src/router/state/interface.ts:42

### `Optional`$type

$type?: string

A type identifier for the View

This is used when loading prerequisites for the view, before it enters the DOM. Different types of views may load differently (e.g., templateProvider+controllerProvider vs component class)

- Defined in src/router/state/interface.ts:69

### `Optional`$uiViewContextAnchor

$uiViewContextAnchor?: string

The normalized context anchor (state name) for the `uiViewName`

When targeting a `ui-view`, the `uiViewName` address is anchored to a context name (state name).

- Defined in src/router/state/interface.ts:61

### `Optional`$uiViewName

$uiViewName?: string

The normalized address for the `ui-view` which this ViewConfig targets.

A ViewConfig targets a `ui-view` in the DOM (relative to the `uiViewContextAnchor`) which has a specific name.

#### Example

    `header` or `$default`

    The `uiViewName` can also target a _nested view_ by providing a dot-notation address

#### Example

    `foo.bar` or `foo.$default.bar`

- Defined in src/router/state/interface.ts:54

### `Optional` bindings

bindings?: { [key: string]: string }

An object which maps `resolve`s to [[component]] `bindings`.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

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

- Defined in src/router/state/interface.ts:170

### `Optional` component

component?: string

The name of the component to use for this view.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

The name of an angular 1.5+ `.component()` (or directive with bindToController and/or scope declaration) which will be used for this view.

Resolve data can be provided to the component via the component's `bindings` object (for 1.3+ directives, the `bindToController` is used; for other directives, the `scope` declaration is used). For each binding declared on the component, any resolve with the same name is set on the component's controller instance. The binding is provided to the component as a one-time-binding. In general, components should likewise declare their input bindings as one-way ("<").

Note: inside a "views:" block, a bare string `"foo"` is shorthand for `{ component: "foo" }`

Note: Mapping from resolve names to component inputs may be specified using [[bindings]].

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

- Defined in src/router/state/interface.ts:128

### `Optional` componentProvider

componentProvider?: Injectable

Dynamic component provider function.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

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

- Defined in src/router/state/interface.ts:192

### `Optional` controller

controller?: string | Injectable

The view's controller function or name

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

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.

- Defined in src/router/state/interface.ts:207

### `Optional` controllerAs

controllerAs?: string

A controller alias name.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

If present, the controller will be published to scope under the `controllerAs` name. See: https://docs.angularjs.org/api/ng/directive/ngController

- Defined in src/router/state/interface.ts:217

### `Optional` controllerProvider

controllerProvider?: Injectable

Dynamic controller provider function.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

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

- Defined in src/router/state/interface.ts:243

### `Optional` resolveAs

resolveAs?: string

The scope variable name to use for resolve data.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

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

- Defined in src/router/state/interface.ts:255

### `Optional` template

template?: string | Function

The HTML template for the view.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

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

- Defined in src/router/state/interface.ts:281

### `Optional` templateProvider

templateProvider?: Injectable

Injected function which returns the HTML template.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

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

- Defined in src/router/state/interface.ts:322

### `Optional` templateUrl

templateUrl?: string | Function

The URL for the HTML template for the view.

A property of [[StateDeclaration]] or [[ViewDeclaration]]:

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

- Defined in src/router/state/interface.ts:305