Interface ViewDeclaration

An object which maps resolves to [[component]] bindings.

When using a [[component]] declaration (component: 'myComponent'), each input binding for the component is supplied data from a resolve of the same name, by default. You may supply data from a different resolve name by mapping it here.

Each key in this object is the name of one of the component's input bindings. Each value is the name of the resolve that should be provided to that binding.

Any component bindings that are omitted from this map get the default behavior of mapping to a resolve of the same name.

Example:

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

The name of the component to use for this view.

The name of an AngularTS .component() which will be used for this view.

Resolve data can be provided to the component via the component's bindings object. For each binding declared on the component, any resolve with the same name is set on the component's controller instance.

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

Example:

.state('profile', {
  // Use the <my-profile></my-profile> component for this state.
  component: 'MyProfile',
}
Copy

Note: When using component to define a view, you may not use any of: template, templateUrl, controller.

The view's controller function or name

The controller function, or the name of a registered controller. The controller function will be used to control the contents of the [[directives.ngVIew]] directive.

See: [[Ng1Controller]] for information about component-level router hooks.

The HTML template for the view.

HTML template as a string, or a function which returns an html template as a string. This template will be used to render the corresponding [[directives.ngVIew]] directive.

This property takes precedence over templateUrl.

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

Example:

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

Example:

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

The URL for the HTML template for the view.

A path or a function that returns a path to an html template. The template will be fetched and used to render the corresponding [[directives.ngVIew]] directive.

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

Example:

templateUrl: "/templates/home.html"
Copy

Example:

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