feat(compiler): added the DynamicComponent annotation

modules/angular2/src/core/annotations/annotations.js

@@ -233,6 +233,40 @@ export class Component extends Directive {
   }
 }
 
+/**
+ * @publicModule angular2/angular2
+ */
+export class DynamicComponent extends Directive {
+  services:any; //List;
+
+  @CONST()
+  constructor({
+    selector,
+    bind,
+    events,
+    services,
+    implementsTypes,
+    lifecycle
+    }:{
+      selector:string,
+      bind:any,
+      events:any,
+      services:List,
+      implementsTypes:List,
+      lifecycle:List
+    }={}) {
+    super({
+      selector: selector,
+      bind: bind,
+      events: events,
+      implementsTypes: implementsTypes,
+      lifecycle: lifecycle
+    });
+
+    this.services = services;
+  }
+}
+
 /**
  * @publicModule angular2/angular2
  */

modules/angular2/src/core/compiler/compiler.js

@@ -163,7 +163,7 @@ export class Compiler {
     var nestedPVPromises = [];
     for (var i = 0; i < compileElements.length; i++) {
       var ce = compileElements[i];
-      if (isPresent(ce.componentDirective)) {
+      if (ce.hasNestedView) {
         this._compileNestedProtoView(ce, nestedPVPromises);
       }
     }

modules/angular2/src/core/compiler/pipeline/compile_element.js

@@ -2,7 +2,7 @@ import {List, Map, ListWrapper, MapWrapper} from 'angular2/src/facade/collection
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {int, isBlank, isPresent, Type, StringJoiner, assertionsEnabled} from 'angular2/src/facade/lang';
 import {DirectiveMetadata} from '../directive_metadata';
-import {Decorator, Component, Viewport} from '../../annotations/annotations';
+import {Decorator, Component, Viewport, DynamicComponent} from '../../annotations/annotations';
 import {ElementBinder} from '../element_binder';
 import {ProtoElementInjector} from '../element_injector';
 import {ProtoView} from '../view';
@@ -30,6 +30,7 @@ export class CompileElement {
   decoratorDirectives:List<DirectiveMetadata>;
   viewportDirective:DirectiveMetadata;
   componentDirective:DirectiveMetadata;
+  hasNestedView:boolean;
   _allDirectives:List<DirectiveMetadata>;
   isViewRoot:boolean;
   hasBindings:boolean;
@@ -54,6 +55,7 @@ export class CompileElement {
     this.decoratorDirectives = null;
     this.viewportDirective = null;
     this.componentDirective = null;
+    this.hasNestedView = false;
     this._allDirectives = null;
     this.isViewRoot = false;
     this.hasBindings = false;
@@ -157,6 +159,9 @@ export class CompileElement {
       this.viewportDirective = directive;
     } else if (annotation instanceof Component) {
       this.componentDirective = directive;
+      this.hasNestedView = true;
+    } else if (annotation instanceof DynamicComponent) {
+      this.componentDirective = directive;
     }
   }
 

modules/angular2/src/core/compiler/pipeline/directive_parser.js

@@ -5,7 +5,7 @@ import {SelectorMatcher} from '../selector';
 import {CssSelector} from '../selector';
 
 import {DirectiveMetadata} from '../directive_metadata';
-import {Component, Viewport} from '../../annotations/annotations';
+import {DynamicComponent, Component, Viewport} from '../../annotations/annotations';
 import {CompileStep} from './compile_step';
 import {CompileElement} from './compile_element';
 import {CompileControl} from './compile_control';
@@ -109,6 +109,9 @@ function updateMatchedProperties(matchedProperties, selector, directive) {
 
 // check if the directive is compatible with the current element
 function checkDirectiveValidity(directive, current, isTemplateElement) {
+  var isComponent = directive.annotation instanceof Component || directive.annotation instanceof DynamicComponent;
+  var alreadyHasComponent = isPresent(current.componentDirective);
+
   if (directive.annotation instanceof Viewport) {
     if (!isTemplateElement) {
       throw new BaseException(`Viewport directives need to be placed on <template> elements or elements ` +
@@ -118,7 +121,8 @@ function checkDirectiveValidity(directive, current, isTemplateElement) {
     }
   } else if (isTemplateElement) {
     throw new BaseException(`Only template directives are allowed on template elements - check ${current.elementDescription}`);
-  } else if ((directive.annotation instanceof Component) && isPresent(current.componentDirective)) {
+
+  } else if (isComponent && alreadyHasComponent) {
     throw new BaseException(`Multiple component directives not allowed on the same element - check ${current.elementDescription}`);
   }
 }

modules/angular2/src/core/compiler/view.js

@@ -171,7 +171,7 @@ export class View {
         }
       }
 
-      if (isPresent(componentDirective)) {
+      if (isPresent(binders[i].nestedProtoView) && isPresent(componentDirective)) {
         this.componentChildViews[componentChildViewIndex++].hydrate(shadowDomAppInjector,
           elementInjector, this.lightDoms[i], elementInjector.getComponent(), null);
       }
@@ -441,7 +441,7 @@ export class ProtoView {
       // componentChildViews
       var lightDom = null;
       var bindingPropagationConfig = null;
-      if (isPresent(binder.componentDirective)) {
+      if (isPresent(binder.nestedProtoView) && isPresent(binder.componentDirective)) {
         var strategy = this.shadowDomStrategy;
         var childView = binder.nestedProtoView.instantiate(elementInjector, eventManager);
         changeDetector.addChild(childView.changeDetector);