refactor(ViewPort): @Template -> @Viewport, ViewPort -> ViewContainer

fixes #595

modules/angular2/test/core/compiler/element_injector_spec.js

@@ -8,7 +8,7 @@ import {onDestroy} from 'angular2/src/core/annotations/annotations';
 import {Injector, Inject, bind} from 'angular2/di';
 import {View} from 'angular2/src/core/compiler/view';
 import {ProtoRecordRange} from 'angular2/change_detection';
-import {ViewPort} from 'angular2/src/core/compiler/viewport';
+import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {NgElement} from 'angular2/src/core/dom/element';
 import {LightDom, SourceLightDom, DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
 import {Directive} from 'angular2/src/core/annotations/annotations';
@@ -409,11 +409,11 @@ export function main() {
         expect(inj.get(NgElement)).toEqual(element);
       });
 
-      it('should return viewPort', function () {
-        var viewPort = new ViewPort(null, null, null, null, null);
-        var inj = injector([], null, null, new PreBuiltObjects(null, null, viewPort, null, null));
+      it('should return viewContainer', function () {
+        var viewContainer = new ViewContainer(null, null, null, null, null);
+        var inj = injector([], null, null, new PreBuiltObjects(null, null, viewContainer, null, null));
 
-        expect(inj.get(ViewPort)).toEqual(viewPort);
+        expect(inj.get(ViewContainer)).toEqual(viewContainer);
       });
 
       it('should return bindingPropagationConfig', function () {

modules/angular2/test/core/compiler/integration_spec.js

@@ -11,10 +11,10 @@ import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_str
 import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
 import {BindingPropagationConfig} from 'angular2/src/core/compiler/binding_propagation_config';
 
-import {Decorator, Component, Template} from 'angular2/src/core/annotations/annotations';
+import {Decorator, Component, Viewport} from 'angular2/src/core/annotations/annotations';
 import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
 
-import {ViewPort} from 'angular2/src/core/compiler/viewport';
+import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {MapWrapper} from 'angular2/src/facade/collection';
 
 import {XHRMock} from 'angular2/src/mock/xhr_mock';
@@ -262,7 +262,7 @@ class PushBasedComp {
 
 @Component({
   template: new TemplateConfig({
-    directives: [MyDir, [[ChildComp], SomeTemplate, PushBasedComp]]
+    directives: [MyDir, [[ChildComp], SomeViewport, PushBasedComp]]
   })
 })
 class MyComp {
@@ -289,13 +289,13 @@ class ChildComp {
   }
 }
 
-@Template({
+@Viewport({
   selector: '[some-tmplate]'
 })
-class SomeTemplate {
-  constructor(viewPort: ViewPort) {
-    viewPort.create().setLocal('some-tmpl', 'hello');
-    viewPort.create().setLocal('some-tmpl', 'again');
+class SomeViewport {
+  constructor(container: ViewContainer) {
+    container.create().setLocal('some-tmpl', 'hello');
+    container.create().setLocal('some-tmpl', 'again');
   }
 }
 

modules/angular2/test/core/compiler/pipeline/directive_parser_spec.js

@@ -8,9 +8,7 @@ import {CompileElement} from 'angular2/src/core/compiler/pipeline/compile_elemen
 import {CompileControl} from 'angular2/src/core/compiler/pipeline/compile_control';
 import {DOM} from 'angular2/src/facade/dom';
 import {NativeShadowDomStrategy, ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
-import {Component} from 'angular2/src/core/annotations/annotations';
-import {Decorator} from 'angular2/src/core/annotations/annotations';
-import {Template} from 'angular2/src/core/annotations/annotations';
+import {Component, Decorator, Viewport} from 'angular2/src/core/annotations/annotations';
 import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {Lexer, Parser} from 'angular2/change_detection';
@@ -25,8 +23,8 @@ export function main() {
         SomeDecorator,
         SomeDecoratorIgnoringChildren,
         SomeDecoratorWithBinding,
-        SomeTemplate,
-        SomeTemplate2,
+        SomeViewport,
+        SomeViewport2,
         SomeComponent,
         SomeComponent2
       ];
@@ -55,7 +53,7 @@ export function main() {
       var results = createPipeline().process(el('<div></div>'));
       expect(results[0].decoratorDirectives).toBe(null);
       expect(results[0].componentDirective).toBe(null);
-      expect(results[0].templateDirective).toBe(null);
+      expect(results[0].viewportDirective).toBe(null);
     });
 
     describe('component directives', () => {
@@ -105,10 +103,10 @@ export function main() {
       });
     });
 
-    describe('template directives', () => {
+    describe('viewport directives', () => {
       it('should detect them in attributes', () => {
         var results = createPipeline().process(el('<template some-templ></template>'));
-        expect(results[0].templateDirective).toEqual(reader.read(SomeTemplate));
+        expect(results[0].viewportDirective).toEqual(reader.read(SomeViewport));
       });
 
       it('should detect them in property bindings', () => {
@@ -116,7 +114,7 @@ export function main() {
           'some-templ': 'someExpr'
         }});
         var results = pipeline.process(el('<template></template>'));
-        expect(results[0].templateDirective).toEqual(reader.read(SomeTemplate));
+        expect(results[0].viewportDirective).toEqual(reader.read(SomeViewport));
       });
 
       it('should detect them in variable bindings', () => {
@@ -124,10 +122,10 @@ export function main() {
           'some-templ': 'someExpr'
         }});
         var results = pipeline.process(el('<template></template>'));
-        expect(results[0].templateDirective).toEqual(reader.read(SomeTemplate));
+        expect(results[0].viewportDirective).toEqual(reader.read(SomeViewport));
       });
 
-      it('should not allow multiple template directives on the same element', () => {
+      it('should not allow multiple viewport directives on the same element', () => {
         expect( () => {
           createPipeline().process(
             el('<template some-templ some-templ2></template>')
@@ -135,12 +133,12 @@ export function main() {
         }).toThrowError('Only one template directive per element is allowed!');
       });
 
-      it('should not allow template directives on non <template> elements', () => {
+      it('should not allow viewport directives on non <template> elements', () => {
         expect( () => {
           createPipeline().process(
             el('<div some-templ></div>')
           );
-        }).toThrowError('Template directives need to be placed on <template> elements or elements with template attribute!');
+        }).toThrowError('Viewport directives need to be placed on <template> elements or elements with template attribute!');
       });
     });
 
@@ -227,15 +225,15 @@ class SomeDecoratorIgnoringChildren {
 })
 class SomeDecoratorWithBinding {}
 
-@Template({
+@Viewport({
   selector: '[some-templ]'
 })
-class SomeTemplate {}
+class SomeViewport {}
 
-@Template({
+@Viewport({
   selector: '[some-templ2]'
 })
-class SomeTemplate2 {}
+class SomeViewport2 {}
 
 @Component({
   selector: '[some-comp]'
@@ -249,7 +247,7 @@ class SomeComponent2 {}
 
 @Component({
   template: new TemplateConfig({
-    directives: [SomeDecorator, SomeTemplate, SomeTemplate2, SomeComponent, SomeComponent2]
+    directives: [SomeDecorator, SomeViewport, SomeViewport2, SomeComponent, SomeComponent2]
   })
 })
 class MyComp {}

modules/angular2/test/core/compiler/pipeline/element_binder_builder_spec.js

@@ -10,9 +10,7 @@ import {CompileStep} from 'angular2/src/core/compiler/pipeline/compile_step'
 import {CompileControl} from 'angular2/src/core/compiler/pipeline/compile_control';
 import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 
-import {Decorator} from 'angular2/src/core/annotations/annotations';
-import {Template} from 'angular2/src/core/annotations/annotations';
-import {Component} from 'angular2/src/core/annotations/annotations';
+import {Decorator, Component, Viewport} from 'angular2/src/core/annotations/annotations';
 import {ProtoView, ElementPropertyMemento, DirectivePropertyMemento} from 'angular2/src/core/compiler/view';
 import {ProtoElementInjector} from 'angular2/src/core/compiler/element_injector';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
@@ -150,12 +148,12 @@ export function main() {
     });
 
     it('should store the template directive', () => {
-      var directives = [SomeTemplateDirective];
+      var directives = [SomeViewportDirective];
       var pipeline = createPipeline({protoElementInjector: null, directives: directives});
       var results = pipeline.process(el('<div viewroot directives></div>'));
       var pv = results[0].inheritedProtoView;
 
-      expect(pv.elementBinders[0].templateDirective.type).toBe(SomeTemplateDirective);
+      expect(pv.elementBinders[0].viewportDirective.type).toBe(SomeViewportDirective);
     });
 
     it('should bind text nodes', () => {
@@ -283,7 +281,7 @@ export function main() {
         'boundprop3': 'prop3'
       });
       var directives = [SomeComponentDirectiveWithBinding,
-                        SomeTemplateDirectiveWithBinding,
+                        SomeViewportDirectiveWithBinding,
                         SomeDecoratorDirectiveWith2Bindings];
       var protoElementInjector = new ProtoElementInjector(null, 0, directives, true);
       var pipeline = createPipeline({
@@ -304,7 +302,7 @@ export function main() {
 
       expect(view.elementInjectors[0].get(SomeDecoratorDirectiveWith2Bindings).decorProp).toBe('a');
       expect(view.elementInjectors[0].get(SomeDecoratorDirectiveWith2Bindings).decorProp2).toBe('b');
-      expect(view.elementInjectors[0].get(SomeTemplateDirectiveWithBinding).templProp).toBe('b');
+      expect(view.elementInjectors[0].get(SomeViewportDirectiveWithBinding).templProp).toBe('b');
       expect(view.elementInjectors[0].get(SomeComponentDirectiveWithBinding).compProp).toBe('c');
     });
 
@@ -389,14 +387,14 @@ class SomeDecoratorDirectiveWith2Bindings {
   }
 }
 
-@Template()
-class SomeTemplateDirective {
+@Viewport()
+class SomeViewportDirective {
 }
 
-@Template({
+@Viewport({
   bind: {'boundprop2': 'templProp'}
 })
-class SomeTemplateDirectiveWithBinding {
+class SomeViewportDirectiveWithBinding {
   templProp;
   constructor() {
     this.templProp = null;

modules/angular2/test/core/compiler/pipeline/element_binding_marker_spec.js

@@ -9,7 +9,7 @@ import {CompileElement} from 'angular2/src/core/compiler/pipeline/compile_elemen
 import {CompileStep} from 'angular2/src/core/compiler/pipeline/compile_step'
 import {CompileControl} from 'angular2/src/core/compiler/pipeline/compile_control';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
-import {Template, Decorator, Component} from 'angular2/src/core/annotations/annotations';
+import {Viewport, Decorator, Component} from 'angular2/src/core/annotations/annotations';
 
 export function main() {
   describe('ElementBindingMarker', () => {
@@ -90,7 +90,7 @@ export function main() {
 
     it('should mark elements with template directives', () => {
       var results = createPipeline({
-        directives: [SomeTemplateDirective]
+        directives: [SomeViewportDirective]
       }).process(el('<div></div>'));
       assertBinding(results[0], true);
     });
@@ -121,8 +121,8 @@ class MockStep extends CompileStep {
   }
 }
 
-@Template()
-class SomeTemplateDirective {}
+@Viewport()
+class SomeViewportDirective {}
 
 @Component()
 class SomeComponentDirective {}

modules/angular2/test/core/compiler/pipeline/proto_element_injector_builder_spec.js

@@ -10,7 +10,7 @@ import {CompileStep} from 'angular2/src/core/compiler/pipeline/compile_step'
 import {CompileControl} from 'angular2/src/core/compiler/pipeline/compile_control';
 import {ProtoView} from 'angular2/src/core/compiler/view';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
-import {Template, Decorator, Component} from 'angular2/src/core/annotations/annotations';
+import {Viewport, Decorator, Component} from 'angular2/src/core/annotations/annotations';
 import {ProtoElementInjector} from 'angular2/src/core/compiler/element_injector';
 
 export function main() {
@@ -68,7 +68,7 @@ export function main() {
     });
 
     it('should create a ProtoElementInjector for elements directives', () => {
-      var directives = [SomeComponentDirective, SomeTemplateDirective, SomeDecoratorDirective];
+      var directives = [SomeComponentDirective, SomeViewportDirective, SomeDecoratorDirective];
       var results = createPipeline(directives).process(el('<div directives></div>'));
       var creationArgs = getCreationArgs(results[0].inheritedProtoElementInjector);
       var boundDirectives = creationArgs['bindings'].map((b) => b.key.token);
@@ -203,8 +203,8 @@ class MockStep extends CompileStep {
 
 class SomeComponentService {}
 
-@Template()
-class SomeTemplateDirective {}
+@Viewport()
+class SomeViewportDirective {}
 
 @Component({
   componentServices: [SomeComponentService]

modules/angular2/test/core/compiler/shadow_dom/light_dom_spec.js

@@ -6,7 +6,7 @@ import {Content} from 'angular2/src/core/compiler/shadow_dom_emulation/content_t
 import {NgElement} from 'angular2/src/core/dom/element';
 import {LightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
 import {View} from 'angular2/src/core/compiler/view';
-import {ViewPort} from 'angular2/src/core/compiler/viewport';
+import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {ElementInjector} from 'angular2/src/core/compiler/element_injector';
 import {ProtoRecordRange} from 'angular2/change_detection';
 
@@ -14,12 +14,12 @@ import {ProtoRecordRange} from 'angular2/change_detection';
 @IMPLEMENTS(ElementInjector)
 class FakeElementInjector {
   content;
-  viewPort;
+  viewContainer;
   element;
 
-  constructor(content = null, viewPort = null, element = null) {
+  constructor(content = null, viewContainer = null, element = null) {
     this.content = content;
-    this.viewPort = viewPort;
+    this.viewContainer = viewContainer;
     this.element = element;
   }
 
@@ -28,7 +28,7 @@ class FakeElementInjector {
   }
 
   hasPreBuiltObject(type) {
-    return this.viewPort != null;
+    return this.viewContainer != null;
   }
 
   forElement(n) {
@@ -37,7 +37,7 @@ class FakeElementInjector {
 
   get(t) {
     if (t === Content) return this.content;
-    if (t === ViewPort) return this.viewPort;
+    if (t === ViewContainer) return this.viewContainer;
     return null;
   }
 
@@ -61,8 +61,8 @@ class FakeView {
 }
 
 @proxy
-@IMPLEMENTS(ViewPort)
-class FakeViewPort {
+@IMPLEMENTS(ViewContainer)
+class FakeViewContainer {
   _nodes;
   _contentTagContainers;
 
@@ -128,9 +128,9 @@ export function main() {
         expect(lightDom.contentTags()).toEqual([tag]);
       });
 
-      it("should collect content tags from view ports", () => {
+      it("should collect content tags from ViewContainers", () => {
         var tag = new FakeContentTag();
-        var vp = new FakeViewPort(null, [
+        var vp = new FakeViewContainer(null, [
           new FakeView([new FakeElementInjector(tag, null)])
         ]);
 
@@ -149,13 +149,13 @@ export function main() {
         expect(toHtml(lightDom.expandedDomNodes())).toEqual(["<a></a>"]);
       });
 
-      it("should include view port nodes", () => {
+      it("should include ViewContainer nodes", () => {
         var lightDomEl = el("<div><template></template></div>")
 
         var lightDomView = new FakeView([
           new FakeElementInjector(
             null,
-            new FakeViewPort([el("<a></a>")]),
+            new FakeViewContainer([el("<a></a>")]),
             DOM.firstChild(lightDomEl))]);
 
         var lightDom = new LightDom(
@@ -225,4 +225,4 @@ export function main() {
 function toHtml(nodes) {
   if (isBlank(nodes)) return [];
   return ListWrapper.map(nodes, DOM.getOuterHTML);
-}
+}

modules/angular2/test/core/compiler/shadow_dom/shadow_dom_emulation_integration_spec.js

@@ -13,10 +13,10 @@ import {ShadowDomStrategy,
         EmulatedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
 
-import {Decorator, Component, Template} from 'angular2/src/core/annotations/annotations';
+import {Decorator, Component, Viewport} from 'angular2/src/core/annotations/annotations';
 import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
 
-import {ViewPort} from 'angular2/src/core/compiler/viewport';
+import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {StringMapWrapper, MapWrapper} from 'angular2/src/facade/collection';
 
 import {XHRMock} from 'angular2/src/mock/xhr_mock';
@@ -77,14 +77,14 @@ export function main() {
           });
         });
 
-        it("should redistribute direct child viewports when the light dom changes", (done) => {
+        it("should redistribute direct child viewcontainers when the light dom changes", (done) => {
           var temp = '<multiple-content-tags>' +
             '<div><div template="manual" class="left">A</div></div>' +
             '<div>B</div>' +
             '</multiple-content-tags>';
 
           compile(temp, (view, lc) => {
-            var dir = view.elementInjectors[1].get(ManualTemplateDirective);
+            var dir = view.elementInjectors[1].get(ManualViewportDirective);
 
             expect(view.nodes).toHaveText('(, B)');
 
@@ -109,7 +109,7 @@ export function main() {
             '</multiple-content-tags>';
 
           compile(temp, (view, lc) => {
-            var dir = view.elementInjectors[1].get(ManualTemplateDirective);
+            var dir = view.elementInjectors[1].get(ManualViewportDirective);
 
             expect(view.nodes).toHaveText('(, B)');
 
@@ -148,7 +148,7 @@ export function main() {
             '</outer>';
 
           compile(temp, (view, lc) => {
-            var dir = view.elementInjectors[1].get(ManualTemplateDirective);
+            var dir = view.elementInjectors[1].get(ManualViewportDirective);
 
             expect(view.nodes).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
 
@@ -223,36 +223,36 @@ class TestDirectiveMetadataReader extends DirectiveMetadataReader {
   }
 }
 
-@Template({
+@Viewport({
   selector: '[manual]'
 })
-class ManualTemplateDirective {
-  viewPort;
-  constructor(viewPort:ViewPort) {
-    this.viewPort = viewPort;
+class ManualViewportDirective {
+  viewContainer;
+  constructor(viewContainer:ViewContainer) {
+    this.viewContainer = viewContainer;
   }
 
-  show() { this.viewPort.create(); }
-  hide() { this.viewPort.remove(0); }
+  show() { this.viewContainer.create(); }
+  hide() { this.viewContainer.remove(0); }
 }
 
-@Template({
+@Viewport({
   selector: '[auto]',
   bind: {
     'auto': 'auto'
   }
 })
-class AutoTemplateDirective {
-  viewPort;
-  constructor(viewPort:ViewPort) {
-    this.viewPort = viewPort;
+class AutoViewportDirective {
+  viewContainer;
+  constructor(viewContainer:ViewContainer) {
+    this.viewContainer = viewContainer;
   }
 
   set auto(newValue:boolean) {
     if (newValue) {
-      this.viewPort.create();
+      this.viewContainer.create();
     } else {
-      this.viewPort.remove(0);
+      this.viewContainer.remove(0);
     }
   }
 }
@@ -280,7 +280,7 @@ class MultipleContentTagsComponent {
   selector: 'conditional-content',
   template: new TemplateConfig({
     inline: '<div>(<div template="auto: cond"><content select=".left"></content></div>, <content></content>)</div>',
-    directives: [AutoTemplateDirective]
+    directives: [AutoViewportDirective]
   })
 })
 class ConditionalContentComponent  {
@@ -337,7 +337,7 @@ class InnerInnerComponent {
 @Component({
   selector: 'my-comp',
   template: new TemplateConfig({
-    directives: [MultipleContentTagsComponent, ManualTemplateDirective,
+    directives: [MultipleContentTagsComponent, ManualViewportDirective,
       ConditionalContentComponent, OuterWithIndirectNestedComponent, OuterComponent]
   })
 })

modules/angular2/test/core/compiler/view_container_spec.js

@@ -1,6 +1,6 @@
 import {describe, xit, it, expect, beforeEach, ddescribe, iit, el, proxy} from 'angular2/test_lib';
 import {View, ProtoView} from 'angular2/src/core/compiler/view';
-import {ViewPort} from 'angular2/src/core/compiler/viewport';
+import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {IMPLEMENTS} from 'angular2/src/facade/lang';
 import {DOM, Node} from 'angular2/src/facade/dom';
 import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
@@ -61,8 +61,8 @@ class HydrateAwareFakeView {
 }
 
 export function main() {
-  describe('viewport', () => {
-    var viewPort, parentView, protoView, dom, customViewWithOneNode,
+  describe('ViewContainer', () => {
+    var viewContainer, parentView, protoView, dom, customViewWithOneNode,
         customViewWithTwoNodes, elementInjector;
 
     beforeEach(() => {
@@ -71,19 +71,19 @@ export function main() {
       parentView = createView([dom.childNodes[0]]);
       protoView = new ProtoView(el('<div>hi</div>'), new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
       elementInjector = new ElementInjector(null, null, null, null);
-      viewPort = new ViewPort(parentView, insertionElement, protoView, elementInjector, null);
+      viewContainer = new ViewContainer(parentView, insertionElement, protoView, elementInjector, null);
       customViewWithOneNode = createView([el('<div>single</div>')]);
       customViewWithTwoNodes = createView([el('<div>one</div>'), el('<div>two</div>')]);
     });
 
     describe('when dehydrated', () => {
       it('should throw if create is called', () => {
-        expect(() => viewPort.create()).toThrowError();
+        expect(() => viewContainer.create()).toThrowError();
       });
     });
 
     describe('when hydrated', () => {
-      function textInViewPort() {
+      function textInViewContainer() {
         var out = '';
         // skipping starting filler, insert-me and final filler.
         for (var i = 2; i < dom.childNodes.length - 1; i++) {
@@ -94,84 +94,84 @@ export function main() {
       }
 
       beforeEach(() => {
-        viewPort.hydrate(new Injector([]), null);
+        viewContainer.hydrate(new Injector([]), null);
         var fillerView = createView([el('<filler>filler</filler>')]);
-        viewPort.insert(fillerView);
+        viewContainer.insert(fillerView);
       });
 
       it('should create new views from protoView', () => {
-        viewPort.create();
-        expect(textInViewPort()).toEqual('filler hi');
-        expect(viewPort.length).toBe(2);
+        viewContainer.create();
+        expect(textInViewContainer()).toEqual('filler hi');
+        expect(viewContainer.length).toBe(2);
       });
 
       it('should create new views from protoView at index', () => {
-        viewPort.create(0);
-        expect(textInViewPort()).toEqual('hi filler');
-        expect(viewPort.length).toBe(2);
+        viewContainer.create(0);
+        expect(textInViewContainer()).toEqual('hi filler');
+        expect(viewContainer.length).toBe(2);
       });
 
       it('should insert new views at the end by default', () => {
-        viewPort.insert(customViewWithOneNode);
-        expect(textInViewPort()).toEqual('filler single');
-        expect(viewPort.get(1)).toBe(customViewWithOneNode);
-        expect(viewPort.length).toBe(2);
+        viewContainer.insert(customViewWithOneNode);
+        expect(textInViewContainer()).toEqual('filler single');
+        expect(viewContainer.get(1)).toBe(customViewWithOneNode);
+        expect(viewContainer.length).toBe(2);
       });
 
       it('should insert new views at the given index', () => {
-        viewPort.insert(customViewWithOneNode, 0);
-        expect(textInViewPort()).toEqual('single filler');
-        expect(viewPort.get(0)).toBe(customViewWithOneNode);
-        expect(viewPort.length).toBe(2);
+        viewContainer.insert(customViewWithOneNode, 0);
+        expect(textInViewContainer()).toEqual('single filler');
+        expect(viewContainer.get(0)).toBe(customViewWithOneNode);
+        expect(viewContainer.length).toBe(2);
       });
 
       it('should remove the last view by default', () => {
-        viewPort.insert(customViewWithOneNode);
+        viewContainer.insert(customViewWithOneNode);
 
-        viewPort.remove();
+        viewContainer.remove();
 
-        expect(textInViewPort()).toEqual('filler');
-        expect(viewPort.length).toBe(1);
+        expect(textInViewContainer()).toEqual('filler');
+        expect(viewContainer.length).toBe(1);
       });
 
       it('should remove the view at a given index', () => {
-        viewPort.insert(customViewWithOneNode);
-        viewPort.insert(customViewWithTwoNodes);
+        viewContainer.insert(customViewWithOneNode);
+        viewContainer.insert(customViewWithTwoNodes);
 
-        viewPort.remove(1);
+        viewContainer.remove(1);
 
-        expect(textInViewPort()).toEqual('filler one two');
-        expect(viewPort.get(1)).toBe(customViewWithTwoNodes);
-        expect(viewPort.length).toBe(2);
+        expect(textInViewContainer()).toEqual('filler one two');
+        expect(viewContainer.get(1)).toBe(customViewWithTwoNodes);
+        expect(viewContainer.length).toBe(2);
       });
 
       it('should detach the last view by default', () => {
-        viewPort.insert(customViewWithOneNode);
-        expect(viewPort.length).toBe(2);
+        viewContainer.insert(customViewWithOneNode);
+        expect(viewContainer.length).toBe(2);
 
-        var detachedView = viewPort.detach();
+        var detachedView = viewContainer.detach();
 
         expect(detachedView).toBe(customViewWithOneNode);
-        expect(textInViewPort()).toEqual('filler');
-        expect(viewPort.length).toBe(1);
+        expect(textInViewContainer()).toEqual('filler');
+        expect(viewContainer.length).toBe(1);
       });
 
       it('should detach the view at a given index', () => {
-        viewPort.insert(customViewWithOneNode);
-        viewPort.insert(customViewWithTwoNodes);
-        expect(viewPort.length).toBe(3);
+        viewContainer.insert(customViewWithOneNode);
+        viewContainer.insert(customViewWithTwoNodes);
+        expect(viewContainer.length).toBe(3);
 
-        var detachedView = viewPort.detach(1);
+        var detachedView = viewContainer.detach(1);
         expect(detachedView).toBe(customViewWithOneNode);
-        expect(textInViewPort()).toEqual('filler one two');
-        expect(viewPort.length).toBe(2);
+        expect(textInViewContainer()).toEqual('filler one two');
+        expect(viewContainer.length).toBe(2);
       });
 
       it('should keep views hydration state during insert', () => {
         var hydratedView = new HydrateAwareFakeView(true);
         var dehydratedView = new HydrateAwareFakeView(false);
-        viewPort.insert(hydratedView);
-        viewPort.insert(dehydratedView);
+        viewContainer.insert(hydratedView);
+        viewContainer.insert(dehydratedView);
 
         expect(hydratedView.hydrated()).toBe(true);
         expect(dehydratedView.hydrated()).toBe(false);
@@ -179,8 +179,8 @@ export function main() {
 
       it('should dehydrate on remove', () => {
         var hydratedView = new HydrateAwareFakeView(true);
-        viewPort.insert(hydratedView);
-        viewPort.remove();
+        viewContainer.insert(hydratedView);
+        viewContainer.remove();
 
         expect(hydratedView.hydrated()).toBe(false);
       });
@@ -188,21 +188,21 @@ export function main() {
       it('should keep views hydration state during detach', () => {
         var hydratedView = new HydrateAwareFakeView(true);
         var dehydratedView = new HydrateAwareFakeView(false);
-        viewPort.insert(hydratedView);
-        viewPort.insert(dehydratedView);
+        viewContainer.insert(hydratedView);
+        viewContainer.insert(dehydratedView);
 
-        expect(viewPort.detach().hydrated()).toBe(false);
-        expect(viewPort.detach().hydrated()).toBe(true);
+        expect(viewContainer.detach().hydrated()).toBe(false);
+        expect(viewContainer.detach().hydrated()).toBe(true);
       });
 
       it('should support adding/removing views with more than one node', () => {
-        viewPort.insert(customViewWithTwoNodes);
-        viewPort.insert(customViewWithOneNode);
+        viewContainer.insert(customViewWithTwoNodes);
+        viewContainer.insert(customViewWithOneNode);
 
-        expect(textInViewPort()).toEqual('filler one two single');
+        expect(textInViewContainer()).toEqual('filler one two single');
 
-        viewPort.remove(1);
-        expect(textInViewPort()).toEqual('filler single');
+        viewContainer.remove(1);
+        expect(textInViewContainer()).toEqual('filler single');
       });
     });
 
@@ -210,7 +210,7 @@ export function main() {
       var fancyView;
       beforeEach(() => {
         var parser = new Parser(new Lexer());
-        viewPort.hydrate(new Injector([]), null);
+        viewContainer.hydrate(new Injector([]), null);
 
         var pv = new ProtoView(el('<div class="ng-binding">{{}}</div>'),
           new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
@@ -220,7 +220,7 @@ export function main() {
       });
 
       it('hydrating should update rootElementInjectors and parent change detector', () => {
-        viewPort.insert(fancyView);
+        viewContainer.insert(fancyView);
         ListWrapper.forEach(fancyView.rootElementInjectors, (inj) =>
             expect(inj.parent).toBe(elementInjector));
 
@@ -228,12 +228,12 @@ export function main() {
       });
 
       it('dehydrating should update rootElementInjectors and parent change detector', () => {
-        viewPort.insert(fancyView);
-        viewPort.remove();
+        viewContainer.insert(fancyView);
+        viewContainer.remove();
         ListWrapper.forEach(fancyView.rootElementInjectors, (inj) =>
             expect(inj.parent).toBe(null));
         expect(parentView.changeDetector.children.length).toBe(0);
-        expect(viewPort.length).toBe(0);
+        expect(viewContainer.length).toBe(0);
       });
     });
   });

modules/angular2/test/core/compiler/view_spec.js

@@ -3,7 +3,7 @@ import {ProtoView, ElementPropertyMemento, DirectivePropertyMemento} from 'angul
 import {ProtoElementInjector, ElementInjector, DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
 import {EmulatedShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
-import {Component, Decorator, Template, Directive, onChange} from 'angular2/src/core/annotations/annotations';
+import {Component, Decorator, Viewport, Directive, onChange} from 'angular2/src/core/annotations/annotations';
 import {Lexer, Parser, DynamicProtoChangeDetector,
   ChangeDetector} from 'angular2/change_detection';
 import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
@@ -13,14 +13,14 @@ import {DOM, Element} from 'angular2/src/facade/dom';
 import {int, IMPLEMENTS} from 'angular2/src/facade/lang';
 import {Injector} from 'angular2/di';
 import {View} from 'angular2/src/core/compiler/view';
-import {ViewPort} from 'angular2/src/core/compiler/viewport';
+import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {reflector} from 'angular2/src/reflection/reflection';
 import {VmTurnZone} from 'angular2/src/core/zone/vm_turn_zone';
 import {EventManager} from 'angular2/src/core/events/event_manager';
 
 @proxy
-@IMPLEMENTS(ViewPort)
-class FakeViewPort {
+@IMPLEMENTS(ViewContainer)
+class FakeViewContainer {
   templateElement;
 
   constructor(templateElement) {
@@ -42,7 +42,7 @@ class FakeView {
 
 export function main() {
   describe('view', function() {
-    var parser, someComponentDirective, someTemplateDirective;
+    var parser, someComponentDirective, someViewportDirective;
 
     function createView(protoView, eventManager: EventManager = null) {
       var ctx = new MyEvaluationContext();
@@ -54,7 +54,7 @@ export function main() {
     beforeEach(() => {
       parser = new Parser(new Lexer());
       someComponentDirective = new DirectiveMetadataReader().read(SomeComponent);
-      someTemplateDirective = new DirectiveMetadataReader().read(SomeTemplate);
+      someViewportDirective = new DirectiveMetadataReader().read(SomeViewport);
     });
 
     describe('instantiated from protoView', () => {
@@ -409,30 +409,30 @@ export function main() {
       });
 
       describe('with template views', () => {
-        function createViewWithTemplate() {
+        function createViewWithViewport() {
           var templateProtoView = new ProtoView(
             el('<div id="1"></div>'), new DynamicProtoChangeDetector(), null);
           var pv = new ProtoView(el('<someTmpl class="ng-binding"></someTmpl>'),
             new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
-          var binder = pv.bindElement(new ProtoElementInjector(null, 0, [SomeTemplate]));
-          binder.templateDirective = someTemplateDirective;
+          var binder = pv.bindElement(new ProtoElementInjector(null, 0, [SomeViewport]));
+          binder.viewportDirective = someViewportDirective;
           binder.nestedProtoView = templateProtoView;
 
           return createView(pv);
         }
 
-        it('should create a viewPort for the template directive', () => {
-          var view = createViewWithTemplate();
+        it('should create a ViewContainer for the Viewport directive', () => {
+          var view = createViewWithViewport();
 
-          var tmplComp = view.rootElementInjectors[0].get(SomeTemplate);
-          expect(tmplComp.viewPort).not.toBe(null);
+          var tmplComp = view.rootElementInjectors[0].get(SomeViewport);
+          expect(tmplComp.viewContainer).not.toBe(null);
         });
 
-        it('dehydration should dehydrate viewports', () => {
-          var view = createViewWithTemplate();
+        it('dehydration should dehydrate viewcontainers', () => {
+          var view = createViewWithViewport();
 
-          var tmplComp = view.rootElementInjectors[0].get(SomeTemplate);
-          expect(tmplComp.viewPort.hydrated()).toBe(false);
+          var tmplComp = view.rootElementInjectors[0].get(SomeViewport);
+          expect(tmplComp.viewContainer.hydrated()).toBe(false);
         });
       });
 
@@ -671,13 +671,13 @@ class ServiceDependentDecorator {
   }
 }
 
-@Template({
+@Viewport({
   selector: 'someTmpl'
 })
-class SomeTemplate {
-  viewPort: ViewPort;
-  constructor(viewPort: ViewPort) {
-    this.viewPort = viewPort;
+class SomeViewport {
+  viewContainer: ViewContainer;
+  constructor(viewContainer: ViewContainer) {
+    this.viewContainer = viewContainer;
   }
 }
 

modules/angular2/test/directives/foreach_spec.js

@@ -9,10 +9,10 @@ import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 
-import {Decorator, Component, Template} from 'angular2/src/core/annotations/annotations';
+import {Decorator, Component, Viewport} from 'angular2/src/core/annotations/annotations';
 import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
 
-import {ViewPort} from 'angular2/src/core/compiler/viewport';
+import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
 import {Foreach} from 'angular2/src/directives/foreach';