The component class which will be used for this view.
Resolve data can be provided to the component using Dependency Injection. Currently, resolves must be injected
into the component using @Inject('key'), where key is the name of the resolve.
TODO: document ng2 shorthand, like ng1's shorthand: inside a "views:" block, a bare string "foo" is shorthand for { component: "foo" }
example
.state('profile', {
// Use the <my-profile></my-profile> component for the Unnamed view
component: MyProfileComponent,
}
.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, supplying only a Component class 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
}
}
The class of the
Component
to use for this view.A property of Ng2StateDeclaration or Ng2ViewDeclaration:
The component class which will be used for this view.
Resolve data can be provided to the component using Dependency Injection. Currently, resolves must be injected into the component using
@Inject('key')
, wherekey
is the name of the resolve.TODO: document ng2 shorthand, like ng1's shorthand: inside a "views:" block, a bare string
"foo"
is shorthand for{ component: "foo" }
.state('profile', { // Use the <my-profile></my-profile> component for the Unnamed view component: MyProfileComponent, } .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, supplying only a Component class 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 } }