angular-cn/public/docs/js/latest/api/annotations/ViewAnnotation-class.jade

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&lt;Type | any | List&lt;any&gt;&gt;,
        renderer?: string,
        styles?: List&lt;string&gt;,
        styleUrls?: List&lt;string&gt;,
      })
    
    :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.