chore(core): remove @View annotation

Closes #7495

TOOLS_JS.md

@@ -117,7 +117,7 @@ speed things up is to use plain class fields in your expressions and avoid any
 kinds of computation. Example:
 
 ```typescript
-@View({
+@Component({
   template: '<button [enabled]="isEnabled">{{title}}</button>'
 })
 class FancyButton {

modules/angular2/docs/core/02_directives.md

@@ -112,9 +112,7 @@ Example of a component:
     'title',                      |  - title mapped to component title
     'open'                        |  - open attribute mapped to component's open property
   ],                              |
-})                                |
+  templateUrl: 'pane.html'        | URL of template HTML
-@View({                           | View annotation
-  templateUrl: 'pane.html'        |  - URL of template HTML
 })                                |
 class Pane {                      | Component controller class
   title:string;                   |  - title property
@@ -227,11 +225,9 @@ class MyService {}                   | Assume a service which needs to be inject
                                      |
 @Component({                         | Assume a top level application component which
   selector: 'my-app',                | configures the services to be injected.
-  viewBindings: [MyService]          |
+  viewBindings: [MyService],         |
-})                                   |
+  templateUrl: 'my_app.html',        | Assume we have a template that needs to be
-@View({                              | Assume we have a template that needs to be
+  directives: [House]                | configured with directives to be injected.
-  templateUrl: 'my_app.html',        | configured with directives to be injected.
-  directives: [House]                |
 })                                   |
 class MyApp {}                       |
                                      |
@@ -273,8 +269,6 @@ Here is an example of the kinds of injections which can be achieved:
 ```
 @Component({                         |
   selector: 'my-app'                 |
-})                                   |
-@View({                              |
   templateUrl: 'my_app.html',        |
   directives: [Form, FieldSet,       |
     Field, Primary]                  |
@@ -329,8 +323,6 @@ Shadow DOM provides an encapsulation for components, so as a general rule it doe
 ```
 @Component({
   selector: '[kid]'
-})
-@View({
   templateUrl: 'kid.html',
   directives: []
 })
@@ -347,8 +339,6 @@ class Kid {
 
 @Component({
   selector: '[dad]'
-})
-@View({
   templateUrl: 'dad.html',
   directives: [Kid]
 })
@@ -361,9 +351,7 @@ class Dad {
 
 @Component({
   selector: '[grandpa]',
-  viewBindings: []
+  viewBindings: [],
-})
-@View({
   templateUrl: 'grandpa.html',
   directives: [Dad]
 })

modules/angular2/docs/di/di_advanced.md

@@ -179,9 +179,7 @@ Both `MyComponent` and `MyDirective` are created on the same element.
   ],
   viewBindings: [
     bind('viewService').toValue('View_MyComponentService')
-  ]
+  ],
-})
-@View({
   template: `<needs-view-service></needs-view-service>`,
   directives: [NeedsViewService]
 })

modules/angular2/src/common/common_directives.ts

@@ -9,7 +9,7 @@ import {CORE_DIRECTIVES} from './directives';
  * NgModel).
  *
  * This collection can be used to quickly enumerate all the built-in directives in the `directives`
- * property of the `@Component` or `@View` decorators.
+ * property of the `@Component` decorator.
  *
  * ### Example
  *

modules/angular2/src/common/directives/core_directives.ts

@@ -11,7 +11,7 @@ import {NgPlural, NgPluralCase} from './ng_plural';
  * application.
  *
  * This collection can be used to quickly enumerate all the built-in directives in the `directives`
- * property of the `@View` annotation.
+ * property of the `@Component` annotation.
  *
  * ### Example ([live demo](http://plnkr.co/edit/yakGwpCdUkg0qfzX5m8g?p=preview))
  *

modules/angular2/src/common/directives/ng_switch.ts

@@ -32,8 +32,8 @@ export class SwitchView {
  * ### Example ([live demo](http://plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview))
  *
  * ```typescript
- * @Component({selector: 'app'})
+ * @Component({
- * @View({
+ *   selector: 'app',
  *   template: `
  *     <p>Value = {{value}}</p>
  *     <button (click)="inc()">Increment</button>

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

@@ -50,7 +50,7 @@ export {ControlValueAccessor} from './directives/control_value_accessor';
 
 /**
  *
- * A list of all the form directives used as part of a `@View` annotation.
+ * A list of all the form directives used as part of a `@Component` annotation.
  *
  *  This is a shorthand for importing them each individually.
  *

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

@@ -33,8 +33,6 @@ const controlGroupProvider =
  * @Component({
  *   selector: 'my-app',
  *   directives: [FORM_DIRECTIVES],
- * })
- * @View({
  *   template: `
  *     <div>
  *       <h2>Angular2 Control &amp; ControlGroup Example</h2>

modules/angular2/src/common/pipes/common_pipes.ts

@@ -20,7 +20,7 @@ import {CONST_EXPR} from 'angular2/src/facade/lang';
  * application.
  *
  * This collection can be used to quickly enumerate all the built-in pipes in the `pipes`
- * property of the `@Component` or `@View` decorators.
+ * property of the `@Component` decorator.
  */
 export const COMMON_PIPES = CONST_EXPR([
   AsyncPipe,

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

@@ -45,7 +45,7 @@ export class ViewResolver {
     if (isPresent(compMeta)) {
       if (isBlank(compMeta.template) && isBlank(compMeta.templateUrl) && isBlank(viewMeta)) {
         throw new BaseException(
-            `Component '${stringify(component)}' must have either 'template', 'templateUrl', or '@View' set.`);
+            `Component '${stringify(component)}' must have either 'template' or 'templateUrl' set.`);
 
       } else if (isPresent(compMeta.template) && isPresent(viewMeta)) {
         this._throwMixingViewAndComponent("template", component);
@@ -84,7 +84,8 @@ export class ViewResolver {
       }
     } else {
       if (isBlank(viewMeta)) {
-        throw new BaseException(`No View decorator found on component '${stringify(component)}'`);
+        throw new BaseException(
+            `Could not compile '${stringify(component)}' because it is not a component.`);
       } else {
         return viewMeta;
       }

modules/angular2/src/core/metadata.ts

@@ -254,7 +254,6 @@ export interface ComponentFactory {
  * import {Component, View} from "angular2/core";
  *
  * @Component({...})
- * @View({...})
  * class MyComponent {
  *   constructor() {
  *     ...
@@ -481,8 +480,7 @@ export interface HostListenerFactory {
 /**
  * Declare reusable UI building blocks for an application.
  *
- * Each Angular component requires a single `@Component` and at least one `@View` annotation. The
+ * Each Angular component requires a single `@Component` annotation. The `@Component`
- * `@Component`
  * annotation specifies when a component is instantiated, and which properties and hostListeners it
  * binds to.
  *
@@ -493,8 +491,6 @@ export interface HostListenerFactory {
  *
  * All template expressions and statements are then evaluated against the component instance.
  *
- * For details on the `@View` annotation, see {@link ViewMetadata}.
- *
  * ## Lifecycle hooks
  *
  * When the component class implements some {@link angular2/lifecycle_hooks} the callbacks are
@@ -918,8 +914,7 @@ export var Directive: DirectiveFactory = <DirectiveFactory>makeDecorator(Directi
  * }
  * ```
  */
-export var View: ViewFactory =
+var View: ViewFactory = <ViewFactory>makeDecorator(ViewMetadata, (fn: any) => fn.View = View);
-    <ViewFactory>makeDecorator(ViewMetadata, (fn: any) => fn.View = View);
 
 /**
  * Specifies that a constant attribute value should be injected.
@@ -1154,8 +1149,8 @@ export var ViewChild: ViewChildFactory = makePropDecorator(ViewChildMetadata);
  * ### Example ([live demo](http://plnkr.co/edit/eNsFHDf7YjyM6IzKxM1j?p=preview))
  *
  * ```javascript
- * @Component({...})
+ * @Component({
- * @View({
+ *   ...,
  *   template: `
  *     <item> a </item>
  *     <item> b </item>

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

@@ -242,8 +242,8 @@ export class ContentChildMetadata extends QueryMetadata {
  * ### Example ([live demo](http://plnkr.co/edit/eNsFHDf7YjyM6IzKxM1j?p=preview))
  *
  * ```javascript
- * @Component({...})
+ * @Component({
- * @View({
+ *   ...,
  *   template: `
  *     <item> a </item>
  *     <item> b </item>

modules/angular2/src/router/instruction.ts

@@ -59,8 +59,10 @@ export class RouteParams {
  * ])
  * class AppCmp {}
  *
- * @Component({...})
+ * @Component({
- * @View({ template: 'user: {{isAdmin}}' })
+ *   ...,
+ *   template: 'user: {{isAdmin}}'
+ * })
  * class UserCmp {
  *   string: isAdmin;
  *   constructor(data: RouteData) {

modules/angular2/test/common/directives/ng_class_spec.ts

@@ -15,7 +15,7 @@ import {
   xit,
 } from 'angular2/testing_internal';
 import {ListWrapper, StringMapWrapper, SetWrapper} from 'angular2/src/facade/collection';
-import {Component, View, provide} from 'angular2/core';
+import {Component, provide} from 'angular2/core';
 import {NgFor} from 'angular2/common';
 import {NgClass} from 'angular2/src/common/directives/ng_class';
 
@@ -528,8 +528,7 @@ export function main() {
   })
 }
 
-@Component({selector: 'test-cmp'})
+@Component({selector: 'test-cmp', directives: [NgClass, NgFor], template: ''})
-@View({directives: [NgClass, NgFor]})
 class TestComponent {
   condition: boolean = true;
   items: any[];

modules/angular2/test/common/directives/ng_for_spec.ts

@@ -14,7 +14,7 @@ import {
 } from 'angular2/testing_internal';
 
 import {ListWrapper} from 'angular2/src/facade/collection';
-import {Component, View, TemplateRef, ContentChild} from 'angular2/core';
+import {Component, TemplateRef, ContentChild} from 'angular2/core';
 import {NgFor} from 'angular2/src/common/directives/ng_for';
 import {NgIf} from 'angular2/src/common/directives/ng_if';
 import {By} from 'angular2/platform/common_dom';
@@ -472,8 +472,7 @@ class Foo {
   toString() { return 'foo'; }
 }
 
-@Component({selector: 'test-cmp'})
+@Component({selector: 'test-cmp', directives: [NgFor, NgIf], template: ''})
-@View({directives: [NgFor, NgIf]})
 class TestComponent {
   @ContentChild(TemplateRef) contentTpl: TemplateRef;
   items: any;
@@ -482,8 +481,7 @@ class TestComponent {
   trackByIndex(index: number, item: any): number { return index; }
 }
 
-@Component({selector: 'outer-cmp'})
+@Component({selector: 'outer-cmp', directives: [TestComponent], template: ''})
-@View({directives: [TestComponent]})
 class ComponentUsingTestComponent {
   items: any;
   constructor() { this.items = [1, 2]; }

modules/angular2/test/common/directives/ng_if_spec.ts

@@ -14,7 +14,7 @@ import {
 
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {NgIf} from 'angular2/common';
 
 import {IS_DART} from 'angular2/src/facade/lang';
@@ -224,8 +224,7 @@ export function main() {
   });
 }
 
-@Component({selector: 'test-cmp'})
+@Component({selector: 'test-cmp', directives: [NgIf], template: ''})
-@View({directives: [NgIf]})
 class TestComponent {
   booleanCondition: boolean;
   nestedBooleanCondition: boolean;

modules/angular2/test/common/directives/ng_plural_spec.ts

@@ -13,7 +13,7 @@ import {
   xit,
 } from 'angular2/testing_internal';
 
-import {Component, View, Injectable, provide} from 'angular2/core';
+import {Component, Injectable, provide} from 'angular2/core';
 import {NgPlural, NgPluralCase, NgLocalization} from 'angular2/common';
 
 export function main() {
@@ -128,8 +128,7 @@ export class TestLocalizationMap extends NgLocalization {
 }
 
 
-@Component({selector: 'test-cmp'})
+@Component({selector: 'test-cmp', directives: [NgPlural, NgPluralCase], template: ''})
-@View({directives: [NgPlural, NgPluralCase]})
 class TestComponent {
   switchValue: number;
 

modules/angular2/test/common/directives/ng_style_spec.ts

@@ -16,7 +16,7 @@ import {
 
 import {StringMapWrapper} from 'angular2/src/facade/collection';
 
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 import {NgStyle} from 'angular2/src/common/directives/ng_style';
@@ -137,8 +137,7 @@ export function main() {
   })
 }
 
-@Component({selector: 'test-cmp'})
+@Component({selector: 'test-cmp', directives: [NgStyle], template: ''})
-@View({directives: [NgStyle]})
 class TestComponent {
   expr;
 }

modules/angular2/test/common/directives/ng_switch_spec.ts

@@ -12,7 +12,7 @@ import {
   xit,
 } from 'angular2/testing_internal';
 
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 
 import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/common/directives/ng_switch';
 
@@ -145,8 +145,8 @@ export function main() {
   });
 }
 
-@Component({selector: 'test-cmp'})
+@Component(
-@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
+    {selector: 'test-cmp', directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault], template: ''})
 class TestComponent {
   switchValue: any;
   when1: any;

modules/angular2/test/common/directives/non_bindable_spec.ts

@@ -12,7 +12,7 @@ import {
   xit,
 } from 'angular2/testing_internal';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
-import {Component, Directive, View} from 'angular2/core';
+import {Component, Directive} from 'angular2/core';
 import {ElementRef} from 'angular2/src/core/linker/element_ref';
 
 export function main() {
@@ -65,8 +65,7 @@ class TestDirective {
   constructor(el: ElementRef) { DOM.addClass(el.nativeElement, 'compiled'); }
 }
 
-@Component({selector: 'test-cmp'})
+@Component({selector: 'test-cmp', directives: [TestDirective], template: ''})
-@View({directives: [TestDirective]})
 class TestComponent {
   text: string;
   constructor() { this.text = 'foo'; }

modules/angular2/test/common/forms/integration_spec.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, View, Output, EventEmitter} from 'angular2/core';
+import {Component, Directive, Output, EventEmitter} from 'angular2/core';
 import {
   ComponentFixture,
   afterEach,

modules/angular2/test/compiler/runtime_compiler_spec.ts

@@ -13,7 +13,7 @@ import {
   beforeEachProviders
 } from 'angular2/testing_internal';
 
-import {Component, View, provide} from 'angular2/core';
+import {Component, provide} from 'angular2/core';
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {SpyTemplateCompiler} from './spies';
 import {TemplateCompiler} from 'angular2/src/compiler/compiler';
@@ -52,7 +52,6 @@ export function main() {
   });
 }
 
-@Component({selector: 'some-comp'})
+@Component({selector: 'some-comp', template: ''})
-@View({template: ''})
 class SomeComponent {
 }

modules/angular2/test/compiler/runtime_metadata_spec.ts

@@ -18,7 +18,6 @@ import {RuntimeMetadataResolver} from 'angular2/src/compiler/runtime_metadata';
 import {LifecycleHooks, LIFECYCLE_HOOKS_VALUES} from 'angular2/src/core/linker/interfaces';
 import {
   Component,
-  View,
   Directive,
   ViewEncapsulation,
   ChangeDetectionStrategy,
@@ -125,9 +124,7 @@ class ComponentWithoutModuleId {
   },
   exportAs: 'someExportAs',
   moduleId: 'someModuleId',
-  changeDetection: ChangeDetectionStrategy.CheckAlways
+  changeDetection: ChangeDetectionStrategy.CheckAlways,
-})
-@View({
   template: 'someTemplate',
   templateUrl: 'someTemplateUrl',
   encapsulation: ViewEncapsulation.Emulated,

modules/angular2/test/compiler/template_compiler_spec.ts

@@ -37,7 +37,7 @@ import {AppView, AppProtoView} from 'angular2/src/core/linker/view';
 import {AppElement} from 'angular2/src/core/linker/element';
 import {Locals, ChangeDetectorGenConfig} from 'angular2/src/core/change_detection/change_detection';
 
-import {Component, View, Directive, provide, RenderComponentType} from 'angular2/core';
+import {Component, Directive, provide, RenderComponentType} from 'angular2/core';
 
 import {TEST_PROVIDERS} from './test_bindings';
 import {
@@ -338,9 +338,7 @@ export class UpperCasePipe implements PipeTransform {
   selector: 'comp-a',
   host: {'[title]': '\'someHostValue\''},
   moduleId: THIS_MODULE_ID,
-  exportAs: 'someExportAs'
+  exportAs: 'someExportAs',
-})
-@View({
   template: '<a [href]="\'someCtxValue\' | uppercase"></a>',
   styles: ['div {color: red}'],
   encapsulation: ViewEncapsulation.None,
@@ -349,8 +347,9 @@ export class UpperCasePipe implements PipeTransform {
 export class CompWithBindingsAndStylesAndPipes {
 }
 
-@Component({selector: 'tree', moduleId: THIS_MODULE_ID})
+@Component({
-@View({
+  selector: 'tree',
+  moduleId: THIS_MODULE_ID,
   template: '<template><tree></tree></template>',
   directives: [TreeComp],
   encapsulation: ViewEncapsulation.None
@@ -358,8 +357,9 @@ export class CompWithBindingsAndStylesAndPipes {
 export class TreeComp {
 }
 
-@Component({selector: 'comp-wit-dup-tpl', moduleId: THIS_MODULE_ID})
+@Component({
-@View({
+  selector: 'comp-wit-dup-tpl',
+  moduleId: THIS_MODULE_ID,
   template: '<tree></tree>',
   directives: [TreeComp, TreeComp],
   encapsulation: ViewEncapsulation.None
@@ -367,13 +367,18 @@ export class TreeComp {
 export class CompWithDupDirectives {
 }
 
-@Component({selector: 'comp-url', moduleId: THIS_MODULE_ID})
+@Component({
-@View({templateUrl: 'compUrl.html', encapsulation: ViewEncapsulation.None})
+  selector: 'comp-url',
+  moduleId: THIS_MODULE_ID,
+  templateUrl: 'compUrl.html',
+  encapsulation: ViewEncapsulation.None
+})
 export class CompWithTemplateUrl {
 }
 
-@Component({selector: 'comp-tpl', moduleId: THIS_MODULE_ID})
+@Component({
-@View({
+  selector: 'comp-tpl',
+  moduleId: THIS_MODULE_ID,
   template: '<template><a [href]="\'someEmbeddedValue\'"></a></template>',
   encapsulation: ViewEncapsulation.None
 })
@@ -382,18 +387,22 @@ export class CompWithEmbeddedTemplate {
 
 
 @Directive({selector: 'plain'})
-@View({template: ''})
 export class NonComponent {
 }
 
 
-@Component({selector: 'comp2', moduleId: THIS_MODULE_ID})
+@Component({
-@View({template: '<b></b>', encapsulation: ViewEncapsulation.None})
+  selector: 'comp2',
+  moduleId: THIS_MODULE_ID,
+  template: '<b></b>',
+  encapsulation: ViewEncapsulation.None
+})
 export class Comp2 {
 }
 
-@Component({selector: 'comp1', moduleId: THIS_MODULE_ID})
+@Component({
-@View({
+  selector: 'comp1',
+  moduleId: THIS_MODULE_ID,
   template: '<a></a>, <comp2></comp2>',
   encapsulation: ViewEncapsulation.None,
   directives: [Comp2]
@@ -401,8 +410,9 @@ export class Comp2 {
 export class Comp1 {
 }
 
-@Component({selector: 'comp-with-2nested', moduleId: THIS_MODULE_ID})
+@Component({
-@View({
+  selector: 'comp-with-2nested',
+  moduleId: THIS_MODULE_ID,
   template: '<comp1></comp1>, <comp2></comp2>',
   encapsulation: ViewEncapsulation.None,
   directives: [Comp1, Comp2]

modules/angular2/test/core/debug/debug_node_spec.ts

@@ -22,7 +22,7 @@ import {Injectable} from 'angular2/core';
 import {NgFor, NgIf} from 'angular2/common';
 import {By} from 'angular2/platform/common_dom';
 
-import {Directive, Component, View, Input} from 'angular2/src/core/metadata';
+import {Directive, Component, Input} from 'angular2/src/core/metadata';
 
 @Injectable()
 class Logger {
@@ -43,8 +43,8 @@ class MessageDir {
   set message(newMessage) { this.logger.add(newMessage); }
 }
 
-@Component({selector: 'child-comp'})
+@Component({
-@View({
+  selector: 'child-comp',
   template: `<div class="child" message="child">
                <span class="childnested" message="nestedchild">Child</span>
              </div>
@@ -58,8 +58,9 @@ class ChildComp {
   constructor() { this.childBinding = 'Original'; }
 }
 
-@Component({selector: 'parent-comp', viewProviders: [Logger]})
+@Component({
-@View({
+  selector: 'parent-comp',
+  viewProviders: [Logger],
   template: `<div class="parent" message="parent">
                <span class="parentnested" message="nestedparent">Parent</span>
              </div>
@@ -81,8 +82,8 @@ class CustomEmitter {
   constructor() { this.myevent = new EventEmitter(); }
 }
 
-@Component({selector: 'events-comp'})
+@Component({
-@View({
+  selector: 'events-comp',
   template: `<button (click)="handleClick()"></button>
              <custom-emitter (myevent)="handleCustom()"></custom-emitter>`,
   directives: [CustomEmitter],
@@ -102,8 +103,9 @@ class EventsComp {
   handleCustom() { this.customed = true; }
 }
 
-@Component({selector: 'cond-content-comp', viewProviders: [Logger]})
+@Component({
-@View({
+  selector: 'cond-content-comp',
+  viewProviders: [Logger],
   template: `<div class="child" message="child" *ngIf="myBool"><ng-content></ng-content></div>`,
   directives: [NgIf, MessageDir],
 })
@@ -112,8 +114,9 @@ class ConditionalContentComp {
   myBool: boolean = false;
 }
 
-@Component({selector: 'conditional-parent-comp', viewProviders: [Logger]})
+@Component({
-@View({
+  selector: 'conditional-parent-comp',
+  viewProviders: [Logger],
   template: `<span class="parent" [innerHtml]="parentBinding"></span>
             <cond-content-comp class="cond-content-comp-class">
               <span class="from-parent"></span>
@@ -126,8 +129,9 @@ class ConditionalParentComp {
   constructor() { this.parentBinding = 'OriginalParent'; }
 }
 
-@Component({selector: 'using-for', viewProviders: [Logger]})
+@Component({
-@View({
+  selector: 'using-for',
+  viewProviders: [Logger],
   template: `<span *ngFor="#thing of stuff" [innerHtml]="thing"></span>
             <ul message="list">
               <li *ngFor="#item of stuff" [innerHtml]="item"></li>

modules/angular2/test/core/directive_lifecycle_integration_spec.ts

@@ -22,7 +22,7 @@ import {
   AfterViewInit,
   AfterViewChecked
 } from 'angular2/core';
-import {Directive, Component, View, ViewMetadata} from 'angular2/src/core/metadata';
+import {Directive, Component, ViewMetadata} from 'angular2/src/core/metadata';
 
 export function main() {
   describe('directive lifecycle integration spec', () => {
@@ -63,10 +63,14 @@ class LifecycleDir implements DoCheck {
   ngDoCheck() { this._log.add("child_ngDoCheck"); }
 }
 
-@Component({selector: "[lifecycle]", inputs: ['field']})
+@Component({
-@View({template: `<div lifecycle-dir></div>`, directives: [LifecycleDir]})
+  selector: "[lifecycle]",
-class LifecycleCmp implements OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked,
+  inputs: ['field'],
-    AfterViewInit, AfterViewChecked {
+  template: `<div lifecycle-dir></div>`,
+  directives: [LifecycleDir]
+})
+class LifecycleCmp implements OnChanges,
+    OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked {
   field;
   constructor(private _log: Log) {}
 
@@ -85,7 +89,6 @@ class LifecycleCmp implements OnChanges, OnInit, DoCheck, AfterContentInit, Afte
   ngAfterViewChecked() { this._log.add("ngAfterViewChecked"); }
 }
 
-@Component({selector: 'my-comp'})
+@Component({selector: 'my-comp', directives: []})
-@View({directives: []})
 class MyComp {
 }

modules/angular2/test/core/forward_ref_integration_spec.ts

@@ -19,8 +19,7 @@ import {
   Directive,
   Inject,
   Query,
-  QueryList,
+  QueryList
-  View
 } from 'angular2/core';
 import {NgFor} from 'angular2/common';
 import {Type} from 'angular2/src/facade/lang';
@@ -39,16 +38,17 @@ export function main() {
   });
 }
 
-@Component({selector: 'app', viewProviders: [forwardRef(() => Frame)]})
+@Component({
-@View({
+  selector: 'app',
+  viewProviders: [forwardRef(() => Frame)],
   template: `<door><lock></lock></door>`,
   directives: [forwardRef(() => Door), forwardRef(() => Lock)],
 })
 class App {
 }
 
-@Component({selector: 'lock'})
+@Component({
-@View({
+  selector: 'lock',
   directives: [NgFor],
   template: `{{frame.name}}(<span *ngFor="var lock of locks">{{lock.name}}</span>)`,
 })

modules/angular2/test/core/linker/dynamic_component_loader_spec.ts

@@ -19,7 +19,7 @@ import {
 import {OnDestroy} from 'angular2/core';
 import {Injector} from 'angular2/core';
 import {NgIf} from 'angular2/common';
-import {Component, View, ViewMetadata} from 'angular2/src/core/metadata';
+import {Component, ViewMetadata} from 'angular2/src/core/metadata';
 import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
 import {ElementRef, ElementRef_} from 'angular2/src/core/linker/element_ref';
 import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
@@ -369,10 +369,7 @@ function createRootElement(doc: any, name: string): any {
   return rootEl;
 }
 
-@Component({
+@Component({selector: 'child-cmp', template: '{{ctxProp}}'})
-  selector: 'child-cmp',
-})
-@View({template: '{{ctxProp}}'})
 class ChildComp {
   ctxProp: string;
   constructor() { this.ctxProp = 'hello'; }
@@ -381,8 +378,11 @@ class ChildComp {
 
 class DynamicallyCreatedComponentService {}
 
-@Component({selector: 'hello-cmp', viewProviders: [DynamicallyCreatedComponentService]})
+@Component({
-@View({template: "{{greeting}}"})
+  selector: 'hello-cmp',
+  viewProviders: [DynamicallyCreatedComponentService],
+  template: "{{greeting}}"
+})
 class DynamicallyCreatedCmp implements OnDestroy {
   greeting: string;
   dynamicallyCreatedComponentService: DynamicallyCreatedComponentService;
@@ -396,48 +396,41 @@ class DynamicallyCreatedCmp implements OnDestroy {
   ngOnDestroy() { this.destroyed = true; }
 }
 
-@Component({selector: 'dummy'})
+@Component({selector: 'dummy', template: "DynamicallyLoaded;"})
-@View({template: "DynamicallyLoaded;"})
 class DynamicallyLoaded {
 }
 
-@Component({selector: 'dummy'})
+@Component({selector: 'dummy', template: "DynamicallyLoaded;"})
-@View({template: "DynamicallyLoaded;"})
 class DynamicallyLoadedThrows {
   constructor() { throw new BaseException("ThrownInConstructor"); }
 }
 
-@Component({selector: 'dummy'})
+@Component({selector: 'dummy', template: "DynamicallyLoaded2;"})
-@View({template: "DynamicallyLoaded2;"})
 class DynamicallyLoaded2 {
 }
 
-@Component({selector: 'dummy', host: {'[id]': 'id'}})
+@Component({selector: 'dummy', host: {'[id]': 'id'}, template: "DynamicallyLoadedWithHostProps;"})
-@View({template: "DynamicallyLoadedWithHostProps;"})
 class DynamicallyLoadedWithHostProps {
   id: string;
 
   constructor() { this.id = "default"; }
 }
 
-@Component({selector: 'dummy'})
+@Component({selector: 'dummy', template: "dynamic(<ng-content></ng-content>)"})
-@View({template: "dynamic(<ng-content></ng-content>)"})
 class DynamicallyLoadedWithNgContent {
   id: string;
 
   constructor() { this.id = "default"; }
 }
 
-@Component({selector: 'location'})
+@Component({selector: 'location', template: "Location;"})
-@View({template: "Location;"})
 class Location {
   elementRef: ElementRef;
 
   constructor(elementRef: ElementRef) { this.elementRef = elementRef; }
 }
 
-@Component({selector: 'my-comp'})
+@Component({selector: 'my-comp', directives: []})
-@View({directives: []})
 class MyComp {
   ctxBoolProp: boolean;
 

modules/angular2/test/core/linker/integration_spec.ts

@@ -71,7 +71,6 @@ import {
 import {
   Directive,
   Component,
-  View,
   ViewMetadata,
   Attribute,
   Query,
@@ -1358,8 +1357,7 @@ function declareTests() {
            try {
              tcb.createAsync(ComponentWithoutView);
            } catch (e) {
-             expect(e.message)
+             expect(e.message).toContain(`must have either 'template' or 'templateUrl' set.`);
-                 .toContain(`must have either 'template', 'templateUrl', or '@View' set.`);
              return null;
            }
          }));
@@ -1936,8 +1934,7 @@ class MyService {
   constructor() { this.greeting = 'hello'; }
 }
 
-@Component({selector: 'simple-imp-cmp'})
+@Component({selector: 'simple-imp-cmp', template: ''})
-@View({template: ''})
 @Injectable()
 class SimpleImperativeViewComponent {
   done;
@@ -1979,9 +1976,12 @@ class DirectiveWithTitleAndHostProperty {
   title: string;
 }
 
-@Component(
+@Component({
-    {selector: 'push-cmp', inputs: ['prop'], changeDetection: ChangeDetectionStrategy.OnPush})
+  selector: 'push-cmp',
-@View({template: '{{field}}'})
+  inputs: ['prop'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '{{field}}'
+})
 @Injectable()
 class PushCmp {
   numberOfChecks: number;
@@ -1998,9 +1998,9 @@ class PushCmp {
 @Component({
   selector: 'push-cmp-with-ref',
   inputs: ['prop'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '{{field}}'
 })
-@View({template: '{{field}}'})
 @Injectable()
 class PushCmpWithRef {
   numberOfChecks: number;
@@ -2055,8 +2055,7 @@ class PushCmpWithAsyncPipe {
   resolve(value) { this.completer.resolve(value); }
 }
 
-@Component({selector: 'my-comp'})
+@Component({selector: 'my-comp', directives: []})
-@View({directives: []})
 @Injectable()
 class MyComp {
   ctxProp: string;
@@ -2071,8 +2070,13 @@ class MyComp {
   throwError() { throw 'boom'; }
 }
 
-@Component({selector: 'child-cmp', inputs: ['dirProp'], viewProviders: [MyService]})
+@Component({
-@View({directives: [MyDir], template: '{{ctxProp}}'})
+  selector: 'child-cmp',
+  inputs: ['dirProp'],
+  viewProviders: [MyService],
+  directives: [MyDir],
+  template: '{{ctxProp}}'
+})
 @Injectable()
 class ChildComp {
   ctxProp: string;
@@ -2083,15 +2087,13 @@ class ChildComp {
   }
 }
 
-@Component({selector: 'child-cmp-no-template'})
+@Component({selector: 'child-cmp-no-template', directives: [], template: ''})
-@View({directives: [], template: ''})
 @Injectable()
 class ChildCompNoTemplate {
   ctxProp: string = 'hello';
 }
 
-@Component({selector: 'child-cmp-svc'})
+@Component({selector: 'child-cmp-svc', template: '{{ctxProp}}'})
-@View({template: '{{ctxProp}}'})
 @Injectable()
 class ChildCompUsingService {
   ctxProp: string;
@@ -2105,8 +2107,11 @@ class SomeDirective {
 
 class SomeDirectiveMissingAnnotation {}
 
-@Component({selector: 'cmp-with-host'})
+@Component({
-@View({template: '<p>Component with an injected host</p>', directives: [SomeDirective]})
+  selector: 'cmp-with-host',
+  template: '<p>Component with an injected host</p>',
+  directives: [SomeDirective]
+})
 @Injectable()
 class CompWithHost {
   myHost: SomeDirective;
@@ -2283,8 +2288,8 @@ class ToolbarViewContainer {
   }
 }
 
-@Component({selector: 'toolbar'})
+@Component({
-@View({
+  selector: 'toolbar',
   template: 'TOOLBAR(<div *ngFor="var part of query" [toolbarVc]="part"></div>)',
   directives: [ToolbarViewContainer, NgFor]
 })
@@ -2321,9 +2326,9 @@ function createInjectableWithLogging(inj: Injector) {
   selector: 'component-providing-logging-injectable',
   providers: [
     new Provider(InjectableService, {useFactory: createInjectableWithLogging, deps: [Injector]})
-  ]
+  ],
+  template: ''
 })
-@View({template: ''})
 @Injectable()
 class ComponentProvidingLoggingInjectable {
   created: boolean = false;
@@ -2335,8 +2340,11 @@ class ComponentProvidingLoggingInjectable {
 class DirectiveProvidingInjectable {
 }
 
-@Component({selector: 'directive-providing-injectable', viewProviders: [[InjectableService]]})
+@Component({
-@View({template: ''})
+  selector: 'directive-providing-injectable',
+  viewProviders: [[InjectableService]],
+  template: ''
+})
 @Injectable()
 class DirectiveProvidingInjectableInView {
 }
@@ -2344,16 +2352,15 @@ class DirectiveProvidingInjectableInView {
 @Component({
   selector: 'directive-providing-injectable',
   providers: [new Provider(InjectableService, {useValue: 'host'})],
-  viewProviders: [new Provider(InjectableService, {useValue: 'view'})]
+  viewProviders: [new Provider(InjectableService, {useValue: 'view'})],
+  template: ''
 })
-@View({template: ''})
 @Injectable()
 class DirectiveProvidingInjectableInHostAndView {
 }
 
 
-@Component({selector: 'directive-consuming-injectable'})
+@Component({selector: 'directive-consuming-injectable', template: ''})
-@View({template: ''})
 @Injectable()
 class DirectiveConsumingInjectable {
   injectable;
@@ -2369,8 +2376,7 @@ class DirectiveContainingDirectiveConsumingAnInjectable {
   directive;
 }
 
-@Component({selector: 'directive-consuming-injectable-unbounded'})
+@Component({selector: 'directive-consuming-injectable-unbounded', template: ''})
-@View({template: ''})
 @Injectable()
 class DirectiveConsumingInjectableUnbounded {
   injectable;
@@ -2413,9 +2419,7 @@ function createParentBus(peb) {
   providers: [
     new Provider(EventBus,
                  {useFactory: createParentBus, deps: [[EventBus, new SkipSelfMetadata()]]})
-  ]
+  ],
-})
-@View({
   directives: [forwardRef(() => ChildConsumingEventBus)],
   template: `
     <child-consuming-event-bus></child-consuming-event-bus>

modules/angular2/test/core/linker/projection_integration_spec.ts

@@ -30,7 +30,6 @@ import {
   Directive,
   ElementRef,
   TemplateRef,
-  View,
   ViewContainerRef,
   ViewEncapsulation,
   ViewMetadata
@@ -580,26 +579,28 @@ export function main() {
   });
 }
 
-@Component({selector: 'main'})
+@Component({selector: 'main', template: '', directives: []})
-@View({template: '', directives: []})
 class MainComp {
   text: string = '';
 }
 
-@Component({selector: 'other'})
+@Component({selector: 'other', template: '', directives: []})
-@View({template: '', directives: []})
 class OtherComp {
   text: string = '';
 }
 
-@Component({selector: 'simple', inputs: ['stringProp']})
+@Component({
-@View({template: 'SIMPLE(<ng-content></ng-content>)', directives: []})
+  selector: 'simple',
+  inputs: ['stringProp'],
+  template: 'SIMPLE(<ng-content></ng-content>)',
+  directives: []
+})
 class Simple {
   stringProp: string = '';
 }
 
-@Component({selector: 'simple-native1'})
+@Component({
-@View({
+  selector: 'simple-native1',
   template: 'SIMPLE1(<content></content>)',
   directives: [],
   encapsulation: ViewEncapsulation.Native,
@@ -608,8 +609,8 @@ class Simple {
 class SimpleNative1 {
 }
 
-@Component({selector: 'simple-native2'})
+@Component({
-@View({
+  selector: 'simple-native2',
   template: 'SIMPLE2(<content></content>)',
   directives: [],
   encapsulation: ViewEncapsulation.Native,
@@ -618,13 +619,12 @@ class SimpleNative1 {
 class SimpleNative2 {
 }
 
-@Component({selector: 'empty'})
+@Component({selector: 'empty', template: '', directives: []})
-@View({template: '', directives: []})
 class Empty {
 }
 
-@Component({selector: 'multiple-content-tags'})
+@Component({
-@View({
+  selector: 'multiple-content-tags',
   template: '(<ng-content SELECT=".left"></ng-content>, <ng-content></ng-content>)',
   directives: []
 })
@@ -645,16 +645,16 @@ class ProjectDirective {
   hide() { this.vc.clear(); }
 }
 
-@Component({selector: 'outer-with-indirect-nested'})
+@Component({
-@View({
+  selector: 'outer-with-indirect-nested',
   template: 'OUTER(<simple><div><ng-content></ng-content></div></simple>)',
   directives: [Simple]
 })
 class OuterWithIndirectNestedComponent {
 }
 
-@Component({selector: 'outer'})
+@Component({
-@View({
+  selector: 'outer',
   template:
       'OUTER(<inner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></inner>)',
   directives: [forwardRef(() => InnerComponent)]
@@ -662,8 +662,8 @@ class OuterWithIndirectNestedComponent {
 class OuterComponent {
 }
 
-@Component({selector: 'inner'})
+@Component({
-@View({
+  selector: 'inner',
   template:
       'INNER(<innerinner><ng-content select=".left" class="left"></ng-content><ng-content></ng-content></innerinner>)',
   directives: [forwardRef(() => InnerInnerComponent)]
@@ -671,16 +671,16 @@ class OuterComponent {
 class InnerComponent {
 }
 
-@Component({selector: 'innerinner'})
+@Component({
-@View({
+  selector: 'innerinner',
   template: 'INNERINNER(<ng-content select=".left"></ng-content>,<ng-content></ng-content>)',
   directives: []
 })
 class InnerInnerComponent {
 }
 
-@Component({selector: 'conditional-content'})
+@Component({
-@View({
+  selector: 'conditional-content',
   template:
       '<div>(<div *manual><ng-content select=".left"></ng-content></div>, <ng-content></ng-content>)</div>',
   directives: [ManualViewportDirective]
@@ -688,8 +688,8 @@ class InnerInnerComponent {
 class ConditionalContentComponent {
 }
 
-@Component({selector: 'conditional-text'})
+@Component({
-@View({
+  selector: 'conditional-text',
   template:
       'MAIN(<template manual>FIRST(<template manual>SECOND(<ng-content></ng-content>)</template>)</template>)',
   directives: [ManualViewportDirective]
@@ -697,16 +697,17 @@ class ConditionalContentComponent {
 class ConditionalTextComponent {
 }
 
-@Component({selector: 'tab'})
+@Component({
-@View({
+  selector: 'tab',
   template: '<div><div *manual>TAB(<ng-content></ng-content>)</div></div>',
   directives: [ManualViewportDirective]
 })
 class Tab {
 }
 
-@Component({selector: 'tree', inputs: ['depth']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['depth'],
   template: 'TREE({{depth}}:<tree *manual [depth]="depth+1"></tree>)',
   directives: [ManualViewportDirective, Tree]
 })
@@ -715,8 +716,7 @@ class Tree {
 }
 
 
-@Component({selector: 'cmp-d'})
+@Component({selector: 'cmp-d', template: `<d>{{tagName}}</d>`})
-@View({template: `<d>{{tagName}}</d>`})
 class CmpD {
   tagName: string;
   constructor(elementRef: ElementRef) {
@@ -725,8 +725,7 @@ class CmpD {
 }
 
 
-@Component({selector: 'cmp-c'})
+@Component({selector: 'cmp-c', template: `<c>{{tagName}}</c>`})
-@View({template: `<c>{{tagName}}</c>`})
 class CmpC {
   tagName: string;
   constructor(elementRef: ElementRef) {
@@ -735,43 +734,37 @@ class CmpC {
 }
 
 
-@Component({selector: 'cmp-b'})
+@Component({selector: 'cmp-b', template: `<ng-content></ng-content><cmp-d></cmp-d>`, directives: [CmpD]})
-@View({template: `<ng-content></ng-content><cmp-d></cmp-d>`, directives: [CmpD]})
 class CmpB {
 }
 
 
-@Component({selector: 'cmp-a'})
+@Component({selector: 'cmp-a', template: `<ng-content></ng-content><cmp-c></cmp-c>`, directives: [CmpC]})
-@View({template: `<ng-content></ng-content><cmp-c></cmp-c>`, directives: [CmpC]})
 class CmpA {
 }
 
-@Component({selector: 'cmp-b11'})
+@Component({selector: 'cmp-b11', template: `{{'b11'}}`, directives: []})
-@View({template: `{{'b11'}}`, directives: []})
 class CmpB11 {
 }
 
-@Component({selector: 'cmp-b12'})
+@Component({selector: 'cmp-b12', template: `{{'b12'}}`, directives: []})
-@View({template: `{{'b12'}}`, directives: []})
 class CmpB12 {
 }
 
-@Component({selector: 'cmp-b21'})
+@Component({selector: 'cmp-b21', template: `{{'b21'}}`, directives: []})
-@View({template: `{{'b21'}}`, directives: []})
 class CmpB21 {
 }
 
-@Component({selector: 'cmp-b22'})
+@Component({selector: 'cmp-b22', template: `{{'b22'}}`, directives: []})
-@View({template: `{{'b22'}}`, directives: []})
 class CmpB22 {
 }
 
-@Component({selector: 'cmp-a1'})
+@Component(
-@View({template: `{{'a1'}}<cmp-b11></cmp-b11><cmp-b12></cmp-b12>`, directives: [CmpB11, CmpB12]})
+    {selector: 'cmp-a1', template: `{{'a1'}}<cmp-b11></cmp-b11><cmp-b12></cmp-b12>`, directives: [CmpB11, CmpB12]})
 class CmpA1 {
 }
 
-@Component({selector: 'cmp-a2'})
+@Component(
-@View({template: `{{'a2'}}<cmp-b21></cmp-b21><cmp-b22></cmp-b22>`, directives: [CmpB21, CmpB22]})
+    {selector: 'cmp-a2', template: `{{'a2'}}<cmp-b21></cmp-b21><cmp-b22></cmp-b22>`, directives: [CmpB21, CmpB22]})
 class CmpA2 {
 }

modules/angular2/test/core/linker/query_integration_spec.ts

@@ -23,7 +23,6 @@ import {
   TemplateRef,
   Query,
   QueryList,
-  View,
   ViewQuery,
   ContentChildren,
   ViewChildren,
@@ -693,8 +692,7 @@ class TextDirective {
   constructor() {}
 }
 
-@Component({selector: 'needs-content-children'})
+@Component({selector: 'needs-content-children', template: ''})
-@View({template: ''})
 class NeedsContentChildren implements AfterContentInit {
   @ContentChildren(TextDirective) textDirChildren: QueryList<TextDirective>;
   numberOfChildrenAfterContentInit: number;
@@ -702,8 +700,8 @@ class NeedsContentChildren implements AfterContentInit {
   ngAfterContentInit() { this.numberOfChildrenAfterContentInit = this.textDirChildren.length; }
 }
 
-@Component({selector: 'needs-view-children'})
+@Component(
-@View({template: '<div text></div>', directives: [TextDirective]})
+    {selector: 'needs-view-children', template: '<div text></div>', directives: [TextDirective]})
 class NeedsViewChildren implements AfterViewInit {
   @ViewChildren(TextDirective) textDirChildren: QueryList<TextDirective>;
   numberOfChildrenAfterViewInit: number;
@@ -711,8 +709,7 @@ class NeedsViewChildren implements AfterViewInit {
   ngAfterViewInit() { this.numberOfChildrenAfterViewInit = this.textDirChildren.length; }
 }
 
-@Component({selector: 'needs-content-child'})
+@Component({selector: 'needs-content-child', template: ''})
-@View({template: ''})
 class NeedsContentChild implements AfterContentInit, AfterContentChecked {
   _child: TextDirective;
 
@@ -732,8 +729,8 @@ class NeedsContentChild implements AfterContentInit, AfterContentChecked {
   }
 }
 
-@Component({selector: 'needs-view-child'})
+@Component({
-@View({
+  selector: 'needs-view-child',
   template: `
     <div *ngIf="shouldShow" text="foo"></div>
   `,
@@ -764,8 +761,8 @@ class InertDirective {
   constructor() {}
 }
 
-@Component({selector: 'needs-query'})
+@Component({
-@View({
+  selector: 'needs-query',
   directives: [NgFor, TextDirective],
   template: '<div text="ignoreme"></div><b *ngFor="var dir of query">{{dir.text}}|</b>'
 })
@@ -775,8 +772,7 @@ class NeedsQuery {
   constructor(@Query(TextDirective) query: QueryList<TextDirective>) { this.query = query; }
 }
 
-@Component({selector: 'needs-four-queries'})
+@Component({selector: 'needs-four-queries', template: ''})
-@View({template: ''})
 class NeedsFourQueries {
   @ContentChild(TextDirective) query1: TextDirective;
   @ContentChild(TextDirective) query2: TextDirective;
@@ -784,8 +780,11 @@ class NeedsFourQueries {
   @ContentChild(TextDirective) query4: TextDirective;
 }
 
-@Component({selector: 'needs-query-desc'})
+@Component({
-@View({directives: [NgFor], template: '<div *ngFor="var dir of query">{{dir.text}}|</div>'})
+  selector: 'needs-query-desc',
+  directives: [NgFor],
+  template: '<div *ngFor="var dir of query">{{dir.text}}|</div>'
+})
 @Injectable()
 class NeedsQueryDesc {
   query: QueryList<TextDirective>;
@@ -794,8 +793,7 @@ class NeedsQueryDesc {
   }
 }
 
-@Component({selector: 'needs-query-by-var-binding'})
+@Component({selector: 'needs-query-by-var-binding', directives: [], template: '<ng-content>'})
-@View({directives: [], template: '<ng-content>'})
 @Injectable()
 class NeedsQueryByLabel {
   query: QueryList<any>;
@@ -804,16 +802,18 @@ class NeedsQueryByLabel {
   }
 }
 
-@Component({selector: 'needs-view-query-by-var-binding'})
+@Component({
-@View({directives: [], template: '<div #textLabel>text</div>'})
+  selector: 'needs-view-query-by-var-binding',
+  directives: [],
+  template: '<div #textLabel>text</div>'
+})
 @Injectable()
 class NeedsViewQueryByLabel {
   query: QueryList<any>;
   constructor(@ViewQuery("textLabel") query: QueryList<any>) { this.query = query; }
 }
 
-@Component({selector: 'needs-query-by-var-bindings'})
+@Component({selector: 'needs-query-by-var-bindings', directives: [], template: '<ng-content>'})
-@View({directives: [], template: '<ng-content>'})
 @Injectable()
 class NeedsQueryByTwoLabels {
   query: QueryList<any>;
@@ -822,8 +822,8 @@ class NeedsQueryByTwoLabels {
   }
 }
 
-@Component({selector: 'needs-query-and-project'})
+@Component({
-@View({
+  selector: 'needs-query-and-project',
   directives: [NgFor],
   template: '<div *ngFor="var dir of query">{{dir.text}}|</div><ng-content></ng-content>'
 })
@@ -833,8 +833,8 @@ class NeedsQueryAndProject {
   constructor(@Query(TextDirective) query: QueryList<TextDirective>) { this.query = query; }
 }
 
-@Component({selector: 'needs-view-query'})
+@Component({
-@View({
+  selector: 'needs-view-query',
   directives: [TextDirective],
   template: '<div text="1"><div text="2"></div></div>' +
                 '<div text="3"></div><div text="4"></div>'
@@ -845,8 +845,11 @@ class NeedsViewQuery {
   constructor(@ViewQuery(TextDirective) query: QueryList<TextDirective>) { this.query = query; }
 }
 
-@Component({selector: 'needs-view-query-if'})
+@Component({
-@View({directives: [NgIf, TextDirective], template: '<div *ngIf="show" text="1"></div>'})
+  selector: 'needs-view-query-if',
+  directives: [NgIf, TextDirective],
+  template: '<div *ngIf="show" text="1"></div>'
+})
 @Injectable()
 class NeedsViewQueryIf {
   show: boolean;
@@ -858,8 +861,8 @@ class NeedsViewQueryIf {
 }
 
 
-@Component({selector: 'needs-view-query-nested-if'})
+@Component({
-@View({
+  selector: 'needs-view-query-nested-if',
   directives: [NgIf, InertDirective, TextDirective],
   template: '<div text="1"><div *ngIf="show"><div dir></div></div></div>'
 })
@@ -873,8 +876,8 @@ class NeedsViewQueryNestedIf {
   }
 }
 
-@Component({selector: 'needs-view-query-order'})
+@Component({
-@View({
+  selector: 'needs-view-query-order',
   directives: [NgFor, TextDirective, InertDirective],
   template: '<div text="1"></div>' +
                 '<div *ngFor="var i of list" [text]="i"></div>' +
@@ -890,8 +893,8 @@ class NeedsViewQueryOrder {
   }
 }
 
-@Component({selector: 'needs-view-query-order-with-p'})
+@Component({
-@View({
+  selector: 'needs-view-query-order-with-p',
   directives: [NgFor, TextDirective, InertDirective],
   template: '<div dir><div text="1"></div>' +
                 '<div *ngFor="var i of list" [text]="i"></div>' +
@@ -907,8 +910,7 @@ class NeedsViewQueryOrderWithParent {
   }
 }
 
-@Component({selector: 'needs-tpl'})
+@Component({selector: 'needs-tpl', template: '<template var-x="shadow"></template>'})
-@View({template: '<template var-x="shadow"></template>'})
 class NeedsTpl {
   viewQuery: QueryList<TemplateRef>;
   query: QueryList<TemplateRef>;
@@ -919,8 +921,8 @@ class NeedsTpl {
   }
 }
 
-@Component({selector: 'my-comp'})
+@Component({
-@View({
+  selector: 'my-comp',
   directives: [
     NeedsQuery,
     NeedsQueryDesc,
@@ -943,7 +945,8 @@ class NeedsTpl {
     NgIf,
     NgFor,
     NeedsFourQueries
-  ]
+  ],
+  template: ''
 })
 @Injectable()
 class MyComp {

modules/angular2/test/core/linker/view_resolver_spec.ts

@@ -1,13 +1,17 @@
 import {ddescribe, describe, it, iit, expect, beforeEach} from 'angular2/testing_internal';
 import {ViewResolver} from 'angular2/src/core/linker/view_resolver';
-import {Component, View, ViewMetadata} from 'angular2/src/core/metadata';
+import {Component, ViewMetadata} from 'angular2/src/core/metadata';
 
 class SomeDir {}
 class SomePipe {}
 
-@Component({selector: 'sample'})
+@Component({
-@View(
+  selector: 'sample',
-    {template: "some template", directives: [SomeDir], pipes: [SomePipe], styles: ["some styles"]})
+  template: "some template",
+  directives: [SomeDir],
+  pipes: [SomePipe],
+  styles: ["some styles"]
+})
 class ComponentWithView {
 }
 
@@ -22,12 +26,10 @@ class ComponentWithTemplate {
 }
 
 @Component({selector: 'sample', template: "some template"})
-@View({template: "some template"})
 class ComponentWithViewTemplate {
 }
 
-@Component({selector: 'sample', templateUrl: "some template url"})
+@Component({selector: 'sample', templateUrl: "some template url", template: "some template"})
-@View({template: "some template"})
 class ComponentWithViewTemplateUrl {
 }
 
@@ -35,9 +37,6 @@ class ComponentWithViewTemplateUrl {
 class ComponentWithoutView {
 }
 
-@View({template: "some template"})
-class ClassWithView {
-}
 
 class SimpleClass {}
 
@@ -47,17 +46,6 @@ export function main() {
 
     beforeEach(() => { resolver = new ViewResolver(); });
 
-    it('should read out the View metadata', () => {
-      var viewMetadata = resolver.resolve(ComponentWithView);
-      expect(viewMetadata)
-          .toEqual(new View({
-            template: "some template",
-            directives: [SomeDir],
-            pipes: [SomePipe],
-            styles: ["some styles"]
-          }));
-    });
-
     it('should read out the View metadata from the Component metadata', () => {
       var viewMetadata = resolver.resolve(ComponentWithTemplate);
       expect(viewMetadata)
@@ -69,32 +57,15 @@ export function main() {
           }));
     });
 
-    it('should read out the View metadata from a simple class', () => {
-      var viewMetadata = resolver.resolve(ClassWithView);
-      expect(viewMetadata).toEqual(new View({template: "some template"}));
-    });
-
-    it('should throw when Component.template is specified together with the View metadata', () => {
-      expect(() => resolver.resolve(ComponentWithViewTemplate))
-          .toThrowErrorWith(
-              "Component 'ComponentWithViewTemplate' cannot have both 'template' and '@View' set at the same time");
-    });
-
-    it('should throw when Component.template is specified together with the View metadata', () => {
-      expect(() => resolver.resolve(ComponentWithViewTemplateUrl))
-          .toThrowErrorWith(
-              "Component 'ComponentWithViewTemplateUrl' cannot have both 'templateUrl' and '@View' set at the same time");
-    });
-
     it('should throw when Component has no View decorator and no template is set', () => {
       expect(() => resolver.resolve(ComponentWithoutView))
           .toThrowErrorWith(
-              "Component 'ComponentWithoutView' must have either 'template', 'templateUrl', or '@View' set");
+              "Component 'ComponentWithoutView' must have either 'template' or 'templateUrl' set");
     });
 
     it('should throw when simple class has no View decorator and no template is set', () => {
       expect(() => resolver.resolve(SimpleClass))
-          .toThrowErrorWith("No View decorator found on component 'SimpleClass'");
+          .toThrowErrorWith("Could not compile 'SimpleClass' because it is not a component.");
     });
   });
 }

modules/angular2/test/core/metadata/decorators_spec.ts

@@ -10,7 +10,7 @@ import {
   xit,
 } from 'angular2/testing_internal';
 
-import {Component, View, Directive} from 'angular2/core';
+import {Component, Directive} from 'angular2/core';
 import {reflector} from 'angular2/src/core/reflection/reflection';
 
 export function main() {

modules/angular2/test/mock/view_resolver_mock_spec.ts

@@ -12,7 +12,7 @@ import {stringify} from 'angular2/src/facade/lang';
 
 import {MockViewResolver} from 'angular2/src/mock/view_resolver_mock';
 
-import {Component, View, ViewMetadata} from 'angular2/src/core/metadata';
+import {Component, ViewMetadata} from 'angular2/src/core/metadata';
 
 import {isBlank} from 'angular2/src/facade/lang';
 
@@ -108,8 +108,8 @@ export function main() {
 
 class SomeDirective {}
 
-@Component({selector: 'cmp'})
+@Component({
-@View({
+  selector: 'cmp',
   template: 'template',
   directives: [SomeDirective],
 })

modules/angular2/test/platform/browser/bootstrap_spec.ts

@@ -16,7 +16,7 @@ import {IS_DART, isPresent, stringify} from 'angular2/src/facade/lang';
 import {bootstrap} from 'angular2/platform/browser';
 import {ApplicationRef} from 'angular2/src/core/application_ref';
 import {Console} from 'angular2/src/core/console';
-import {Component, Directive, View, OnDestroy, platform} from 'angular2/core';
+import {Component, Directive, OnDestroy, platform} from 'angular2/core';
 import {BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS} from 'angular2/platform/browser';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
@@ -27,36 +27,31 @@ import {ExceptionHandler} from 'angular2/src/facade/exceptions';
 import {Testability, TestabilityRegistry} from 'angular2/src/core/testability/testability';
 import {ComponentRef_, ComponentRef} from "angular2/src/core/linker/dynamic_component_loader";
 
-@Component({selector: 'hello-app'})
+@Component({selector: 'hello-app', template: '{{greeting}} world!'})
-@View({template: '{{greeting}} world!'})
 class HelloRootCmp {
   greeting: string;
   constructor() { this.greeting = 'hello'; }
 }
 
-@Component({selector: 'hello-app'})
+@Component({selector: 'hello-app', template: 'before: <ng-content></ng-content> after: done'})
-@View({template: 'before: <ng-content></ng-content> after: done'})
 class HelloRootCmpContent {
   constructor() {}
 }
 
-@Component({selector: 'hello-app-2'})
+@Component({selector: 'hello-app-2', template: '{{greeting}} world, again!'})
-@View({template: '{{greeting}} world, again!'})
 class HelloRootCmp2 {
   greeting: string;
   constructor() { this.greeting = 'hello'; }
 }
 
-@Component({selector: 'hello-app'})
+@Component({selector: 'hello-app', template: ''})
-@View({template: ''})
 class HelloRootCmp3 {
   appBinding;
 
   constructor(@Inject("appBinding") appBinding) { this.appBinding = appBinding; }
 }
 
-@Component({selector: 'hello-app'})
+@Component({selector: 'hello-app', template: ''})
-@View({template: ''})
 class HelloRootCmp4 {
   appRef;
 
@@ -71,8 +66,7 @@ class HelloRootMissingTemplate {
 class HelloRootDirectiveIsNotCmp {
 }
 
-@Component({selector: 'hello-app'})
+@Component({selector: 'hello-app', template: ''})
-@View({template: ''})
 class HelloOnDestroyTickCmp implements OnDestroy {
   appRef: ApplicationRef;
   constructor(@Inject(ApplicationRef) appRef) { this.appRef = appRef; }

modules/angular2/test/public_api_spec.ts

@@ -222,7 +222,16 @@ var NG_CORE = [
   'setTestabilityGetter',
   'Type',
   'PACKAGE_ROOT_URL',
-  'View',
+  'View:dart',
+  /*
+  'View.directives:dart',
+  'View.encapsulation:dart',
+  'View.pipes:dart',
+  'View.styleUrls:dart',
+  'View.styles:dart',
+  'View.template:dart',
+  'View.templateUrl:dart',
+  */
   'ViewChild',
   'ViewChildMetadata',
   'ViewChildren',

modules/angular2/test/router/directives/router_link_spec.ts

@@ -16,7 +16,7 @@ import {
 
 import {SpyRouter, SpyLocation} from '../spies';
 
-import {provide, Component, View} from 'angular2/core';
+import {provide, Component} from 'angular2/core';
 import {By} from 'angular2/platform/common_dom';
 
 import {
@@ -102,15 +102,14 @@ export function main() {
   });
 }
 
-@Component({selector: 'user-cmp'})
+@Component({selector: 'user-cmp', template: "hello {{user}}"})
-@View({template: "hello {{user}}"})
 class UserCmp {
   user: string;
   constructor(params: RouteParams) { this.user = params.get('name'); }
 }
 
-@Component({selector: 'test-component'})
+@Component({
-@View({
+  selector: 'test-component',
   template: `
     <div>
       <a [routerLink]="['/Detail']"

modules/angular2/test/router/integration/bootstrap_spec.ts

@@ -15,7 +15,7 @@ import {
 } from 'angular2/testing_internal';
 
 import {bootstrap} from 'angular2/platform/browser';
-import {Component, Directive, View} from 'angular2/src/core/metadata';
+import {Component, Directive} from 'angular2/src/core/metadata';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 import {Console} from 'angular2/src/core/console';
 import {provide, ViewChild, AfterViewInit} from 'angular2/core';

modules/angular2/test/router/integration/lifecycle_hook_spec.ts

@@ -15,7 +15,7 @@ import {
   xit
 } from 'angular2/testing_internal';
 
-import {provide, Component, Injector, Inject, View} from 'angular2/core';
+import {provide, Component, Injector, Inject} from 'angular2/core';
 import {isPresent} from 'angular2/src/facade/lang';
 import {
   PromiseWrapper,

modules/angular2/test/router/integration/navigation_spec.ts

@@ -15,7 +15,7 @@ import {
   xit
 } from 'angular2/testing_internal';
 
-import {provide, Component, View, Injector, Inject} from 'angular2/core';
+import {provide, Component, Injector, Inject} from 'angular2/core';
 import {PromiseWrapper} from 'angular2/src/facade/async';
 
 import {Router, RouterOutlet, RouterLink, RouteParams, RouteData, Location} from 'angular2/router';

modules/angular2/test/router/integration/router_link_spec.ts

@@ -22,7 +22,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
 
-import {provide, Component, View, DirectiveResolver} from 'angular2/core';
+import {provide, Component, DirectiveResolver} from 'angular2/core';
 
 import {SpyLocation} from 'angular2/src/mock/location_mock';
 import {
@@ -69,10 +69,7 @@ export function main() {
                       }));
 
     function compile(template: string = "<router-outlet></router-outlet>") {
-      return tcb.overrideView(MyComp, new View({
+      return tcb.overrideTemplate(MyComp, ('<div>' + template + '</div>'))
-                                template: ('<div>' + template + '</div>'),
-                                directives: [RouterOutlet, RouterLink]
-                              }))
           .createAsync(MyComp)
           .then((tc) => { fixture = tc; });
     }
@@ -382,7 +379,7 @@ function getHref(tc: ComponentFixture) {
   return DOM.getAttribute(tc.debugElement.query(By.css('a')).nativeElement, 'href');
 }
 
-@Component({selector: 'my-comp'})
+@Component({selector: 'my-comp', template: '', directives: [ROUTER_DIRECTIVES]})
 class MyComp {
   name;
 }

modules/angular2/test/router/integration/util.ts

@@ -1,4 +1,4 @@
-import {provide, Provider, Component, View} from 'angular2/core';
+import {provide, Provider, Component} from 'angular2/core';
 import {Type, isBlank} from 'angular2/src/facade/lang';
 import {BaseException} from 'angular2/src/facade/exceptions';
 

modules/angular2/test/router/route_config/route_config_spec.ts

@@ -12,7 +12,7 @@ import {
 } from 'angular2/testing_internal';
 
 import {bootstrap} from 'angular2/platform/browser';
-import {Component, Directive, View} from 'angular2/src/core/metadata';
+import {Component, Directive} from 'angular2/src/core/metadata';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 import {Console} from 'angular2/src/core/console';
 import {provide} from 'angular2/core';
@@ -213,13 +213,15 @@ export function main() {
 }
 
 
-@Component({selector: 'hello-cmp'})
+@Component({selector: 'hello-cmp', template: 'hello'})
-@View({template: 'hello'})
 class HelloCmp {
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([
   {path: '/before', redirectTo: ['Hello']},
   {path: '/after', component: HelloCmp, name: 'Hello'}
@@ -232,8 +234,11 @@ function HelloLoader(): Promise<any> {
   return Promise.resolve(HelloCmp);
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([
   {path: '/hello', component: {type: 'loader', loader: HelloLoader}},
 ])
@@ -241,8 +246,11 @@ class AsyncAppCmp {
   constructor(public router: Router, public location: LocationStrategy) {}
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([
   {path: '/hello', loader: HelloLoader},
 ])
@@ -250,15 +258,21 @@ class ConciseAsyncAppCmp {
   constructor(public router: Router, public location: LocationStrategy) {}
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> } aside { <router-outlet name="aside"></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> } aside { <router-outlet name="aside"></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([{path: '/hello', component: HelloCmp}, {aux: 'aside', component: HelloCmp}])
 class AuxAppCmp {
   constructor(public router: Router, public location: LocationStrategy) {}
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([
   {path: '/hello', component: {type: 'constructor', constructor: HelloCmp}},
 ])
@@ -266,45 +280,66 @@ class ExplicitConstructorAppCmp {
   constructor(public router: Router, public location: LocationStrategy) {}
 }
 
-@Component({selector: 'parent-cmp'})
+@Component({
-@View({template: `parent { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'parent-cmp',
+  template: `parent { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([{path: '/child', component: HelloCmp}])
 class ParentCmp {
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([{path: '/parent/...', component: ParentCmp}])
 class HierarchyAppCmp {
   constructor(public router: Router, public location: LocationStrategy) {}
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([{path: '/hello'}])
 class WrongConfigCmp {
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([{path: '/child', component: HelloCmp, name: 'child'}])
 class BadAliasNameCmp {
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([{path: '/child', component: HelloCmp, as: 'child'}])
 class BadAliasCmp {
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([{path: '/child', component: HelloCmp, as: 'Child', name: 'Child'}])
 class MultipleAliasCmp {
 }
 
-@Component({selector: 'app-cmp'})
+@Component({
-@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
+  selector: 'app-cmp',
+  template: `root { <router-outlet></router-outlet> }`,
+  directives: ROUTER_DIRECTIVES
+})
 @RouteConfig([
   {path: '/hello', component: {type: 'intentionallyWrongComponentType', constructor: HelloCmp}},
 ])

modules/angular2/test/testing/test_component_builder_spec.ts

@@ -16,43 +16,47 @@ import {
 
 import {Injectable, provide} from 'angular2/core';
 import {NgIf} from 'angular2/common';
-import {Directive, Component, View, ViewMetadata} from 'angular2/src/core/metadata';
+import {Directive, Component, ViewMetadata} from 'angular2/src/core/metadata';
 
-@Component({selector: 'child-comp'})
+@Component(
-@View({template: `<span>Original {{childBinding}}</span>`, directives: []})
+    {selector: 'child-comp', template: `<span>Original {{childBinding}}</span>`, directives: []})
 @Injectable()
 class ChildComp {
   childBinding: string;
   constructor() { this.childBinding = 'Child'; }
 }
 
-@Component({selector: 'child-comp'})
+@Component({selector: 'child-comp', template: `<span>Mock</span>`})
-@View({template: `<span>Mock</span>`})
 @Injectable()
 class MockChildComp {
 }
 
-@Component({selector: 'parent-comp'})
+@Component({
-@View({template: `Parent(<child-comp></child-comp>)`, directives: [ChildComp]})
+  selector: 'parent-comp',
+  template: `Parent(<child-comp></child-comp>)`,
+  directives: [ChildComp]
+})
 @Injectable()
 class ParentComp {
 }
 
-@Component({selector: 'my-if-comp'})
+@Component({
-@View({template: `MyIf(<span *ngIf="showMore">More</span>)`, directives: [NgIf]})
+  selector: 'my-if-comp',
+  template: `MyIf(<span *ngIf="showMore">More</span>)`,
+  directives: [NgIf]
+})
 @Injectable()
 class MyIfComp {
   showMore: boolean = false;
 }
 
-@Component({selector: 'child-child-comp'})
+@Component({selector: 'child-child-comp', template: `<span>ChildChild</span>`})
-@View({template: `<span>ChildChild</span>`})
 @Injectable()
 class ChildChildComp {
 }
 
-@Component({selector: 'child-comp'})
+@Component({
-@View({
+  selector: 'child-comp',
   template: `<span>Original {{childBinding}}(<child-child-comp></child-child-comp>)</span>`,
   directives: [ChildChildComp]
 })
@@ -62,8 +66,7 @@ class ChildWithChildComp {
   constructor() { this.childBinding = 'Child'; }
 }
 
-@Component({selector: 'child-child-comp'})
+@Component({selector: 'child-child-comp', template: `<span>ChildChild Mock</span>`})
-@View({template: `<span>ChildChild Mock</span>`})
 @Injectable()
 class MockChildChildComp {
 }
@@ -78,14 +81,20 @@ class MockFancyService extends FancyService {
   value: string = 'mocked out value';
 }
 
-@Component({selector: 'my-service-comp', bindings: [FancyService]})
+@Component({
-@View({template: `injected value: {{fancyService.value}}`})
+  selector: 'my-service-comp',
+  bindings: [FancyService],
+  template: `injected value: {{fancyService.value}}`
+})
 class TestBindingsComp {
   constructor(private fancyService: FancyService) {}
 }
 
-@Component({selector: 'my-service-comp', viewProviders: [FancyService]})
+@Component({
-@View({template: `injected value: {{fancyService.value}}`})
+  selector: 'my-service-comp',
+  viewProviders: [FancyService],
+  template: `injected value: {{fancyService.value}}`
+})
 class TestViewBindingsComp {
   constructor(private fancyService: FancyService) {}
 }

modules/angular2/test/testing/testing_public_spec.ts

@@ -18,48 +18,52 @@ import {
 
 import {Injectable, bind} from 'angular2/core';
 import {NgIf} from 'angular2/common';
-import {Directive, Component, View, ViewMetadata} from 'angular2/core';
+import {Directive, Component, ViewMetadata} from 'angular2/core';
 import {PromiseWrapper} from 'angular2/src/facade/promise';
 import {XHR} from 'angular2/src/compiler/xhr';
 import {XHRImpl} from 'angular2/src/platform/browser/xhr_impl';
 
 // Services, and components for the tests.
 
-@Component({selector: 'child-comp'})
+@Component(
-@View({template: `<span>Original {{childBinding}}</span>`, directives: []})
+    {selector: 'child-comp', template: `<span>Original {{childBinding}}</span>`, directives: []})
 @Injectable()
 class ChildComp {
   childBinding: string;
   constructor() { this.childBinding = 'Child'; }
 }
 
-@Component({selector: 'child-comp'})
+@Component({selector: 'child-comp', template: `<span>Mock</span>`})
-@View({template: `<span>Mock</span>`})
 @Injectable()
 class MockChildComp {
 }
 
-@Component({selector: 'parent-comp'})
+@Component({
-@View({template: `Parent(<child-comp></child-comp>)`, directives: [ChildComp]})
+  selector: 'parent-comp',
+  template: `Parent(<child-comp></child-comp>)`,
+  directives: [ChildComp]
+})
 @Injectable()
 class ParentComp {
 }
 
-@Component({selector: 'my-if-comp'})
+@Component({
-@View({template: `MyIf(<span *ngIf="showMore">More</span>)`, directives: [NgIf]})
+  selector: 'my-if-comp',
+  template: `MyIf(<span *ngIf="showMore">More</span>)`,
+  directives: [NgIf]
+})
 @Injectable()
 class MyIfComp {
   showMore: boolean = false;
 }
 
-@Component({selector: 'child-child-comp'})
+@Component({selector: 'child-child-comp', template: `<span>ChildChild</span>`})
-@View({template: `<span>ChildChild</span>`})
 @Injectable()
 class ChildChildComp {
 }
 
-@Component({selector: 'child-comp'})
+@Component({
-@View({
+  selector: 'child-comp',
   template: `<span>Original {{childBinding}}(<child-child-comp></child-child-comp>)</span>`,
   directives: [ChildChildComp]
 })
@@ -69,8 +73,7 @@ class ChildWithChildComp {
   constructor() { this.childBinding = 'Child'; }
 }
 
-@Component({selector: 'child-child-comp'})
+@Component({selector: 'child-child-comp', template: `<span>ChildChild Mock</span>`})
-@View({template: `<span>ChildChild Mock</span>`})
 @Injectable()
 class MockChildChildComp {
 }
@@ -84,25 +87,32 @@ class MockFancyService extends FancyService {
   value: string = 'mocked out value';
 }
 
-@Component({selector: 'my-service-comp', providers: [FancyService]})
+@Component({
-@View({template: `injected value: {{fancyService.value}}`})
+  selector: 'my-service-comp',
+  providers: [FancyService],
+  template: `injected value: {{fancyService.value}}`
+})
 class TestProvidersComp {
   constructor(private fancyService: FancyService) {}
 }
 
-@Component({selector: 'my-service-comp', viewProviders: [FancyService]})
+@Component({
-@View({template: `injected value: {{fancyService.value}}`})
+  selector: 'my-service-comp',
+  viewProviders: [FancyService],
+  template: `injected value: {{fancyService.value}}`
+})
 class TestViewProvidersComp {
   constructor(private fancyService: FancyService) {}
 }
 
-@Component({selector: 'external-template-comp'})
+@Component({
-@View({templateUrl: '/base/modules/angular2/test/testing/static_assets/test.html'})
+  selector: 'external-template-comp',
+  templateUrl: '/base/modules/angular2/test/testing/static_assets/test.html'
+})
 class ExternalTemplateComp {
 }
 
-@Component({selector: 'bad-template-comp'})
+@Component({selector: 'bad-template-comp', templateUrl: 'non-existant.html'})
-@View({templateUrl: 'non-existant.html'})
 class BadTemplateUrl {
 }
 

modules/angular2/test/upgrade/metadata_spec.ts

@@ -11,7 +11,7 @@ import {
   xit,
 } from 'angular2/testing_internal';
 
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {getComponentInfo, parseFields} from 'angular2/src/upgrade/metadata';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 
@@ -67,13 +67,11 @@ export function main() {
   });
 }
 
-@Component({selector: 'element-name-dashed'})
+@Component({selector: 'element-name-dashed', template: ``})
-@View({template: ``})
 class ElementNameComponent {
 }
 
-@Component({selector: '[attr-name]'})
+@Component({selector: '[attr-name]', template: ``})
-@View({template: ``})
 class AttributeNameComponent {
 }
 

modules/angular2/test/web_workers/worker/renderer_integration_spec.ts

@@ -20,7 +20,6 @@ import {
   Injector,
   ViewMetadata,
   Component,
-  View,
   Injectable,
   ElementRef
 } from 'angular2/core';
@@ -257,8 +256,7 @@ export function main() {
 }
 
 
-@Component({selector: 'my-comp'})
+@Component({selector: 'my-comp', directives: []})
-@View({directives: []})
 @Injectable()
 class MyComp {
   ctxProp: string;

modules/angular2_material/src/components/button/button.ts

@@ -1,4 +1,4 @@
-import {Component, View, ViewEncapsulation, OnChanges} from 'angular2/core';
+import {Component, ViewEncapsulation, OnChanges} from 'angular2/core';
 
 import {TimerWrapper} from 'angular2/src/facade/async';
 import {isPresent} from 'angular2/src/facade/lang';
@@ -15,8 +15,6 @@ import {isPresent} from 'angular2/src/facade/lang';
     '(blur)': 'onBlur()',
     '[class.md-button-focus]': 'isKeyboardFocused',
   },
-})
-@View({
   templateUrl: 'package:angular2_material/src/components/button/button.html',
   styleUrls: ['package:angular2_material/src/components/button/button.css'],
   encapsulation: ViewEncapsulation.None,
@@ -59,8 +57,6 @@ export class MdButton {
     '[class.md-button-focus]': 'isKeyboardFocused',
     '[attr.aria-disabled]': 'isAriaDisabled',
   },
-})
-@View({
   templateUrl: 'package:angular2_material/src/components/button/button.html',
   encapsulation: ViewEncapsulation.None
 })

modules/angular2_material/src/components/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import {Component, View, Attribute, ViewEncapsulation} from 'angular2/core';
+import {Component, Attribute, ViewEncapsulation} from 'angular2/core';
 import {isPresent} from 'angular2/src/facade/lang';
 import {KeyCodes} from 'angular2_material/src/core/key_codes';
 import {KeyboardEvent} from 'angular2/src/facade/browser';
@@ -13,9 +13,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
     '[attr.aria-disabled]': 'disabled',
     '[tabindex]': 'tabindex',
     '(keydown)': 'onKeydown($event)',
-  }
+  },
-})
-@View({
   templateUrl: 'package:angular2_material/src/components/checkbox/checkbox.html',
   directives: [],
   encapsulation: ViewEncapsulation.None

modules/angular2_material/src/components/dialog/dialog.ts

@@ -12,7 +12,6 @@ import {
   ResolvedProvider,
   SkipSelf,
   Injector,
-  View,
   ViewEncapsulation
 } from 'angular2/core';
 
@@ -212,8 +211,6 @@ export class MdDialogConfig {
     'tabindex': '0',
     '(body:keydown)': 'documentKeypress($event)',
   },
-})
-@View({
   encapsulation: ViewEncapsulation.None,
   templateUrl: 'package:angular2_material/src/components/dialog/dialog.html',
   directives: [forwardRef(() => MdDialogContent)]
@@ -261,8 +258,9 @@ class MdDialogContent {
   host: {
     '(click)': 'onClick()',
   },
+  template: '',
+  encapsulation: ViewEncapsulation.None
 })
-@View({template: '', encapsulation: ViewEncapsulation.None})
 class MdBackdrop {
   dialogRef: MdDialogRef;
 

modules/angular2_material/src/components/grid_list/grid_list.ts

@@ -1,6 +1,5 @@
 import {
   Component,
-  View,
   ViewEncapsulation,
   Host,
   SkipSelf,
@@ -27,8 +26,9 @@ class RowHeightMode {
 }
 
 
-@Component({selector: 'md-grid-list', inputs: ['cols', 'rowHeight', 'gutterSize']})
+@Component({
-@View({
+  selector: 'md-grid-list',
+  inputs: ['cols', 'rowHeight', 'gutterSize'],
   templateUrl: 'package:angular2_material/src/components/grid_list/grid_list.html',
   encapsulation: ViewEncapsulation.None
 })
@@ -223,9 +223,7 @@ export class MdGridList implements AfterContentChecked {
     '[style.left]': 'style.left',
     '[style.marginTop]': 'style.marginTop',
     '[style.paddingTop]': 'style.paddingTop',
-  }
+  },
-})
-@View({
   templateUrl: 'package:angular2_material/src/components/grid_list/grid_tile.html',
   encapsulation: ViewEncapsulation.None
 })

modules/angular2_material/test/button_spec.ts

@@ -13,7 +13,7 @@ import {
   xit,
 } from 'angular2/testing_internal';
 
-import {Component, View, ViewMetadata, bind, provide, DebugElement} from 'angular2/core';
+import {Component, ViewMetadata, bind, provide, DebugElement} from 'angular2/core';
 import {UrlResolver} from 'angular2/compiler';
 
 import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
@@ -114,8 +114,8 @@ function getChildDebugElement(parent: DebugElement, tagName: string): DebugEleme
 }
 
 /** Test component that contains an MdButton. */
-@Component({selector: 'test-app'})
+@Component({
-@View({
+  selector: 'test-app',
   directives: [MdButton],
   template:
       `<button mdButton type="button" (click)="increment()" [disabled]="isDisabled">Go</button>`

modules/benchmarks/src/compiler/compiler_benchmark.ts

@@ -9,7 +9,6 @@ import {
   Compiler,
   Component,
   Directive,
-  View,
   ViewContainerRef,
   bind,
   provide,
@@ -91,8 +90,7 @@ class MultiplyViewResolver extends ViewResolver {
   }
 }
 
-@Component({selector: 'app'})
+@Component({selector: 'app', directives: [], template: ``})
-@View({directives: [], template: ``})
 class CompilerAppComponent {
   constructor(private _compiler: Compiler) {}
   compileNoBindings() {
@@ -131,8 +129,8 @@ class Dir4 {
 }
 
 
-@Component({selector: 'cmp-nobind'})
+@Component({
-@View({
+  selector: 'cmp-nobind',
   directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
   template: `
 <div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
@@ -149,8 +147,8 @@ class Dir4 {
 class BenchmarkComponentNoBindings {
 }
 
-@Component({selector: 'cmp-withbind'})
+@Component({
-@View({
+  selector: 'cmp-withbind',
   directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
   template: `
 <div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">

modules/benchmarks/src/costs/index.ts

@@ -1,5 +1,5 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, Directive, DynamicComponentLoader, ElementRef, View} from 'angular2/core';
+import {Component, Directive, DynamicComponentLoader, ElementRef} from 'angular2/core';
 import {NgIf, NgFor} from 'angular2/common';
 import {ApplicationRef} from 'angular2/src/core/application_ref';
 import {ListWrapper} from 'angular2/src/facade/collection';
@@ -43,8 +43,7 @@ export function main() {
 }
 
 
-@Component({selector: 'dummy'})
+@Component({selector: 'dummy', template: `<div></div>`})
-@View({template: `<div></div>`})
 class DummyComponent {
 }
 
@@ -59,8 +58,8 @@ class DynamicDummy {
   }
 }
 
-@Component({selector: 'app'})
+@Component({
-@View({
+  selector: 'app',
   directives: [NgIf, NgFor, DummyComponent, DummyDirective, DynamicDummy],
   template: `
     <div *ngIf="testingPlainComponents">

modules/benchmarks/src/largetable/largetable_benchmark.ts

@@ -8,7 +8,7 @@ import {
   windowProfileEnd
 } from 'angular2/src/testing/benchmark_util';
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, Directive, View, bind, provide} from 'angular2/core';
+import {Component, Directive, bind, provide} from 'angular2/core';
 import {NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/common';
 import {ApplicationRef} from 'angular2/src/core/application_ref';
 import {BrowserDomAdapter} from 'angular2/src/platform/browser/browser_adapter';
@@ -207,8 +207,9 @@ class CellData {
   iFn() { return this.i; }
 }
 
-@Component({selector: 'largetable', inputs: ['data', 'benchmarkType']})
+@Component({
-@View({
+  selector: 'largetable',
+  inputs: ['data', 'benchmarkType'],
   directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault],
   template: `
       <table [ngSwitch]="benchmarkType">
@@ -255,8 +256,8 @@ class LargetableComponent {
   }
 }
 
-@Component({selector: 'app'})
+@Component({
-@View({
+  selector: 'app',
   directives: [LargetableComponent],
   template: `<largetable [data]='data' [benchmarkType]='benchmarkType'></largetable>`
 })

modules/benchmarks/src/naive_infinite_scroll/app.ts

@@ -6,11 +6,11 @@ import {NgIf, NgFor} from 'angular2/common';
 import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 import {document} from 'angular2/src/facade/browser';
 
-import {Component, Directive, View} from 'angular2/core';
+import {Component, Directive} from 'angular2/core';
 
 
-@Component({selector: 'scroll-app'})
+@Component({
-@View({
+  selector: 'scroll-app',
   directives: [ScrollAreaComponent, NgIf, NgFor],
   template: `
   <div>

modules/benchmarks/src/naive_infinite_scroll/cells.ts

@@ -2,7 +2,7 @@ import {ListWrapper, Map} from 'angular2/src/facade/collection';
 import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST} from './common';
 import {NgFor} from 'angular2/common';
 
-import {Component, Directive, View} from 'angular2/core';
+import {Component, Directive} from 'angular2/core';
 
 export class HasStyle {
   cellWidth: number;
@@ -12,20 +12,32 @@ export class HasStyle {
   set width(w: number) { this.cellWidth = w; }
 }
 
-@Component({selector: 'company-name', inputs: ['width: cell-width', 'company']})
+@Component({
-@View({directives: [], template: `<div [style.width.px]="cellWidth">{{company.name}}</div>`})
+  selector: 'company-name',
+  inputs: ['width: cell-width', 'company'],
+  directives: [],
+  template: `<div [style.width.px]="cellWidth">{{company.name}}</div>`
+})
 export class CompanyNameComponent extends HasStyle {
   company: Company;
 }
 
-@Component({selector: 'opportunity-name', inputs: ['width: cell-width', 'opportunity']})
+@Component({
-@View({directives: [], template: `<div [style.width.px]="cellWidth">{{opportunity.name}}</div>`})
+  selector: 'opportunity-name',
+  inputs: ['width: cell-width', 'opportunity'],
+  directives: [],
+  template: `<div [style.width.px]="cellWidth">{{opportunity.name}}</div>`
+})
 export class OpportunityNameComponent extends HasStyle {
   opportunity: Opportunity;
 }
 
-@Component({selector: 'offering-name', inputs: ['width: cell-width', 'offering']})
+@Component({
-@View({directives: [], template: `<div [style.width.px]="cellWidth">{{offering.name}}</div>`})
+  selector: 'offering-name',
+  inputs: ['width: cell-width', 'offering'],
+  directives: [],
+  template: `<div [style.width.px]="cellWidth">{{offering.name}}</div>`
+})
 export class OfferingNameComponent extends HasStyle {
   offering: Offering;
 }
@@ -37,8 +49,9 @@ export class Stage {
   apply: Function;
 }
 
-@Component({selector: 'stage-buttons', inputs: ['width: cell-width', 'offering']})
+@Component({
-@View({
+  selector: 'stage-buttons',
+  inputs: ['width: cell-width', 'offering'],
   directives: [NgFor],
   template: `
       <div [style.width.px]="cellWidth">
@@ -82,8 +95,9 @@ export class StageButtonsComponent extends HasStyle {
   }
 }
 
-@Component({selector: 'account-cell', inputs: ['width: cell-width', 'account']})
+@Component({
-@View({
+  selector: 'account-cell',
+  inputs: ['width: cell-width', 'account'],
   directives: [],
   template: `
       <div [style.width.px]="cellWidth">
@@ -96,8 +110,12 @@ export class AccountCellComponent extends HasStyle {
   account: Account;
 }
 
-@Component({selector: 'formatted-cell', inputs: ['width: cell-width', 'value']})
+@Component({
-@View({directives: [], template: `<div [style.width.px]="cellWidth">{{formattedValue}}</div>`})
+  selector: 'formatted-cell',
+  inputs: ['width: cell-width', 'value'],
+  directives: [],
+  template: `<div [style.width.px]="cellWidth">{{formattedValue}}</div>`
+})
 export class FormattedCellComponent extends HasStyle {
   formattedValue: string;
 

modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts

@@ -1,7 +1,7 @@
 import {ListWrapper} from 'angular2/src/facade/collection';
 import {Math} from 'angular2/src/facade/math';
 
-import {Component, Directive, View} from 'angular2/core';
+import {Component, Directive} from 'angular2/core';
 
 import {
   Offering,
@@ -18,8 +18,6 @@ import {NgFor} from 'angular2/common';
 
 @Component({
   selector: 'scroll-area',
-})
-@View({
   directives: [ScrollItemComponent, NgFor],
   template: `
     <div>

modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts

@@ -7,7 +7,7 @@ import {
   FormattedCellComponent
 } from './cells';
 
-import {Component, Directive, View} from 'angular2/core';
+import {Component, Directive} from 'angular2/core';
 
 import {
   Offering,
@@ -25,8 +25,9 @@ import {
   AAT_STATUS_WIDTH
 } from './common';
 
-@Component({selector: 'scroll-item', inputs: ['offering']})
+@Component({
-@View({
+  selector: 'scroll-item',
+  inputs: ['offering'],
   directives: [
     CompanyNameComponent,
     OpportunityNameComponent,

modules/benchmarks/src/static_tree/tree_benchmark.ts

@@ -4,7 +4,6 @@ import {
   Compiler,
   Component,
   Directive,
-  View,
   ViewContainerRef,
   bind,
   provide,
@@ -225,21 +224,23 @@ class StaticTreeComponentBase {
   get data() { return this._value; }
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component(
-@View({directives: [], template: '<span>{{data.value}} </span>'})
+    {selector: 'tree', inputs: ['data'], directives: [], template: '<span>{{data.value}} </span>'})
 class StaticTreeComponent0 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent0],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
 class StaticTreeComponent1 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent1],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
@@ -247,64 +248,71 @@ class StaticTreeComponent2 extends StaticTreeComponentBase {
   data: TreeNode;
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent2],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
 class StaticTreeComponent3 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent3],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
 class StaticTreeComponent4 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent4],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
 class StaticTreeComponent5 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent5],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
 class StaticTreeComponent6 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent6],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
 class StaticTreeComponent7 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent7],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
 class StaticTreeComponent8 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [StaticTreeComponent8],
   template: `<span> {{data.value}} <tree [data]='data.right'></tree><tree [data]='data.left'></tree></span>`
 })
 class StaticTreeComponent9 extends StaticTreeComponentBase {
 }
 
-@Component({selector: 'app'})
+@Component({
-@View({
+  selector: 'app',
   directives: [StaticTreeComponent9, NgIf],
   template: `<tree *ngIf="initData != null" [data]='initData'></tree>`
 })

modules/benchmarks/src/tree/tree_benchmark.ts

@@ -3,7 +3,6 @@ import {
   Compiler,
   Component,
   Directive,
-  View,
   ViewContainerRef,
   bind,
   provide,
@@ -217,8 +216,9 @@ class BaseLineIf {
   }
 }
 
-@Component({selector: 'tree', inputs: ['data']})
+@Component({
-@View({
+  selector: 'tree',
+  inputs: ['data'],
   directives: [TreeComponent, NgIf],
   template:
       `<span> {{data.value}} <span template='ngIf data.right != null'><tree [data]='data.right'></tree></span><span template='ngIf data.left != null'><tree [data]='data.left'></tree></span></span>`
@@ -227,8 +227,8 @@ class TreeComponent {
   data: TreeNode;
 }
 
-@Component({selector: 'app'})
+@Component(
-@View({directives: [TreeComponent], template: `<tree [data]='initData'></tree>`})
+    {selector: 'app', directives: [TreeComponent], template: `<tree [data]='initData'></tree>`})
 class AppComponent {
   initData: TreeNode;
   constructor() {

modules/playground/src/async/index.ts

@@ -1,10 +1,10 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {NgIf} from 'angular2/common';
 import {TimerWrapper} from 'angular2/src/facade/async';
 
-@Component({selector: 'async-app'})
+@Component({
-@View({
+  selector: 'async-app',
   template: `
     <div id='increment'>
       <span class='val'>{{val1}}</span>

modules/playground/src/gestures/index.ts

@@ -1,8 +1,7 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 
-@Component({selector: 'gestures-app'})
+@Component({selector: 'gestures-app', templateUrl: 'template.html'})
-@View({templateUrl: 'template.html'})
 class GesturesCmp {
   swipeDirection: string = '-';
   pinchScale: number = 1;

modules/playground/src/key_events/index.ts

@@ -1,9 +1,9 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {KeyEventsPlugin} from 'angular2/src/platform/dom/events/key_events';
 
-@Component({selector: 'key-events-app'})
+@Component({
-@View({
+  selector: 'key-events-app',
   template: `Click in the following area and press a key to display its name:<br>
   <div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>
   Click in the following area and press shift.enter:<br>

modules/playground/src/material/button/index.ts

@@ -1,5 +1,5 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {bind, provide, Component, View, ViewEncapsulation} from 'angular2/core';
+import {bind, provide, Component, ViewEncapsulation} from 'angular2/core';
 import {NgFor} from 'angular2/common';
 import {UrlResolver} from 'angular2/compiler';
 import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
@@ -7,8 +7,6 @@ import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 
 @Component({
   selector: 'demo-app',
-})
-@View({
   templateUrl: './demo_app.html',
   directives: [MdButton, MdAnchor, NgFor],
   encapsulation: ViewEncapsulation.None

modules/playground/src/material/checkbox/index.ts

@@ -1,5 +1,5 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {bind, provide, Component, Directive, View, ViewEncapsulation} from 'angular2/core';
+import {bind, provide, Component, Directive, ViewEncapsulation} from 'angular2/core';
 import {UrlResolver} from 'angular2/compiler';
 import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
@@ -7,8 +7,6 @@ import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 
 @Component({
   selector: 'demo-app',
-})
-@View({
   templateUrl: './demo_app.html',
   directives: [MdCheckbox],
   encapsulation: ViewEncapsulation.None

modules/playground/src/material/dialog/index.ts

@@ -1,13 +1,5 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {
+import {bind, provide, ElementRef, ComponentRef, Component, ViewEncapsulation} from 'angular2/core';
-  bind,
-  provide,
-  ElementRef,
-  ComponentRef,
-  Component,
-  View,
-  ViewEncapsulation
-} from 'angular2/core';
 import {UrlResolver} from 'angular2/compiler';
 import {
   MdDialog,
@@ -21,8 +13,6 @@ import {isPresent} from 'angular2/src/facade/lang';
 @Component({
   selector: 'demo-app',
   viewProviders: [MdDialog],
-})
-@View({
   templateUrl: './demo_app.html',
   directives: [],
   encapsulation: ViewEncapsulation.None,
@@ -69,8 +59,6 @@ class DemoApp {
 @Component({
   selector: 'simple-dialog',
   inputs: ['numCoconuts'],
-})
-@View({
   encapsulation: ViewEncapsulation.None,
   template: `
     <h2>This is the dialog content</h2>

modules/playground/src/material/grid_list/index.ts

@@ -1,5 +1,5 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {bind, provide, Component, View, ViewEncapsulation} from 'angular2/core';
+import {bind, provide, Component, ViewEncapsulation} from 'angular2/core';
 import {MdGridList, MdGridTile} from 'angular2_material/src/components/grid_list/grid_list';
 import {UrlResolver} from 'angular2/compiler';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
@@ -7,8 +7,6 @@ import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 
 @Component({
   selector: 'demo-app',
-})
-@View({
   templateUrl: './demo_app.html',
   directives: [MdGridList, MdGridTile],
   encapsulation: ViewEncapsulation.None,

modules/playground/src/material/input/index.ts

@@ -1,11 +1,11 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {bind, provide, Component, View, ViewEncapsulation} from 'angular2/core';
+import {bind, provide, Component, ViewEncapsulation} from 'angular2/core';
 import {MdInputContainer, MdInput} from 'angular2_material/src/components/input/input';
 import {UrlResolver} from 'angular2/compiler';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 
-@Component({selector: 'demo-app'})
+@Component({
-@View({
+  selector: 'demo-app',
   templateUrl: './demo_app.html',
   directives: [MdInputContainer, MdInput],
   encapsulation: ViewEncapsulation.None

modules/playground/src/material/progress-linear/index.ts

@@ -1,13 +1,11 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {bind, provide, Component, View, ViewEncapsulation} from 'angular2/core';
+import {bind, provide, Component, ViewEncapsulation} from 'angular2/core';
 import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear';
 import {UrlResolver} from 'angular2/src/compiler/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 
 @Component({
   selector: 'demo-app',
-})
-@View({
   templateUrl: './demo_app.html',
   directives: [MdProgressLinear],
   encapsulation: ViewEncapsulation.None,

modules/playground/src/material/radio/index.ts

@@ -1,5 +1,5 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {bind, provide, Component, View, ViewEncapsulation} from 'angular2/core';
+import {bind, provide, Component, ViewEncapsulation} from 'angular2/core';
 import {UrlResolver} from 'angular2/compiler';
 import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button';
 import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher';
@@ -8,8 +8,6 @@ import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 @Component({
   selector: 'demo-app',
   viewProviders: [MdRadioDispatcher],
-})
-@View({
   templateUrl: './demo_app.html',
   directives: [MdRadioGroup, MdRadioButton],
   encapsulation: ViewEncapsulation.None,

modules/playground/src/material/switcher/index.ts

@@ -1,13 +1,11 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {bind, provide, Component, View, ViewEncapsulation} from 'angular2/core';
+import {bind, provide, Component, ViewEncapsulation} from 'angular2/core';
 import {MdSwitch} from 'angular2_material/src/components/switcher/switch';
 import {UrlResolver} from 'angular2/src/compiler/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 
 @Component({
   selector: 'demo-app',
-})
-@View({
   templateUrl: './demo_app.html',
   directives: [MdSwitch],
   encapsulation: ViewEncapsulation.None,

modules/playground/src/model_driven_forms/index.ts

@@ -9,7 +9,7 @@ import {
   NgIf,
   NgFor
 } from 'angular2/common';
-import {Component, Directive, View, Host} from 'angular2/core';
+import {Component, Directive, Host} from 'angular2/core';
 
 import {RegExpWrapper, print, isPresent} from 'angular2/src/facade/lang';
 import {AbstractControl} from 'angular2/common';
@@ -40,8 +40,9 @@ function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
  * actual error message.
  * To make it simple, we are using a simple map here.
  */
-@Component({selector: 'show-error', inputs: ['controlPath: control', 'errorTypes: errors']})
+@Component({
-@View({
+  selector: 'show-error',
+  inputs: ['controlPath: control', 'errorTypes: errors'],
   template: `
     <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
   `,
@@ -74,8 +75,9 @@ class ShowError {
 }
 
 
-@Component({selector: 'model-driven-forms', viewProviders: [FormBuilder]})
+@Component({
-@View({
+  selector: 'model-driven-forms',
+  viewProviders: [FormBuilder],
   template: `
     <h1>Checkout Form (Model Driven)</h1>
 

modules/playground/src/person_management/index.ts

@@ -1,5 +1,5 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, Directive, View, Host, forwardRef, Provider, Injectable} from 'angular2/core';
+import {Component, Directive, Host, forwardRef, Provider, Injectable} from 'angular2/core';
 import {NgIf, NgFor, FORM_DIRECTIVES} from 'angular2/common';
 
 import {CONST_EXPR} from 'angular2/src/facade/lang';
@@ -76,8 +76,8 @@ class DataService {
 
 // ---- components
 
-@Component({selector: 'full-name-cmp'})
+@Component({
-@View({
+  selector: 'full-name-cmp',
   template: `
     <h1>Edit Full Name</h1>
     <div>
@@ -107,8 +107,8 @@ class FullNameComponent {
   get person(): Person { return this._service.currentPerson; }
 }
 
-@Component({selector: 'person-detail-cmp'})
+@Component({
-@View({
+  selector: 'person-detail-cmp',
   template: `
     <h2>{{person.fullName}}</h2>
 
@@ -155,8 +155,8 @@ class PersonsDetailComponent {
   get person(): Person { return this._service.currentPerson; }
 }
 
-@Component({selector: 'persons-cmp'})
+@Component({
-@View({
+  selector: 'persons-cmp',
   template: `
     <h1>FullName Demo</h1>
     <div>
@@ -180,8 +180,9 @@ class PersonsComponent {
 }
 
 
-@Component({selector: 'person-management-app', viewBindings: [DataService]})
+@Component({
-@View({
+  selector: 'person-management-app',
+  viewBindings: [DataService],
   template: `
     <button (click)="switchToEditName()">Edit Full Name</button>
     <button (click)="switchToPersonList()">Person Array</button>

modules/playground/src/sourcemap/index.ts

@@ -1,11 +1,9 @@
 import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 
 @Component({
   selector: 'error-app',
-})
-@View({
   template: `
            <button class="errorButton" (click)="createError()">create error</button>`
 })

modules/playground/src/template_driven_forms/index.ts

@@ -1,5 +1,5 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, Directive, View, Host, forwardRef, Provider} from 'angular2/core';
+import {Component, Directive, Host, forwardRef, Provider} from 'angular2/core';
 import {
   ControlGroup,
   NgIf,
@@ -61,8 +61,9 @@ class CreditCardValidator {
  * actual error message.
  * To make it simple, we are using a simple map here.
  */
-@Component({selector: 'show-error', inputs: ['controlPath: control', 'errorTypes: errors']})
+@Component({
-@View({
+  selector: 'show-error',
+  inputs: ['controlPath: control', 'errorTypes: errors'],
   template: `
     <span *ngIf="errorMessage !== null">{{errorMessage}}</span>
   `,
@@ -95,8 +96,8 @@ class ShowError {
 }
 
 
-@Component({selector: 'template-driven-forms'})
+@Component({
-@View({
+  selector: 'template-driven-forms',
   template: `
     <h1>Checkout Form</h1>
 

modules/playground/src/todo/index.ts

@@ -1,10 +1,14 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {NgFor} from 'angular2/common';
 import {Store, Todo, TodoFactory} from './services/TodoStore';
 
-@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory]})
+@Component({
-@View({templateUrl: 'todo.html', directives: [NgFor]})
+  selector: 'todo-app',
+  viewProviders: [Store, TodoFactory],
+  templateUrl: 'todo.html',
+  directives: [NgFor]
+})
 class TodoApp {
   todoEdit: Todo = null;
 

modules/playground/src/web_workers/kitchen_sink/index_common.ts

@@ -1,4 +1,4 @@
-import {Renderer, ElementRef, Component, Directive, View, Injectable} from 'angular2/core';
+import {Renderer, ElementRef, Component, Directive, Injectable} from 'angular2/core';
 import {StringWrapper} from 'angular2/src/facade/lang';
 
 // A service available to the Injector, used by the HelloCmp component.
@@ -33,10 +33,8 @@ class RedDec {
   selector: 'hello-app',
   // These are services that would be created if a class in the component's
   // template tries to inject them.
-  viewProviders: [GreetingService]
+  viewProviders: [GreetingService],
-})
+  // The template for the component.
-// The template for the component.
-@View({
   // Expressions in the template (like {{greeting}}) are evaluated in the
   // context of the HelloCmp class below.
   template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>

modules/playground/src/web_workers/message_broker/index_common.ts

@@ -1,11 +1,10 @@
 import {PromiseWrapper} from "angular2/src/facade/async";
-import {Component, View} from "angular2/core";
+import {Component} from "angular2/core";
 import {ServiceMessageBrokerFactory, PRIMITIVE} from "angular2/platform/worker_app";
 
 const ECHO_CHANNEL = "ECHO";
 
-@Component({selector: 'app'})
+@Component({selector: 'app', template: "<h1>WebWorker MessageBroker Test</h1>"})
-@View({template: "<h1>WebWorker MessageBroker Test</h1>"})
 export class App {
   constructor(private _serviceBrokerFactory: ServiceMessageBrokerFactory) {
     var broker = _serviceBrokerFactory.createMessageBroker(ECHO_CHANNEL, false);

modules/playground/src/web_workers/router/index_common.ts

@@ -1,4 +1,4 @@
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {Start} from './components/start';
 import {About} from './components/about';
 import {Contact} from './components/contact';

modules/playground/src/web_workers/todo/index_common.ts

@@ -1,9 +1,13 @@
-import {View, Component} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {NgFor, FORM_DIRECTIVES} from 'angular2/common';
 import {Store, Todo, TodoFactory} from './services/TodoStore';
 
-@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory]})
+@Component({
-@View({templateUrl: 'todo.html', directives: [NgFor, FORM_DIRECTIVES]})
+  selector: 'todo-app',
+  viewProviders: [Store, TodoFactory],
+  templateUrl: 'todo.html',
+  directives: [NgFor, FORM_DIRECTIVES]
+})
 export class TodoApp {
   todoEdit: Todo = null;
   inputValue: string;

modules/playground/src/zippy_component/index.ts

@@ -1,9 +1,9 @@
 import {bootstrap} from 'angular2/bootstrap';
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {Zippy} from './zippy';
 
-@Component({selector: 'zippy-app'})
+@Component({
-@View({
+  selector: 'zippy-app',
   template: `
     <zippy (open)="pushLog('open')" (close)="pushLog('close')" title="Details">
       This is some content.

tools/public_api_guard/public_api_spec.ts

@@ -546,7 +546,6 @@ const CORE = [
   'var Self:SelfFactory',
   'var SkipSelf:SkipSelfFactory',
   'var Type:any',
-  'var View:ViewFactory',
   'var ViewChild:ViewChildFactory',
   'var ViewChildren:ViewChildrenFactory',
   'var ViewQuery:QueryFactory',

typing_spec/basic_spec.ts

@@ -1,10 +1,8 @@
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {bootstrap} from 'angular2/platform/browser';
 
 @Component({
-  selector: 'my-app'
+  selector: 'my-app',
-})
-@View({
 	template: '<h1>Hello {{ name }}</h1>'
 })
 // Component controller

typing_spec/router_spec.ts

@@ -1,11 +1,9 @@
-import {Component, View} from 'angular2/core';
+import {Component} from 'angular2/core';
 import {bootstrap} from 'angular2/platform/browser';
 import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
 
 @Component({
-  selector: 'my-app'
+  selector: 'my-app',
-})
-@View({
   template: '<h1>Hello</h1>',
 })
 class FooCmp {
@@ -14,9 +12,7 @@ class FooCmp {
 
 
 @Component({
-  selector: 'my-app'
+  selector: 'my-app',
-})
-@View({
 	template: '<h1>Hello {{ name }}</h1><router-outlet></router-outlet>',
   directives: ROUTER_DIRECTIVES
 })