174 lines
3.1 KiB
Plaintext
174 lines
3.1 KiB
Plaintext
|
|
p.location-badge.
|
|
exported from <a href='../annotations'>angular2/annotations</a>
|
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.32/modules/angular2/src/core/annotations_impl/view.ts#L1-L109">angular2/src/core/annotations_impl/view.ts (line 1)</a>
|
|
|
|
:markdown
|
|
Declares the available HTML templates for an application.
|
|
|
|
Each angular component requires a single `@Component` and at least one `@View` annotation. The
|
|
`@View` annotation specifies the HTML template to use, and lists the directives that are active
|
|
within the template.
|
|
|
|
When a component is instantiated, the template is loaded into the component's shadow root, and
|
|
the expressions and statements in the template are evaluated against the component.
|
|
|
|
For details on the `@Component` annotation, see <a href='Component-var.html'><code>Component</code></a>.
|
|
|
|
## Example
|
|
|
|
```
|
|
@Component({
|
|
selector: 'greet'
|
|
})
|
|
@View({
|
|
template: 'Hello {{name}}!',
|
|
directives: [GreetUser, Bold]
|
|
})
|
|
class Greet {
|
|
name: string;
|
|
|
|
constructor() {
|
|
this.name = 'World';
|
|
}
|
|
}
|
|
```
|
|
|
|
|
|
|
|
.l-main-section
|
|
h2 Annotations
|
|
.l-sub-section
|
|
h3.annotation CONST
|
|
pre.prettyprint
|
|
code.
|
|
@CONST()
|
|
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3 constructor
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor({templateUrl, template, directives, renderer, styles, styleUrls}?: {
|
|
templateUrl?: string,
|
|
template?: string,
|
|
directives?: List<Type | any | List<any>>,
|
|
renderer?: string,
|
|
styles?: List<string>,
|
|
styleUrls?: List<string>,
|
|
})
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 templateUrl
|
|
|
|
|
|
:markdown
|
|
Specifies an inline template for an angular component.
|
|
|
|
NOTE: either `templateUrl` or `template` should be used, but not both.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 template
|
|
|
|
|
|
:markdown
|
|
Specifies a template URL for an angular component.
|
|
|
|
NOTE: either `templateUrl` or `template` should be used, but not both.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 styleUrls
|
|
|
|
|
|
:markdown
|
|
Specifies stylesheet URLs for an angular component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 styles
|
|
|
|
|
|
:markdown
|
|
Specifies an inline stylesheet for an angular component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 directives
|
|
|
|
|
|
:markdown
|
|
Specifies a list of directives that can be used within a template.
|
|
|
|
Directives must be listed explicitly to provide proper component encapsulation.
|
|
|
|
|
|
|
|
```javascript
|
|
@Component({
|
|
selector: 'my-component'
|
|
})
|
|
@View({
|
|
directives: [For]
|
|
template: '
|
|
<ul>
|
|
<li *ng-for="#item of items">{{item}}</li>
|
|
</ul>'
|
|
})
|
|
class MyComponent {
|
|
}
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 renderer
|
|
|
|
|
|
:markdown
|
|
Specify a custom renderer for this View.
|
|
If this is set, neither `template`, `templateUrl`, `styles`, `styleUrls` nor `directives` are
|
|
used.
|
|
|
|
|
|
|
|
|
|
|
|
|