feat(Compiler): Multiple template per component

fixes #596

- TemplateConfig becomes Template
- introduce a TemplateResolver to pick the cmp template,
- @Component and @Template are disociated

modules/examples/src/gestures/index.js

@@ -1,13 +1,9 @@
-import {bootstrap, Component, TemplateConfig} from 'angular2/core';
+import {bootstrap, Component, Template} from 'angular2/core';
 import {reflector} from 'angular2/src/reflection/reflection';
 import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
 
-@Component({
-  selector: 'gestures-app',
-  template: new TemplateConfig({
-    url: 'template.html'
-  })
-})
+@Component({selector: 'gestures-app'})
+@Template({url: 'template.html'})
 class GesturesCmp {
   swipeDirection: string;
   pinchScale: number;

modules/examples/src/hello_world/index_common.js

@@ -1,4 +1,4 @@
-import {bootstrap, Component, Decorator, TemplateConfig, NgElement} from 'angular2/angular2';
+import {bootstrap, Component, Decorator, Template, NgElement} from 'angular2/angular2';
 
 // Angular 2.0 supports 3 basic types of directives:
 // - Component - the basic building blocks of Angular 2.0 apps. Backed by
@@ -15,19 +15,19 @@ import {bootstrap, Component, Decorator, TemplateConfig, NgElement} from 'angula
   selector: 'hello-app',
   // These are services that would be created if a class in the component's
   // template tries to inject them.
-  componentServices: [GreetingService],
-  template: new TemplateConfig({
-    // The template for the component.
-    // Expressions in the template (like {{greeting}}) are evaluated in the
-    // context of the HelloCmp class below.
-    inline: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
-             <button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
-    // All directives used in the template need to be specified. This allows for
-    // modularity (RedDec can only be used in this template)
-    // and better tooling (the template can be invalidated if the attribute is
-    // misspelled).
-    directives: [RedDec]
-  })
+  componentServices: [GreetingService]
+})
+// The template for the component.
+@Template({
+  // Expressions in the template (like {{greeting}}) are evaluated in the
+  // context of the HelloCmp class below.
+  inline: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
+           <button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
+  // All directives used in the template need to be specified. This allows for
+  // modularity (RedDec can only be used in this template)
+  // and better tooling (the template can be invalidated if the attribute is
+  // misspelled).
+  directives: [RedDec]
 })
 class HelloCmp {
   greeting: string;

modules/examples/src/hello_world/index_static.js

@@ -1,6 +1,6 @@
 import *  as app from './index_common';
 
-import {Component, Decorator, TemplateConfig, NgElement} from 'angular2/angular2';
+import {Component, Decorator, Template, NgElement} from 'angular2/angular2';
 import {Lexer, Parser, ChangeDetection, ChangeDetector} from 'angular2/change_detection';
 import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
 
@@ -8,6 +8,7 @@ import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
+import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
 import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
 import {XHRImpl} from 'angular2/src/core/compiler/xhr/xhr_impl';
 
@@ -17,14 +18,16 @@ function setup() {
   reflector.registerType(app.HelloCmp, {
     "factory": (service) => new app.HelloCmp(service),
     "parameters": [[app.GreetingService]],
-    "annotations" : [new Component({
-      selector: 'hello-app',
-      componentServices: [app.GreetingService],
-      template: new TemplateConfig({
+    "annotations" : [
+      new Component({
+        selector: 'hello-app',
+        componentServices: [app.GreetingService]
+      }),
+      new Template({
         directives: [app.RedDec],
         inline: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
-                 <button class="changeButton" (click)="changeGreeting()">change greeting</button>`})
-    })]
+                 <button class="changeButton" (click)="changeGreeting()">change greeting</button>`
+      })]
   });
 
   reflector.registerType(app.RedDec, {
@@ -40,10 +43,12 @@ function setup() {
   });
 
   reflector.registerType(Compiler, {
-    "factory": (changeDetection, templateLoader, reader, parser, compilerCache, shadowDomStrategy) =>
-      new Compiler(changeDetection, templateLoader, reader, parser, compilerCache, shadowDomStrategy),
+    "factory": (changeDetection, templateLoader, reader, parser, compilerCache, shadowDomStrategy,
+                resolver) =>
+      new Compiler(changeDetection, templateLoader, reader, parser, compilerCache, shadowDomStrategy,
+        resolver),
     "parameters": [[ChangeDetection], [TemplateLoader], [DirectiveMetadataReader], [Parser],
-                   [CompilerCache], [ShadowDomStrategy]],
+                   [CompilerCache], [ShadowDomStrategy], [TemplateResolver]],
     "annotations": []
   });
 
@@ -65,6 +70,12 @@ function setup() {
     "annotations": []
   });
 
+  reflector.registerType(TemplateResolver, {
+    "factory": () => new TemplateResolver(),
+    "parameters": [],
+    "annotations": []
+  });
+
   reflector.registerType(XHR, {
     "factory": () => new XHRImpl(),
     "parameters": [],