chore(docs): remove @View decorator from examples in docs

Closes #4666

modules/angular2/http.ts

@@ -51,9 +51,7 @@ export {URLSearchParams} from './src/http/url_search_params';
  *
  * @Component({
  *   selector: 'app',
- *   providers: [HTTP_PROVIDERS]
+ *   providers: [HTTP_PROVIDERS],
- * })
- * @View({
  *   template: `
  *     <div>
  *       <h1>People</h1>
@@ -183,9 +181,7 @@ export const HTTP_BINDINGS = HTTP_PROVIDERS;
  *
  * @Component({
  *   selector: 'app',
- *   providers: [JSONP_PROVIDERS]
+ *   providers: [JSONP_PROVIDERS],
- * })
- * @View({
  *   template: `
  *     <div>
  *       <h1>People</h1>

modules/angular2/router.ts

@@ -41,15 +41,14 @@ import {BaseException} from 'angular2/src/core/facade/exceptions';
  * ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
  *
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {
  *   ROUTER_DIRECTIVES,
  *   ROUTER_PROVIDERS,
  *   RouteConfig
  * } from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {...},
  * ])
@@ -71,11 +70,10 @@ export const ROUTER_PRIMARY_COMPONENT: OpaqueToken =
  * ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
  *
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {...},
  * ])
@@ -94,15 +92,14 @@ export const ROUTER_DIRECTIVES: any[] = CONST_EXPR([RouterOutlet, RouterLink]);
  * ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
  *
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {
  *   ROUTER_DIRECTIVES,
  *   ROUTER_PROVIDERS,
  *   RouteConfig
  * } from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {...},
  * ])

modules/angular2/src/core/application_common.ts

@@ -138,9 +138,7 @@ export function platform(bindings?: Array<Type | Provider | any[]>): PlatformRef
  *
  * ```
  * @Component({
- *    selector: 'my-app'
+ *    selector: 'my-app',
- * })
- * @View({
  *    template: 'Hello {{ name }}!'
  * })
  * class MyApp {

modules/angular2/src/core/application_tokens.ts

@@ -12,7 +12,6 @@ export const APP_COMPONENT_REF_PROMISE = CONST_EXPR(new OpaqueToken('Promise<Com
  *
  * ```
  * @Component(...)
- * @View(...)
  * class MyApp {
  *   ...
  * }

modules/angular2/src/core/change_detection/change_detector_ref.ts

