docs(ts-to-js): add separate template files for some components

Author: wardbell

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6

@@ -8,14 +8,13 @@ import {
 import { BrowserModule } from '@angular/platform-browser';
 
 // #docregion
+// #docregion metadata
 @Component({
+  moduleId: module.id,
   selector: 'hero-title',
-  template: `
-    <h1>{{titlePrefix}} {{title}}</h1>
-    <button (click)="ok()">OK</button>
-    <p>{{ msg }}</p>
-  `
+  templateUrl: 'title.component.html'
 })
+// #enddocregion metadata
 class TitleComponent {
   msg = '';
   constructor(

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6

@@ -9,15 +9,9 @@ import { BrowserModule } from '@angular/platform-browser';
 
 // #docregion
 @Component({
+  moduleId: module.id,
   selector: 'my-confirm',
-  template: `
-    <button (click)="onOkClick()">
-      {{okMsg}}
-    </button>
-    <button (click)="onNotOkClick()">
-      {{notOkMsg}}
-    </button>
-  `
+  templateUrl: 'confirm.component.html'
 })
 class ConfirmComponent {
   @Input() okMsg;

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html

@@ -0,0 +1,3 @@
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>

public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6

@@ -20,16 +20,15 @@ class TitleComponent {
   }
 }
 
+// #docregion metadata
 TitleComponent.annotations = [
   new Component({
+    moduleId: module.id,
     selector: 'hero-title',
-    template: `
-      <h1>{{titlePrefix}} {{title}}</h1>
-      <button (click)="ok()">OK</button>
-      <p>{{ msg }}</p>
-    `
+    templateUrl: 'title.component.html'
   })
 ];
+// #enddocregion metadata
 
 TitleComponent.parameters = [
   [new Optional(), new Inject('titlePrefix')],

public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6

@@ -23,15 +23,9 @@ class ConfirmComponent {
 
 ConfirmComponent.annotations = [
   new Component({
+    moduleId: module.id,
     selector: 'my-confirm',
-    template: `
-      <button (click)="onOkClick()">
-        {{okMsg}}
-      </button>
-      <button (click)="onNotOkClick()">
-        {{notOkMsg}}
-      </button>
-    `,
+    templateUrl: 'confirm.component.html',
     inputs: [
       'okMsg',
       'notOkMsg: cancelMsg'

public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html

@@ -0,0 +1,3 @@
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>

public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js

@@ -1,13 +1,13 @@
 (function(app) {
 
   // #docregion
+  // #docregion metadata
   var TitleComponent = ng.core.Component({
     selector: 'hero-title',
-    template:
-      '<h1>{{titlePrefix}} {{title}}</h1>' +
-      '<button (click)="ok()">OK</button>' +
-      '<p>{{ msg }}</p>'
-  }).Class({
+    templateUrl: 'app/title.component.html'
+  })
+  // #enddocregion metadata
+  .Class({
     constructor: [
       [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
       new ng.core.Attribute('title'),

public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js

@@ -2,21 +2,15 @@
   // #docregion
   var ConfirmComponent = ng.core.Component({
     selector: 'my-confirm',
+    templateUrl: 'app/confirm.component.html',
     inputs: [
       'okMsg',
       'notOkMsg: cancelMsg'
     ],
     outputs: [
       'ok',
       'notOk: cancel'
-    ],
-    template:
-      '<button (click)="onOkClick()">' +
-        '{{okMsg}}' +
-      '</button>' +
-      '<button (click)="onNotOkClick()">' +
-        '{{notOkMsg}}' +
-      '</button>'
+    ]
   }).Class({
     constructor: function() {
       this.ok = new ng.core.EventEmitter();

public/docs/_examples/cb-ts-to-js/js/app/title.component.html

@@ -0,0 +1,3 @@
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>

public/docs/_examples/cb-ts-to-js/js/index.html

@@ -16,7 +16,6 @@
     <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
     <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
     <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
-    <script src="node_modules/@angular/router-deprecated/bundles/router-deprecated.umd.js"></script>
 
     <script src="app/data.service.js"></script>
     <script src="app/hero.component.js"></script>

public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts

@@ -8,14 +8,13 @@ import {
 import { BrowserModule } from '@angular/platform-browser';
 
 // #docregion
+// #docregion metadata
 @Component({
+  moduleId: module.id,
   selector: 'hero-title',
-  template: `
-    <h1>{{titlePrefix}} {{title}}</h1>
-    <button (click)="ok()">OK</button>
-    <p>{{ msg }}</p>
-  `
+  templateUrl: 'title.component.html'
 })
+// #enddocregion metadata
 class TitleComponent {
   private msg: string = '';
   constructor(

public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts

@@ -9,15 +9,9 @@ import { BrowserModule } from '@angular/platform-browser';
 
 // #docregion
 @Component({
+  moduleId: module.id,
   selector: 'my-confirm',
-  template: `
-    <button (click)="onOkClick()">
-      {{okMsg}}
-    </button>
-    <button (click)="onNotOkClick()">
-      {{notOkMsg}}
-    </button>
-  `
+  templateUrl: 'confirm.component.html'
 })
 class ConfirmComponent {
   @Input() okMsg: string;

public/docs/_examples/cb-ts-to-js/ts/app/title.component.html

@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>