angular · btford · Mar 8, 2016
diff --git a/TOOLS_JS.md b/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 {

diff --git a/modules/angular2/docs/core/02_directives.md b/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
   ],                              |
-})                                |
-@View({                           | View annotation
-  templateUrl: 'pane.html'        |  - URL of template HTML
+  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]          |
-})                                   |
-@View({                              | Assume we have a template that needs to be
-  templateUrl: 'my_app.html',        | configured with directives to be injected.
-  directives: [House]                |
+  viewBindings: [MyService],         |
+  templateUrl: 'my_app.html',        | Assume we have a template that needs to be
+  directives: [House]                | configured with directives to be injected.
 })                                   |
 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: []
-})
-@View({
+  viewBindings: [],
   templateUrl: 'grandpa.html',
   directives: [Dad]
 })

diff --git a/modules/angular2/docs/di/di_advanced.md b/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]
 })

diff --git a/modules/angular2/src/common/common_directives.ts b/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
  *

diff --git a/modules/angular2/src/common/directives/core_directives.ts b/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))
  *

diff --git a/modules/angular2/src/common/directives/ng_switch.ts b/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'})
- * @View({
+ * @Component({
+ *   selector: 'app',
  *   template: `
  *     <p>Value = {{value}}</p>
  *     <button (click)="inc()">Increment</button>

diff --git a/modules/angular2/src/common/forms/directives.ts b/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.
  *

diff --git a/modules/angular2/src/common/forms/directives/ng_control_group.ts b/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>

diff --git a/modules/angular2/src/common/pipes/common_pipes.ts b/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,

diff --git a/modules/angular2/src/core/linker/view_resolver.ts b/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;
       }

diff --git a/modules/angular2/src/core/metadata.ts b/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
- * `@Component`
+ * Each Angular component requires a single `@Component` annotation. The `@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 =
-    <ViewFactory>makeDecorator(ViewMetadata, (fn: any) => fn.View = View);
+var View: ViewFactory = <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({...})
- * @View({
+ * @Component({
+ *   ...,
  *   template: `
  *     <item> a </item>
  *     <item> b </item>

diff --git a/modules/angular2/src/core/metadata/di.ts b/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({...})
- * @View({
+ * @Component({
+ *   ...,
  *   template: `
  *     <item> a </item>
  *     <item> b </item>

diff --git a/modules/angular2/src/router/instruction.ts b/modules/angular2/src/router/instruction.ts
@@ -59,8 +59,10 @@ export class RouteParams {
  * ])
  * class AppCmp {}
  *
- * @Component({...})
- * @View({ template: 'user: {{isAdmin}}' })
+ * @Component({
+ *   ...,
+ *   template: 'user: {{isAdmin}}'
+ * })
  * class UserCmp {
  *   string: isAdmin;
  *   constructor(data: RouteData) {

diff --git a/modules/angular2/test/common/directives/ng_class_spec.ts b/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'})
-@View({directives: [NgClass, NgFor]})
+@Component({selector: 'test-cmp', directives: [NgClass, NgFor], template: ''})
 class TestComponent {
   condition: boolean = true;
   items: any[];

diff --git a/modules/angular2/test/common/directives/ng_for_spec.ts b/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'})
-@View({directives: [NgFor, NgIf]})
+@Component({selector: 'test-cmp', directives: [NgFor, NgIf], template: ''})
 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'})
-@View({directives: [TestComponent]})
+@Component({selector: 'outer-cmp', directives: [TestComponent], template: ''})
 class ComponentUsingTestComponent {
   items: any;
   constructor() { this.items = [1, 2]; }

diff --git a/modules/angular2/test/common/directives/ng_if_spec.ts b/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'})
-@View({directives: [NgIf]})
+@Component({selector: 'test-cmp', directives: [NgIf], template: ''})
 class TestComponent {
   booleanCondition: boolean;
   nestedBooleanCondition: boolean;

diff --git a/modules/angular2/test/common/directives/ng_plural_spec.ts b/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'})
-@View({directives: [NgPlural, NgPluralCase]})
+@Component({selector: 'test-cmp', directives: [NgPlural, NgPluralCase], template: ''})
 class TestComponent {
   switchValue: number;
 

diff --git a/modules/angular2/test/common/directives/ng_style_spec.ts b/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'})
-@View({directives: [NgStyle]})
+@Component({selector: 'test-cmp', directives: [NgStyle], template: ''})
 class TestComponent {
   expr;
 }
diff --git a/modules/angular2/test/common/directives/ng_switch_spec.ts b/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'})
-@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
+@Component(
+    {selector: 'test-cmp', directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault], template: ''})
 class TestComponent {
   switchValue: any;
   when1: any;

diff --git a/modules/angular2/test/common/directives/non_bindable_spec.ts b/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'})
-@View({directives: [TestDirective]})
+@Component({selector: 'test-cmp', directives: [TestDirective], template: ''})
 class TestComponent {
   text: string;
   constructor() { this.text = 'foo'; }

diff --git a/modules/angular2/test/common/forms/integration_spec.ts b/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,

diff --git a/modules/angular2/test/compiler/runtime_compiler_spec.ts b/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'})
-@View({template: ''})
+@Component({selector: 'some-comp', template: ''})
 class SomeComponent {
 }
-Original file line number
+Diff line change
@@ Expand Up @@
     /**
      *
-     * 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.
      *
@@ Expand Down @@