@@ -10,8 +10,11 @@ export abstract class ChangeDetectorRef {
    * ### Example ([live demo](http://plnkr.co/edit/GC512b?p=preview))
    *
    * ```typescript
-   * @Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
+   * @Component({
-   * @View({template: `Number of ticks: {{numberOfTicks}}`})
+   *   selector: 'cmp',
+   *   changeDetection: ChangeDetectionStrategy.OnPush,
+   *   template: `Number of ticks: {{numberOfTicks}}`
+   * })
    * class Cmp {
    *   numberOfTicks = 0;
    *
@@ -26,9 +29,7 @@ export abstract class ChangeDetectorRef {
    *
    * @Component({
    *   selector: 'app',
-   *   changeDetection: ChangeDetectionStrategy.OnPush
+   *   changeDetection: ChangeDetectionStrategy.OnPush,
-   * })
-   * @View({
    *   template: `
    *     <cmp><cmp>
    *   `,
@@ -69,8 +70,8 @@ export abstract class ChangeDetectorRef {
    *   }
    * }
    *
-   * @Component({selector: 'giant-list'})
+   * @Component({
-   * @View({
+   *   selector: 'giant-list',
    *   template: `
    *     <li *ng-for="#d of dataProvider.data">Data {{d}}</lig>
    *   `,
@@ -86,9 +87,8 @@ export abstract class ChangeDetectorRef {
    * }
    *
    * @Component({
-   *   selector: 'app', providers: [DataProvider]
+   *   selector: 'app',
-   * })
+   *   providers: [DataProvider],
-   * @View({
    *   template: `
    *     <giant-list><giant-list>
    *   `,
@@ -151,8 +151,9 @@ export abstract class ChangeDetectorRef {
    *   }
    * }
    *
-   * @Component({selector: 'live-data', inputs: ['live']})
+   * @Component({
-   * @View({
+   *   selector: 'live-data',
+   *   inputs: ['live'],
    *   template: `Data: {{dataProvider.data}}`
    * })
    * class LiveData {
@@ -168,9 +169,7 @@ export abstract class ChangeDetectorRef {
    *
    * @Component({
    *   selector: 'app',
-   *   providers: [DataProvider]
+   *   providers: [DataProvider],
-   * })
-   * @View({
    *   template: `
    *     Live Update: <input type="checkbox" [(ng-model)]="live">
    *     <live-data [live]="live"><live-data>

modules/angular2/src/core/change_detection/exceptions.ts

@@ -10,8 +10,8 @@ import {BaseException, WrappedException} from "angular2/src/core/facade/exceptio
  * ### Example
  *
  * ```typescript
- * @Component({selector: 'parent'})
+ * @Component({
- * @View({
+ *   selector: 'parent',
  *   template: `
  *     <child [prop]="parentProp"></child>
  *   `,
@@ -55,9 +55,7 @@ export class ExpressionChangedAfterItHasBeenCheckedException extends BaseExcepti
  * }
  *
  * @Component({
- *   selector: 'app'
+ *   selector: 'app',
- * })
- * @View({
  *   template: `
  *     <child [prop]="field.first"></child>
  *   `,

modules/angular2/src/core/di/metadata.ts

@@ -212,9 +212,7 @@ export class SkipSelfMetadata {
  *
  * @Component({
  *   selector: 'parent-cmp',
- *   providers: [HostService]
+ *   providers: [HostService],
- * })
- * @View({
  *   template: `
  *     Dir: <child-directive></child-directive>
  *   `,
@@ -225,9 +223,7 @@ export class SkipSelfMetadata {
  *
  * @Component({
  *   selector: 'app',
- *   providers: [OtherService]
+ *   providers: [OtherService],
- * })
- * @View({
  *   template: `
  *     Parent: <parent-cmp></parent-cmp>
  *   `,

modules/angular2/src/core/directives.ts

@@ -34,9 +34,7 @@ export * from './directives/observable_list_diff';
  * import {OtherDirective} from './myDirectives';
  *
  * @Component({
- *  selector: 'my-component'
+ *   selector: 'my-component',
- * })
- * @View({
  *   templateUrl: 'myComponent.html',
  *   directives: [NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
  * })
@@ -51,9 +49,7 @@ export * from './directives/observable_list_diff';
  * import {OtherDirective} from './myDirectives';
  *
  * @Component({
- *  selector: 'my-component'
+ *   selector: 'my-component',
- * })
- * @View({
  *   templateUrl: 'myComponent.html',
  *   directives: [CORE_DIRECTIVES, OtherDirective]
  * })

modules/angular2/src/core/directives/ng_class.ts

@@ -30,13 +30,11 @@ import {StringMapWrapper, isListLikeIterable} from 'angular2/src/core/facade/col
  * ### Example ([live demo](http://plnkr.co/edit/a4YdtmWywhJ33uqfpPPn?p=preview)):
  *
  * ```
- * import {Component, View, NgClass} from 'angular2/angular2';
+ * import {Component, NgClass} from 'angular2/angular2';
  *
  * @Component({
  *   selector: 'toggle-button',
- *    inputs: ['isDisabled']
+ *   inputs: ['isDisabled'],
- * })
- * @View({
  *   template: `
  *      <div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
  *          (click)="toggle(!isOn)">

modules/angular2/src/core/directives/ng_style.ts

@@ -23,12 +23,10 @@ import {isPresent, isBlank, print} from 'angular2/src/core/facade/lang';
  * ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)):
  *
  * ```
- * import {Component, View, NgStyle} from 'angular2/angular2';
+ * import {Component, NgStyle} from 'angular2/angular2';
  *
  * @Component({
- *  selector: 'ng-style-example'
+ *  selector: 'ng-style-example',
- * })
- * @View({
  *  template: `
  *    <h1 [ng-style]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
  *      Change style of this text!

modules/angular2/src/core/facade/async.ts

@@ -104,8 +104,9 @@ export class Observable {
  * title gets clicked:
  *
  * ```
- * @Component({selector: 'zippy'})
+ * @Component({
- * @View({template: `
+ *   selector: 'zippy',
+ *   template: `
  *   <div class="zippy">
  *     <div (click)="toggle()">Toggle</div>
  *     <div [hidden]="!visible">

modules/angular2/src/core/forms/directives.ts

@@ -40,11 +40,9 @@ export {NgControlStatus} from './directives/ng_control_status';
  * ### Example:
  *
  * ```typescript
- * @View({
- *   directives: [FORM_DIRECTIVES]
- * })
  * @Component({
- *   selector: 'my-app'
+ *   selector: 'my-app',
+ *   directives: [FORM_DIRECTIVES]
  * })
  * class MyApp {}
  * ```

modules/angular2/src/core/forms/directives/ng_control_group.ts

@@ -23,8 +23,8 @@ const controlGroupBinding =
  * We can work with each group separately: check its validity, get its value, listen to its changes.
  *
  *  ```
- * @Component({selector: "signup-comp"})
+ * @Component({
- * @View({
+ *      selector: "signup-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: `
  *              <form #f="form" (submit)='onSignUp(f.value)'>

modules/angular2/src/core/forms/directives/ng_control_name.ts

@@ -28,8 +28,8 @@ const controlNameBinding =
  * changes.
  *
  *  ```
- * @Component({selector: "login-comp"})
+ * @Component({
- * @View({
+ *      selector: "login-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: `
  *        <form #f="form" (submit)='onLogIn(f.value)'>
@@ -50,8 +50,8 @@ const controlNameBinding =
  * We can also use ng-model to bind a domain model to the form.
  *
  *  ```
- * @Component({selector: "login-comp"})
+ * @Component({
- * @View({
+ *      selector: "login-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: `
  *        <form (submit)='onLogIn()'>

modules/angular2/src/core/forms/directives/ng_form.ts

@@ -42,9 +42,7 @@ const formDirectiveProvider =
  *
  *  ```typescript
  * @Component({
- *   selector: 'my-app'
+ *   selector: 'my-app',
- * })
- * @View({
  *   template: `
  *     <div>
  *       <p>Submit the form to see the data object Angular builds</p>

modules/angular2/src/core/forms/directives/ng_form_control.ts

@@ -24,9 +24,7 @@ const formControlBinding =
  *
  *  ```typescript
  * @Component({
- *   selector: 'my-app'
+ *   selector: 'my-app',
- * })
- * @View({
  *   template: `
  *     <div>
  *       <h2>NgFormControl Example</h2>
@@ -51,8 +49,8 @@ const formControlBinding =
  * ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview))
  *
  *  ```typescript
- * @Component({selector: "login-comp"})
+ * @Component({
- * @View({
+ *      selector: "login-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
  *      })

modules/angular2/src/core/forms/directives/ng_form_model.ts

@@ -25,9 +25,7 @@ const formDirectiveProvider =
  *
  *  ```typescript
  * @Component({
- *   selector: 'my-app'
+ *   selector: 'my-app',
- * })
- * @View({
  *   template: `
  *     <div>
  *       <h2>NgFormModel Example</h2>
@@ -60,8 +58,8 @@ const formDirectiveProvider =
  * We can also use ng-model to bind a domain model to the form.
  *
  *  ```typescript
- * @Component({selector: "login-comp"})
+ * @Component({
- * @View({
+ *      selector: "login-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: `
  *        <form [ng-form-model]='loginForm'>

modules/angular2/src/core/forms/directives/ng_model.ts

@@ -24,8 +24,8 @@ const formControlBinding =
  *
  * ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
  *  ```typescript
- * @Component({selector: "search-comp"})
+ * @Component({
- * @View({
+ *      selector: "search-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: `<input type='text' [(ng-model)]="searchQuery">`
  *      })

modules/angular2/src/core/forms/form_builder.ts

@@ -10,14 +10,12 @@ import * as modelModule from './model';
  * # Example
  *
  * ```
- * import {Component, View, bootstrap} from 'angular2/angular2';
+ * import {Component, bootstrap} from 'angular2/angular2';
  * import {FormBuilder, Validators, FORM_DIRECTIVES, ControlGroup} from 'angular2/core';
  *
  * @Component({
  *   selector: 'login-comp',
- *   viewProviders: [FormBuilder]
+ *   viewProviders: [FormBuilder],
- * })
- * @View({
  *   template: `
  *     <form [control-group]="loginForm">
  *       Login <input control="login">

modules/angular2/src/core/linker/interfaces.ts

@@ -50,8 +50,10 @@ export var LIFECYCLE_HOOKS_VALUES = [
  * ### Example ([live example](http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview)):
  *
  * ```typescript
- * @Component({selector: 'my-cmp'})
+ * @Component({
- * @View({template: `<p>myProp = {{myProp}}</p>`})
+ *   selector: 'my-cmp',
+ *   template: `<p>myProp = {{myProp}}</p>`
+ * })
  * class MyComponent implements OnChanges {
  *   @Input() myProp: any;
  *
@@ -60,8 +62,8 @@ export var LIFECYCLE_HOOKS_VALUES = [
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <button (click)="value = value + 1">Change MyComponent</button>
  *     <my-cmp [my-prop]="value"></my-cmp>`,
@@ -87,8 +89,10 @@ export interface OnChanges { onChanges(changes: {[key: string]: SimpleChange});
  * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
  *
  * ```typescript
- * @Component({selector: 'my-cmp'})
+ * @Component({
- * @View({template: `<p>my-component</p>`})
+ *   selector: 'my-cmp',
+ *   template: `<p>my-component</p>`
+ * })
  * class MyComponent implements OnInit, OnDestroy {
  *   onInit() {
  *     console.log('onInit');
@@ -99,8 +103,8 @@ export interface OnChanges { onChanges(changes: {[key: string]: SimpleChange});
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <button (click)="hasChild = !hasChild">
  *       {{hasChild ? 'Destroy' : 'Create'}} MyComponent
@@ -141,8 +145,8 @@ export interface OnInit { onInit(); }
  * array `list`:
  *
  * ```typescript
- * @Component({selector: 'custom-check'})
+ * @Component({
- * @View({
+ *   selector: 'custom-check',
  *   template: `
  *     <p>Changes:</p>
  *     <ul>
@@ -169,8 +173,8 @@ export interface OnInit { onInit(); }
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <button (click)="list.push(list.length)">Push</button>
  *     <button (click)="list.pop()">Pop</button>
@@ -193,8 +197,10 @@ export interface DoCheck { doCheck(); }
  * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
  *
  * ```typesript
- * @Component({selector: 'my-cmp'})
+ * @Component({
- * @View({template: `<p>my-component</p>`})
+ *   selector: 'my-cmp',
+ *   template: `<p>my-component</p>`
+ * })
  * class MyComponent implements OnInit, OnDestroy {
  *   onInit() {
  *     console.log('onInit');
@@ -205,8 +211,8 @@ export interface DoCheck { doCheck(); }
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <button (click)="hasChild = !hasChild">
  *       {{hasChild ? 'Destroy' : 'Create'}} MyComponent
@@ -230,14 +236,18 @@ export interface OnDestroy { onDestroy(); }
  * ### Example ([live demo](http://plnkr.co/edit/plamXUpsLQbIXpViZhUO?p=preview))
  *
  * ```typescript
- * @Component({selector: 'child-cmp'})
+ * @Component({
- * @View({template: `{{where}} child`})
+ *   selector: 'child-cmp',
+ *   template: `{{where}} child`
+ * })
  * class ChildComponent {
  *   @Input() where: string;
  * }
  *
- * @Component({selector: 'parent-cmp'})
+ * @Component({
- * @View({template: `<ng-content></ng-content>`})
+ *   selector: 'parent-cmp',
+ *   template: `<ng-content></ng-content>`
+ * })
  * class ParentComponent implements AfterContentInit {
  *   @ContentChild(ChildComponent) contentChild: ChildComponent;
  *
@@ -256,8 +266,8 @@ export interface OnDestroy { onDestroy(); }
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <parent-cmp>
  *       <child-cmp where="content"></child-cmp>
@@ -278,14 +288,12 @@ export interface AfterContentInit { afterContentInit(); }
  * ### Example ([live demo](http://plnkr.co/edit/tGdrytNEKQnecIPkD7NU?p=preview))
  *
  * ```typescript
- * @Component({selector: 'child-cmp'})
+ * @Component({selector: 'child-cmp', template: `{{where}} child`})
- * @View({template: `{{where}} child`})
  * class ChildComponent {
  *   @Input() where: string;
  * }
  *
- * @Component({selector: 'parent-cmp'})
+ * @Component({selector: 'parent-cmp', template: `<ng-content></ng-content>`})
- * @View({template: `<ng-content></ng-content>`})
  * class ParentComponent implements AfterContentChecked {
  *   @ContentChild(ChildComponent) contentChild: ChildComponent;
  *
@@ -304,8 +312,8 @@ export interface AfterContentInit { afterContentInit(); }
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <parent-cmp>
  *       <button (click)="hasContent = !hasContent">Toggle content child</button>
@@ -328,14 +336,13 @@ export interface AfterContentChecked { afterContentChecked(); }
  * ### Example ([live demo](http://plnkr.co/edit/LhTKVMEM0fkJgyp4CI1W?p=preview))
  *
  * ```typescript
- * @Component({selector: 'child-cmp'})
+ * @Component({selector: 'child-cmp', template: `{{where}} child`})
- * @View({template: `{{where}} child`})
  * class ChildComponent {
  *   @Input() where: string;
  * }
  *
- * @Component({selector: 'parent-cmp'})
+ * @Component({
- * @View({
+ *   selector: 'parent-cmp',
  *   template: `<child-cmp where="view"></child-cmp>`,
  *   directives: [ChildComponent]
  * })
@@ -357,8 +364,8 @@ export interface AfterContentChecked { afterContentChecked(); }
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `<parent-cmp></parent-cmp>`,
  *   directives: [ParentComponent]
  * })
@@ -376,14 +383,13 @@ export interface AfterViewInit { afterViewInit(); }
  * ### Example ([live demo](http://plnkr.co/edit/0qDGHcPQkc25CXhTNzKU?p=preview))
  *
  * ```typescript
- * @Component({selector: 'child-cmp'})
+ * @Component({selector: 'child-cmp', template: `{{where}} child`})
- * @View({template: `{{where}} child`})
  * class ChildComponent {
  *   @Input() where: string;
  * }
  *
- * @Component({selector: 'parent-cmp'})
+ * @Component({
- * @View({
+ *   selector: 'parent-cmp',
  *   template: `
  *     <button (click)="showView = !showView">Toggle view child</button>
  *     <child-cmp *ng-if="showView" where="view"></child-cmp>`,
@@ -408,8 +414,8 @@ export interface AfterViewInit { afterViewInit(); }
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `<parent-cmp></parent-cmp>`,
  *   directives: [ParentComponent]
  * })

modules/angular2/src/core/metadata.ts

@@ -179,10 +179,9 @@ export interface DirectiveFactory {
  * ## Example as TypeScript Decorator
  *
  * ```
- * import {Component, View} from "angular2/angular2";
+ * import {Component} from "angular2/angular2";
  *
  * @Component({...})
- * @View({...})
  * class MyComponent {
  *   constructor() {
  *     ...
@@ -195,7 +194,6 @@ export interface DirectiveFactory {
  * ```
  * var MyComponent = ng
  *   .Component({...})
- *   .View({...})
  *   .Class({
  *     constructor: function() {
  *       ...
@@ -211,8 +209,7 @@ export interface DirectiveFactory {
  * };
  *
  * MyComponent.annotations = [
- *   new ng.Component({...}),
+ *   new ng.Component({...})
- *   new ng.View({...})
  * ]
  * ```
  */
@@ -338,10 +335,9 @@ export interface ViewFactory {
  * ## Example as TypeScript Decorator
  *
  * ```
- * import {Attribute, Component, View} from "angular2/angular2";
+ * import {Attribute, Component} from "angular2/angular2";
  *
  * @Component({...})
- * @View({...})
  * class MyComponent {
  *   constructor(@Attribute('title') title: string) {
  *     ...
@@ -354,7 +350,6 @@ export interface ViewFactory {
  * ```
  * var MyComponent = ng
  *   .Component({...})
- *   .View({...})
  *   .Class({
  *     constructor: [new ng.Attribute('title'), function(title) {
  *       ...
@@ -370,8 +365,7 @@ export interface ViewFactory {
  * };
  *
  * MyComponent.annotations = [
- *   new ng.Component({...}),
+ *   new ng.Component({...})
- *   new ng.View({...})
  * ]
  * MyComponent.parameters = [
  *   [new ng.Attribute('title')]
@@ -389,10 +383,9 @@ export interface AttributeFactory {
  * ### Example as TypeScript Decorator
  *
  * ```
- * import {Query, QueryList, Component, View} from "angular2/angular2";
+ * import {Query, QueryList, Component} from "angular2/angular2";
  *
  * @Component({...})
- * @View({...})
  * class MyComponent {
  *   constructor(@Query(SomeType) queryList: QueryList<SomeType>) {
  *     ...
@@ -405,7 +398,6 @@ export interface AttributeFactory {
  * ```
  * var MyComponent = ng
  *   .Component({...})
- *   .View({...})
  *   .Class({
  *     constructor: [new ng.Query(SomeType), function(queryList) {
  *       ...
@@ -421,8 +413,7 @@ export interface AttributeFactory {
  * };
  *
  * MyComponent.annotations = [
- *   new ng.Component({...}),
+ *   new ng.Component({...})
- *   new ng.View({...})
  * ]
  * MyComponent.parameters = [
  *   [new ng.Query(SomeType)]

modules/angular2/src/core/metadata/di.ts

@@ -73,15 +73,12 @@ export class AttributeMetadata extends DependencyMetadata {
  *   selector: 'pane',
  *   inputs: ['title']
  * })
- * @View(...)
  * class Pane {
  *   title:string;
  * }
  *
  * @Component({
- *   selector: 'tabs'
+ *  selector: 'tabs',
- * })
- * @View({
  *  template: `
  *    <ul>
  *      <li *ng-for="#pane of panes">{{pane.title}}</li>
@@ -105,10 +102,7 @@ export class AttributeMetadata extends DependencyMetadata {
  *   <div #findme>...</div>
  * </seeker>
  *
- * @Component({
+ * @Component({ selector: 'foo' })
- *   selector: 'foo'
- * })
- * @View(...)
  * class seeker {
  *   constructor(@Query('findme') elList: QueryList<ElementRef>) {...}
  * }
@@ -128,7 +122,6 @@ export class AttributeMetadata extends DependencyMetadata {
  *  @Component({
  *   selector: 'foo'
  * })
- * @View(...)
  * class Seeker {
  *   constructor(@Query('findMe, findMeToo') elList: QueryList<ElementRef>) {...}
  * }
@@ -316,9 +309,10 @@ export class ViewQueryMetadata extends QueryMetadata {
  *
  * ```
  * @Component({
- *   selector: 'someDir'
+ *   selector: 'someDir',
+ *   templateUrl: 'someTemplate',
+ *   directives: [ItemDirective]
  * })
- * @View({templateUrl: 'someTemplate', directives: [ItemDirective]})
  * class SomeDir {
  *   @ViewChildren(ItemDirective) viewChildren: QueryList<ItemDirective>;
  *
@@ -342,9 +336,10 @@ export class ViewChildrenMetadata extends ViewQueryMetadata {
  *
  * ```
  * @Component({
- *   selector: 'someDir'
+ *   selector: 'someDir',
+ *   templateUrl: 'someTemplate',
+ *   directives: [ItemDirective]
  * })
- * @View({templateUrl: 'someTemplate', directives: [ItemDirective]})
  * class SomeDir {
  *   @ViewChild(ItemDirective) viewChild:ItemDirective;
  *

modules/angular2/src/core/metadata/directives.ts

@@ -437,9 +437,7 @@ export class DirectiveMetadata extends InjectableMetadata {
    * ```typescript
    * @Component({
    *   selector: 'bank-account',
-   *   inputs: ['bankName', 'id: account-id']
+   *   inputs: ['bankName', 'id: account-id'],
-   * })
-   * @View({
    *   template: `
    *     Bank Name: {{bankName}}
    *     Account Id: {{id}}
@@ -453,8 +451,8 @@ export class DirectiveMetadata extends InjectableMetadata {
    *   normalizedBankName: string;
    * }
    *
-   * @Component({selector: 'app'})
+   * @Component({
-   * @View({
+   *   selector: 'app',
    *   template: `
    *     <bank-account bank-name="RBC" account-id="4747"></bank-account>
    *   `,
@@ -503,8 +501,8 @@ export class DirectiveMetadata extends InjectableMetadata {
    *   }
    * }
    *
-   * @Component({selector: 'app'})
+   * @Component({
-   * @View({
+   *   selector: 'app',
    *   template: `
    *     <interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
    *     </interval-dir>
@@ -564,8 +562,8 @@ export class DirectiveMetadata extends InjectableMetadata {
    *   }
    * }
    *
-   * @Component({selector: 'app'})
+   * @Component({
-   * @View({
+   *   selector: 'app',
    *   template: `<button counting>Increment</button>`,
    *   directives: [CountClicks]
    * })
@@ -600,8 +598,8 @@ export class DirectiveMetadata extends InjectableMetadata {
    *   get invalid { return this.control.invalid; }
    * }
    *
-   * @Component({selector: 'app'})
+   * @Component({
-   * @View({
+   *   selector: 'app',
    *   template: `<input [(ng-model)]="prop">`,
    *   directives: [FORM_DIRECTIVES, NgModelStatus]
    * })
@@ -688,8 +686,6 @@ export class DirectiveMetadata extends InjectableMetadata {
    *
    * @Component({
    *   selector: 'main',
-   * })
-   * @View({
    *   template: `<child-dir #c="child"></child-dir>`,
    *   directives: [ChildDir]
    * })
@@ -735,9 +731,7 @@ export class DirectiveMetadata extends InjectableMetadata {
    *   queries: {
    *     contentChildren: new ContentChildren(ChildDirective),
    *     viewChildren: new ViewChildren(ChildDirective)
-   *   }
+   *   },
-   * })
-   * @View({
    *   template: '<child-directive></child-directive>',
    *   directives: [ChildDirective]
    * })
@@ -812,9 +806,7 @@ export class DirectiveMetadata extends InjectableMetadata {
  *
  * ```
  * @Component({
- *   selector: 'greet'
+ *   selector: 'greet',
- * })
- * @View({
  *   template: 'Hello {{name}}!'
  * })
  * class Greet {
@@ -869,9 +861,7 @@ export class ComponentMetadata extends DirectiveMetadata {
    *   selector: 'greet',
    *   viewProviders: [
    *     Greeter
-   *   ]
+   *   ],
-   * })
-   * @View({
    *   template: `<needs-greeter></needs-greeter>`,
    *   directives: [NeedsGreeter]
    * })
@@ -998,8 +988,8 @@ export class PipeMetadata extends InjectableMetadata {
  * The following example creates a component with two input properties.
  *
  * ```typescript
- * @Component({selector: 'bank-account'})
+ * @Component({
- * @View({
+ *   selector: 'bank-account',
  *   template: `
  *     Bank Name: {{bankName}}
  *     Account Id: {{id}}
@@ -1013,8 +1003,8 @@ export class PipeMetadata extends InjectableMetadata {
  *   normalizedBankName: string;
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <bank-account bank-name="RBC" account-id="4747"></bank-account>
  *   `,
@@ -1060,8 +1050,8 @@ export class InputMetadata {
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
  *     </interval-dir>
@@ -1103,8 +1093,8 @@ export class OutputMetadata {
  *   @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `<input [(ng-model)]="prop">`,
  *   directives: [FORM_DIRECTIVES, NgModelStatus]
  * })
@@ -1144,8 +1134,8 @@ export class HostBindingMetadata {
  *   }
  * }
  *
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `<button counting>Increment</button>`,
  *   directives: [CountClicks]
  * })

modules/angular2/src/core/metadata/view.ts

@@ -48,9 +48,7 @@ export var VIEW_ENCAPSULATION_VALUES =
  *
  * ```
  * @Component({
- *   selector: 'greet'
+ *   selector: 'greet',
- * })
- * @View({
  *   template: 'Hello {{name}}!',
  *   directives: [GreetUser, Bold]
  * })
@@ -102,9 +100,7 @@ export class ViewMetadata {
    *
    * ```javascript
    * @Component({
-   *     selector: 'my-component'
+   *   selector: 'my-component',
-   *   })
-   * @View({
    *   directives: [NgFor]
    *   template: '
    *   <ul>

modules/angular2/src/core/pipes/async_pipe.ts

@@ -47,9 +47,7 @@ var _observableStrategy = new ObservableStrategy();
  * ```
  * import {Observable} from 'angular2/core';
  * @Component({
- *   selector: "task-cmp"
+ *   selector: "task-cmp",
- * })
- * @View({
  *   template: "Time: {{ time | async }}"
  * })
  * class Task {

modules/angular2/src/core/pipes/json_pipe.ts

@@ -12,9 +12,7 @@ import {Pipe} from 'angular2/src/core/metadata';
  *
  *  ```
  * @Component({
- *   selector: "user-cmp"
+ *   selector: "user-cmp",
- * })
- * @View({
  *   template: "User: {{ user | json }}"
  * })
  * class Username {

modules/angular2/src/core/pipes/lowercase_pipe.ts

@@ -14,9 +14,7 @@ import {InvalidPipeArgumentException} from './invalid_pipe_argument_exception';
  *
  *  ```
  * @Component({
- *   selector: "username-cmp"
+ *   selector: "username-cmp",
- * })
- * @View({
  *   template: "Username: {{ user | lowercase }}"
  * })
  * class Username {

modules/angular2/src/core/pipes/uppercase_pipe.ts

@@ -13,9 +13,7 @@ import {InvalidPipeArgumentException} from './invalid_pipe_argument_exception';
  *
  *  ```
  * @Component({
- *   selector: "username-cmp"
+ *   selector: "username-cmp",
- * })
- * @View({
  *   template: "Username: {{ user | uppercase }}"
  * })
  * class Username {

modules/angular2/src/core/zone/ng_zone.ts

@@ -26,9 +26,7 @@ export interface NgZoneZone extends Zone {
  * import {Component, View, NgIf, NgZone} from 'angular2/angular2';
  *
  * @Component({
- *   selector: 'ng-zone-demo'
+ *   selector: 'ng-zone-demo'.
- * })
- * @View({
  *   template: `
  *     <h2>Demo: NgZone</h2>
  *

modules/angular2/src/http/http.ts

@@ -40,8 +40,11 @@ function mergeOptions(defaultOpts, providedOpts, method, url): RequestOptions {
  *
  * ```typescript
  * import {Http, HTTP_PROVIDERS} from 'angular2/http';
- * @Component({selector: 'http-app', viewProviders: [HTTP_PROVIDERS]})
+ * @Component({
- * @View({templateUrl: 'people.html'})
+ *   selector: 'http-app',
+ *   viewProviders: [HTTP_PROVIDERS],
+ *   templateUrl: 'people.html'
+ * })
  * class PeopleComponent {
  *   constructor(http: Http) {
  *     http.get('people.json')

modules/angular2/src/router/hash_location_strategy.ts

@@ -23,8 +23,7 @@ import {EventListener, History, Location} from 'angular2/src/core/facade/browser
  *   Location
  * } from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {...},
  * ])

modules/angular2/src/router/instruction.ts

@@ -15,18 +15,16 @@ import {Url} from './url_parser';
  * ## Example
  *
  * ```
- * import {bootstrap, Component, View} from 'angular2/angular2';
+ * import {bootstrap, Component} from 'angular2/angular2';
  * import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {path: '/user/:id', component: UserCmp, as: 'UserCmp'},
  * ])
  * class AppCmp {}
  *
- * @Component({...})
+ * @Component({ template: 'user: {{id}}' })
- * @View({ template: 'user: {{id}}' })
  * class UserCmp {
  *   string: id;
  *   constructor(params: RouteParams) {
@@ -53,11 +51,10 @@ export class RouteParams {
  * ## Example
  *
  * ```
- * import {bootstrap, Component, View} from 'angular2/angular2';
+ * import {bootstrap, Component} from 'angular2/angular2';
  * import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {...},
  * ])

modules/angular2/src/router/interfaces.ts

@@ -23,13 +23,11 @@ var __ignore_me = global;
  *
  * ## Example
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {OnActivate, ComponentInstruction} from 'angular2/router';
  *
  * @Component({
- *   selector: 'my-cmp'
+ *   selector: 'my-cmp',
- * })
- * @View({
  *   template: '<div>hello!</div>'
  * })
  * class MyCmp implements OnActivate {
@@ -56,13 +54,11 @@ export interface OnActivate {
  *
  * ## Example
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
  *
  * @Component({
- *   selector: 'my-cmp'
+ *   selector: 'my-cmp',
- * })
- * @View({
  *   template: '<div>hello!</div>'
  * })
  * class MyCmp implements CanReuse, OnReuse {
@@ -92,13 +88,11 @@ export interface OnReuse {
  *
  * ## Example
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {OnDeactivate, ComponentInstruction} from 'angular2/router';
  *
  * @Component({
- *   selector: 'my-cmp'
+ *   selector: 'my-cmp',
- * })
- * @View({
  *   template: '<div>hello!</div>'
  * })
  * class MyCmp implements OnDeactivate {
@@ -129,13 +123,11 @@ export interface OnDeactivate {
  *
  * ## Example
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
  *
  * @Component({
- *   selector: 'my-cmp'
+ *   selector: 'my-cmp',
- * })
- * @View({
  *   template: '<div>hello!</div>'
  * })
  * class MyCmp implements CanReuse, OnReuse {
@@ -169,13 +161,11 @@ export interface CanReuse {
  *
  * ## Example
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {CanDeactivate, ComponentInstruction} from 'angular2/router';
  *
  * @Component({
- *   selector: 'my-cmp'
+ *   selector: 'my-cmp',
- * })
- * @View({
  *   template: '<div>hello!</div>'
  * })
  * class MyCmp implements CanDeactivate {

modules/angular2/src/router/lifecycle_annotations.ts

@@ -39,9 +39,7 @@ export {
  * import {CanActivate} from 'angular2/router';
  *
  * @Component({
- *   selector: 'control-panel-cmp'
+ *   selector: 'control-panel-cmp',
- * })
- * @View({
  *   template: '<div>Control Panel: ...</div>'
  * })
  * @CanActivate(() => checkIfUserIsLoggedIn())

modules/angular2/src/router/location.ts

@@ -16,11 +16,10 @@ import {OpaqueToken, Injectable, Optional, Inject} from 'angular2/src/core/di';
  * ## Example
  *
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {...},
  * ])
@@ -56,7 +55,7 @@ export const APP_BASE_HREF: OpaqueToken = CONST_EXPR(new OpaqueToken('appBaseHre
  * ## Example
  *
  * ```
- * import {Component, View} from 'angular2/angular2';
+ * import {Component} from 'angular2/angular2';
  * import {
  *   ROUTER_DIRECTIVES,
  *   ROUTER_PROVIDERS,
@@ -64,8 +63,7 @@ export const APP_BASE_HREF: OpaqueToken = CONST_EXPR(new OpaqueToken('appBaseHre
  *   Location
  * } from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {...},
  * ])

modules/angular2/src/router/path_location_strategy.ts

@@ -23,7 +23,7 @@ import {LocationStrategy} from './location_strategy';
  * ## Example
  *
  * ```
- * import {Component, View, provide} from 'angular2/angular2';
+ * import {Component, provide} from 'angular2/angular2';
  * import {
  *   APP_BASE_HREF
  *   ROUTER_DIRECTIVES,
@@ -32,8 +32,7 @@ import {LocationStrategy} from './location_strategy';
  *   Location
  * } from 'angular2/router';
  *
- * @Component({...})
+ * @Component({directives: [ROUTER_DIRECTIVES]})
- * @View({directives: [ROUTER_DIRECTIVES]})
  * @RouteConfig([
  *  {...},
  * ])