From 12eb19fa3c34bb48b28da8bd33d94d7cc0526cf5 Mon Sep 17 00:00:00 2001
From: Filipe Silva <filipematossilva@gmail.com>
Date: Thu, 13 Oct 2016 17:59:00 +0100
Subject: [PATCH 1/4] feat(cb-ts-to-js): add es6 examples update docshredder to
 shred .es6 optimized focus gulp task convert imports and metadate sections
 add DI section add host and query metadata section add intro fix
 capitalization and grammar

---
 gulpfile.js                                   |  11 +-
 public/docs/_examples/.gitignore              |   1 +
 .../docs/_examples/_boilerplate/package.json  |   1 +
 .../cb-ts-to-js/js-es6-decorators/.babelrc    |   6 +
 .../js-es6-decorators/app/data.service.es6    |  10 +
 .../hero-di-inject-additional.component.es6   |  50 ++
 .../app/hero-di-inject.component.es6          |  22 +
 .../app/hero-di.component.es6                 |  26 +
 .../app/hero-io.component.es6                 |  73 ++
 .../app/hero-lifecycle.component.es6          |  27 +
 .../js-es6-decorators/app/hero.component.es6  |  30 +
 .../app/heroes-bindings.component.es6         |  42 +
 .../app/heroes-queries.component.es6          |  88 ++
 .../js-es6-decorators/app/main.es6            |  30 +
 .../js-es6-decorators/example-config.json     |   4 +
 .../cb-ts-to-js/js-es6-decorators/index.html  |  51 ++
 .../cb-ts-to-js/js-es6-decorators/plnkr.json  |   8 +
 .../_examples/cb-ts-to-js/js-es6/.babelrc     |   5 +
 .../cb-ts-to-js/js-es6/app/data.service.es6   |  13 +
 .../hero-di-inject-additional.component.es6   |  61 ++
 .../js-es6/app/hero-di-inject.component.es6   |  32 +
 .../js-es6/app/hero-di.component.es6          |  35 +
 .../js-es6/app/hero-io.component.es6          |  85 ++
 .../js-es6/app/hero-lifecycle.component.es6   |  31 +
 .../cb-ts-to-js/js-es6/app/hero.component.es6 |  37 +
 .../js-es6/app/heroes-bindings.component.es6  |  48 ++
 .../js-es6/app/heroes-queries.component.es6   |  98 +++
 .../_examples/cb-ts-to-js/js-es6/app/main.es6 |  30 +
 .../cb-ts-to-js/js-es6/example-config.json    |   4 +
 .../_examples/cb-ts-to-js/js-es6/index.html   |  52 ++
 .../_examples/cb-ts-to-js/js-es6/plnkr.json   |   8 +
 .../hero-di-inject-additional.component.js    |   7 +-
 .../js/app/hero-di-inject.component.js        |  13 +-
 .../js/app/hero-di-inline.component.js        |  11 +-
 .../cb-ts-to-js/js/app/hero-di.component.js   |   2 +
 .../cb-ts-to-js/js/app/hero-dsl.component.js  |   3 +-
 .../js/app/hero-lifecycle.component.js        |   7 +-
 .../cb-ts-to-js/js/app/hero.component.js      |   7 +-
 .../docs/_examples/cb-ts-to-js/js/app/main.js |   9 +-
 .../hero-di-inject-additional.component.ts    |   9 +-
 .../ts/app/hero-di-inject.component.ts        |   5 +-
 .../cb-ts-to-js/ts/app/hero-di.component.ts   |   1 +
 .../ts/app/hero-lifecycle.component.ts        |   3 +-
 .../ts/app/heroes-bindings.component.ts       |  11 +-
 public/docs/_examples/package.json            |   5 +-
 public/docs/js/latest/cookbook/ts-to-js.jade  | 801 +++++++++---------
 tools/doc-shredder/doc-shredder.js            |   2 +-
 tools/doc-shredder/regionExtractor.js         |   1 +
 48 files changed, 1470 insertions(+), 446 deletions(-)
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/index.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json

diff --git a/gulpfile.js b/gulpfile.js
index d24edb1f16..765dd3e006 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) {
    e2eSpecPaths.forEach(function(specPath) {
     // get all of the examples under each dir where a pcFilename is found
     localExamplePaths = getExamplePaths(specPath, true);
-    // Filter by language
-    localExamplePaths = localExamplePaths.filter(function (fn) {
-      return fn.match('/'+lang+'$') != null;
-    });
+    // Filter by example name
     if (filter) {
       localExamplePaths = localExamplePaths.filter(function (fn) {
         return fn.match(filter) != null;
       })
     }
+    // Filter by language, also supports variations like js-es6
+    localExamplePaths = localExamplePaths.filter(function (fn) {
+      return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
+    });
     localExamplePaths.forEach(function(examplePath) {
       examplePaths.push(examplePath);
     })
@@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) {
 }
 
 function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
-  var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
+  var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
   var includePattern = path.join(shredOptions.examplesDir, watchPattern);
   // removed this version because gulp.watch has the same glob issue that dgeni has.
   // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index b6733dc6ea..b1a1357472 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -11,6 +11,7 @@ wallaby.js
 
 _test-output
 **/ts/**/*.js
+**/js-es6*/**/*.js
 **/ts-snippets/**/*.js
 *.d.ts
 
diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json
index 3f255fcbd6..bcccdd978a 100644
--- a/public/docs/_examples/_boilerplate/package.json
+++ b/public/docs/_examples/_boilerplate/package.json
@@ -18,6 +18,7 @@
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
     "build:cli": "ng build",
     "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "build:babel": "babel app -d app --extensions \".es6\" --source-maps",
     "copy-dist-files": "node ./copy-dist-files.js",
     "i18n": "ng-xi18n"
   },
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
new file mode 100644
index 0000000000..3aaf507508
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "angular2"
+  ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
new file mode 100644
index 0000000000..7e9c7456c6
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DataService {
+  constructor() {
+  }
+  getHeroName() {
+    return 'Windstorm';
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
new file mode 100644
index 0000000000..8cd77b51f6
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
@@ -0,0 +1,50 @@
+import {
+  Attribute,
+  Component,
+  Inject,
+  Optional,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+@Component({
+  selector: 'hero-title',
+  template: `
+    <h1>{{titlePrefix}} {{title}}</h1>
+    <button (click)="ok()">OK</button>
+    <p>{{ msg }}</p>
+  `
+})
+class TitleComponent {
+  msg = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() titlePrefix,
+    @Attribute('title') title
+  ) {
+    this.titlePrefix = titlePrefix;
+    this.title = title;
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #enddocregion
+
+@Component({
+  selector: 'hero-di-inject-additional',
+  template: `<hero-title title="Tour of Heroes">
+  </hero-title>`
+})
+class AppComponent { }
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    TitleComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class HeroesDIInjectAdditionalModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
new file mode 100644
index 0000000000..3a89867051
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
@@ -0,0 +1,22 @@
+import { Component, Inject, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+@Component({
+  selector: 'hero-di-inject',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+class HeroComponent {
+  constructor(@Inject('heroName') name) {
+    this.name = name;
+  }
+}
+// #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesDIInjectModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
new file mode 100644
index 0000000000..e8341509a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
@@ -0,0 +1,26 @@
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { DataService } from './data.service';
+
+// #docregion
+@Component({
+  selector: 'hero-di',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+
+class HeroComponent {
+  name;
+  constructor(dataService: DataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+// #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [ DataService ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesDIModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
new file mode 100644
index 0000000000..2b954b138a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
@@ -0,0 +1,73 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+@Component({
+  selector: 'my-confirm',
+  template: `
+    <button (click)="onOkClick()">
+      {{okMsg}}
+    </button>
+    <button (click)="onNotOkClick()">
+      {{notOkMsg}}
+    </button>
+  `
+})
+class ConfirmComponent {
+  @Input() okMsg;
+  @Input('cancelMsg') notOkMsg;
+  @Output() ok =
+    new EventEmitter();
+  @Output('cancel') notOk =
+    new EventEmitter();
+
+  onOkClick() {
+    this.ok.next(true);
+  }
+  onNotOkClick() {
+    this.notOk.next(true);
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'hero-io',
+  template: `
+    <my-confirm [okMsg]="'OK'"
+                [cancelMsg]="'Cancel'"
+                (ok)="onOk()"
+                (cancel)="onCancel()">
+    </my-confirm>
+    <span *ngIf="okClicked">OK clicked</span>
+    <span *ngIf="cancelClicked">Cancel clicked</span>
+  `
+})
+class AppComponent {
+  okClicked;
+  cancelClicked;
+
+  onOk() {
+    this.okClicked = true;
+  }
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
+
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class HeroesIOModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..6a935731b5
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
@@ -0,0 +1,27 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+// #enddocregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@Component({
+  selector: 'hero-lifecycle',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+// #docregion
+class HeroComponent{
+  name;
+  ngOnInit() {
+    this.name = 'Windstorm';
+  }
+}
+// #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesLifecycleModule { }
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
new file mode 100644
index 0000000000..4b4ba8529d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion metadata
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-view',
+  template:
+    '<h1>Hero: {{getName()}}</h1>'
+})
+// #docregion appexport
+// #docregion class
+export class HeroComponent {
+  title = 'Hero Detail';
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion class
+// #enddocregion appexport
+// #enddocregion metadata
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesModule { }
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6
new file mode 100644
index 0000000000..ef959eabbb
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6
@@ -0,0 +1,42 @@
+import {
+  Component,
+  HostBinding,
+  HostListener,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+@Component({
+  selector: 'heroes-bindings',
+  template: `
+    <h1 [class.active]="active">
+      Tour of Heroes
+    </h1>
+  `
+})
+class HeroesComponent {
+  @HostBinding() title = 'Tooltip content';
+  @HostBinding('class.heading') hClass = true;
+  active;
+
+  constructor() {}
+
+  @HostListener('click')
+  clicked() {
+    this.active = !this.active;
+  }
+
+  @HostListener('dblclick', ['$event'])
+  doubleClicked(evt) {
+    this.active = true;
+  }
+}
+// #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroesComponent ],
+  bootstrap: [ HeroesComponent ]
+})
+export class HeroesHostBindingsModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6
new file mode 100644
index 0000000000..bc55ccef24
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6
@@ -0,0 +1,88 @@
+import {
+  Component,
+  ViewChildren,
+  ContentChild,
+  QueryList,
+  Input,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@Component({
+  selector: 'active-label',
+  template: `<span class="active-label"
+                   *ngIf="active">
+    Active
+  </span>`
+})
+class ActiveLabelComponent {
+  active;
+
+  activate() {
+    this.active = true;
+  }
+}
+
+// #docregion content
+@Component({
+  selector: 'a-hero',
+  template: `<h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`
+})
+class HeroComponent {
+  @Input() hero;
+  active;
+
+  @ContentChild(ActiveLabelComponent)
+  label;
+
+  activate() {
+    this.active = true;
+    this.label.activate();
+  }
+}
+// #enddocregion content
+
+
+// #docregion view
+@Component({
+  selector: 'heroes-queries',
+  template: `
+    <a-hero *ngFor="let hero of heroData"
+          [hero]="hero">
+      <active-label></active-label>
+    </a-hero>
+    <button (click)="activate()">
+      Activate
+    </button>
+  `
+})
+class HeroesQueriesComponent {
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'Superman'}
+  ];
+
+  @ViewChildren(HeroComponent)
+  heroCmps;
+
+  activate() {
+    this.heroCmps.forEach(
+      (cmp) => cmp.activate()
+    );
+  }
+}
+// #enddocregion view
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    HeroesQueriesComponent,
+    HeroComponent,
+    ActiveLabelComponent
+  ],
+  bootstrap: [ HeroesQueriesComponent ]
+})
+export class HeroesQueriesModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
new file mode 100644
index 0000000000..92f5af5e1a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
@@ -0,0 +1,30 @@
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
+
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+
+import { HeroesModule } from './hero.component';
+import { HeroesLifecycleModule } from './hero-lifecycle.component';
+import { HeroesDIModule } from './hero-di.component';
+import { HeroesDIInjectModule } from './hero-di-inject.component';
+import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
+import { HeroesIOModule } from './hero-io.component';
+import { HeroesHostBindingsModule } from './heroes-bindings.component';
+import { HeroesQueriesModule } from './heroes-queries.component';
+
+platformBrowserDynamic().bootstrapModule(HeroesModule);
+platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
+platformBrowserDynamic().bootstrapModule(HeroesIOModule);
+platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
+platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
new file mode 100644
index 0000000000..391bd1a766
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:babel",  
+  "run": "http-server:e2e" 
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
new file mode 100644
index 0000000000..005fe67c31
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <a id="toc"></a>
+    <h1>TypeScript to JavaScript</h1>
+    <a href="#class-metadata">Classes and Class Metadata</a><br>
+    <a href="#property-metadata">Input and Output Metadata</a><br>
+    <a href="#dependency-injection">Dependency Injection</a><br>
+    <a href="#other-property-metadata">Host and Query Metadata</a><br>
+
+    <hr>
+    <h4 id="class-metadata">Classes and Class Metadata</h4>
+    <hero-view id="class-metadata">Loading hero-view...</hero-view>
+    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
+
+    <hr>
+    <h4 id="property-metadata">Input and Output Metadata</h4>
+    <hero-io>Loading hero-io...</hero-io>
+
+    <hr>
+    <h4 id="dependency-injection">Dependency Injection</h4>
+    <hero-di>Loading hero-di...</hero-di>
+    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
+    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
+
+    <hr>
+    <h4 id="other-property-metadata">Host and Query Metadata</h4>
+    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
+    <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
new file mode 100644
index 0000000000..3c078e9f99
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
new file mode 100644
index 0000000000..de023ce5a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+export class DataService {
+  constructor() {
+  }
+  getHeroName() {
+    return 'Windstorm';
+  }
+}
+
+DataService.annotations = [
+  new Injectable()
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
new file mode 100644
index 0000000000..295d305ac4
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
@@ -0,0 +1,61 @@
+import {
+  Attribute,
+  Component,
+  Inject,
+  Optional,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+class TitleComponent {
+  constructor(titlePrefix, title) {
+    this.titlePrefix = titlePrefix;
+    this.title  = title;
+    this.msg = '';
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+
+TitleComponent.annotations = [
+  new Component({
+    selector: 'hero-title',
+    template: `
+      <h1>{{titlePrefix}} {{title}}</h1>
+      <button (click)="ok()">OK</button>
+      <p>{{ msg }}</p>
+    `
+  })
+];
+
+TitleComponent.parameters = [
+  [new Optional(), new Inject('titlePrefix')],
+  [new Attribute('title')]
+];
+// #enddocregion
+
+class AppComponent {
+}
+AppComponent.annotations = [
+  new Component({
+    selector: 'hero-di-inject-additional',
+    template: `<hero-title title="Tour of Heroes">
+    </hero-title>`
+  })
+];
+
+export class HeroesDIInjectAdditionalModule { }
+
+HeroesDIInjectAdditionalModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule ],
+    declarations: [
+      AppComponent,
+      TitleComponent
+    ],
+    bootstrap: [ AppComponent ]
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
new file mode 100644
index 0000000000..cc8df60abc
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
@@ -0,0 +1,32 @@
+import { Component, Inject, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+class HeroComponent {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di-inject',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+HeroComponent.parameters = [
+  [new Inject('heroName')]
+];
+// #enddocregion
+
+export class HeroesDIInjectModule { }
+
+HeroesDIInjectModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule ],
+    providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
+    declarations: [ HeroComponent ],
+    bootstrap: [ HeroComponent ]
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
new file mode 100644
index 0000000000..bb569e6e2b
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
@@ -0,0 +1,35 @@
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { DataService } from './data.service';
+
+// #docregion
+class HeroComponent {
+  constructor(dataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+HeroComponent.parameters = [
+  [DataService]
+];
+
+// #enddocregion
+
+export class HeroesDIModule { }
+
+HeroesDIModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule ],
+    providers: [ DataService ],
+    declarations: [ HeroComponent ],
+    bootstrap: [ HeroComponent ]
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
new file mode 100644
index 0000000000..549d75ce7c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
@@ -0,0 +1,85 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+class ConfirmComponent {
+  constructor(){
+    this.ok = new EventEmitter();
+    this.notOk = new EventEmitter();
+  }
+  onOkClick() {
+    this.ok.next(true);
+  }
+  onNotOkClick() {
+    this.notOk.next(true);
+  }
+}
+
+ConfirmComponent.annotations = [
+  new Component({
+    selector: 'my-confirm',
+    template: `
+      <button (click)="onOkClick()">
+        {{okMsg}}
+      </button>
+      <button (click)="onNotOkClick()">
+        {{notOkMsg}}
+      </button>
+    `,
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+];
+// #enddocregion
+
+class AppComponent {
+  constructor(){
+  }
+  onOk() {
+    this.okClicked = true;
+  }
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
+
+AppComponent.annotations = [
+  new Component({
+    selector: 'hero-io',
+    template: `
+      <my-confirm [okMsg]="'OK'"
+                  [cancelMsg]="'Cancel'"
+                  (ok)="onOk()"
+                  (cancel)="onCancel()">
+      </my-confirm>
+      <span *ngIf="okClicked">OK clicked</span>
+      <span *ngIf="cancelClicked">Cancel clicked</span>
+    `
+  })
+];
+
+
+export class HeroesIOModule { }
+
+HeroesIOModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule ],
+    declarations: [
+      AppComponent,
+      ConfirmComponent
+    ],
+    bootstrap: [ AppComponent ]
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..8a9c6c6c4e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+// #enddocregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+class HeroComponent {
+  ngOnInit() {
+    this.name = 'Windstorm';
+  }
+}
+// #enddocregion
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-lifecycle',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+export class HeroesLifecycleModule { }
+
+HeroesLifecycleModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule ],
+    declarations: [ HeroComponent ],
+    bootstrap: [ HeroComponent ]
+  })
+];
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
new file mode 100644
index 0000000000..4b5c20057a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
@@ -0,0 +1,37 @@
+// #docplaster
+// #docregion metadata
+import { Component } from '@angular/core';
+
+// #docregion class
+// #docregion appexport
+export class HeroComponent {
+  construct() {
+    this.title = 'Hero Detail';
+  }
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport
+// #enddocregion class
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-view',
+    template: '<h1>Hero: {{getName()}}</h1>'
+  })
+];
+// #enddocregion metadata
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+export class HeroesModule { }
+
+HeroesModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule ],
+    declarations: [ HeroComponent ],
+    bootstrap: [ HeroComponent ]
+  })
+];
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6
new file mode 100644
index 0000000000..5c13e586a6
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6
@@ -0,0 +1,48 @@
+import {
+  Component,
+  HostBinding,
+  HostListener,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+class HeroesComponent {
+  constructor() {
+    this.title = 'Tooltip content';
+    this.hClass = true;
+  }
+
+  clicked() {
+    this.active = !this.active;
+  }
+
+  doubleClicked(evt) {
+    this.active = true;
+  }
+}
+HeroesComponent.annotations = [
+  new Component({
+    selector: 'heroes-bindings',
+    template: `<h1 [class.active]="active">
+      Tour of Heroes
+    </h1>`,
+    host: {
+      '[title]': 'title',
+      '[class.heading]': 'hClass',
+      '(click)': 'clicked()',
+      '(dblclick)': 'doubleClicked($event)'
+    }
+  })
+];
+// #enddocregion
+
+export class HeroesHostBindingsModule { }
+
+HeroesHostBindingsModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule ],
+    declarations: [ HeroesComponent ],
+    bootstrap: [ HeroesComponent ]
+  })
+];
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6
new file mode 100644
index 0000000000..4cec0c3bbd
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6
@@ -0,0 +1,98 @@
+import {
+  Component,
+  ViewChildren,
+  ContentChild,
+  QueryList,
+  Input,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+class ActiveLabelComponent {
+  activate() {
+    this.active = true;
+  }
+}
+
+ActiveLabelComponent.annotations = [
+  new Component({
+    selector: 'active-label',
+    template: `
+    <span class="active-label" *ngIf="active">
+      Active
+    </span>`
+  })
+];
+
+// #docregion content
+class HeroComponent {
+  activate() {
+    this.active = true;
+    this.label.activate();
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'a-hero',
+    template: `<h2 [class.active]=active>
+      {{hero.name}}
+      <ng-content></ng-content>
+    </h2>`,
+    inputs: ['hero'],
+    queries: {
+      label: new ContentChild(ActiveLabelComponent)
+    }
+  })
+];
+// #enddocregion content
+
+
+// #docregion view
+class HeroesQueriesComponent {
+  constructor(){
+    this.heroData = [
+      {id: 1, name: 'Windstorm'},
+      {id: 2, name: 'Superman'}
+    ];
+  }
+
+  activate() {
+    this.heroCmps.forEach(
+      (cmp) => cmp.activate()
+    );
+  }
+}
+
+HeroesQueriesComponent.annotations = [
+  new Component({
+    selector: 'heroes-queries',
+    template: `
+      <a-hero *ngFor="let hero of heroData"
+            [hero]="hero">
+        <active-label></active-label>
+      </a-hero>
+      <button (click)="activate()">
+        Activate
+      </button>
+    `,
+    queries: {
+      heroCmps: new ViewChildren(HeroComponent)
+    }
+  })
+];
+// #enddocregion view
+
+export class HeroesQueriesModule { }
+
+HeroesQueriesModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule ],
+    declarations: [
+      HeroesQueriesComponent,
+      HeroComponent,
+      ActiveLabelComponent
+    ],
+    bootstrap: [ HeroesQueriesComponent ]
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
new file mode 100644
index 0000000000..92f5af5e1a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
@@ -0,0 +1,30 @@
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
+
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+
+import { HeroesModule } from './hero.component';
+import { HeroesLifecycleModule } from './hero-lifecycle.component';
+import { HeroesDIModule } from './hero-di.component';
+import { HeroesDIInjectModule } from './hero-di-inject.component';
+import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
+import { HeroesIOModule } from './hero-io.component';
+import { HeroesHostBindingsModule } from './heroes-bindings.component';
+import { HeroesQueriesModule } from './heroes-queries.component';
+
+platformBrowserDynamic().bootstrapModule(HeroesModule);
+platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
+platformBrowserDynamic().bootstrapModule(HeroesIOModule);
+platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
+platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
new file mode 100644
index 0000000000..391bd1a766
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:babel",  
+  "run": "http-server:e2e" 
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/index.html b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
new file mode 100644
index 0000000000..3a8a4e7960
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <a id="toc"></a>
+    <h1>TypeScript to JavaScript</h1>
+    <a href="#class-metadata">Classes and Class Metadata</a><br>
+    <a href="#property-metadata">Input and Output Metadata</a><br>
+    <a href="#dependency-injection">Dependency Injection</a><br>
+    <a href="#other-property-metadata">Host and Query Metadata</a><br>
+    <my-app></my-app>
+
+    <hr>
+    <h4 id="class-metadata">Classes and Class Metadata</h4>
+    <hero-view id="class-metadata">Loading hero-view...</hero-view>
+    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
+
+    <hr>
+    <h4 id="property-metadata">Input and Output Metadata</h4>
+    <hero-io>Loading hero-io...</hero-io>
+
+    <hr>
+    <h4 id="dependency-injection">Dependency Injection</h4>
+    <hero-di>Loading hero-di...</hero-di>
+    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
+    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
+
+    <hr>
+    <h4 id="other-property-metadata">Host and Query Metadata</h4>
+    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
+    <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
index fa9684e7a1..64009317a9 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
@@ -9,10 +9,7 @@
       '<p>{{ msg }}</p>'
   }).Class({
     constructor: [
-      [
-        new ng.core.Optional(),
-        new ng.core.Inject('titlePrefix')
-      ],
+      [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
       new ng.core.Attribute('title'),
       function(titlePrefix, title) {
         this.titlePrefix = titlePrefix;
@@ -33,7 +30,7 @@
   }).Class({
     constructor: function() { }
   });
- 
+
   app.HeroesDIInjectAdditionalModule =
     ng.core.NgModule({
       imports: [ ng.platformBrowser.BrowserModule ],
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
index dfda83e1f0..743af3b987 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
@@ -25,7 +25,7 @@
     .Class({
       constructor: function() {}
     });
-  
+
 })(window.app = window.app || {});
 
 (function(app) {
@@ -35,11 +35,12 @@
     template: '<h1>Hero: {{name}}</h1>'
   })
   .Class({
-    constructor:
-      [new ng.core.Inject('heroName'), 
-       function(name) {
-         this.name = name;
-       }]
+    constructor: [
+      new ng.core.Inject('heroName'),
+      function(name) {
+        this.name = name;
+      }
+    ]
   });
 // #enddocregion ctor
 
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
index 1fe9c38cb1..e5ef79bc4b 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
@@ -5,11 +5,12 @@
     template: '<h1>Hero: {{name}}</h1>'
   })
   .Class({
-    constructor:
-      [app.DataService, 
-       function(service) {
-         this.name = service.getHeroName();
-       }]
+    constructor: [
+      app.DataService,
+      function(service) {
+        this.name = service.getHeroName();
+      }
+    ]
   });
   // #enddocregion
 
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
index 55c576b836..c4e7d6735e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
@@ -6,9 +6,11 @@
   function HeroComponent(dataService) {
     this.name = dataService.getHeroName();
   }
+  
   HeroComponent.parameters = [
     app.DataService
   ];
+
   HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di',
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
index 5dd84733f3..a073138cff 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
@@ -5,8 +5,7 @@
   // #docregion component
   var HeroComponent = ng.core.Component({
       selector: 'hero-view-2',
-      template:
-        '<h1>Name: {{getName()}}</h1>',
+      template: '<h1>Name: {{getName()}}</h1>',
     })
     .Class({
       constructor: function() {
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
index 3e81c72e4e..1a2028d316 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
@@ -10,10 +10,9 @@
     })
   ];
   // #docregion
-  HeroComponent.prototype.ngOnInit =
-    function() {
-      this.name = 'Windstorm';
-    };
+  HeroComponent.prototype.ngOnInit = function() {
+    this.name = 'Windstorm';
+  };
   // #enddocregion
 
   app.HeroesLifecycleModule =
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
index c6a58acc56..745a450096 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
@@ -15,13 +15,12 @@
   HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-view',
-      template:
-        '<h1>Hero: {{getName()}}</h1>'
+      template: '<h1>Hero: {{getName()}}</h1>'
     })
   ];
   // #docregion constructorproto
-  HeroComponent.prototype.getName =
-    function() {return 'Windstorm';};
+  
+  HeroComponent.prototype.getName = function() {return 'Windstorm';};
   // #enddocregion constructorproto
   // #enddocregion metadata
 
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js
index 9091452599..015a8d2126 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/main.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js
@@ -4,12 +4,9 @@
   // #enddocregion appimport
 
   // #docregion ng2import
-  var platformBrowserDynamic =
-    ng.platformBrowserDynamic.platformBrowserDynamic;
-  var LocationStrategy =
-    ng.common.LocationStrategy;
-  var HashLocationStrategy =
-    ng.common.HashLocationStrategy;
+  var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+  var LocationStrategy = ng.common.LocationStrategy;
+  var HashLocationStrategy = ng.common.HashLocationStrategy;
   // #enddocregion ng2import
 
   // #docregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
index 146c6cbd83..d36b3eff19 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
@@ -19,12 +19,9 @@ import { BrowserModule } from '@angular/platform-browser';
 class TitleComponent {
   private msg: string = '';
   constructor(
-    @Inject('titlePrefix')
-    @Optional()
-      private titlePrefix: string,
-    @Attribute('title')
-      private title: string) {
-  }
+    @Inject('titlePrefix') @Optional() private titlePrefix: string,
+    @Attribute('title') private title: string
+  ) { }
 
   ok() {
     this.msg = 'OK!';
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
index 7dc2bc84a2..eb2cb78971 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
@@ -7,10 +7,7 @@ import { BrowserModule } from '@angular/platform-browser';
   template: `<h1>Hero: {{name}}</h1>`
 })
 class HeroComponent {
-  constructor(
-    @Inject('heroName')
-      private name: string) {
-  }
+  constructor(@Inject('heroName') private name: string) { }
 }
 // #enddocregion
 
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
index a20453ef0a..c1bb927219 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
@@ -8,6 +8,7 @@ import { DataService } from './data.service';
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
 })
+
 class HeroComponent {
   name: string;
   constructor(dataService: DataService) {
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
index 1181c71cc9..64bdc9e927 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
@@ -10,8 +10,7 @@ import { BrowserModule } from '@angular/platform-browser';
   template: `<h1>Hero: {{name}}</h1>`
 })
 // #docregion
-class HeroComponent
-    implements OnInit {
+class HeroComponent implements OnInit {
   name: string;
   ngOnInit() {
     this.name = 'Windstorm';
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
index 407b8b0e29..0ce026a42f 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
@@ -9,14 +9,15 @@ import { BrowserModule } from '@angular/platform-browser';
 // #docregion
 @Component({
   selector: 'heroes-bindings',
-  template: `<h1 [class.active]="active">
-    Tour of Heroes
-  </h1>`
+  template: `
+    <h1 [class.active]="active">
+      Tour of Heroes
+    </h1>
+  `
 })
 class HeroesComponent {
   @HostBinding() title = 'Tooltip content';
-  @HostBinding('class.heading')
-    hClass = true;
+  @HostBinding('class.heading') hClass = true;
   active: boolean;
 
   constructor() {}
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index a46ac1b718..5aeaa55c1f 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -27,7 +27,7 @@
     "@angular/router": "~3.1.1",
     "@angular/upgrade": "~2.1.1",
 
-    "angular-in-memory-web-api": "~0.1.13",
+    "angular-in-memory-web-api": "~0.1.14",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rollup": "^0.36.0",
@@ -51,6 +51,9 @@
     "@types/selenium-webdriver": "^2.53.32",
     "angular2-template-loader": "^0.4.0",
     "awesome-typescript-loader": "^2.2.4",
+    "babel-cli": "^6.16.0",
+    "babel-preset-angular2": "^0.0.2",
+    "babel-preset-es2015": "^6.16.0",
     "canonical-path": "0.0.2",
     "concurrently": "^3.0.0",
     "css-loader": "^0.25.0",
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
index a76d90bce7..1ed9ac2489 100644
--- a/public/docs/js/latest/cookbook/ts-to-js.jade
+++ b/public/docs/js/latest/cookbook/ts-to-js.jade
@@ -16,6 +16,8 @@ include ../../../../_includes/_util-fns
 :marked
   ## Table of contents
 
+  [From TS to ES6 to ES5](#from-ts)
+
   [Modularity: imports and exports](#modularity)
 
   [Classes and Class Metadata](#class-metadata)
@@ -24,90 +26,127 @@ include ../../../../_includes/_util-fns
   
   [Dependency Injection](#dependency-injection)
   
-  [Host and Query Metadata](#other-property-metadata)
+  [Host and Query Metadata](#host-query-metadata)
 
   **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
   code shown in this cookbook.**
 
+a(id="from-ts")
+.l-main-section
+:marked
+  ## From TS to ES6 to ES5
+  
+  Since TypeScript is a superset of ES6 JavaScript, and ES6 itself is a superset of ES5, the 
+  transformation of Typescript code all the way to ES5 javascript can be seen as "shedding"
+  features.
+
+  When going from TypeScript to ES6 with decorators, we mostly remove 
+  [type annotations](https://www.typescriptlang.org/docs/handbook/basic-types.html) 
+  , such as `string` or `boolean`, and
+  [class property modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
+  such as `public` and `private`. 
+  The exception is type annotations used for dependency injection, which can be kept.
+
+  Going from ES6 with decorators to plain ES6 JavaScript we lose all 
+  [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
+  and the remaining type annotations.
+  We also lose class properties, which now have to be declared in the class constructor.
+
+  Finally, in the transition from ES6 to ES5 JavaScript the main missing features are `import`
+  statements and `class` declarations. 
+
+  For ES6 transpilation we recommend using a similar setup as our TypeScript quickstart, 
+  replacing TypeScript with [Babel](https://babeljs.io/) using the `es2015` preset. 
+  To use decorators and annotations with Babel, install the 
+  [`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well. 
+
 a(id="modularity")
 .l-main-section
 :marked
   ## Importing and Exporting
 
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%")
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Importing Angular Code
-
-        In TypeScript code, Angular classes, functions, and other members
-        are imported with TypeScript `import` statements:
-
-      +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )
-
-    td
-      :marked
-        ### Accessing Angular Code through the ng global
-
-        In JavaScript code, when using
-        [the Angular packages](../glossary.html#!#scoped-package),
-        we can access Angular code through the global `ng` object. In the
-        nested members of this object we'll find everything we would import
-        from `@angular` in TypeScript:
-
-      +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Importing and Exporting Application Code
-
-        Each file in an Angular TypeScript application constitutes a
-        TypeScript module. When we want to make something from a module available
-        to other modules, we `export` it.
-
-      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'appexport')(format="." )
-
-      :marked
-        In other modules we can then `import` things that have been exported
-        elsewhere.
-
-      +makeExample('cb-ts-to-js/ts/app/main.ts', 'appimport')(format="." )
+  ### Importing Angular Code
+
+  In TypeScript and ES6 JavaScript, Angular classes, functions, and other members are imported
+  with ES6 `import` statements.
+
+  In ES5 JavaScript code, when using [the Angular packages](../glossary.html#!#scoped-package),
+  we can access Angular code through the global `ng` object. In the nested members of this 
+  object we'll find everything we would import from `@angular` in TypeScript:
+
++makeTabs(`
+    cb-ts-to-js/ts/app/main.ts,
+    cb-ts-to-js/js-es6-decorators/app/main.es6,
+    cb-ts-to-js/js-es6/app/main.es6,
+    cb-ts-to-js/js/app/main.js
+  `,`
+    ng2import,
+    ng2import,
+    ng2import,
+    ng2import
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
 
-    td
-      :marked
-        ### Sharing Application Code
-
-        In an Angular JavaScript application, we load each file to the page
-        using a `<script>` tag. Each file can make things available to other
-        files via the shared global `window` scope.
-
-        We often introduce an application namespace
-        object (such as `"app"`) onto `window` and attach everything we need
-        to share to that namespace object. 
-        We also wrap our code in an 
-        [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
-        These practices together prevent our code from
-        polluting the global scope.
-
-      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'appexport')(format="." )
-
-      :marked
-        We can then access anything from this shared namespace in
-        other files.
-
-      +makeExample('cb-ts-to-js/js/app/main.js', 'appimport')(format="." )
+:marked
+  ### Importing and Exporting Application Code
+
+  Each file in an Angular TypeScript or ES6 JavaScript application constitutes a ES6 module.
+  When we want to make something from a module available to other modules, we `export` it.
+
+  In an Angular ES5 JavaScript application, we load each file to the page using a `<script>` tag. 
+  Each file can make things available to other files via the shared global `window` scope.
+
+  We often introduce an application namespace object (such as `app`) onto `window` and attach
+  everything we need to share to that namespace object.
+  We also wrap our code in an 
+  [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
+  These practices together prevent our code from polluting the global scope.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,`
+    appexport,
+    appexport,
+    appexport,
+    appexport
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
 
-      :marked
-        Note that the order of `<script>` tags on the page is significant. 
-        We must load a file that defines a shared member before
-        a file that uses that member.
+:marked
+  Using Typescript or ES6 JavaScript, in other modules we can then `import` things that have been exported
+  elsewhere.
+
+  In ES5 JavaScript we can access anything using the shared namespace in other files.
+  Note that the order of `<script>` tags on the page is significant. 
+  We must load a file that defines a shared member before a file that uses that member.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/main.ts,
+    cb-ts-to-js/js-es6-decorators/app/main.es6,
+    cb-ts-to-js/js-es6/app/main.es6,
+    cb-ts-to-js/js/app/main.js
+  `,`
+    appimport,
+    appimport,
+    appimport,
+    appimport
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
 
 .alert.is-helpful
   :marked
@@ -123,347 +162,329 @@ a(id="class-metadata")
 :marked
   ## Classes and Class Metadata
 
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Classes
-
-        We put most of our Angular TypeScript code into TypeScript classes.
-
-      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'class')(format="." )
-
-    td
-      :marked
-        ### Constructors and Prototypes
-
-        ES5 JavaScript has no classes. We use the constructor
-        pattern instead which works with Angular as well as classes do.
-
-      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'constructorproto')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Metadata with Decorators
-
-        Most Angular classes have one or more TypeScript *decorators*
-        attached to provide configuration and metadata. For example,
-        a component must have a [`@Component`](../api/core/index/Component-decorator.html) decorator.
-
-      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." )
-
-    td
-      :marked
-        ### Metadata with the Annotations Array
-
-        In JavaScript, we can attach an `annotations` array to a constructor
-        to provide metadata. 
-        Each item in the array corresponds to a TypeScript decorator.
-
-        In the following example, we create a new instance of `Component` that corresponds
-        to the [`@Component`](../api/core/index/Component-decorator.html) TypeScript decorator.
-
-      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." )
-
-      :marked
-        ### Metadata with The Class Convenience API
-
-        The pattern of creating a constructor and decorating it with metadata
-        is so common that Angular provides an alternative convenience API for it.
-        This API lets us define everything in a single expression.
-
-        With this API we first call the `ng.core.Component` function,
-        followed by a chained `Class` method call. The argument to `Class`
-        is an object that defines the constructor and the instance methods
-        of the component:
-
-      +makeExample('cb-ts-to-js/js/app/hero-dsl.component.js', 'component')(format="." )
-
-      :marked
-        Similar APIs are also available for other decorators. You can define a
-        directive:
-        
-      code-example.
-        var MyDirective = ng.core.Directive({
-          ...
-        }).Class({
-          ...
-        });
-      
-      :marked
-        Or a pipe:
-        
-      code-example.
-        var MyPipe = ng.core.Pipe({
-          name: 'myPipe'
-        }).Class({
-          ...
-        });
-
-  tr(style=top)
-    td
-      :marked
-        ### Interfaces
-
-        When defining classes that need to implement a certain method, it
-        is common to use TypeScript interfaces that enforce that the 
-        method signature is correct. Component lifecycle methods like `ngOnInit`
-        are one example of this pattern. `ngOnInit` is defined in the `OnInit`
-        interface.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-lifecycle.component.ts')(format="." )
-
-    td
-      :marked
-        ### Implementing Methods without Interfaces
-
-        TypeScript interfaces are purely for developer convenience
-        and are not used by Angular at runtime. This means that in JavaScript
-        code we don't need to substitute anything for interfaces. We can just
-        implement the methods.
-
-      +makeExample('cb-ts-to-js/js/app/hero-lifecycle.component.js')(format="." )
+  ### Classes
+
+  We put most of our Angular TypeScript or ES6 JavaScript code into classes. ES6 without decorators
+  also does not have support for class properties, so they must be assigned inside the constructor.
+
+  ES5 JavaScript has no classes. We use the constructor pattern instead which works with
+  Angular as well as classes do.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,`
+    class,
+    class,
+    class,
+    constructorproto
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ### Metadata
+
+  Using Typescript or ES6 with decorators, we have access to *decorators*.
+  Most Angular classes have one or more *decorators* attached to provide configuration 
+  and metadata. 
+  For example, a component must have a 
+  [`@Component`](../api/core/index/Component-decorator.html) decorator.
+
+  In ES5/6 JavaScript we can instead attach an `annotations` array to a class/constructor 
+  to provide metadata. 
+  Each item in the array corresponds to a decorator.
+
+  The pattern of creating a constructor and decorating it with metadata is so common that Angular 
+  provides an alternative ES5 convenience class API for it for ES5 JavaScript.
+  This API lets us define everything in a single expression.
+
+  With this API we first call the `ng.core.Component` function, followed by a chained `Class` 
+  method call. 
+  The argument to `Class` is an object that defines the constructor and the instance methods
+  of the component.
+  Similar APIs are also available for other decorators. You can define a directive with
+  `ng.core.Directive` or a pipe with `ng.core.Pipe`.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js,
+    cb-ts-to-js/js/app/hero-dsl.component.js
+  `,`
+    metadata,
+    metadata,
+    metadata,
+    metadata,
+    component
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with Class API
+  `)
+
+:marked
+  ### Interfaces
+
+  When defining classes that need to implement a certain method, it is common to use TypeScript
+  interfaces that enforce that the method signature is correct. 
+  Component lifecycle methods like `ngOnInit` are one example of this pattern.
+  `ngOnInit` is defined in the `OnInit` interface.
+
+  TypeScript interfaces are purely for developer convenience and are not used by Angular at runtime.
+  This means that in ES5/6 JavaScript code we don't need to substitute anything for interfaces.
+  We can just implement the methods.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-lifecycle.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js/app/hero-lifecycle.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)  
 
 a(id="property-metadata")
 .l-main-section
 :marked
   ## Input and Output Metadata
 
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Input and Output Decorators
-
-        In TypeScript, property decorators are often used to provide additional metadata
-        for components and directives.
-
-        For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), 
-        we use `@Input` and `@Output` property decorators.
-        They may optionally specify input and output binding names if we want them to be
-        different from the class property names.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-io.component.ts')(format="." )
-
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use the `inputs` and `outputs` array metadata 
-          instead of the `@Input` and `@Output` property decorators.
-    td
-      :marked
-        ### Inputs and Outputs in Component Metadata
-
-        There is no equivalent of a property decorator in ES5 JavaScript. Instead, 
-        we add comparable information to the `Component` (or `Directive`) metadata.
-        
-        In this example, we add `inputs` and `outputs` array attributes
-        containing the input and output property names. 
-        If we need a binding name that is different from the
-        property itself, we use the `propertyName: bindingName` syntax.
-
-      +makeExample('cb-ts-to-js/js/app/hero-io.component.js')(format="." )
+  ### Input and Output Decorators
 
+  In TypeScript and ES6 with decorators, property decorators are often used to provide additional 
+  metadata for components and directives.
+  For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), we use `@Input` and 
+  `@Output` property decorators. 
+  They may optionally specify input and output binding names if we want them to be different 
+  from the class property names.
+
+  There is no equivalent of a property decorator in ES5/6 JavaScript. 
+  Instead, we add comparable information to the `Component` (or `Directive`) metadata.
+  
+  In this example, we add `inputs` and `outputs` array attributes containing the input and
+  output property names. 
+  If we need a binding name that is different from the property itself, we use the 
+  `propertyName: bindingName` syntax.  
+  
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-io.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6,
+    cb-ts-to-js/js-es6/app/hero-io.component.es6,
+    cb-ts-to-js/js/app/hero-io.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
 
 .l-main-section
 :marked
   ## Dependency Injection
 
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Injection by Type
+  ### Injection by Type
 
-        Angular can often use TypeScript type information to
-        determine what needs to be injected.
+  Angular can often use TypeScript type information to determine what needs to be injected.
+  ES6 with decorators can also make use of type information.
 
-      +makeExample('cb-ts-to-js/ts/app/hero-di.component.ts')(format="." )
+  Since no type information is available in ES5/6 JavaScript, we must identify "injectables" in 
+  some other way.
 
-    td
-      :marked
-        ### Injection with Parameter Tokens
-
-        Since no type information is available in ES5 JavaScript,
-        we must identify "injectables" in some other way.
-
-        We attach a `parameters` array to the constructor function. 
-        Each array item is the dependency injection token that identifies the thing to be injected. 
-        Often the token is the constructor function for the class-like dependency.
-
-      +makeExample('cb-ts-to-js/js/app/hero-di.component.js')(format="." )
-
-      :marked
-        When using the class convenience API, we can also supply the parameter
-        tokens by wrapping the constructor in an array.
-
-      +makeExample('cb-ts-to-js/js/app/hero-di-inline.component.js')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Injection with the @Inject decorator
-
-        When the thing being injected doesn't correspond directly to a type,
-        we use the `@Inject()` decorator to supply the injection token.
-        
-        In this example, we're injecting a string identified by the "heroName" token.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-di-inject.component.ts')(format="." )
-
-    td
-      :marked
-        ### Injection with plain string tokens
-
-        In JavaScript we add the token string to the injection parameters array.
-
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject.component.js','parameters')(format="." )
-      
-      :marked
-        Alternatively, we can create a token with the `Inject` method and
-        add that to the constructor array in the annotations like this:
-        
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject.component.js','ctor')(format="." )        
+  We attach a `parameters` array to the constructor function. 
+  Each array item is the dependency injection token that identifies the thing to be injected. 
+  Often the token is the constructor function for the class-like dependency.
+  
+  In ES6 the decorators need to be inside a nested array.
+  When using the ES5 class convenience API, we can also supply the parameter tokens by wrapping 
+  the constructor in an array.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di.component.es6,
+    cb-ts-to-js/js/app/hero-di.component.js,
+    cb-ts-to-js/js/app/hero-di-inline.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with Class API
+  `)
 
-  tr(style=top)
-    td
-      :marked
-        ### Additional Injection Decorators
+:marked
+  ### Injection with the @Inject decorator
+
+  When the thing being injected doesn't correspond directly to a type, we use the 
+  `@Inject()` decorator to supply the injection token.
+  In this example, we're injecting a string identified by the "heroName" token. 
+
+  In ES5/6 JavaScript we add the token string to the injection parameters array.
+  Alternatively, when using the ES5 convenience class API we can create a token with the 
+  `Inject` method and add that to the constructor array in the annotations.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di-inject.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js/app/hero-di-inject.component.js,
+    cb-ts-to-js/js/app/hero-di-inject.component.js
+  `,`
+  ,
+  ,
+  ,
+  parameters,
+  ctor
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with Class API
+  `)
 
-        We can attach additional decorators to constructor parameters
-        to qualify the injection behavior. We can mark
-        optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
-        inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
-        inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
-        and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)).
+:marked
+  ### Additional Injection Decorators
 
-      +makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." )
+  We can attach additional decorators to constructor parameters to qualify the injection behavior. 
+  We can mark optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
+  inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
+  inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
+  and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)).
 
-    td
-      :marked
-        ### Additional Injection Metadata with Nested Arrays 
+  In ES6 JavaScript we just add the extra decorators to the nested injection parameters array.
 
-        To achieve the same effect in JavaScript, use the constructor array notation
-        in which the injection information precedes the constructor function itself.
-        
-        Use the injection support functions `Attribute`, `Host`, `Optional`, `Self`, `SkipSelf` to qualify dependency injection behavior.
-        
-        Use a nested array to combine injection functions.
+  To achieve the same effect in ES5 JavaScript, use a nested array with the constructor 
+  array notation in which the injection information precedes the constructor function itself.
+  
+  We can apply other additional parameter decorators such as
+  [`@Host`](../api/core/index/Host-decorator.html) and
+  [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
+  by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
+  parameters array.
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6,
+    cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)  
+
+a(id="host-query-metadata")
+.l-main-section
+:marked
+  ## Host and Query Metadata
 
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject-additional.component.js')(format="." )
+  ### Host Decorators
 
-      :marked
-        We can apply other additional parameter decorators such as
-        [`@Host`](../api/core/index/Host-decorator.html) and
-        [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
-        by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
-        parameters array.
+  In Typescript and ES6 with decorators we can use host property decorators to bind a host
+  element to a component or directive.
+  The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
+  binds host element properties to component data properties. 
+  The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator binds
+  host element events to component event handlers.
 
+  When using ES5/6 we add a `host` attribute to the component metadata to achieve the
+  same effect as `@HostBinding` and `@HostListener`. 
+  
+  The  `host` value is an object whose properties are host property and listener bindings:
+  
+  * Each key follows regular Angular binding syntax: `[property]` for host bindings
+    or `(event)` for host listeners.
+  * Each value identifies the corresponding component property or method.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-bindings.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-bindings.component.es6,
+    cb-ts-to-js/js/app/heroes-bindings.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+.alert.is-helpful
+  :marked
+    In TypeScript and ES6 with decorators we can also use the `queries` metadata 
+    instead of the `@ViewChild` and `@ContentChild` property decorators.    
 
-a(id="other-property-metadata")
-.l-main-section
 :marked
-  ## Host and Query Metadata
+  ### Query Decorators
+  
+  There are several property decorators for querying the descendants of
+  a component or directive.
+  
+  The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
+  allow a component to query instances of other components that are used in
+  its view. 
 
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript  
-  tr(style=top)
+  In ES5/6 JavaScript we access a component's view children by adding a `queries` attribute to
+  the component metadata. It should be an object where:
   
-    td
-      :marked
-        ### Host Decorators
-
-        We can use host property decorators to bind a host element to a component or directive.
-        The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
-        binds host element properties to component data properties. 
-        The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator bimds
-        host element events to component event handlers.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." )
-      
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use `host` metadata 
-          instead of the `@HostBinding` and `@HostListener` property decorators.
-    td
-      :marked
-        ### Host Metadata
-        
-        We add a `host` attribute to the component metadata to achieve the
-        same effect as `@HostBinding` and `@HostListener`. 
-        
-        The  `host` value is an object whose properties are host property and listener bindings:
-        
-        * Each key follows regular Angular binding syntax: `[property]` for host bindings
-          or `(event)` for host listeners.
-        * Each value identifies the corresponding component property or method.
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-bindings.component.js')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Query Decorators
-        
-        There are several property decorators for querying the descendants of
-        a component or directive.
-        
-        The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
-        [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
-        allow a component to query instances of other components that are used in
-        its view.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
-
-      :marked
-        The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
-        [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
-        allow a component to query instances of other components that have been projected
-        into its view from elsewhere.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'content')(format="." )
-      
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use the `queries` metadata 
-          instead of the `@ViewChild` and `@ContentChild` property decorators.      
-    td
-      :marked
-        ### Query Metadata
-        
-        We access a component's view children by adding a `queries` attribute to
-        the component metadata. It should be an object where:
-        
-        * Each key is the name of a component property that will hold the view children
-        * Each value is an instance of either `ViewChild` or `ViewChildren`.
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'view')(format="." )
-
-      :marked
-        We add *content* child queries to the same `queries` attribute
-        in the same manner, using instances of `ContentChild` or `ContentChildren`:
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'content')(format="." )
+  * Each key is the name of a component property that will hold the view children
+  * Each value is an instance of either `ViewChild` or `ViewChildren`.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
+    cb-ts-to-js/js/app/heroes-queries.component.js
+  `,`
+    view,
+    view,
+    view,
+    view
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
+  [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
+  allow a component to query instances of other components that have been projected
+  into its view from elsewhere.
+
+  They can be added in the same way as [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html).
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
+    cb-ts-to-js/js/app/heroes-queries.component.js
+  `,`
+    content,
+    content,
+    content,
+    content
+  `,`
+    Typescript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
diff --git a/tools/doc-shredder/doc-shredder.js b/tools/doc-shredder/doc-shredder.js
index 7cb4586d23..a4f124221c 100644
--- a/tools/doc-shredder/doc-shredder.js
+++ b/tools/doc-shredder/doc-shredder.js
@@ -120,7 +120,7 @@ function createShredExamplePackage(shredOptions) {
       readFilesProcessor.basePath = "/";
 
       // Specify collections of source files that should contain the documentation to extract
-      var extns = ['*.ts', '*.html', '*.js', '*.css', '*.json', '*.dart', '*.yaml' ];
+      var extns = ['*.ts', '*.html', '*.js', '*.css', '*.json', '*.dart', '*.yaml', '*.es6' ];
       var includeFiles = extns.map(function(extn) {
         if (options.includeSubdirs) {
           return path.join(options.examplesDir, '**', extn);
diff --git a/tools/doc-shredder/regionExtractor.js b/tools/doc-shredder/regionExtractor.js
index 870c3620a0..eca191d54e 100644
--- a/tools/doc-shredder/regionExtractor.js
+++ b/tools/doc-shredder/regionExtractor.js
@@ -154,6 +154,7 @@ function getCommentInfo(extension) {
   switch (extension) {
     case 'ts':
     case 'js':
+    case 'es6':
     case 'dart':
       commentInfo = {
         prefix: '//',

From 33b61977b2cd0bc35b257ce526d5dd2fd460cd10 Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Thu, 3 Nov 2016 01:37:55 -0700
Subject: [PATCH 2/4] docs(ts-to-js): ward's edits (incomplete)

---
 .../js-es6-decorators/app/hero.component.es6  |   3 +-
 .../cb-ts-to-js/js-es6/app/hero.component.es6 |   4 +-
 .../cb-ts-to-js/js/app/hero-dsl.component.js  |   7 +-
 .../cb-ts-to-js/js/app/hero.component.js      |   9 +-
 .../cb-ts-to-js/ts/app/hero.component.ts      |   3 +-
 public/docs/dart/latest/cookbook/_data.json   |   2 +-
 public/docs/js/latest/cookbook/_data.json     |   2 +-
 public/docs/js/latest/cookbook/ts-to-js.jade  | 491 +---------------
 public/docs/ts/latest/cookbook/_data.json     |   2 +-
 public/docs/ts/latest/cookbook/ts-to-js.jade  | 546 +++++++++++++++++-
 public/docs/ts/latest/guide/change-log.jade   |   6 +
 11 files changed, 565 insertions(+), 510 deletions(-)

diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
index 4b4ba8529d..83dc6d409d 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -4,8 +4,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-view',
-  template:
-    '<h1>Hero: {{getName()}}</h1>'
+  template: '<h1>{{title}}: {{getName()}}</h1>'
 })
 // #docregion appexport
 // #docregion class
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
index 4b5c20057a..c998d31a6f 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
 // #docregion class
 // #docregion appexport
 export class HeroComponent {
-  construct() {
+  constructor() {
     this.title = 'Hero Detail';
   }
   getName() {return 'Windstorm'; }
@@ -16,7 +16,7 @@ export class HeroComponent {
 HeroComponent.annotations = [
   new Component({
     selector: 'hero-view',
-    template: '<h1>Hero: {{getName()}}</h1>'
+    template: '<h1>{{title}}: {{getName()}}</h1>'
   })
 ];
 // #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
index a073138cff..6d53bc2850 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
@@ -5,14 +5,13 @@
   // #docregion component
   var HeroComponent = ng.core.Component({
       selector: 'hero-view-2',
-      template: '<h1>Name: {{getName()}}</h1>',
+      template: '<h1>{{title}}: {{getName()}}</h1>',
     })
     .Class({
       constructor: function() {
+        this.title = "Hero Detail";
       },
-      getName: function() {
-        return 'Windstorm';
-      }
+      getName: function() { return 'Windstorm'; }
     });
   // #enddocregion component
 
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
index 745a450096..ec5b706624 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
@@ -9,19 +9,16 @@
   function HeroComponent() {
     this.title = "Hero Detail";
   }
-  
+  HeroComponent.prototype.getName = function() { return 'Windstorm'; };
   // #enddocregion constructorproto
+
   // #enddocregion appexport
   HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-view',
-      template: '<h1>Hero: {{getName()}}</h1>'
+      template: '<h1>{{title}}: {{getName()}}</h1>'
     })
   ];
-  // #docregion constructorproto
-  
-  HeroComponent.prototype.getName = function() {return 'Windstorm';};
-  // #enddocregion constructorproto
   // #enddocregion metadata
 
   app.HeroesModule =
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
index 4b4ba8529d..83dc6d409d 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -4,8 +4,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-view',
-  template:
-    '<h1>Hero: {{getName()}}</h1>'
+  template: '<h1>{{title}}: {{getName()}}</h1>'
 })
 // #docregion appexport
 // #docregion class
diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json
index a747acd83f..eb1a46ace4 100644
--- a/public/docs/dart/latest/cookbook/_data.json
+++ b/public/docs/dart/latest/cookbook/_data.json
@@ -60,7 +60,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular TypeScript examples into ES5 JavaScript",
+    "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript",
     "hide": true
   },
 
diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json
index 3f319736d6..74ee2a0be9 100644
--- a/public/docs/js/latest/cookbook/_data.json
+++ b/public/docs/js/latest/cookbook/_data.json
@@ -55,7 +55,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular TypeScript examples into ES5 JavaScript"
+    "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript"
   },
 
   "visual-studio-2015": {
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
index 1ed9ac2489..77e3f9b7d6 100644
--- a/public/docs/js/latest/cookbook/ts-to-js.jade
+++ b/public/docs/js/latest/cookbook/ts-to-js.jade
@@ -1,490 +1 @@
-include ../../../../_includes/_util-fns
-
-:marked
-  Everything that we can do in Angular in TypeScript, we can also do
-  in JavaScript. Translating from one language to the other is mostly a
-  matter of changing the way we organize our code and the way we access
-  Angular APIs.
-
-  Since TypeScript is a popular language option in Angular, many of the
-  code examples you see on the Internet as well as on this site are written
-  in TypeScript. This cookbook contains recipes for translating these kinds of
-  code examples to ES5, so that they can be applied to Angular JavaScript
-  applications.
-
-<a id="toc"></a>
-:marked
-  ## Table of contents
-
-  [From TS to ES6 to ES5](#from-ts)
-
-  [Modularity: imports and exports](#modularity)
-
-  [Classes and Class Metadata](#class-metadata)
-  
-  [Input and Output Metadata](#property-metadata)
-  
-  [Dependency Injection](#dependency-injection)
-  
-  [Host and Query Metadata](#host-query-metadata)
-
-  **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
-  code shown in this cookbook.**
-
-a(id="from-ts")
-.l-main-section
-:marked
-  ## From TS to ES6 to ES5
-  
-  Since TypeScript is a superset of ES6 JavaScript, and ES6 itself is a superset of ES5, the 
-  transformation of Typescript code all the way to ES5 javascript can be seen as "shedding"
-  features.
-
-  When going from TypeScript to ES6 with decorators, we mostly remove 
-  [type annotations](https://www.typescriptlang.org/docs/handbook/basic-types.html) 
-  , such as `string` or `boolean`, and
-  [class property modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
-  such as `public` and `private`. 
-  The exception is type annotations used for dependency injection, which can be kept.
-
-  Going from ES6 with decorators to plain ES6 JavaScript we lose all 
-  [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
-  and the remaining type annotations.
-  We also lose class properties, which now have to be declared in the class constructor.
-
-  Finally, in the transition from ES6 to ES5 JavaScript the main missing features are `import`
-  statements and `class` declarations. 
-
-  For ES6 transpilation we recommend using a similar setup as our TypeScript quickstart, 
-  replacing TypeScript with [Babel](https://babeljs.io/) using the `es2015` preset. 
-  To use decorators and annotations with Babel, install the 
-  [`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well. 
-
-a(id="modularity")
-.l-main-section
-:marked
-  ## Importing and Exporting
-
-  ### Importing Angular Code
-
-  In TypeScript and ES6 JavaScript, Angular classes, functions, and other members are imported
-  with ES6 `import` statements.
-
-  In ES5 JavaScript code, when using [the Angular packages](../glossary.html#!#scoped-package),
-  we can access Angular code through the global `ng` object. In the nested members of this 
-  object we'll find everything we would import from `@angular` in TypeScript:
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/main.ts,
-    cb-ts-to-js/js-es6-decorators/app/main.es6,
-    cb-ts-to-js/js-es6/app/main.es6,
-    cb-ts-to-js/js/app/main.js
-  `,`
-    ng2import,
-    ng2import,
-    ng2import,
-    ng2import
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)
-
-:marked
-  ### Importing and Exporting Application Code
-
-  Each file in an Angular TypeScript or ES6 JavaScript application constitutes a ES6 module.
-  When we want to make something from a module available to other modules, we `export` it.
-
-  In an Angular ES5 JavaScript application, we load each file to the page using a `<script>` tag. 
-  Each file can make things available to other files via the shared global `window` scope.
-
-  We often introduce an application namespace object (such as `app`) onto `window` and attach
-  everything we need to share to that namespace object.
-  We also wrap our code in an 
-  [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
-  These practices together prevent our code from polluting the global scope.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/hero.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
-    cb-ts-to-js/js-es6/app/hero.component.es6,
-    cb-ts-to-js/js/app/hero.component.js
-  `,`
-    appexport,
-    appexport,
-    appexport,
-    appexport
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)
-
-:marked
-  Using Typescript or ES6 JavaScript, in other modules we can then `import` things that have been exported
-  elsewhere.
-
-  In ES5 JavaScript we can access anything using the shared namespace in other files.
-  Note that the order of `<script>` tags on the page is significant. 
-  We must load a file that defines a shared member before a file that uses that member.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/main.ts,
-    cb-ts-to-js/js-es6-decorators/app/main.es6,
-    cb-ts-to-js/js-es6/app/main.es6,
-    cb-ts-to-js/js/app/main.js
-  `,`
-    appimport,
-    appimport,
-    appimport,
-    appimport
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)
-
-.alert.is-helpful
-  :marked
-    Alternatively, we can use a module loader such as Webpack or
-    Browserify in an Angular JavaScript project. In such a project, we would
-    use CommonJS modules and the `require` function to load Angular framework code.
-    We would then use `module.exports` and `require` to export and import application
-    code.
-
-
-a(id="class-metadata")
-.l-main-section
-:marked
-  ## Classes and Class Metadata
-
-  ### Classes
-
-  We put most of our Angular TypeScript or ES6 JavaScript code into classes. ES6 without decorators
-  also does not have support for class properties, so they must be assigned inside the constructor.
-
-  ES5 JavaScript has no classes. We use the constructor pattern instead which works with
-  Angular as well as classes do.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/hero.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
-    cb-ts-to-js/js-es6/app/hero.component.es6,
-    cb-ts-to-js/js/app/hero.component.js
-  `,`
-    class,
-    class,
-    class,
-    constructorproto
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)
-
-:marked
-  ### Metadata
-
-  Using Typescript or ES6 with decorators, we have access to *decorators*.
-  Most Angular classes have one or more *decorators* attached to provide configuration 
-  and metadata. 
-  For example, a component must have a 
-  [`@Component`](../api/core/index/Component-decorator.html) decorator.
-
-  In ES5/6 JavaScript we can instead attach an `annotations` array to a class/constructor 
-  to provide metadata. 
-  Each item in the array corresponds to a decorator.
-
-  The pattern of creating a constructor and decorating it with metadata is so common that Angular 
-  provides an alternative ES5 convenience class API for it for ES5 JavaScript.
-  This API lets us define everything in a single expression.
-
-  With this API we first call the `ng.core.Component` function, followed by a chained `Class` 
-  method call. 
-  The argument to `Class` is an object that defines the constructor and the instance methods
-  of the component.
-  Similar APIs are also available for other decorators. You can define a directive with
-  `ng.core.Directive` or a pipe with `ng.core.Pipe`.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/hero.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
-    cb-ts-to-js/js-es6/app/hero.component.es6,
-    cb-ts-to-js/js/app/hero.component.js,
-    cb-ts-to-js/js/app/hero-dsl.component.js
-  `,`
-    metadata,
-    metadata,
-    metadata,
-    metadata,
-    component
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript,
-    ES5 JavaScript with Class API
-  `)
-
-:marked
-  ### Interfaces
-
-  When defining classes that need to implement a certain method, it is common to use TypeScript
-  interfaces that enforce that the method signature is correct. 
-  Component lifecycle methods like `ngOnInit` are one example of this pattern.
-  `ngOnInit` is defined in the `OnInit` interface.
-
-  TypeScript interfaces are purely for developer convenience and are not used by Angular at runtime.
-  This means that in ES5/6 JavaScript code we don't need to substitute anything for interfaces.
-  We can just implement the methods.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/hero-lifecycle.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6,
-    cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6,
-    cb-ts-to-js/js/app/hero-lifecycle.component.js
-  `,`
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)  
-
-a(id="property-metadata")
-.l-main-section
-:marked
-  ## Input and Output Metadata
-
-  ### Input and Output Decorators
-
-  In TypeScript and ES6 with decorators, property decorators are often used to provide additional 
-  metadata for components and directives.
-  For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), we use `@Input` and 
-  `@Output` property decorators. 
-  They may optionally specify input and output binding names if we want them to be different 
-  from the class property names.
-
-  There is no equivalent of a property decorator in ES5/6 JavaScript. 
-  Instead, we add comparable information to the `Component` (or `Directive`) metadata.
-  
-  In this example, we add `inputs` and `outputs` array attributes containing the input and
-  output property names. 
-  If we need a binding name that is different from the property itself, we use the 
-  `propertyName: bindingName` syntax.  
-  
-+makeTabs(`
-    cb-ts-to-js/ts/app/hero-io.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6,
-    cb-ts-to-js/js-es6/app/hero-io.component.es6,
-    cb-ts-to-js/js/app/hero-io.component.js
-  `,`
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)
-
-.l-main-section
-:marked
-  ## Dependency Injection
-
-  ### Injection by Type
-
-  Angular can often use TypeScript type information to determine what needs to be injected.
-  ES6 with decorators can also make use of type information.
-
-  Since no type information is available in ES5/6 JavaScript, we must identify "injectables" in 
-  some other way.
-
-  We attach a `parameters` array to the constructor function. 
-  Each array item is the dependency injection token that identifies the thing to be injected. 
-  Often the token is the constructor function for the class-like dependency.
-  
-  In ES6 the decorators need to be inside a nested array.
-  When using the ES5 class convenience API, we can also supply the parameter tokens by wrapping 
-  the constructor in an array.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/hero-di.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6,
-    cb-ts-to-js/js-es6/app/hero-di.component.es6,
-    cb-ts-to-js/js/app/hero-di.component.js,
-    cb-ts-to-js/js/app/hero-di-inline.component.js
-  `,`
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript,
-    ES5 JavaScript with Class API
-  `)
-
-:marked
-  ### Injection with the @Inject decorator
-
-  When the thing being injected doesn't correspond directly to a type, we use the 
-  `@Inject()` decorator to supply the injection token.
-  In this example, we're injecting a string identified by the "heroName" token. 
-
-  In ES5/6 JavaScript we add the token string to the injection parameters array.
-  Alternatively, when using the ES5 convenience class API we can create a token with the 
-  `Inject` method and add that to the constructor array in the annotations.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/hero-di-inject.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6,
-    cb-ts-to-js/js-es6/app/hero-di-inject.component.es6,
-    cb-ts-to-js/js/app/hero-di-inject.component.js,
-    cb-ts-to-js/js/app/hero-di-inject.component.js
-  `,`
-  ,
-  ,
-  ,
-  parameters,
-  ctor
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript,
-    ES5 JavaScript with Class API
-  `)
-
-:marked
-  ### Additional Injection Decorators
-
-  We can attach additional decorators to constructor parameters to qualify the injection behavior. 
-  We can mark optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
-  inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
-  inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
-  and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)).
-
-  In ES6 JavaScript we just add the extra decorators to the nested injection parameters array.
-
-  To achieve the same effect in ES5 JavaScript, use a nested array with the constructor 
-  array notation in which the injection information precedes the constructor function itself.
-  
-  We can apply other additional parameter decorators such as
-  [`@Host`](../api/core/index/Host-decorator.html) and
-  [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
-  by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
-  parameters array.
-+makeTabs(`
-    cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6,
-    cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6,
-    cb-ts-to-js/js/app/hero-di-inject-additional.component.js
-  `,`
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)  
-
-a(id="host-query-metadata")
-.l-main-section
-:marked
-  ## Host and Query Metadata
-
-  ### Host Decorators
-
-  In Typescript and ES6 with decorators we can use host property decorators to bind a host
-  element to a component or directive.
-  The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
-  binds host element properties to component data properties. 
-  The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator binds
-  host element events to component event handlers.
-
-  When using ES5/6 we add a `host` attribute to the component metadata to achieve the
-  same effect as `@HostBinding` and `@HostListener`. 
-  
-  The  `host` value is an object whose properties are host property and listener bindings:
-  
-  * Each key follows regular Angular binding syntax: `[property]` for host bindings
-    or `(event)` for host listeners.
-  * Each value identifies the corresponding component property or method.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/heroes-bindings.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6,
-    cb-ts-to-js/js-es6/app/heroes-bindings.component.es6,
-    cb-ts-to-js/js/app/heroes-bindings.component.js
-  `,`
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)
-.alert.is-helpful
-  :marked
-    In TypeScript and ES6 with decorators we can also use the `queries` metadata 
-    instead of the `@ViewChild` and `@ContentChild` property decorators.    
-
-:marked
-  ### Query Decorators
-  
-  There are several property decorators for querying the descendants of
-  a component or directive.
-  
-  The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
-  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
-  allow a component to query instances of other components that are used in
-  its view. 
-
-  In ES5/6 JavaScript we access a component's view children by adding a `queries` attribute to
-  the component metadata. It should be an object where:
-  
-  * Each key is the name of a component property that will hold the view children
-  * Each value is an instance of either `ViewChild` or `ViewChildren`.
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/heroes-queries.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
-    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
-    cb-ts-to-js/js/app/heroes-queries.component.js
-  `,`
-    view,
-    view,
-    view,
-    view
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)
-
-:marked
-  The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
-  [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
-  allow a component to query instances of other components that have been projected
-  into its view from elsewhere.
-
-  They can be added in the same way as [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
-  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html).
-
-+makeTabs(`
-    cb-ts-to-js/ts/app/heroes-queries.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
-    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
-    cb-ts-to-js/js/app/heroes-queries.component.js
-  `,`
-    content,
-    content,
-    content,
-    content
-  `,`
-    Typescript,
-    ES6 JavaScript with decorators,
-    ES6 JavaScript,
-    ES5 JavaScript
-  `)
+include ../../../ts/latest/cookbook/ts-to-js
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index 7a45a91e77..78b159e40c 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -58,7 +58,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular TypeScript examples into ES5 JavaScript"
+    "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript"
   },
 
   "visual-studio-2015": {
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade
index 2e00a56272..966d1383fe 100644
--- a/public/docs/ts/latest/cookbook/ts-to-js.jade
+++ b/public/docs/ts/latest/cookbook/ts-to-js.jade
@@ -1 +1,545 @@
-include ../../../js/latest/cookbook/ts-to-js
+include ../../../../_includes/_util-fns
+
+:marked
+  Anything you can do with Angular in _TypeScript_, you can also do
+  in JavaScript. Translating from one language to the other is mostly a
+  matter of changing the way you organize your code and access Angular APIs.
+
+  _TypeScript_ is a popular language option for Angular development. 
+  Most code examples on the Internet as well as on this site are written in _TypeScript_. 
+  This cookbook contains recipes for translating _TypeScript_
+  code examples to _ES6_ and to _ES5_ so that JavaScript developers
+  can read and write Angular apps in their preferred dialect.
+
+a#toc
+:marked
+  ## Table of contents
+
+  [_TypeScript_ to _ES6_ to _ES5_](#from-ts)
+
+  [Modularity: imports and exports](#modularity)
+
+  [Classes and Class Metadata](#class-metadata)
+  
+  [Input and Output Metadata](#property-metadata)
+  
+  [Dependency Injection](#dependency-injection)
+  
+  [Host and Query Metadata](#host-query-metadata)
+
+  [AoT compilation in _TypeScript_ Only](#aot)
+
+  **Run and compare the live <live-example name="cb-ts-to-js">_TypeScript_</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
+  code shown in this cookbook.**
+
+a#from-ts
+.l-main-section
+:marked
+  ## _TypeScript_ to _ES6_ to _ES5_
+  
+  _TypeScript_ 
+  <a href="https://www._TypeScript_lang.org" target="_blank" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
+  &nbsp; _ES6 JavaScript_ is a superset of _ES5 JavaScript_. &nbsp; _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
+  The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
+
+  The downgrade progression is
+  * _TypeScript_ to _ES6-with-decorators_
+  * _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_")
+  * _ES6-without-decorators_ to _ES5_
+
+  When translating from _TypeScript_ to _ES6-with-decorators_, remove 
+  [class property access modifiers](http://www._TypeScript_lang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
+  such as `public` and `private`.
+  Remove most of the 
+  [type annotations](https://www._TypeScript_lang.org/docs/handbook/basic-types.html), 
+  such as `string` and `boolean`
+  but **keep type annotations used for dependency injection**.
+   
+
+  From _ES6-with-decorators_ to _plain ES6_, remove all 
+  [decorators](https://www._TypeScript_lang.org/docs/handbook/decorators.html)
+  and the remaining type annotations.
+  You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class.
+
+  Finally, from _plain ES6_ to _ES5_, the main missing features are `import`
+  statements and `class` declarations. 
+
+  For _plain ES6_ transpilation you can _start_ with a setup similar to the 
+  [_TypeScript_ quickstart](https://github.com/angular/quickstart) and adjust the application code accordingly. 
+  Transpile with [Babel](https://babeljs.io/) using the `es2015` preset. 
+  To use decorators and annotations with Babel, install the 
+  [`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well.
+   
+
+a#modularity
+.l-main-section
+:marked
+  ## Importing and Exporting
+
+  ### Importing Angular Code
+
+  In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements.
+
+  In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#!#scoped-package),
+  through the global `ng` object. 
+  Everything you would have imported from `@angular` is a nested member of this `ng` object:
+
++makeTabs(`
+    cb-ts-to-js/ts/app/main.ts,
+    cb-ts-to-js/js-es6-decorators/app/main.es6,
+    cb-ts-to-js/js-es6/app/main.es6,
+    cb-ts-to-js/js/app/main.js
+  `,`
+    ng2import,
+    ng2import,
+    ng2import,
+    ng2import
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ### Importing and Exporting Application Code
+
+  Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module.
+  When you want to make something available to other modules, you `export` it.
+
+  _ES5_ lacks native support for modules. 
+  In an Angular _ES5_ application, you load each file manually by adding a `<script>` tag to the host web page, `index.html`. 
+  
+  Each code file can make selected entities available to other files via the shared global `window` scope.
+  But this is widely thought to be a bad practice.
+  Instead, you should add one application namespace object (such as `app`) to `window`.
+  Then attach everything you need to share to that namespace object.
+  
+  You should also wrap your code in an 
+  [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
+  
+  These practices together help you avoid polluting the global scope.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,`
+    appexport,
+    appexport,
+    appexport,
+    appexport
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  In _TypeScript_ and _ES6_ apps, you `import` things that have been exported from other modules.
+
+  In _ES5_ you use the shared namespace object to access "exported" entities in other files.
+  Note that the order of `<script>` tags on the page is often significant. 
+  You must load a file that defines a shared member before a file that uses that member.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/main.ts,
+    cb-ts-to-js/js-es6-decorators/app/main.es6,
+    cb-ts-to-js/js-es6/app/main.es6,
+    cb-ts-to-js/js/app/main.js
+  `,`
+    appimport,
+    appimport,
+    appimport,
+    appimport
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)(format='.')
+
+.alert.is-helpful
+  :marked
+    Alternatively, you can use a module loader such as Webpack or
+    Browserify in an Angular JavaScript project. In such a project, you would
+    use _CommonJS_ modules and the `require` function to load Angular framework code.
+    Then use `module.exports` and `require` to export and import application  code.
+
+
+a#class-metadata
+.l-main-section
+:marked
+  ## Classes and Class Metadata
+
+  ### Classes
+
+  Most Angular _TypeScript_ and _ES6_ code is written as classes.
+  In _ES6-without-decorators_, properties of classes must be assigned inside the constructor.
+
+  _ES5_ JavaScript has no classes. 
+  Use the constructor function pattern instead adding methods to the prototype.
+  This works with Angular as well as classes do.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,`
+    class,
+    class,
+    class,
+    constructorproto
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ### Metadata
+
+  When writing in _TypeScript_ or _ES6-with-decorators_, 
+  provide configuration and metadata by adorning a class with one or more *decorators*. 
+  For example, you supply metadata to a component class by preceding its definition with a
+  [`@Component`](../api/core/index/Component-decorator.html) decorator.
+
+  In _plain ES6_, you provide metadata by attaching an `annotations` array to the _class_.
+  Each item in the array corresponds to a decorator property value.
+  
+  In _ES5_, you also provide an `annotations` array but you attach it to the _constructor function_ rather than a class.
+
+  See these variations side-by-side:
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,`
+    metadata,
+    metadata,
+    metadata,
+    metadata
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ***Angular class API***
+
+  This _ES5_ pattern of creating a constructor and annotating it with metadata is so common that Angular 
+  provides a convenience API to make it a little more compact and put the metadata first, 
+  as it would be if you wrote in _TypeScript_ or _ES6-with-decorators_.
+
+  Set a component variable to the result of an `ng.core.Component` function call.
+  Pass the same metadata object to `ng.core.Component` as you did before.
+  
+  Then chain a call to the `Class` method which takes an object defining the class constructor and instance methods.
+
+  Here is an example of the component class API next to the annotated function version for comparison:
+
++makeTabs(`
+    cb-ts-to-js/js/app/hero-dsl.component.js,
+    cb-ts-to-js/js/app/hero.component.js
+  `,`
+    component,
+    metadata
+  `,`
+    ES5 JavaScript with Class API,
+    ES5 JavaScript
+  `)
+:marked
+  There are similar APIs for other decorated classes. 
+  You can define a directive with `ng.core.Directive`: 
+
+code-example.
+  var MyDirective = ng.core.Directive({
+    selector: '[myDirective]'
+  }).Class({
+    ...
+  });
+:marked
+  and a pipe with `ng.core.Pipe`:
+code-example.  
+  var MyPipe = ng.core.Pipe({
+    name: 'myPipe'
+  }).Class({
+    ...
+  });
+
+:marked
+  ### Interfaces
+
+  When defining classes that need to implement a certain method, it is common to use _TypeScript_
+  interfaces that enforce that the method signature is correct. 
+  Component lifecycle methods like `ngOnInit` are one example of this pattern.
+  `ngOnInit` is defined in the `OnInit` interface.
+
+  _TypeScript_ interfaces are purely for developer convenience and are not used by Angular at runtime.
+  This means that in _ES5_/_ES6_ JavaScript code you don't need to substitute anything for interfaces.
+  Just implement the methods.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-lifecycle.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js/app/hero-lifecycle.component.js
+  `,`
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)  
+
+a#property-metadata
+.l-main-section
+:marked
+  ## Input and Output Metadata
+
+  ### Input and Output Decorators
+
+  In _TypeScript_ and _ES6_ with decorators, property decorators are often used to provide additional 
+  metadata for components and directives.
+  For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), you use `@Input` and 
+  `@Output` property decorators. 
+  Specify input and output binding names if you want the public-facing names to differ
+  from the class property names.
+
+  There is no equivalent of a property decorator in _ES5_/_ES6_ JavaScript. 
+  Instead, you add comparable information to the `Component` (or `Directive`) metadata.
+  
+  In this example, you add `inputs` and `outputs` array attributes containing the input and
+  output property names. 
+  If you need a binding name that is different from the property itself, use the 
+  `propertyName: bindingName` syntax.  
+  
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-io.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6,
+    cb-ts-to-js/js-es6/app/hero-io.component.es6,
+    cb-ts-to-js/js/app/hero-io.component.js
+  `,`
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+.l-main-section
+:marked
+  ## Dependency Injection
+
+  ### Injection by Type
+
+  Angular can often use _TypeScript_ type information to determine what needs to be injected.
+  _ES6_ with decorators can also make use of type information.
+
+  Since no type information is available in _ES5_/_ES6_ JavaScript, you must identify "injectables" in 
+  some other way.
+
+  Attach a `parameters` array to the constructor function. 
+  Each array item is the dependency injection token that identifies the thing to be injected. 
+  Often the token is the constructor function for the class-like dependency.
+  
+  In _ES6_ the decorators need to be inside a nested array.
+  When writing in the _ES5_ class convenience API, you can supply the parameter tokens by wrapping 
+  the constructor in an array.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di.component.es6,
+    cb-ts-to-js/js/app/hero-di.component.js,
+    cb-ts-to-js/js/app/hero-di-inline.component.js
+  `,`
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with Class API
+  `)
+
+:marked
+  ### Injection with the @Inject decorator
+
+  When the thing being injected doesn't correspond directly to a type, you use the 
+  `@Inject()` decorator to supply the injection token.
+  In this example, you are injecting a string identified by the "heroName" token. 
+
+  In _ES5_/_ES6_ JavaScript you add the token string to the injection parameters array.
+  Alternatively, when using the _ES5_ convenience class API you can create a token with the 
+  `Inject` method and add that to the constructor array in the annotations.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di-inject.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js/app/hero-di-inject.component.js,
+    cb-ts-to-js/js/app/hero-di-inject.component.js
+  `,`
+  ,
+  ,
+  ,
+  parameters,
+  ctor
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with Class API
+  `)
+
+:marked
+  ### Additional Injection Decorators
+
+  You can attach additional decorators to constructor parameters to qualify the injection behavior. 
+  You can mark optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
+  inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
+  inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
+  and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)).
+
+  In ES6 JavaScript you just add the extra decorators to the nested injection parameters array.
+
+  To achieve the same effect in _ES5_ JavaScript, use a nested array with the constructor 
+  array notation in which the injection information precedes the constructor function itself.
+  
+  You can apply other additional parameter decorators such as
+  [`@Host`](../api/core/index/Host-decorator.html) and
+  [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
+  by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
+  parameters array.
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6,
+    cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+  `,`
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)  
+
+a#host-query-metadata
+.l-main-section
+:marked
+  ## Host and Query Metadata
+
+  ### Host Decorators
+
+  In _TypeScript_ and _ES6-with-decorators_ you can use host property decorators to bind a host
+  element to a component or directive.
+  The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
+  binds host element properties to component data properties. 
+  The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator binds
+  host element events to component event handlers.
+
+  When using _ES5_/_ES6_, add a `host` attribute to the component metadata to achieve the
+  same effect as `@HostBinding` and `@HostListener`. 
+  
+  The  `host` value is an object whose properties are host property and listener bindings:
+  
+  * Each key follows regular Angular binding syntax: `[property]` for host bindings
+    or `(event)` for host listeners.
+  * Each value identifies the corresponding component property or method.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-bindings.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-bindings.component.es6,
+    cb-ts-to-js/js/app/heroes-bindings.component.js
+  `,`
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+.alert.is-helpful
+  :marked
+    In _TypeScript_ and _ES6-with-decorators_ you can also use the `queries` metadata 
+    instead of the `@ViewChild` and `@ContentChild` property decorators.    
+
+:marked
+  ### Query Decorators
+  
+  There are several property decorators for querying the descendants of
+  a component or directive.
+  
+  The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
+  allow a component to query instances of other components that are used in
+  its view. 
+
+  In _ES5_/_ES6_ JavaScript you access a component's view children by adding a `queries` attribute to
+  the component metadata. It should be an object where:
+  
+  * Each key is the name of a component property that will hold the view children
+  * Each value is an instance of either `ViewChild` or `ViewChildren`.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
+    cb-ts-to-js/js/app/heroes-queries.component.js
+  `,`
+    view,
+    view,
+    view,
+    view
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
+  [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
+  allow a component to query instances of other components that have been projected
+  into its view from elsewhere.
+
+  They can be added in the same way as [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html).
+
++makeTabs(`
+    cb-ts-to-js/ts/app/heroes-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
+    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
+    cb-ts-to-js/js/app/heroes-queries.component.js
+  `,`
+    content,
+    content,
+    content,
+    content
+  `,`
+    TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+a#aot
+.l-main-section
+:marked
+  ## AoT Compilation in _TypeScript_ only
+
+  Angular offers two modes of template compilation, JiT (_Just-in-Time_) and 
+  [AoT (_Ahead-of-Time_)](aot-compiler.html).
+  Currently the AoT compiler only works with _TypeScript_ applications because, in part, it generates
+  _TypeScript_ files as an intermediate result.
+  **AoT is not an option for pure JavaScript applications** at this time.
diff --git a/public/docs/ts/latest/guide/change-log.jade b/public/docs/ts/latest/guide/change-log.jade
index 5b37b8f0bb..38cd957780 100644
--- a/public/docs/ts/latest/guide/change-log.jade
+++ b/public/docs/ts/latest/guide/change-log.jade
@@ -7,6 +7,12 @@ block includes
   The Angular documentation is a living document with continuous improvements.
   This log calls attention to recent significant changes.
 
+  ## ES6  described in "TypeScript to JavaScript" (2016-11-03)
+  The updated "[TypeScript to JavaScript](../cookbook/ts-to-js.html)" cookbook 
+  now explains how to write apps in ES6/7
+  by translating the common idioms in the TypeScript documentation examples
+  (and elsewhere on the web) to ES6/7 and ES5.
+
   ## Sync with Angular v.2.1.1 (2016-10-21)
   Docs and code samples updated and tested with Angular v.2.1.0 
 

From b11438f211ed7009335bc18f5cbf2950fc4014fa Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Fri, 11 Nov 2016 19:44:00 -0800
Subject: [PATCH 3/4] docs(ts-to-js): add separate template files for some
 components

---
 .../app/confirm.component.html                |   6 +
 .../hero-di-inject-additional.component.es6   |   9 +-
 .../app/hero-io.component.es6                 |  10 +-
 .../app/title.component.html                  |   3 +
 .../js-es6/app/confirm.component.html         |   6 +
 .../hero-di-inject-additional.component.es6   |   9 +-
 .../js-es6/app/hero-io.component.es6          |  10 +-
 .../js-es6/app/title.component.html           |   3 +
 .../cb-ts-to-js/js/app/confirm.component.html |   6 +
 .../hero-di-inject-additional.component.js    |  10 +-
 .../cb-ts-to-js/js/app/hero-io.component.js   |  10 +-
 .../cb-ts-to-js/js/app/title.component.html   |   3 +
 .../docs/_examples/cb-ts-to-js/js/index.html  |   1 -
 .../cb-ts-to-js/ts/app/confirm.component.html |   6 +
 .../hero-di-inject-additional.component.ts    |   9 +-
 .../cb-ts-to-js/ts/app/hero-io.component.ts   |  10 +-
 .../cb-ts-to-js/ts/app/title.component.html   |   4 +
 public/docs/ts/latest/cookbook/ts-to-js.jade  | 129 ++++++++++++------
 18 files changed, 148 insertions(+), 96 deletions(-)
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/title.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/title.component.html

diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/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>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
index 8cd77b51f6..83e3dab59f 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
+++ b/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(
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
index 2b954b138a..dddbb34733 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
+++ b/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;
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html
new file mode 100644
index 0000000000..06d6f3db91
--- /dev/null
+++ b/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>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/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>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
index 295d305ac4..398e38d352 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
+++ b/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')],
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
index 549d75ce7c..3ed92792db 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
+++ b/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'
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html
new file mode 100644
index 0000000000..06d6f3db91
--- /dev/null
+++ b/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>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/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>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
index 64009317a9..127bf524a8 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+++ b/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'),
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
index 79aef12125..611d3b842b 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
@@ -2,6 +2,7 @@
   // #docregion
   var ConfirmComponent = ng.core.Component({
     selector: 'my-confirm',
+    templateUrl: 'app/confirm.component.html',
     inputs: [
       'okMsg',
       'notOkMsg: cancelMsg'
@@ -9,14 +10,7 @@
     outputs: [
       'ok',
       'notOk: cancel'
-    ],
-    template:
-      '<button (click)="onOkClick()">' +
-        '{{okMsg}}' +
-      '</button>' +
-      '<button (click)="onNotOkClick()">' +
-        '{{notOkMsg}}' +
-      '</button>'
+    ]
   }).Class({
     constructor: function() {
       this.ok = new ng.core.EventEmitter();
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js/app/title.component.html
new file mode 100644
index 0000000000..06d6f3db91
--- /dev/null
+++ b/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>
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
index 448c295609..3c2dd6eeca 100644
--- a/public/docs/_examples/cb-ts-to-js/js/index.html
+++ b/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>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/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>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
index d36b3eff19..37e00960c9 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
+++ b/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(
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
index 8cf430c000..8105d98919 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
+++ b/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;
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/title.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/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>
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade
index 966d1383fe..0c3ba61544 100644
--- a/public/docs/ts/latest/cookbook/ts-to-js.jade
+++ b/public/docs/ts/latest/cookbook/ts-to-js.jade
@@ -80,7 +80,7 @@ a#modularity
 
   In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements.
 
-  In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#!#scoped-package),
+  In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#!#scoped-package)
   through the global `ng` object. 
   Everything you would have imported from `@angular` is a nested member of this `ng` object:
 
@@ -102,23 +102,29 @@ a#modularity
   `)
 
 :marked
-  ### Importing and Exporting Application Code
+  ### Exporting Application Code
 
   Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module.
   When you want to make something available to other modules, you `export` it.
 
   _ES5_ lacks native support for modules. 
-  In an Angular _ES5_ application, you load each file manually by adding a `<script>` tag to the host web page, `index.html`. 
-  
-  Each code file can make selected entities available to other files via the shared global `window` scope.
-  But this is widely thought to be a bad practice.
-  Instead, you should add one application namespace object (such as `app`) to `window`.
-  Then attach everything you need to share to that namespace object.
+  In an Angular _ES5_ application, you load each file manually by adding a `<script>` tag to `index.html`. 
+.alert.is-important
+  :marked
+    The order of `<script>` tags is often significant. 
+    You must load a file that defines a public JavaScript entity before a file that references that entity.
+:marked
+  The best practice in _ES5_ is to create a form of modularity that avoids polluting the global scope. 
+  Add one application namespace object such as `app` to the global `document`.
+  Then each code file "exports" public entities by attaching them to that namespace object, e.g., `app.HeroComponent`.
+  You could factor a large application into several sub-namespaces 
+  which leads to "exports" along the lines of `app.heroes.HeroComponent`.
   
-  You should also wrap your code in an 
-  [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
+  Every file should wrap _ES5_ code in an 
+  [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+  to limit unintentional leaking of private symbols into the global scope.
   
-  These practices together help you avoid polluting the global scope.
+  Here is a `HeroComponent` as it might be defined and "exported" in each of the four language variants.
 
 +makeTabs(`
     cb-ts-to-js/ts/app/hero.component.ts,
@@ -138,11 +144,11 @@ a#modularity
   `)
 
 :marked
+  ### Importing Application Code
+
   In _TypeScript_ and _ES6_ apps, you `import` things that have been exported from other modules.
 
-  In _ES5_ you use the shared namespace object to access "exported" entities in other files.
-  Note that the order of `<script>` tags on the page is often significant. 
-  You must load a file that defines a shared member before a file that uses that member.
+  In _ES5_ you use the shared namespace object to access "exported" entities from other files.
 
 +makeTabs(`
     cb-ts-to-js/ts/app/main.ts,
@@ -180,8 +186,7 @@ a#class-metadata
   In _ES6-without-decorators_, properties of classes must be assigned inside the constructor.
 
   _ES5_ JavaScript has no classes. 
-  Use the constructor function pattern instead adding methods to the prototype.
-  This works with Angular as well as classes do.
+  Use the constructor function pattern instead, adding methods to the prototype.
 
 +makeTabs(`
     cb-ts-to-js/ts/app/hero.component.ts,
@@ -206,12 +211,13 @@ a#class-metadata
   When writing in _TypeScript_ or _ES6-with-decorators_, 
   provide configuration and metadata by adorning a class with one or more *decorators*. 
   For example, you supply metadata to a component class by preceding its definition with a
-  [`@Component`](../api/core/index/Component-decorator.html) decorator.
+  [`@Component`](../api/core/index/Component-decorator.html) decorator function whose
+  argument is an object literal with metadata properties.
 
   In _plain ES6_, you provide metadata by attaching an `annotations` array to the _class_.
-  Each item in the array corresponds to a decorator property value.
+  Each item in the array is a new instance of a metadata decorator created with a similar metadata object literal.
   
-  In _ES5_, you also provide an `annotations` array but you attach it to the _constructor function_ rather than a class.
+  In _ES5_, you also provide an `annotations` array but you attach it to the _constructor function_ rather than to a class.
 
   See these variations side-by-side:
 
@@ -233,11 +239,41 @@ a#class-metadata
   `)
 
 :marked
+  ***External Template file***
+
+  A large component template is often kept in a separate template file.
++makeExample('cb-ts-to-js/ts/app/title.component.html', '', 'app/title.component.html')(format='.')
+:marked
+  The component (`TitleComponent` in this case) then references the template file in its metadata `templateUrl` property:
++makeTabs(`
+  cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts,
+  cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6,
+  cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6,
+  cb-ts-to-js/js/app/hero-di-inject-additional.component.js`,
+  'metadata, metadata, metadata, metadata',
+  `TypeScript,
+  ES6 JavaScript with decorators,
+  ES6 JavaScript,
+  ES5 JavaScript`)(format='.')
+
+:marked
+  Note that the _TypeScript_ and both _ES6_ file `templateUrl` properties identify the location of the template file _relative to the component module_.
+  All three metadata configurations specify the `moduleId` property 
+  so that Angular can calculate the proper module address.
+.l-sub-section
+  :marked
+    The `moduleId` may not be needed with certain tooling but it's safest to provide it anyway.
+:marked
+  The _ES5_ approach shown here does not support modules and therefore there is no way to calculate a _module-relative URL_.
+  The `templateUrl` for the _ES5_ code must specify the _path from the project root_ and 
+  omits the irrelevant `moduleId` property. 
+  
+
   ***Angular class API***
 
   This _ES5_ pattern of creating a constructor and annotating it with metadata is so common that Angular 
-  provides a convenience API to make it a little more compact and put the metadata first, 
-  as it would be if you wrote in _TypeScript_ or _ES6-with-decorators_.
+  provides a convenience API to make it a little more compact and locates the metadata above the constructor, 
+  as you would if you wrote in _TypeScript_ or _ES6-with-decorators_.
 
   Set a component variable to the result of an `ng.core.Component` function call.
   Pass the same metadata object to `ng.core.Component` as you did before.
@@ -278,14 +314,14 @@ code-example.
 :marked
   ### Interfaces
 
-  When defining classes that need to implement a certain method, it is common to use _TypeScript_
-  interfaces that enforce that the method signature is correct. 
-  Component lifecycle methods like `ngOnInit` are one example of this pattern.
-  `ngOnInit` is defined in the `OnInit` interface.
+  A _TypeScript_ interface helps ensure that a class implements the interface's members correctly.
+  We strongly recommend Angular interfaces where appropriate. 
+  For example, a component that implements the `ngOnInit` lifecycle hook method
+  should implement the `OnInit` interface.
 
-  _TypeScript_ interfaces are purely for developer convenience and are not used by Angular at runtime.
-  This means that in _ES5_/_ES6_ JavaScript code you don't need to substitute anything for interfaces.
-  Just implement the methods.
+  _TypeScript_ interfaces exist for developer convenience and are not used by Angular at runtime.
+  They have no physical manifestation in the generated JavaScript code.
+  Just implement the methods and ignore interfaces when translating code samples from _TypeScript_ to JavaScript.
 
 +makeTabs(`
     cb-ts-to-js/ts/app/hero-lifecycle.component.ts,
@@ -307,21 +343,19 @@ a#property-metadata
 
   ### Input and Output Decorators
 
-  In _TypeScript_ and _ES6_ with decorators, property decorators are often used to provide additional 
-  metadata for components and directives.
-  For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), you use `@Input` and 
-  `@Output` property decorators. 
-  Specify input and output binding names if you want the public-facing names to differ
-  from the class property names.
+  In _TypeScript_ and _ES6-with-decorators_, you often add metadata to class _properties_ with _property decorators_.
+  For example, you apply [`@Input` and `@Output` property decorators](../guide/template-syntax.html#inputs-outputs) 
+  to public class properties that will be the target of data binding expressions in parent components.
 
-  There is no equivalent of a property decorator in _ES5_/_ES6_ JavaScript. 
-  Instead, you add comparable information to the `Component` (or `Directive`) metadata.
-  
-  In this example, you add `inputs` and `outputs` array attributes containing the input and
-  output property names. 
-  If you need a binding name that is different from the property itself, use the 
-  `propertyName: bindingName` syntax.  
+  There is no equivalent of a property decorator in _ES5_ or _plain ES6_. 
+  Fortunately, every property decorator has an equivalent representation in a class decorator metadata property.
+  A _TypeScript_ `@Input` property decorator can be represented by an item in the `Component` metadata's `inputs` array.
   
+  You already know how to add `Component` or `Directive` class metadata in _any_ JavaScript dialect so
+  there's nothing fundamentally new about adding another property. 
+  But note that what would have been _separate_ `@Input` and `@Output` property decorators for each class property are
+  combined in the metadata `inputs` and `outputs` _arrays_.
+
 +makeTabs(`
     cb-ts-to-js/ts/app/hero-io.component.ts,
     cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6,
@@ -334,7 +368,16 @@ a#property-metadata
     ES6 JavaScript,
     ES5 JavaScript
   `)
-
+:marked
+  In the previous example, one of the public-facing binding names (`cancelMsg`) 
+  differs from the corresponding class property name (`notOkMsg`).
+  That's OK but you must tell Angular about it so that it can map an external binding of `cancelMsg`
+  to the component's `notOkMsg` property.
+  
+  In _TypeScript_ and _ES6-with-decorators_, 
+  you specify the special binding name in the argument to the property decorator.
+  In _ES5_ and _plain ES6_ code, convey this pairing with the `propertyName: bindingName` syntax in the class metadata.
+  
 .l-main-section
 :marked
   ## Dependency Injection
@@ -342,7 +385,7 @@ a#property-metadata
   ### Injection by Type
 
   Angular can often use _TypeScript_ type information to determine what needs to be injected.
-  _ES6_ with decorators can also make use of type information.
+  _ES6-with-decorators_ can also make use of type information.
 
   Since no type information is available in _ES5_/_ES6_ JavaScript, you must identify "injectables" in 
   some other way.

From 53f5538859c4d243552d288872e8c8fc8156f446 Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Sun, 13 Nov 2016 14:09:28 -0800
Subject: [PATCH 4/4] docs(cb-ts-to-js): refactor sample code

---
 public/docs/_examples/cb-ts-to-js/e2e-spec.ts |  18 +-
 .../js-es6-decorators/app/app.component.es6   |  15 +
 .../js-es6-decorators/app/app.component.html  |  31 ++
 .../js-es6-decorators/app/app.module.es6      |  55 ++
 .../app/confirm.component.es6                 |  22 +
 .../js-es6-decorators/app/data.service.es6    |   4 +-
 .../hero-di-inject-additional.component.es6   |  48 +-
 .../app/hero-di-inject.component.es6          |  13 +-
 .../app/hero-di.component.es6                 |  17 +-
 .../app/hero-host-meta.component.es6          |  44 ++
 .../app/hero-host.component.es6               |  39 ++
 .../app/hero-io.component.es6                 |  61 +--
 .../app/hero-lifecycle.component.es6          |  23 +-
 .../app/hero-queries.component.es6            |  81 +++
 .../app/hero-title.component.es6              |  26 +
 .../app/hero-title.component.html}            |   0
 .../js-es6-decorators/app/hero.component.es6  |  19 +-
 .../app/heroes-bindings.component.es6         |  42 --
 .../app/heroes-queries.component.es6          |  88 ---
 .../js-es6-decorators/app/main.es6            |  30 +-
 .../cb-ts-to-js/js-es6-decorators/index.html  |  28 +-
 .../cb-ts-to-js/js-es6/app/app.component.es6  |  20 +
 .../cb-ts-to-js/js-es6/app/app.component.html |  30 ++
 .../cb-ts-to-js/js-es6/app/app.module.es6     |  56 ++
 .../js-es6/app/confirm.component.es6          |  32 ++
 .../hero-di-inject-additional.component.es6   |  58 +-
 .../js-es6/app/hero-di-inject.component.es6   |  16 +-
 .../js-es6/app/hero-di.component.es6          |  17 +-
 .../js-es6/app/hero-host.component.es6        |  50 ++
 .../js-es6/app/hero-io.component.es6          |  72 +--
 .../js-es6/app/hero-lifecycle.component.es6   |  22 +-
 .../js-es6/app/hero-queries.component.es6     |  97 ++++
 .../js-es6/app/hero-title.component.es6       |  29 +
 ...mponent.html => hero-title.component.html} |   1 +
 .../cb-ts-to-js/js-es6/app/hero.component.es6 |  21 +-
 .../js-es6/app/heroes-bindings.component.es6  |  48 --
 .../js-es6/app/heroes-queries.component.es6   |  98 ----
 .../_examples/cb-ts-to-js/js-es6/app/main.es6 |  30 +-
 .../_examples/cb-ts-to-js/js-es6/index.html   |  29 +-
 .../cb-ts-to-js/js/app/app.component.html     |  47 ++
 .../cb-ts-to-js/js/app/app.component.js       |  20 +
 .../cb-ts-to-js/js/app/app.module.js          |  46 ++
 .../cb-ts-to-js/js/app/confirm.component.js   |  73 +++
 .../cb-ts-to-js/js/app/data.service.js        |   9 +-
 .../hero-di-inject-additional.component.js    |  59 +-
 .../js/app/hero-di-inject.component.js        |  83 ++-
 .../js/app/hero-di-inline.component.js        |  28 -
 .../cb-ts-to-js/js/app/hero-di.component.js   |  50 +-
 .../cb-ts-to-js/js/app/hero-dsl.component.js  |  29 -
 .../cb-ts-to-js/js/app/hero-host.component.js |  97 ++++
 .../js/app/hero-io-dsl.component.html         |   7 +
 .../cb-ts-to-js/js/app/hero-io.component.html |   7 +
 .../cb-ts-to-js/js/app/hero-io.component.js   |  92 ++--
 .../js/app/hero-lifecycle.component.js        |  62 ++-
 .../js/app/hero-queries.component.js          |  92 ++++
 ...mponent.html => hero-title.component.html} |   1 +
 .../js/app/hero-title.component.js            |  60 +++
 .../cb-ts-to-js/js/app/hero.component.js      |  76 +--
 .../js/app/heroes-bindings.component.js       |  39 --
 .../js/app/heroes-queries.component.js        |  82 ---
 .../docs/_examples/cb-ts-to-js/js/app/main.js |  31 +-
 .../docs/_examples/cb-ts-to-js/js/index.html  |  46 +-
 .../cb-ts-to-js/ts/app/app.component.html     |  31 ++
 .../cb-ts-to-js/ts/app/app.component.ts       |  15 +
 .../cb-ts-to-js/ts/app/app.module.ts          |  56 ++
 .../cb-ts-to-js/ts/app/confirm.component.ts   |  22 +
 .../cb-ts-to-js/ts/app/data.service.ts        |   4 +-
 .../hero-di-inject-additional.component.ts    |  45 +-
 .../ts/app/hero-di-inject.component.ts        |  13 +-
 .../cb-ts-to-js/ts/app/hero-di.component.ts   |  17 +-
 .../ts/app/hero-host-meta.component.ts        |  44 ++
 .../cb-ts-to-js/ts/app/hero-host.component.ts |  39 ++
 .../cb-ts-to-js/ts/app/hero-io.component.ts   |  61 +--
 .../ts/app/hero-lifecycle.component.ts        |  19 +-
 .../ts/app/hero-queries.component.ts          |  83 +++
 .../app/hero-title.component.html}            |   1 +
 .../ts/app/hero-title.component.ts            |  22 +
 .../cb-ts-to-js/ts/app/hero.component.ts      |  19 +-
 .../ts/app/heroes-bindings.component.ts       |  42 --
 .../ts/app/heroes-queries.component.ts        |  88 ---
 .../docs/_examples/cb-ts-to-js/ts/app/main.ts |  34 +-
 .../docs/_examples/cb-ts-to-js/ts/index.html  |  28 +-
 public/docs/ts/latest/cookbook/ts-to-js.jade  | 505 ++++++++++--------
 83 files changed, 2002 insertions(+), 1752 deletions(-)
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
 rename public/docs/_examples/cb-ts-to-js/{ts/app/title.component.html => js-es6-decorators/app/hero-title.component.html} (100%)
 delete mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6
 delete mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
 rename public/docs/_examples/cb-ts-to-js/js-es6/app/{title.component.html => hero-title.component.html} (78%)
 delete mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6
 delete mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.component.js
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.module.js
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
 delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
 delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
 rename public/docs/_examples/cb-ts-to-js/js/app/{title.component.html => hero-title.component.html} (78%)
 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
 delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
 delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.component.html
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts
 rename public/docs/_examples/cb-ts-to-js/{js-es6-decorators/app/title.component.html => ts/app/hero-title.component.html} (78%)
 create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts
 delete mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
 delete mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts

diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
index 5862beeebf..bc67bac8f0 100644
--- a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
+++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
@@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should display the basic component example', function () {
-    testTag('hero-view', 'Hero: Windstorm');
+    testTag('hero-view', 'Hero Detail: Windstorm');
   });
 
   it('should display the component example with lifecycle methods', function () {
@@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () {
 
   it('should support component with inputs and outputs', function () {
     let app = element(by.css('hero-io'));
-    let confirmComponent = app.element(by.css('my-confirm'));
+    let confirmComponent = app.element(by.css('app-confirm'));
 
     confirmComponent.element(by.buttonText('OK')).click();
     expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
@@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should support host bindings and host listeners', function() {
-    let app = element(by.css('heroes-bindings'));
+    let app = element(by.css('hero-host'));
     let h1 = app.element(by.css('h1'));
 
     expect(app.getAttribute('class')).toBe('heading');
-    expect(app.getAttribute('title')).toBe('Tooltip content');
+    expect(app.getAttribute('title')).toContain('Tooltip');
 
     h1.click();
     expect(h1.getAttribute('class')).toBe('active');
@@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should support content and view queries', function() {
-    let app = element(by.css('heroes-queries'));
-    let windstorm = app.element(by.css('a-hero:first-child'));
+    let app = element(by.css('hero-queries'));
+    let windstorm = app.element(by.css('view-child:first-child'));
 
-    app.element(by.buttonText('Activate')).click();
+    app.element(by.css('button')).click();
     expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
-    expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
+    expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
   });
 
   function testTag(selector: string, expectedText: string) {
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
new file mode 100644
index 0000000000..e5f158dbed
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: 'app.component.html',
+  styles: [
+    // See hero-di-inject-additional.component
+    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+    '.heading {font-style: italic}'
+  ]
+})
+export class AppComponent {
+  title = 'ES6 JavaScript with Decorators';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
new file mode 100644
index 0000000000..7f1efd31a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
@@ -0,0 +1,31 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Decorators</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<hero-host-meta></hero-host-meta>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
new file mode 100644
index 0000000000..bea55777ef
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
@@ -0,0 +1,55 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent,
+    HeroComponent,
+    HeroDIComponent,
+    HeroDIInjectComponent,
+    HeroDIInjectAdditionalComponent,
+    HeroHostComponent, HeroHostMetaComponent,
+    HeroIOComponent,
+    HeroLifecycleComponent,
+    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+    HeroTitleComponent
+  ],
+  providers: [
+    DataService,
+    { provide: 'heroName', useValue: 'Windstorm' }
+  ],
+  bootstrap: [ AppComponent ],
+
+  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
new file mode 100644
index 0000000000..08a0ed6c60
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+  moduleId: module.id,
+  selector: 'app-confirm',
+  templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+  @Input() okMsg = '';
+  @Input('cancelMsg') notOkMsg = '';
+  @Output() ok = new EventEmitter();
+  @Output('cancel') notOk = new EventEmitter();
+
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
index 7e9c7456c6..cd7f9e1aae 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DataService {
-  constructor() {
-  }
+  constructor() { }
+
   getHeroName() {
     return 'Windstorm';
   }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
index 83e3dab59f..ec460a9dbc 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
@@ -1,49 +1,7 @@
-import {
-  Attribute,
-  Component,
-  Inject,
-  Optional,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-// #docregion metadata
-@Component({
-  moduleId: module.id,
-  selector: 'hero-title',
-  templateUrl: 'title.component.html'
-})
-// #enddocregion metadata
-class TitleComponent {
-  msg = '';
-  constructor(
-    @Inject('titlePrefix') @Optional() titlePrefix,
-    @Attribute('title') title
-  ) {
-    this.titlePrefix = titlePrefix;
-    this.title = title;
-  }
-
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-// #enddocregion
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-di-inject-additional',
-  template: `<hero-title title="Tour of Heroes">
-  </hero-title>`
-})
-class AppComponent { }
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    TitleComponent
-  ],
-  bootstrap: [ AppComponent ]
+  template: `<hero-title title="Tour of Heroes"></hero-title>`
 })
-export class HeroesDIInjectAdditionalModule { }
+export class HeroComponent { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
index 3a89867051..94b42f956a 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
@@ -1,22 +1,13 @@
-import { Component, Inject, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component, Inject } from '@angular/core';
 
 // #docregion
 @Component({
   selector: 'hero-di-inject',
   template: `<h1>Hero: {{name}}</h1>`
 })
-class HeroComponent {
+export class HeroComponent {
   constructor(@Inject('heroName') name) {
     this.name = name;
   }
 }
 // #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesDIInjectModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
index e8341509a0..0cc78d277e 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
@@ -1,6 +1,4 @@
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
+import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
 // #docregion
@@ -8,19 +6,10 @@ import { DataService } from './data.service';
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
 })
-
-class HeroComponent {
-  name;
+export class HeroComponent {
+  name = '';
   constructor(dataService: DataService) {
     this.name = dataService.getHeroName();
   }
 }
 // #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ DataService ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesDIModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
new file mode 100644
index 0000000000..25dbe1c21a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host-meta',
+  template: `
+    <h1 [class.active]="active">Hero Host in Metadata</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-meta> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+
+    // HostListeners on the entire <hero-host-meta> element
+    '(click)': 'clicked()',
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-meta> element
+  styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+  title = 'Hero Host in Metadata Tooltip';
+  headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host',
+  template: `
+    <h1 [class.active]="active">Hero Host in Decorators</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  // Styles within (but excluding) the <hero-host> element
+  styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+  // HostBindings to the <hero-host> element
+  @HostBinding() title = 'Hero Host in Decorators Tooltip';
+  @HostBinding('class.heading') headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  // HostListeners on the entire <hero-host> element
+  @HostListener('click')
+  clicked() {
+    this.clicks += 1;
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
index dddbb34733..4b36411e78 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
@@ -1,67 +1,26 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  moduleId: module.id,
-  selector: 'my-confirm',
-  templateUrl: 'confirm.component.html'
-})
-class ConfirmComponent {
-  @Input() okMsg;
-  @Input('cancelMsg') notOkMsg;
-  @Output() ok =
-    new EventEmitter();
-  @Output('cancel') notOk =
-    new EventEmitter();
-
-  onOkClick() {
-    this.ok.next(true);
-  }
-  onNotOkClick() {
-    this.notOk.next(true);
-  }
-}
-// #enddocregion
-
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-io',
   template: `
-    <my-confirm [okMsg]="'OK'"
-                [cancelMsg]="'Cancel'"
-                (ok)="onOk()"
-                (cancel)="onCancel()">
-    </my-confirm>
+    <app-confirm [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+    </app-confirm>
     <span *ngIf="okClicked">OK clicked</span>
     <span *ngIf="cancelClicked">Cancel clicked</span>
   `
 })
-class AppComponent {
-  okClicked;
-  cancelClicked;
+export class HeroIOComponent {
+  okClicked     = false;
+  cancelClicked = false;
 
   onOk() {
     this.okClicked = true;
   }
+
   onCancel() {
     this.cancelClicked = true;
   }
 }
-
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    ConfirmComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class HeroesIOModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
index 6a935731b5..2539266597 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
@@ -1,27 +1,14 @@
-// #docplaster
 // #docregion
-import { Component, OnInit } from '@angular/core';
-// #enddocregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-lifecycle',
   template: `<h1>Hero: {{name}}</h1>`
 })
-// #docregion
-class HeroComponent{
-  name;
+export class HeroComponent {
+  name = '';
   ngOnInit() {
-    this.name = 'Windstorm';
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
   }
 }
-// #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesLifecycleModule { }
-
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
new file mode 100644
index 0000000000..fced43d4d7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
@@ -0,0 +1,81 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+@Component({
+  selector: 'content-child',
+  template: `
+  <span class="content-child" *ngIf="active">
+    Active
+  </span>`
+})
+export class ContentChildComponent {
+  active = false;
+
+  activate() {
+    this.active = true;
+  }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+  selector: 'view-child',
+  template: `
+  <h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`,
+  styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+  @Input() hero;
+  active = false;
+
+  @ContentChild(ContentChildComponent) content;
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+  selector: 'hero-queries',
+  template: `
+    <view-child *ngFor="let hero of heroData" [hero]="hero">
+      <content-child></content-child>
+    </view-child>
+    <button (click)="activate()">{{buttonLabel}} All</button>
+  `
+})
+export class HeroQueriesComponent {
+  active = false;
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'LaughingGas'}
+  ];
+
+  @ViewChildren(ViewChildComponent) views;
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
new file mode 100644
index 0000000000..25460d34f7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
@@ -0,0 +1,26 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+  moduleId: module.id,
+  selector: 'hero-title',
+  templateUrl: 'hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+  msg = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() titlePrefix,
+    @Attribute('title') title
+  ) {
+    this.titlePrefix = titlePrefix;
+    this.title = title;
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #enddocregion
+
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
similarity index 100%
rename from public/docs/_examples/cb-ts-to-js/ts/app/title.component.html
rename to public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
index 83dc6d409d..4ea4c11611 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -1,4 +1,3 @@
-// #docplaster
 // #docregion metadata
 import { Component } from '@angular/core';
 
@@ -6,24 +5,10 @@ import { Component } from '@angular/core';
   selector: 'hero-view',
   template: '<h1>{{title}}: {{getName()}}</h1>'
 })
-// #docregion appexport
-// #docregion class
+// #docregion appexport, class
 export class HeroComponent {
   title = 'Hero Detail';
   getName() {return 'Windstorm'; }
 }
-// #enddocregion class
-// #enddocregion appexport
+// #enddocregion appexport, class
 // #enddocregion metadata
-
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesModule { }
-
-
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6
deleted file mode 100644
index ef959eabbb..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  Component,
-  HostBinding,
-  HostListener,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  selector: 'heroes-bindings',
-  template: `
-    <h1 [class.active]="active">
-      Tour of Heroes
-    </h1>
-  `
-})
-class HeroesComponent {
-  @HostBinding() title = 'Tooltip content';
-  @HostBinding('class.heading') hClass = true;
-  active;
-
-  constructor() {}
-
-  @HostListener('click')
-  clicked() {
-    this.active = !this.active;
-  }
-
-  @HostListener('dblclick', ['$event'])
-  doubleClicked(evt) {
-    this.active = true;
-  }
-}
-// #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroesComponent ],
-  bootstrap: [ HeroesComponent ]
-})
-export class HeroesHostBindingsModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6
deleted file mode 100644
index bc55ccef24..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  Component,
-  ViewChildren,
-  ContentChild,
-  QueryList,
-  Input,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@Component({
-  selector: 'active-label',
-  template: `<span class="active-label"
-                   *ngIf="active">
-    Active
-  </span>`
-})
-class ActiveLabelComponent {
-  active;
-
-  activate() {
-    this.active = true;
-  }
-}
-
-// #docregion content
-@Component({
-  selector: 'a-hero',
-  template: `<h2 [class.active]=active>
-    {{hero.name}}
-    <ng-content></ng-content>
-  </h2>`
-})
-class HeroComponent {
-  @Input() hero;
-  active;
-
-  @ContentChild(ActiveLabelComponent)
-  label;
-
-  activate() {
-    this.active = true;
-    this.label.activate();
-  }
-}
-// #enddocregion content
-
-
-// #docregion view
-@Component({
-  selector: 'heroes-queries',
-  template: `
-    <a-hero *ngFor="let hero of heroData"
-          [hero]="hero">
-      <active-label></active-label>
-    </a-hero>
-    <button (click)="activate()">
-      Activate
-    </button>
-  `
-})
-class HeroesQueriesComponent {
-  heroData = [
-    {id: 1, name: 'Windstorm'},
-    {id: 2, name: 'Superman'}
-  ];
-
-  @ViewChildren(HeroComponent)
-  heroCmps;
-
-  activate() {
-    this.heroCmps.forEach(
-      (cmp) => cmp.activate()
-    );
-  }
-}
-// #enddocregion view
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    HeroesQueriesComponent,
-    HeroComponent,
-    ActiveLabelComponent
-  ],
-  bootstrap: [ HeroesQueriesComponent ]
-})
-export class HeroesQueriesModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
index 92f5af5e1a..2470c9595e 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
@@ -1,30 +1,4 @@
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
+import { AppModule } from './app.module';
 
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-// #enddocregion appimport
-
-import { HeroesModule } from './hero.component';
-import { HeroesLifecycleModule } from './hero-lifecycle.component';
-import { HeroesDIModule } from './hero-di.component';
-import { HeroesDIInjectModule } from './hero-di-inject.component';
-import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
-import { HeroesIOModule } from './hero-io.component';
-import { HeroesHostBindingsModule } from './heroes-bindings.component';
-import { HeroesQueriesModule } from './heroes-queries.component';
-
-platformBrowserDynamic().bootstrapModule(HeroesModule);
-platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
-platformBrowserDynamic().bootstrapModule(HeroesIOModule);
-platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
-platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
index 005fe67c31..1b9e3b5211 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -20,32 +21,7 @@
   </head>
 
   <body>
-    <a id="toc"></a>
-    <h1>TypeScript to JavaScript</h1>
-    <a href="#class-metadata">Classes and Class Metadata</a><br>
-    <a href="#property-metadata">Input and Output Metadata</a><br>
-    <a href="#dependency-injection">Dependency Injection</a><br>
-    <a href="#other-property-metadata">Host and Query Metadata</a><br>
-
-    <hr>
-    <h4 id="class-metadata">Classes and Class Metadata</h4>
-    <hero-view id="class-metadata">Loading hero-view...</hero-view>
-    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
-
-    <hr>
-    <h4 id="property-metadata">Input and Output Metadata</h4>
-    <hero-io>Loading hero-io...</hero-io>
-
-    <hr>
-    <h4 id="dependency-injection">Dependency Injection</h4>
-    <hero-di>Loading hero-di...</hero-di>
-    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
-    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
-
-    <hr>
-    <h4 id="other-property-metadata">Host and Query Metadata</h4>
-    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
-    <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
new file mode 100644
index 0000000000..9615b98a1f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+export class AppComponent {
+  constructor() {
+    this.title = 'Plain ES6 JavaScript';
+  }
+}
+
+AppComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'my-app',
+    templateUrl: 'app.component.html',
+    styles: [
+      // See hero-di-inject-additional.component
+      'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
+      '.heading {font-style: italic}'
+    ]
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
new file mode 100644
index 0000000000..8fbe65ade6
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
@@ -0,0 +1,30 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
new file mode 100644
index 0000000000..e8c7a8f9c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
@@ -0,0 +1,56 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+export class AppModule { }
+
+AppModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule],
+    declarations: [
+      AppComponent,
+      ConfirmComponent,
+      HeroComponent,
+      HeroDIComponent,
+      HeroDIInjectComponent,
+      HeroDIInjectAdditionalComponent,
+      HeroHostComponent,
+      HeroIOComponent,
+      HeroLifecycleComponent,
+      HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+      HeroTitleComponent
+    ],
+    providers: [
+      DataService,
+      { provide: 'heroName', useValue: 'Windstorm' }
+    ],
+    bootstrap: [ AppComponent ],
+
+    // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+  })
+]
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
new file mode 100644
index 0000000000..d42a553688
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
@@ -0,0 +1,32 @@
+import { Component, EventEmitter } from '@angular/core';
+
+// #docregion
+export class ConfirmComponent {
+  constructor(){
+    this.ok    = new EventEmitter();
+    this.notOk = new EventEmitter();
+  }
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+
+ConfirmComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'app-confirm',
+    templateUrl: 'confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+];
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
index 398e38d352..5eb9bab815 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
@@ -1,60 +1,10 @@
-import {
-  Attribute,
-  Component,
-  Inject,
-  Optional,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component } from '@angular/core';
 
-// #docregion
-class TitleComponent {
-  constructor(titlePrefix, title) {
-    this.titlePrefix = titlePrefix;
-    this.title  = title;
-    this.msg = '';
-  }
+export class HeroComponent { }
 
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-
-// #docregion metadata
-TitleComponent.annotations = [
-  new Component({
-    moduleId: module.id,
-    selector: 'hero-title',
-    templateUrl: 'title.component.html'
-  })
-];
-// #enddocregion metadata
-
-TitleComponent.parameters = [
-  [new Optional(), new Inject('titlePrefix')],
-  [new Attribute('title')]
-];
-// #enddocregion
-
-class AppComponent {
-}
-AppComponent.annotations = [
+HeroComponent.annotations = [
   new Component({
     selector: 'hero-di-inject-additional',
-    template: `<hero-title title="Tour of Heroes">
-    </hero-title>`
-  })
-];
-
-export class HeroesDIInjectAdditionalModule { }
-
-HeroesDIInjectAdditionalModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule ],
-    declarations: [
-      AppComponent,
-      TitleComponent
-    ],
-    bootstrap: [ AppComponent ]
+    template: `<hero-title title="Tour of Heroes"></hero-title>`
   })
 ];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
index cc8df60abc..2f95a0b981 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
@@ -1,8 +1,7 @@
-import { Component, Inject, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component, Inject } from '@angular/core';
 
 // #docregion
-class HeroComponent {
+export class HeroComponent {
   constructor(name) {
     this.name = name;
   }
@@ -19,14 +18,3 @@ HeroComponent.parameters = [
   [new Inject('heroName')]
 ];
 // #enddocregion
-
-export class HeroesDIInjectModule { }
-
-HeroesDIInjectModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule ],
-    providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
-    declarations: [ HeroComponent ],
-    bootstrap: [ HeroComponent ]
-  })
-];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
index bb569e6e2b..dfbecf0707 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
@@ -1,10 +1,8 @@
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
+import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
 // #docregion
-class HeroComponent {
+export class HeroComponent {
   constructor(dataService) {
     this.name = dataService.getHeroName();
   }
@@ -22,14 +20,3 @@ HeroComponent.parameters = [
 ];
 
 // #enddocregion
-
-export class HeroesDIModule { }
-
-HeroesDIModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule ],
-    providers: [ DataService ],
-    declarations: [ HeroComponent ],
-    bootstrap: [ HeroComponent ]
-  })
-];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
new file mode 100644
index 0000000000..092cd1a1ce
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+
+// #docregion
+export class HeroHostComponent {
+  constructor() {
+    this.active = false;
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip';
+  }
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+
+// #docregion metadata
+HeroHostComponent.annotations = [
+  new Component({
+    selector: 'hero-host',
+    template: `
+      <h1 [class.active]="active">Hero Host</h1>
+      <div>Heading clicks: {{clicks}}</div>
+    `,
+    host: {
+      // HostBindings to the <hero-host> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host> element
+    styles: ['.active {background-color: yellow;}']
+  })
+];
+// #docregion metadata
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
index 3ed92792db..0dc8c08f2d 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
@@ -1,79 +1,31 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component } from '@angular/core';
 
-// #docregion
-class ConfirmComponent {
-  constructor(){
-    this.ok = new EventEmitter();
-    this.notOk = new EventEmitter();
+export class HeroIOComponent {
+  constructor() {
+    this.okClicked     = false;
+    this.cancelClicked = false;
   }
-  onOkClick() {
-    this.ok.next(true);
-  }
-  onNotOkClick() {
-    this.notOk.next(true);
-  }
-}
-
-ConfirmComponent.annotations = [
-  new Component({
-    moduleId: module.id,
-    selector: 'my-confirm',
-    templateUrl: 'confirm.component.html',
-    inputs: [
-      'okMsg',
-      'notOkMsg: cancelMsg'
-    ],
-    outputs: [
-      'ok',
-      'notOk: cancel'
-    ]
-  })
-];
-// #enddocregion
 
-class AppComponent {
-  constructor(){
-  }
   onOk() {
     this.okClicked = true;
   }
+
   onCancel() {
     this.cancelClicked = true;
   }
 }
 
-AppComponent.annotations = [
+HeroIOComponent.annotations = [
   new Component({
     selector: 'hero-io',
     template: `
-      <my-confirm [okMsg]="'OK'"
-                  [cancelMsg]="'Cancel'"
-                  (ok)="onOk()"
-                  (cancel)="onCancel()">
-      </my-confirm>
+      <app-confirm [okMsg]="'OK'"
+                   [cancelMsg]="'Cancel'"
+                   (ok)="onOk()"
+                   (cancel)="onCancel()">
+      </app-confirm>
       <span *ngIf="okClicked">OK clicked</span>
       <span *ngIf="cancelClicked">Cancel clicked</span>
     `
   })
 ];
-
-
-export class HeroesIOModule { }
-
-HeroesIOModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule ],
-    declarations: [
-      AppComponent,
-      ConfirmComponent
-    ],
-    bootstrap: [ AppComponent ]
-  })
-];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
index 8a9c6c6c4e..b394ff59aa 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
@@ -1,17 +1,11 @@
-// #docplaster
 // #docregion
 import { Component } from '@angular/core';
-// #enddocregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-class HeroComponent {
+export class HeroComponent {
   ngOnInit() {
-    this.name = 'Windstorm';
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
   }
 }
-// #enddocregion
 
 HeroComponent.annotations = [
   new Component({
@@ -19,13 +13,3 @@ HeroComponent.annotations = [
     template: `<h1>Hero: {{name}}</h1>`
   })
 ];
-
-export class HeroesLifecycleModule { }
-
-HeroesLifecycleModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule ],
-    declarations: [ HeroComponent ],
-    bootstrap: [ HeroComponent ]
-  })
-];
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
new file mode 100644
index 0000000000..bf3b914406
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
@@ -0,0 +1,97 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+export class ContentChildComponent {
+  constructor() {
+    this.active = false;
+  }
+
+  activate() {
+    this.active = !this.active;
+  }
+}
+
+ContentChildComponent.annotations = [
+  new Component({
+    selector: 'content-child',
+    template: `
+    <span class="content-child" *ngIf="active">
+      Active
+    </span>`
+  })
+];
+
+////////////////////
+
+// #docregion content
+export class ViewChildComponent {
+  constructor() {
+    this.active = false;
+  }
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+
+ViewChildComponent.annotations = [
+  new Component({
+    selector: 'view-child',
+    template: `<h2 [class.active]=active>
+      {{hero.name}}
+      <ng-content></ng-content>
+    </h2>`,
+    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+    inputs: ['hero'],
+    queries: {
+      content: new ContentChild(ContentChildComponent)
+    }
+  })
+];
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+export class HeroQueriesComponent {
+  constructor(){
+    this.active = false;
+    this.heroData = [
+      {id: 1, name: 'Windstorm'},
+      {id: 2, name: 'LaughingGas'}
+    ];
+  }
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+}
+
+HeroQueriesComponent.annotations = [
+  new Component({
+    selector: 'hero-queries',
+    template: `
+      <view-child *ngFor="let hero of heroData" [hero]="hero">
+        <content-child></content-child>
+      </view-child>
+      <button (click)="activate()">{{buttonLabel}} All</button>
+    `,
+    queries: {
+      views: new ViewChildren(ViewChildComponent)
+    }
+  })
+];
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
new file mode 100644
index 0000000000..ff1e6ce026
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
@@ -0,0 +1,29 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+export class HeroTitleComponent {
+  constructor(titlePrefix, title) {
+    this.titlePrefix = titlePrefix;
+    this.title  = title;
+    this.msg = '';
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'hero-title',
+    templateUrl: 'hero-title.component.html'
+  })
+];
+// #enddocregion templateUrl
+
+HeroTitleComponent.parameters = [
+  [new Optional(), new Inject('titlePrefix')],
+  [new Attribute('title')]
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
similarity index 78%
rename from public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html
rename to public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
index 06d6f3db91..0e93122d5c 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
@@ -1,3 +1,4 @@
+<!-- #docregion -->
 <h1>{{titlePrefix}} {{title}}</h1>
 <button (click)="ok()">OK</button>
 <p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
index c998d31a6f..10b92c2878 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
@@ -2,16 +2,14 @@
 // #docregion metadata
 import { Component } from '@angular/core';
 
-// #docregion class
-// #docregion appexport
+// #docregion appexport, class
 export class HeroComponent {
   constructor() {
     this.title = 'Hero Detail';
   }
   getName() {return 'Windstorm'; }
 }
-// #enddocregion appexport
-// #enddocregion class
+// #enddocregion appexport, class
 
 HeroComponent.annotations = [
   new Component({
@@ -20,18 +18,3 @@ HeroComponent.annotations = [
   })
 ];
 // #enddocregion metadata
-
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-export class HeroesModule { }
-
-HeroesModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule ],
-    declarations: [ HeroComponent ],
-    bootstrap: [ HeroComponent ]
-  })
-];
-
-
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6
deleted file mode 100644
index 5c13e586a6..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
-  Component,
-  HostBinding,
-  HostListener,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-class HeroesComponent {
-  constructor() {
-    this.title = 'Tooltip content';
-    this.hClass = true;
-  }
-
-  clicked() {
-    this.active = !this.active;
-  }
-
-  doubleClicked(evt) {
-    this.active = true;
-  }
-}
-HeroesComponent.annotations = [
-  new Component({
-    selector: 'heroes-bindings',
-    template: `<h1 [class.active]="active">
-      Tour of Heroes
-    </h1>`,
-    host: {
-      '[title]': 'title',
-      '[class.heading]': 'hClass',
-      '(click)': 'clicked()',
-      '(dblclick)': 'doubleClicked($event)'
-    }
-  })
-];
-// #enddocregion
-
-export class HeroesHostBindingsModule { }
-
-HeroesHostBindingsModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule ],
-    declarations: [ HeroesComponent ],
-    bootstrap: [ HeroesComponent ]
-  })
-];
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6
deleted file mode 100644
index 4cec0c3bbd..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6
+++ /dev/null
@@ -1,98 +0,0 @@
-import {
-  Component,
-  ViewChildren,
-  ContentChild,
-  QueryList,
-  Input,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-class ActiveLabelComponent {
-  activate() {
-    this.active = true;
-  }
-}
-
-ActiveLabelComponent.annotations = [
-  new Component({
-    selector: 'active-label',
-    template: `
-    <span class="active-label" *ngIf="active">
-      Active
-    </span>`
-  })
-];
-
-// #docregion content
-class HeroComponent {
-  activate() {
-    this.active = true;
-    this.label.activate();
-  }
-}
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'a-hero',
-    template: `<h2 [class.active]=active>
-      {{hero.name}}
-      <ng-content></ng-content>
-    </h2>`,
-    inputs: ['hero'],
-    queries: {
-      label: new ContentChild(ActiveLabelComponent)
-    }
-  })
-];
-// #enddocregion content
-
-
-// #docregion view
-class HeroesQueriesComponent {
-  constructor(){
-    this.heroData = [
-      {id: 1, name: 'Windstorm'},
-      {id: 2, name: 'Superman'}
-    ];
-  }
-
-  activate() {
-    this.heroCmps.forEach(
-      (cmp) => cmp.activate()
-    );
-  }
-}
-
-HeroesQueriesComponent.annotations = [
-  new Component({
-    selector: 'heroes-queries',
-    template: `
-      <a-hero *ngFor="let hero of heroData"
-            [hero]="hero">
-        <active-label></active-label>
-      </a-hero>
-      <button (click)="activate()">
-        Activate
-      </button>
-    `,
-    queries: {
-      heroCmps: new ViewChildren(HeroComponent)
-    }
-  })
-];
-// #enddocregion view
-
-export class HeroesQueriesModule { }
-
-HeroesQueriesModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule ],
-    declarations: [
-      HeroesQueriesComponent,
-      HeroComponent,
-      ActiveLabelComponent
-    ],
-    bootstrap: [ HeroesQueriesComponent ]
-  })
-];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
index 92f5af5e1a..2470c9595e 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
@@ -1,30 +1,4 @@
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
+import { AppModule } from './app.module';
 
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-// #enddocregion appimport
-
-import { HeroesModule } from './hero.component';
-import { HeroesLifecycleModule } from './hero-lifecycle.component';
-import { HeroesDIModule } from './hero-di.component';
-import { HeroesDIInjectModule } from './hero-di-inject.component';
-import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
-import { HeroesIOModule } from './hero-io.component';
-import { HeroesHostBindingsModule } from './heroes-bindings.component';
-import { HeroesQueriesModule } from './heroes-queries.component';
-
-platformBrowserDynamic().bootstrapModule(HeroesModule);
-platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
-platformBrowserDynamic().bootstrapModule(HeroesIOModule);
-platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
-platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/index.html b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
index 3a8a4e7960..1b9e3b5211 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
     <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -20,33 +21,7 @@
   </head>
 
   <body>
-    <a id="toc"></a>
-    <h1>TypeScript to JavaScript</h1>
-    <a href="#class-metadata">Classes and Class Metadata</a><br>
-    <a href="#property-metadata">Input and Output Metadata</a><br>
-    <a href="#dependency-injection">Dependency Injection</a><br>
-    <a href="#other-property-metadata">Host and Query Metadata</a><br>
-    <my-app></my-app>
-
-    <hr>
-    <h4 id="class-metadata">Classes and Class Metadata</h4>
-    <hero-view id="class-metadata">Loading hero-view...</hero-view>
-    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
-
-    <hr>
-    <h4 id="property-metadata">Input and Output Metadata</h4>
-    <hero-io>Loading hero-io...</hero-io>
-
-    <hr>
-    <h4 id="dependency-injection">Dependency Injection</h4>
-    <hero-di>Loading hero-di...</hero-di>
-    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
-    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
-
-    <hr>
-    <h4 id="other-property-metadata">Host and Query Metadata</h4>
-    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
-    <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html
new file mode 100644
index 0000000000..6681d60672
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html
@@ -0,0 +1,47 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#interfaces">Interfaces</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<h4 id="class-metadata-dsl">Classes and Class Metadata (DSL)</h4>
+<hero-view-dsl></hero-view-dsl>
+
+<hr>
+<h4 id="interfaces">Interfaces</h4>
+<hero-lifecycle></hero-lifecycle>
+<h4 id="interfaces-dsl">Interfaces (DSL)</h4>
+<hero-lifecycle-dsl></hero-lifecycle-dsl>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+<h4 id="io-metadata-dsl">Input and Output Metadata (DSL)</h4>
+<hero-io-dsl></hero-io-dsl>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<h4 id="dependency-injection-dsl">Dependency Injection (DSL)</h4>
+<hero-di-dsl></hero-di-dsl>
+<hero-di-inject-dsl></hero-di-inject-dsl>
+<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<h4 id="host-metadata-dsl">Host Metadata (DSL)</h4>
+<hero-host-dsl></hero-host-dsl>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata (DSL)</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.js b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js
new file mode 100644
index 0000000000..9e8c5da535
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js
@@ -0,0 +1,20 @@
+(function(app) {
+
+app.AppComponent = AppComponent;
+function AppComponent() {
+  this.title = 'ES5 JavaScript';
+}
+
+AppComponent.annotations = [
+  new ng.core.Component({
+    selector: 'my-app',
+    templateUrl: 'app/app.component.html',
+    styles: [
+      // See hero-di-inject-additional.component
+      'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}',
+      '.heading {font-style: italic}'
+    ]
+  })
+];
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.module.js b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js
new file mode 100644
index 0000000000..3791fe16da
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js
@@ -0,0 +1,46 @@
+(function(app) {
+
+app.AppModule = AppModule;
+function AppModule() { }
+
+AppModule.annotations = [
+  new ng.core.NgModule({
+    imports: [ ng.platformBrowser.BrowserModule ],
+    declarations: [
+      app.AppComponent,
+      app.ConfirmComponent, app.ConfirmDslComponent,
+      app.HeroComponent, app.HeroDslComponent,
+      app.HeroDIComponent, app.HeroDIDslComponent,
+      app.HeroDIInjectComponent, app.HeroDIInjectDslComponent,
+      app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent,
+      app.HeroHostComponent, app.HeroHostDslComponent,
+      app.HeroIOComponent, app.HeroIODslComponent,
+      app.HeroLifecycleComponent, app.HeroLifecycleDslComponent,
+      app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent,
+      app.HeroTitleComponent, app.HeroTitleDslComponent
+    ],
+    providers: [
+      app.DataService,
+      { provide: 'heroName', useValue: 'Windstorm' }
+    ],
+    bootstrap: [ app.AppComponent ],
+
+    // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging!
+  })
+]
+
+})(window.app = window.app || {});
+
+
+///// For documentation only /////
+(function () {
+  // #docregion appimport
+  var HeroComponent = app.HeroComponent;
+  // #enddocregion appimport
+
+  // #docregion ng2import
+  var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+  var LocationStrategy = ng.common.LocationStrategy;
+  var HashLocationStrategy = ng.common.HashLocationStrategy;
+  // #enddocregion ng2import
+})
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
new file mode 100644
index 0000000000..4a4cd0a470
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
@@ -0,0 +1,73 @@
+(function(app) {
+
+// #docregion
+app.ConfirmComponent = ConfirmComponent;
+
+ConfirmComponent.annotations = [
+  new ng.core.Component({
+    selector: 'app-confirm',
+    templateUrl: 'app/confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+];
+
+function ConfirmComponent() {
+  this.ok    = new ng.core.EventEmitter();
+  this.notOk = new ng.core.EventEmitter();
+}
+
+ConfirmComponent.prototype.onOkClick = function() {
+  this.ok.emit(true);
+}
+
+ConfirmComponent.prototype.onNotOkClick = function() {
+  this.notOk.emit(true);
+}
+
+
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+// #docregion dsl
+app.ConfirmDslComponent = ng.core.Component({
+    selector: 'app-confirm-dsl',
+    templateUrl: 'app/confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+  .Class({
+    constructor: function ConfirmDslComponent() {
+      this.ok    = new ng.core.EventEmitter();
+      this.notOk = new ng.core.EventEmitter();
+    },
+
+    onOkClick: function() {
+      this.ok.emit(true);
+    },
+
+    onNotOkClick: function() {
+      this.notOk.emit(true);
+    }
+  });
+
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
index c060e2b39d..643bb57dca 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
@@ -1,13 +1,10 @@
 (function(app) {
 
-  function DataService() {
-  }
-  DataService.annotations = [
-    new ng.core.Injectable()
-  ];
+  app.DataService = DataService;
+  function DataService() { }
+
   DataService.prototype.getHeroName = function() {
     return 'Windstorm';
   };
-  app.DataService = DataService;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
index 127bf524a8..1a88cfa355 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
@@ -1,47 +1,26 @@
 (function(app) {
 
-  // #docregion
-  // #docregion metadata
-  var TitleComponent = ng.core.Component({
-    selector: 'hero-title',
-    templateUrl: 'app/title.component.html'
-  })
-  // #enddocregion metadata
-  .Class({
-    constructor: [
-      [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
-      new ng.core.Attribute('title'),
-      function(titlePrefix, title) {
-        this.titlePrefix = titlePrefix;
-        this.title  = title;
-        this.msg = '';
-      }
-    ],
-    ok: function() {
-      this.msg = 'OK!';
-    }
-  });
-  // #enddocregion
+app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent;
 
-  var AppComponent = ng.core.Component({
+HeroDIInjectAdditionalComponent.annotations = [
+  new ng.core.Component({
     selector: 'hero-di-inject-additional',
-    template: '<hero-title title="Tour of Heroes">' +
-    '</hero-title>'
-  }).Class({
-    constructor: function() { }
-  });
+    template: '<hero-title title="Tour of Heroes"></hero-title>'
+  })
+];
+
+function HeroDIInjectAdditionalComponent() {}
+
+})(window.app = window.app || {});
+
+////// DSL Version /////////
+(function(app) {
 
-  app.HeroesDIInjectAdditionalModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        TitleComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+app.HeroDIInjectAdditionalDslComponent = ng.core.Component({
+  selector: 'hero-di-inject-additional-dsl',
+  template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
+}).Class({
+  constructor: function HeroDIInjectAdditionalDslComponent() { }
+});
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
index 743af3b987..2e04c9246e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
@@ -1,58 +1,41 @@
 (function(app) {
 
-// #docregion parameters
-  function HeroComponent(name) {
-    this.name = name;
-  }
-  HeroComponent.parameters = [
-    'heroName'
-  ];
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-di-inject',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-// #enddocregion parameters
-
-  app.HeroesDIInjectModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+// #docregion
+app.HeroDIInjectComponent = HeroDIInjectComponent;
+
+HeroDIInjectComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-di-inject',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+];
+
+HeroDIInjectComponent.parameters = [ 'heroName' ];
+
+function HeroDIInjectComponent(name) {
+  this.name = name;
+}
+// #enddocregion
 
 })(window.app = window.app || {});
 
+/////// DSL version ////////
+
 (function(app) {
-// #docregion ctor
-  var HeroComponent = ng.core.Component({
-    selector: 'hero-di-inline2',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor: [
-      new ng.core.Inject('heroName'),
-      function(name) {
-        this.name = name;
-      }
-    ]
-  });
-// #enddocregion ctor
-
-  app.HeroesDIInjectModule2 =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ { provide: 'heroName', useValue: 'Bombasto' } ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+
+// #docregion dsl
+app.HeroDIInjectDslComponent = ng.core.Component({
+  selector: 'hero-di-inject-dsl',
+  template: '<h1>Hero: {{name}}</h1>'
+})
+.Class({
+  constructor: [
+    new ng.core.Inject('heroName'),
+    function HeroDIInjectDslComponent(name) {
+      this.name = name;
+    }
+  ]
+});
+// #enddocregion dsl
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
deleted file mode 100644
index e5ef79bc4b..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
+++ /dev/null
@@ -1,28 +0,0 @@
-(function(app) {
-  // #docregion
-  var HeroComponent = ng.core.Component({
-    selector: 'hero-di-inline',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor: [
-      app.DataService,
-      function(service) {
-        this.name = service.getHeroName();
-      }
-    ]
-  });
-  // #enddocregion
-
-  app.HeroDIInlineModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ app.DataService ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
index c4e7d6735e..c80efe193e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
@@ -1,33 +1,43 @@
 (function(app) {
 
   // #docregion
-  app.HeroDIComponent = HeroComponent;
-  
-  function HeroComponent(dataService) {
-    this.name = dataService.getHeroName();
-  }
-  
-  HeroComponent.parameters = [
-    app.DataService
-  ];
+  app.HeroDIComponent = HeroDIComponent;
 
-  HeroComponent.annotations = [
+  HeroDIComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di',
       template: '<h1>Hero: {{name}}</h1>'
     })
   ];
+
+  HeroDIComponent.parameters = [ app.DataService ];
+
+  function HeroDIComponent(dataService) {
+    this.name = dataService.getHeroName();
+  }
+
   // #enddocregion
 
-  app.HeroesDIModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ app.DataService ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+
+})(window.app = window.app || {});
+
+////// DSL Version /////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroDIDslComponent = ng.core.Component({
+  selector: 'hero-di-dsl',
+  template: '<h1>Hero: {{name}}</h1>'
+})
+.Class({
+  constructor: [
+    app.DataService,
+    function HeroDIDslComponent(service) {
+      this.name = service.getHeroName();
+    }
+  ]
+});
+// #enddocregion dsl
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
deleted file mode 100644
index 6d53bc2850..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docplaster
-// #docregion appexport
-(function(app) {
-
-  // #docregion component
-  var HeroComponent = ng.core.Component({
-      selector: 'hero-view-2',
-      template: '<h1>{{title}}: {{getName()}}</h1>',
-    })
-    .Class({
-      constructor: function() {
-        this.title = "Hero Detail";
-      },
-      getName: function() { return 'Windstorm'; }
-    });
-  // #enddocregion component
-
-  app.HeroesDslModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
-// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
new file mode 100644
index 0000000000..0b04d5efae
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
@@ -0,0 +1,97 @@
+(function(app) {
+
+// #docregion
+app.HeroHostComponent = HeroHostComponent;
+
+HeroHostComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-host',
+    template:
+      '<h1 [class.active]="active">Hero Host</h1>' +
+      '<div>Heading clicks: {{clicks}}</div>',
+    host: {
+      // HostBindings to the <hero-host> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host> element
+    styles: ['.active {background-color: yellow;}']
+  })
+];
+
+function HeroHostComponent() {
+  this.clicks = 0;
+  this.headingClass = true;
+  this.title = 'Hero Host Tooltip content';
+}
+
+HeroHostComponent.prototype.clicked = function() {
+  this.clicks += 1;
+}
+
+HeroHostComponent.prototype.enter = function(event) {
+  this.active = true;
+  this.headingClass = false;
+}
+
+HeroHostComponent.prototype.leave = function(event) {
+  this.active = false;
+  this.headingClass = true;
+}
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//// DSL Version ////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroHostDslComponent = ng.core.Component({
+  selector: 'hero-host-dsl',
+  template: `
+    <h1 [class.active]="active">Hero Host (DSL)</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-dsl> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+    '(click)': 'clicked()',
+
+    // HostListeners on the entire <hero-host-dsl> element
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-dsl> element
+  styles: ['.active {background-color: coral;}']
+})
+.Class({
+  constructor: function HeroHostDslComponent() {
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip DSL content';
+  },
+
+  clicked() {
+    this.clicks += 1;
+  },
+
+  enter(event) {
+    this.active = true;
+    this.headingClass = false;
+  },
+
+  leave(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+});
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
new file mode 100644
index 0000000000..48c491be35
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
@@ -0,0 +1,7 @@
+<app-confirm-dsl [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+</app-confirm-dsl>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
new file mode 100644
index 0000000000..e6eae2e804
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
@@ -0,0 +1,7 @@
+<app-confirm [okMsg]="'OK'"
+             [cancelMsg]="'Cancel'"
+             (ok)="onOk()"
+             (cancel)="onCancel()">
+</app-confirm>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
index 611d3b842b..d35f3762da 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
@@ -1,62 +1,42 @@
 (function(app) {
-  // #docregion
-  var ConfirmComponent = ng.core.Component({
-    selector: 'my-confirm',
-    templateUrl: 'app/confirm.component.html',
-    inputs: [
-      'okMsg',
-      'notOkMsg: cancelMsg'
-    ],
-    outputs: [
-      'ok',
-      'notOk: cancel'
-    ]
-  }).Class({
-    constructor: function() {
-      this.ok = new ng.core.EventEmitter();
-      this.notOk = new ng.core.EventEmitter();
-    },
-    onOkClick: function() {
-      this.ok.next(true);
+
+app.HeroIOComponent = HeroComponent;
+
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-io',
+    templateUrl: 'app/hero-io.component.html'
+  })
+];
+
+function HeroComponent() { }
+
+HeroComponent.prototype.onOk = function() {
+  this.okClicked = true;
+}
+
+HeroComponent.prototype.onCancel = function() {
+  this.cancelClicked = true;
+}
+
+})(window.app = window.app || {});
+
+///// DSL Version ////
+
+(function(app) {
+
+app.HeroIODslComponent = ng.core.Component({
+    selector: 'hero-io-dsl',
+    templateUrl: 'app/hero-io-dsl.component.html'
+  })
+  .Class({
+    constructor: function HeroIODslComponent() { },
+    onOk: function() {
+      this.okClicked = true;
     },
-    onNotOkClick: function() {
-      this.notOk.next(true);
+    onCancel: function() {
+      this.cancelClicked = true;
     }
   });
-  // #enddocregion
-
-  function AppComponent() {
-  }
-  AppComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-io',
-      template: '<my-confirm [okMsg]="\'OK\'"' +
-        '[cancelMsg]="\'Cancel\'"' +
-        '(ok)="onOk()"' +
-        '(cancel)="onCancel()">' +
-        '</my-confirm>' +
-        '<span *ngIf="okClicked">OK clicked</span>' +
-        '<span *ngIf="cancelClicked">Cancel clicked</span>'
-    })
-  ];
-  AppComponent.prototype.onOk = function() {
-    this.okClicked = true;
-  }
-  AppComponent.prototype.onCancel = function() {
-    this.cancelClicked = true;
-  }
-
-  app.HeroesIOModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        ConfirmComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
index 1a2028d316..94aa3514b2 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
@@ -1,28 +1,42 @@
 // #docplaster
 (function(app) {
-  // #docregion
-  function HeroComponent() {}
-  // #enddocregion
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-lifecycle',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-  // #docregion
-  HeroComponent.prototype.ngOnInit = function() {
-    this.name = 'Windstorm';
-  };
-  // #enddocregion
-
-  app.HeroesLifecycleModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+
+// #docregion
+app.HeroLifecycleComponent = HeroComponent;
+
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-lifecycle',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+];
+
+function HeroComponent() { }
+
+HeroComponent.prototype.ngOnInit = function() {
+  // todo: fetch from server async
+  setTimeout(() => this.name = 'Windstorm', 0);
+};
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroLifecycleDslComponent = ng.core.Component({
+    selector: 'hero-lifecycle-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: function HeroLifecycleDslComponent() { },
+    ngOnInit: function() {
+      // todo: fetch from server async
+      setTimeout(() => this.name = 'Windstorm', 0);
+    }
+  });
+// #enddocregion dsl
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
new file mode 100644
index 0000000000..5e21cfcb0b
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
@@ -0,0 +1,92 @@
+(function(app) {
+
+app.heroQueries = app.heroQueries || {};
+
+app.heroQueries.ContentChildComponent = ng.core.Component({
+  selector: 'content-child',
+  template:
+    '<span class="content-child" *ngIf="active">' +
+      'Active' +
+    '</span>'
+}).Class({
+  constructor: function ContentChildComponent() {
+    this.active = false;
+  },
+
+  activate: function() {
+    this.active = !this.active;
+  }
+});
+
+////////////////////
+
+// #docregion content
+app.heroQueries.ViewChildComponent = ng.core.Component({
+  selector: 'view-child',
+  template:
+    '<h2 [class.active]=active>' +
+      '{{hero.name}} ' +
+      '<ng-content></ng-content>' +
+    '</h2>',
+  styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+  inputs: ['hero'],
+  queries: {
+    content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+  }
+})
+.Class({
+  constructor: function HeroQueriesHeroComponent() {
+    this.active = false;
+  },
+
+  activate: function() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+});
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+app.heroQueries.HeroQueriesComponent = ng.core.Component({
+  selector: 'hero-queries',
+  template:
+    '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
+      '<content-child></content-child>' +
+    '</view-child>' +
+    '<button (click)="activate()">{{buttonLabel}} All</button>',
+  queries: {
+    views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
+  }
+})
+.Class({
+  constructor: function HeroQueriesComponent() {
+    this.active = false;
+    this.heroData = [
+      {id: 1, name: 'Windstorm'},
+      {id: 2, name: 'LaughingGas'}
+    ];
+  },
+
+  activate: function() {
+    this.active = !this.active;
+    this.views.forEach(function(view) {
+      view.activate();
+    });
+  },
+});
+
+// #docregion defined-property
+// add prototype property w/ getter outside the DSL
+var proto = app.heroQueries.HeroQueriesComponent.prototype;
+Object.defineProperty(proto, "buttonLabel", {
+    get: function () {
+        return this.active ? 'Deactivate' : 'Activate';
+    },
+    enumerable: true
+});
+// #enddocregion defined-property
+// #enddocregion view
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
similarity index 78%
rename from public/docs/_examples/cb-ts-to-js/js/app/title.component.html
rename to public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
index 06d6f3db91..0e93122d5c 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/title.component.html
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
@@ -1,3 +1,4 @@
+<!-- #docregion -->
 <h1>{{titlePrefix}} {{title}}</h1>
 <button (click)="ok()">OK</button>
 <p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
new file mode 100644
index 0000000000..9a8ce7e578
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
@@ -0,0 +1,60 @@
+(function(app) {
+
+// #docregion
+app.HeroTitleComponent = HeroTitleComponent;
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-title',
+    templateUrl: 'app/hero-title.component.html'
+  })
+];
+// #enddocregion templateUrl
+
+function HeroTitleComponent(titlePrefix, title) {
+    this.titlePrefix = titlePrefix;
+    this.title  = title;
+    this.msg = '';
+}
+
+HeroTitleComponent.prototype.ok = function() {
+  this.msg = 'OK!';
+}
+
+HeroTitleComponent.parameters = [
+  [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
+  [new ng.core.Attribute('title')]
+];
+
+// #enddocregion
+
+})(window.app = window.app || {});
+
+////////// DSL version ////////////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroTitleDslComponent = ng.core.Component({
+  selector: 'hero-title-dsl',
+  templateUrl: 'app/hero-title.component.html'
+})
+.Class({
+  constructor: [
+    [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
+    new ng.core.Attribute('title'),
+    function HeroTitleDslComponent(titlePrefix, title) {
+      this.titlePrefix = titlePrefix;
+      this.title  = title;
+      this.msg = '';
+    }
+  ],
+
+  ok: function() {
+    this.msg = 'OK!';
+  }
+});
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
index ec5b706624..346d6f03d8 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
@@ -1,38 +1,48 @@
 // #docplaster
+(function(app) {
+
+// #docregion
 // #docregion appexport
+// #docregion metadata
+app.HeroComponent = HeroComponent; // "export"
+
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-view',
+    template: '<h1>{{title}}: {{getName()}}</h1>'
+  })
+];
+
+// #docregion constructorproto
+function HeroComponent() {
+  this.title = "Hero Detail";
+}
+
+HeroComponent.prototype.getName = function() { return 'Windstorm'; };
+// #enddocregion constructorproto
+
+// #enddocregion metadata
+// #enddocregion appexport
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//////////// DSL version ///////////
+
 (function(app) {
-  // #enddocregion appexport
-
-  // #docregion metadata
-  // #docregion appexport
-  // #docregion constructorproto
-  function HeroComponent() {
-    this.title = "Hero Detail";
-  }
-  HeroComponent.prototype.getName = function() { return 'Windstorm'; };
-  // #enddocregion constructorproto
-
-  // #enddocregion appexport
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-view',
-      template: '<h1>{{title}}: {{getName()}}</h1>'
-    })
-  ];
-  // #enddocregion metadata
-
-  app.HeroesModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-  // #docregion appexport
-  app.HeroComponent = HeroComponent;
+
+// #docregion dsl
+app.HeroDslComponent = ng.core.Component({
+    selector: 'hero-view-dsl',
+    template: '<h1>{{title}}: {{getName()}}</h1>',
+  })
+  .Class({
+    constructor: function HeroDslComponent() {
+      this.title = "Hero Detail";
+    },
+
+    getName: function() { return 'Windstorm'; }
+  });
+// #enddocregion dsl
 
 })(window.app = window.app || {});
-// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
deleted file mode 100644
index 3a562d6912..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
+++ /dev/null
@@ -1,39 +0,0 @@
-(function(app) {
-
-  // #docregion
-  var HeroesComponent = ng.core.Component({
-    selector: 'heroes-bindings',
-    template: '<h1 [class.active]="active">' +
-      'Tour of Heroes' +
-    '</h1>',
-    host: {
-      '[title]': 'title',
-      '[class.heading]': 'hClass',
-      '(click)': 'clicked()',
-      '(dblclick)': 'doubleClicked($event)'
-    }
-  }).Class({
-    constructor: function() {
-      this.title = 'Tooltip content';
-      this.hClass = true;
-    },
-    clicked: function() {
-      this.active = !this.active;
-    },
-    doubleClicked: function(evt) {
-      this.active = true;
-    }
-  });
-  // #enddocregion
-
-  app.HeroesHostBindingsModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroesComponent ],
-      bootstrap: [ HeroesComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
deleted file mode 100644
index f1bda77cb1..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
+++ /dev/null
@@ -1,82 +0,0 @@
-(function(app) {
-
-  var ActiveLabelComponent = ng.core.Component({
-    selector: 'active-label',
-    template: '<span class="active-label"' +
-                    '*ngIf="active">' +
-      'Active' +
-    '</span>'
-  }).Class({
-    constructor: [function() { }],
-    activate: function() {
-      this.active = true;
-    }
-  });
-
-  // #docregion content
-  var HeroComponent = ng.core.Component({
-    selector: 'a-hero',
-    template: '<h2 [class.active]=active>' +
-      '{{hero.name}} ' +
-      '<ng-content></ng-content>' +
-    '</h2>',
-    inputs: ['hero'],
-    queries: {
-      label: new ng.core.ContentChild(
-                   ActiveLabelComponent)
-    }
-  }).Class({
-    constructor: [function() { }],
-    activate: function() {
-      this.active = true;
-      this.label.activate();
-    }
-  });
-  app.HeroQueriesComponent = HeroComponent;
-  // #enddocregion content
-
-  // #docregion view
-  var AppComponent = ng.core.Component({
-    selector: 'heroes-queries',
-    template:
-      '<a-hero *ngFor="let hero of heroData"' +
-            '[hero]="hero">' +
-        '<active-label></active-label>' +
-      '</a-hero>' +
-      '<button (click)="activate()">' +
-        'Activate' +
-      '</button>',    
-    queries: {
-      heroCmps: new ng.core.ViewChildren(
-                      HeroComponent)
-    }
-  }).Class({
-    constructor: function() {
-      this.heroData = [
-        {id: 1, name: 'Windstorm'},
-        {id: 2, name: 'Superman'}
-      ];
-    },
-    activate: function() {
-      this.heroCmps.forEach(function(cmp) {
-        cmp.activate();
-      });
-    }
-  });
-  // #enddocregion view
-
-  app.HeroesQueriesModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        HeroComponent,
-        ActiveLabelComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js
index 015a8d2126..fd3e737c9e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/main.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js
@@ -1,32 +1,9 @@
-// #docplaster
-// #docregion appimport
 (function(app) {
-  // #enddocregion appimport
 
-  // #docregion ng2import
-  var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
-  var LocationStrategy = ng.common.LocationStrategy;
-  var HashLocationStrategy = ng.common.HashLocationStrategy;
-  // #enddocregion ng2import
+var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
 
-  // #docregion appimport
-  var HeroComponent = app.HeroComponent;
-  // #enddocregion appimport
+document.addEventListener('DOMContentLoaded', function() {
+  platformBrowserDynamic().bootstrapModule(app.AppModule);
+});
 
-  document.addEventListener('DOMContentLoaded', function() {
-    platformBrowserDynamic().bootstrapModule(app.HeroesModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDslModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesLifecycleModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroDIInlineModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule2);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectAdditionalModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesIOModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesHostBindingsModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesQueriesModule);
-  });
-
-  // #docregion appimport
 })(window.app = window.app || {});
-// #enddocregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
index 3c2dd6eeca..7d2105bf78 100644
--- a/public/docs/_examples/cb-ts-to-js/js/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -4,12 +4,14 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
 
+    <!-- Angular and RxJS umd scripts -->
     <script src="node_modules/rxjs/bundles/Rx.js"></script>
     <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
     <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
@@ -17,50 +19,26 @@
     <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>
 
+    <!-- Application scripts -->
+    <script src="app/app.component.js"></script>
+    <script src="app/confirm.component.js"></script>
     <script src="app/data.service.js"></script>
     <script src="app/hero.component.js"></script>
-    <script src="app/hero-dsl.component.js"></script>
-    <script src="app/hero-lifecycle.component.js"></script>
     <script src="app/hero-io.component.js"></script>
     <script src="app/hero-di.component.js"></script>
-    <script src="app/hero-di-inline.component.js"></script>
     <script src="app/hero-di-inject.component.js"></script>
     <script src="app/hero-di-inject-additional.component.js"></script>
-    <script src="app/heroes-bindings.component.js"></script>
-    <script src="app/heroes-queries.component.js"></script>
+    <script src="app/hero-host.component.js"></script>
+    <script src="app/hero-lifecycle.component.js"></script>
+    <script src="app/hero-queries.component.js"></script>
+    <script src="app/hero-title.component.js"></script>
+
+    <script src="app/app.module.js"></script>
     <script src="app/main.js"></script>
   </head>
 
   <body>
-    <a id="toc"></a>
-    <h1>TypeScript to JavaScript</h1>
-    <a href="#class-metadata">Classes and Class Metadata</a><br>
-    <a href="#property-metadata">Input and Output Metadata</a><br>
-    <a href="#dependency-injection">Dependency Injection</a><br>
-    <a href="#other-property-metadata">Host and Query Metadata</a><br>
-
-    <hr>
-    <h4 id="class-metadata">Classes and Class Metadata</h4>
-    <hero-view>Loading hero-view...</hero-view>
-    <hero-view-2>Loading hero-view2...</hero-view-2>
-    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
-
-    <hr>
-    <h4 id="property-metadata">Input and Output Metadata</h4>
-    <hero-io>Loading hero-io...</hero-io>
-
-    <hr>
-    <h4 id="dependency-injection">Dependency Injection</h4>
-    <hero-di>Loading hero-di...</hero-di>
-    <hero-di-inline>Loading hero-di-inline...</hero-di-inline>
-    <hero-di-inline2>Loading hero-di-inline2...</hero-di-inline2>
-    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
-    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
-
-    <hr>
-    <h4 id="other-property-metadata">Host and Query Metadata</h4>
-    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
-    <heroes-queries>Loading heroes-queries...</heroes-queries>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html
new file mode 100644
index 0000000000..7f1efd31a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html
@@ -0,0 +1,31 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Decorators</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<hero-host-meta></hero-host-meta>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts
new file mode 100644
index 0000000000..722d812f63
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: 'app.component.html',
+  styles: [
+    // See hero-di-inject-additional.component
+    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+    '.heading {font-style: italic}'
+  ]
+})
+export class AppComponent {
+  title = 'TypeScript';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts
new file mode 100644
index 0000000000..8aafe9c9bb
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts
@@ -0,0 +1,56 @@
+/* tslint:disable-next-line:no-unused-variable */
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent,
+    HeroComponent,
+    HeroDIComponent,
+    HeroDIInjectComponent,
+    HeroDIInjectAdditionalComponent,
+    HeroHostComponent, HeroHostMetaComponent,
+    HeroIOComponent,
+    HeroLifecycleComponent,
+    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+    HeroTitleComponent
+  ],
+  providers: [
+    DataService,
+    { provide: 'heroName', useValue: 'Windstorm' }
+  ],
+  bootstrap: [ AppComponent ],
+
+  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging!
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts
new file mode 100644
index 0000000000..08a0ed6c60
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+  moduleId: module.id,
+  selector: 'app-confirm',
+  templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+  @Input() okMsg = '';
+  @Input('cancelMsg') notOkMsg = '';
+  @Output() ok = new EventEmitter();
+  @Output('cancel') notOk = new EventEmitter();
+
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
index 7e9c7456c6..cd7f9e1aae 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DataService {
-  constructor() {
-  }
+  constructor() { }
+
   getHeroName() {
     return 'Windstorm';
   }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
index 37e00960c9..ec460a9dbc 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
@@ -1,46 +1,7 @@
-import {
-  Attribute,
-  Component,
-  Inject,
-  Optional,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-// #docregion metadata
-@Component({
-  moduleId: module.id,
-  selector: 'hero-title',
-  templateUrl: 'title.component.html'
-})
-// #enddocregion metadata
-class TitleComponent {
-  private msg: string = '';
-  constructor(
-    @Inject('titlePrefix') @Optional() private titlePrefix: string,
-    @Attribute('title') private title: string
-  ) { }
-
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-// #enddocregion
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-di-inject-additional',
-  template: `<hero-title title="Tour of Heroes">
-  </hero-title>`
-})
-class AppComponent { }
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    TitleComponent
-  ],
-  bootstrap: [ AppComponent ]
+  template: `<hero-title title="Tour of Heroes"></hero-title>`
 })
-export class HeroesDIInjectAdditionalModule { }
+export class HeroComponent { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
index eb2cb78971..c583a1b0f6 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
@@ -1,20 +1,11 @@
-import { Component, Inject, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component, Inject } from '@angular/core';
 
 // #docregion
 @Component({
   selector: 'hero-di-inject',
   template: `<h1>Hero: {{name}}</h1>`
 })
-class HeroComponent {
+export class HeroComponent {
   constructor(@Inject('heroName') private name: string) { }
 }
 // #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesDIInjectModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
index c1bb927219..0cc78d277e 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
@@ -1,6 +1,4 @@
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
+import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
 // #docregion
@@ -8,19 +6,10 @@ import { DataService } from './data.service';
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
 })
-
-class HeroComponent {
-  name: string;
+export class HeroComponent {
+  name = '';
   constructor(dataService: DataService) {
     this.name = dataService.getHeroName();
   }
 }
 // #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ DataService ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesDIModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts
new file mode 100644
index 0000000000..fefe4a5470
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host-meta',
+  template: `
+    <h1 [class.active]="active">Hero Host in Metadata</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-meta> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+
+    // HostListeners on the entire <hero-host-meta> element
+    '(click)': 'clicked()',
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-meta> element
+  styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+  title = 'Hero Host in Metadata Tooltip';
+  headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host',
+  template: `
+    <h1 [class.active]="active">Hero Host in Decorators</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  // Styles within (but excluding) the <hero-host> element
+  styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+  // HostBindings to the <hero-host> element
+  @HostBinding() title = 'Hero Host in Decorators Tooltip';
+  @HostBinding('class.heading') headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  // HostListeners on the entire <hero-host> element
+  @HostListener('click')
+  clicked() {
+    this.clicks += 1;
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
index 8105d98919..4b36411e78 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
@@ -1,67 +1,26 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  moduleId: module.id,
-  selector: 'my-confirm',
-  templateUrl: 'confirm.component.html'
-})
-class ConfirmComponent {
-  @Input() okMsg: string;
-  @Input('cancelMsg') notOkMsg: string;
-  @Output() ok =
-    new EventEmitter();
-  @Output('cancel') notOk =
-    new EventEmitter();
-
-  onOkClick() {
-    this.ok.next(true);
-  }
-  onNotOkClick() {
-    this.notOk.next(true);
-  }
-}
-// #enddocregion
-
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-io',
   template: `
-    <my-confirm [okMsg]="'OK'"
-                [cancelMsg]="'Cancel'"
-                (ok)="onOk()"
-                (cancel)="onCancel()">
-    </my-confirm>
+    <app-confirm [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+    </app-confirm>
     <span *ngIf="okClicked">OK clicked</span>
     <span *ngIf="cancelClicked">Cancel clicked</span>
   `
 })
-class AppComponent {
-  okClicked: boolean;
-  cancelClicked: boolean;
+export class HeroIOComponent {
+  okClicked     = false;
+  cancelClicked = false;
 
   onOk() {
     this.okClicked = true;
   }
+
   onCancel() {
     this.cancelClicked = true;
   }
 }
-
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    ConfirmComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class HeroesIOModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
index 64bdc9e927..2629c85a1a 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
@@ -1,27 +1,14 @@
-// #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
-// #enddocregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
 
 @Component({
   selector: 'hero-lifecycle',
   template: `<h1>Hero: {{name}}</h1>`
 })
-// #docregion
-class HeroComponent implements OnInit {
+export class HeroComponent implements OnInit {
   name: string;
   ngOnInit() {
-    this.name = 'Windstorm';
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
   }
 }
-// #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesLifecycleModule { }
-
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts
new file mode 100644
index 0000000000..8b2d91ea85
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts
@@ -0,0 +1,83 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+@Component({
+  selector: 'content-child',
+  template: `
+  <span class="content-child" *ngIf="active">
+    Active
+  </span>`
+})
+export class ContentChildComponent {
+  active = false;
+
+  activate() {
+    this.active = !this.active;
+  }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+  selector: 'view-child',
+  template: `
+  <h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`,
+  styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+  @Input() hero: any;
+  active = false;
+
+  @ContentChild(ContentChildComponent) content: ContentChildComponent;
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+  selector: 'hero-queries',
+  template: `
+    <view-child *ngFor="let hero of heroData" [hero]="hero">
+      <content-child></content-child>
+    </view-child>
+    <button (click)="activate()">{{buttonLabel}} All</button>
+  `
+})
+export class HeroQueriesComponent {
+  active = false;
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'LaughingGas'}
+  ];
+
+  @ViewChildren(ViewChildComponent) views: QueryList<ViewChildComponent>;
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  // #docregion defined-property
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+  // #enddocregion defined-property
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html
similarity index 78%
rename from public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html
rename to public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html
index 06d6f3db91..0e93122d5c 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html
@@ -1,3 +1,4 @@
+<!-- #docregion -->
 <h1>{{titlePrefix}} {{title}}</h1>
 <button (click)="ok()">OK</button>
 <p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts
new file mode 100644
index 0000000000..074f2edd61
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts
@@ -0,0 +1,22 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+  moduleId: module.id,
+  selector: 'hero-title',
+  templateUrl: 'hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+  msg: string = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() private titlePrefix: string,
+    @Attribute('title') private title: string
+  ) { }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
index 83dc6d409d..4ea4c11611 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -1,4 +1,3 @@
-// #docplaster
 // #docregion metadata
 import { Component } from '@angular/core';
 
@@ -6,24 +5,10 @@ import { Component } from '@angular/core';
   selector: 'hero-view',
   template: '<h1>{{title}}: {{getName()}}</h1>'
 })
-// #docregion appexport
-// #docregion class
+// #docregion appexport, class
 export class HeroComponent {
   title = 'Hero Detail';
   getName() {return 'Windstorm'; }
 }
-// #enddocregion class
-// #enddocregion appexport
+// #enddocregion appexport, class
 // #enddocregion metadata
-
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesModule { }
-
-
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
deleted file mode 100644
index 0ce026a42f..0000000000
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  Component,
-  HostBinding,
-  HostListener,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  selector: 'heroes-bindings',
-  template: `
-    <h1 [class.active]="active">
-      Tour of Heroes
-    </h1>
-  `
-})
-class HeroesComponent {
-  @HostBinding() title = 'Tooltip content';
-  @HostBinding('class.heading') hClass = true;
-  active: boolean;
-
-  constructor() {}
-
-  @HostListener('click')
-  clicked() {
-    this.active = !this.active;
-  }
-
-  @HostListener('dblclick', ['$event'])
-  doubleClicked(evt: Event) {
-    this.active = true;
-  }
-}
-// #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroesComponent ],
-  bootstrap: [ HeroesComponent ]
-})
-export class HeroesHostBindingsModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
deleted file mode 100644
index 97003766e6..0000000000
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  Component,
-  ViewChildren,
-  ContentChild,
-  QueryList,
-  Input,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@Component({
-  selector: 'active-label',
-  template: `<span class="active-label"
-                   *ngIf="active">
-    Active
-  </span>`
-})
-class ActiveLabelComponent {
-  active: boolean;
-
-  activate() {
-    this.active = true;
-  }
-}
-
-// #docregion content
-@Component({
-  selector: 'a-hero',
-  template: `<h2 [class.active]=active>
-    {{hero.name}}
-    <ng-content></ng-content>
-  </h2>`
-})
-class HeroComponent {
-  @Input() hero: any;
-  active: boolean;
-
-  @ContentChild(ActiveLabelComponent)
-  label: ActiveLabelComponent;
-
-  activate() {
-    this.active = true;
-    this.label.activate();
-  }
-}
-// #enddocregion content
-
-
-// #docregion view
-@Component({
-  selector: 'heroes-queries',
-  template: `
-    <a-hero *ngFor="let hero of heroData"
-          [hero]="hero">
-      <active-label></active-label>
-    </a-hero>
-    <button (click)="activate()">
-      Activate
-    </button>
-  `
-})
-class HeroesQueriesComponent {
-  heroData = [
-    {id: 1, name: 'Windstorm'},
-    {id: 2, name: 'Superman'}
-  ];
-
-  @ViewChildren(HeroComponent)
-  heroCmps: QueryList<HeroComponent>;
-
-  activate() {
-    this.heroCmps.forEach(
-      (cmp) => cmp.activate()
-    );
-  }
-}
-// #enddocregion view
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    HeroesQueriesComponent,
-    HeroComponent,
-    ActiveLabelComponent
-  ],
-  bootstrap: [ HeroesQueriesComponent ]
-})
-export class HeroesQueriesModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
index 92f5af5e1a..7cc80b5964 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
@@ -1,30 +1,4 @@
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
-
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-// #enddocregion appimport
-
-import { HeroesModule } from './hero.component';
-import { HeroesLifecycleModule } from './hero-lifecycle.component';
-import { HeroesDIModule } from './hero-di.component';
-import { HeroesDIInjectModule } from './hero-di-inject.component';
-import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
-import { HeroesIOModule } from './hero-io.component';
-import { HeroesHostBindingsModule } from './heroes-bindings.component';
-import { HeroesQueriesModule } from './heroes-queries.component';
-
-platformBrowserDynamic().bootstrapModule(HeroesModule);
-platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
-platformBrowserDynamic().bootstrapModule(HeroesIOModule);
-platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
-platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html
index c635706f38..5791134d4f 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/index.html
+++ b/public/docs/_examples/cb-ts-to-js/ts/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -20,32 +21,7 @@
   </head>
 
   <body>
-    <a id="toc"></a>
-    <h1>TypeScript to JavaScript</h1>
-    <a href="#class-metadata">Classes and Class Metadata</a><br>
-    <a href="#property-metadata">Input and Output Metadata</a><br>
-    <a href="#dependency-injection">Dependency Injection</a><br>
-    <a href="#other-property-metadata">Host and Query Metadata</a><br>
-
-    <hr>
-    <h4 id="class-metadata">Classes and Class Metadata</h4>
-    <hero-view id="class-metadata">Loading hero-view...</hero-view>
-    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
-
-    <hr>
-    <h4 id="property-metadata">Input and Output Metadata</h4>
-    <hero-io>Loading hero-io...</hero-io>
-
-    <hr>
-    <h4 id="dependency-injection">Dependency Injection</h4>
-    <hero-di>Loading hero-di...</hero-di>
-    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
-    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
-
-    <hr>
-    <h4 id="other-property-metadata">Host and Query Metadata</h4>
-    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
-    <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade
index 0c3ba61544..d34dbf8868 100644
--- a/public/docs/ts/latest/cookbook/ts-to-js.jade
+++ b/public/docs/ts/latest/cookbook/ts-to-js.jade
@@ -15,19 +15,16 @@ a#toc
 :marked
   ## Table of contents
 
-  [_TypeScript_ to _ES6_ to _ES5_](#from-ts)
-
-  [Modularity: imports and exports](#modularity)
-
-  [Classes and Class Metadata](#class-metadata)
-  
-  [Input and Output Metadata](#property-metadata)
-  
-  [Dependency Injection](#dependency-injection)
-  
-  [Host and Query Metadata](#host-query-metadata)
-
-  [AoT compilation in _TypeScript_ Only](#aot)
+  [_TypeScript_ to _ES6_ to _ES5_](#from-ts)<br>
+  [Modularity: imports and exports](#modularity)<br>
+  [Classes and Class Metadata](#class-metadata)<br>
+  [_ES5_ DSL](#dsl)<br>
+  [Interfaces](#interfaces)<br>
+  [Input and Output Metadata](#io-decorators)<br>
+  [Dependency Injection](#dependency-injection)<br>
+  [Host Binding](#host-binding)<br>
+  [View and Child Decorators](#view-child-decorators)<br>
+  [AoT compilation in _TypeScript_ Only](#aot)<br>
 
   **Run and compare the live <live-example name="cb-ts-to-js">_TypeScript_</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
   code shown in this cookbook.**
@@ -38,7 +35,7 @@ a#from-ts
   ## _TypeScript_ to _ES6_ to _ES5_
   
   _TypeScript_ 
-  <a href="https://www._TypeScript_lang.org" target="_blank" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
+  <a href="https://www.typescriptlang.org" target="_blank" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
   &nbsp; _ES6 JavaScript_ is a superset of _ES5 JavaScript_. &nbsp; _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
   The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
 
@@ -48,17 +45,17 @@ a#from-ts
   * _ES6-without-decorators_ to _ES5_
 
   When translating from _TypeScript_ to _ES6-with-decorators_, remove 
-  [class property access modifiers](http://www._TypeScript_lang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
+  [class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
   such as `public` and `private`.
   Remove most of the 
-  [type annotations](https://www._TypeScript_lang.org/docs/handbook/basic-types.html), 
-  such as `string` and `boolean`
-  but **keep type annotations used for dependency injection**.
+  [type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html), 
+  such as `:string` and `:boolean`
+  but **keep the constructor parameter types which are used for dependency injection**.
    
 
   From _ES6-with-decorators_ to _plain ES6_, remove all 
-  [decorators](https://www._TypeScript_lang.org/docs/handbook/decorators.html)
-  and the remaining type annotations.
+  [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
+  and the remaining types.
   You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class.
 
   Finally, from _plain ES6_ to _ES5_, the main missing features are `import`
@@ -82,24 +79,20 @@ a#modularity
 
   In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#!#scoped-package)
   through the global `ng` object. 
-  Everything you would have imported from `@angular` is a nested member of this `ng` object:
+  Anything you can import from `@angular` is a nested member of this `ng` object:
 
 +makeTabs(`
-    cb-ts-to-js/ts/app/main.ts,
-    cb-ts-to-js/js-es6-decorators/app/main.es6,
-    cb-ts-to-js/js-es6/app/main.es6,
-    cb-ts-to-js/js/app/main.js
-  `,`
-    ng2import,
-    ng2import,
-    ng2import,
-    ng2import
-  `,`
-    TypeScript,
+    cb-ts-to-js/ts/app/app.module.ts,
+    cb-ts-to-js/js-es6-decorators/app/app.module.es6,
+    cb-ts-to-js/js-es6/app/app.module.es6,
+    cb-ts-to-js/js/app/app.module.js
+  `,
+ 'ng2import,ng2import,ng2import,ng2import',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
     ES5 JavaScript
-  `)
+  `)(format='.')
 
 :marked
   ### Exporting Application Code
@@ -118,9 +111,9 @@ a#modularity
   Add one application namespace object such as `app` to the global `document`.
   Then each code file "exports" public entities by attaching them to that namespace object, e.g., `app.HeroComponent`.
   You could factor a large application into several sub-namespaces 
-  which leads to "exports" along the lines of `app.heroes.HeroComponent`.
+  which leads to "exports" along the lines of `app.heroQueries.HeroComponent`.
   
-  Every file should wrap _ES5_ code in an 
+  Every _ES5_ file should wrap code in an 
   [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
   to limit unintentional leaking of private symbols into the global scope.
   
@@ -131,13 +124,9 @@ a#modularity
     cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
     cb-ts-to-js/js-es6/app/hero.component.es6,
     cb-ts-to-js/js/app/hero.component.js
-  `,`
-    appexport,
-    appexport,
-    appexport,
-    appexport
-  `,`
-    TypeScript,
+  `,
+  'appexport,appexport,appexport,appexport',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
     ES5 JavaScript
@@ -151,17 +140,13 @@ a#modularity
   In _ES5_ you use the shared namespace object to access "exported" entities from other files.
 
 +makeTabs(`
-    cb-ts-to-js/ts/app/main.ts,
-    cb-ts-to-js/js-es6-decorators/app/main.es6,
-    cb-ts-to-js/js-es6/app/main.es6,
-    cb-ts-to-js/js/app/main.js
-  `,`
-    appimport,
-    appimport,
-    appimport,
-    appimport
-  `,`
-    TypeScript,
+    cb-ts-to-js/ts/app/app.module.ts,
+    cb-ts-to-js/js-es6-decorators/app/app.module.es6,
+    cb-ts-to-js/js-es6/app/app.module.es6,
+    cb-ts-to-js/js/app/app.module.js
+  `,
+  'appimport,appimport,appimport,appimport',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
     ES5 JavaScript
@@ -183,6 +168,20 @@ a#class-metadata
   ### Classes
 
   Most Angular _TypeScript_ and _ES6_ code is written as classes.
+
+  Properties and method parameters of _TypeScript_ classes may be marked with the access modifiers
+  `private`, `internal`, and `public`. 
+  Remove these modifiers when translating to JavaScript.
+
+  Most type declarations (e.g, `:string` and `:boolean`) should be removed when translating to JavaScript.
+  When translating to _ES6-with-decorators_, ***do not remove types from constructor parameters!***
+  
+  Look for types in _TypeScript_ property declarations.
+  In general it is better to initialize such properties with default values because
+  many browser JavaScript engines can generate more performant code.
+  When _TypeScript_ code follows this same advice, it can infer the property types
+  and there is nothing to remove during translation. 
+
   In _ES6-without-decorators_, properties of classes must be assigned inside the constructor.
 
   _ES5_ JavaScript has no classes. 
@@ -193,13 +192,9 @@ a#class-metadata
     cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
     cb-ts-to-js/js-es6/app/hero.component.es6,
     cb-ts-to-js/js/app/hero.component.js
-  `,`
-    class,
-    class,
-    class,
-    constructorproto
-  `,`
-    TypeScript,
+  `,
+  'class,class,class,constructorproto',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
     ES5 JavaScript
@@ -226,13 +221,9 @@ a#class-metadata
     cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
     cb-ts-to-js/js-es6/app/hero.component.es6,
     cb-ts-to-js/js/app/hero.component.js
-  `,`
-    metadata,
-    metadata,
-    metadata,
-    metadata
-  `,`
-    TypeScript,
+  `,
+  'metadata,metadata,metadata,metadata',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
     ES5 JavaScript
@@ -242,62 +233,95 @@ a#class-metadata
   ***External Template file***
 
   A large component template is often kept in a separate template file.
-+makeExample('cb-ts-to-js/ts/app/title.component.html', '', 'app/title.component.html')(format='.')
++makeExample('cb-ts-to-js/ts/app/hero-title.component.html', '', 'app/hero-title.component.html')(format='.')
 :marked
-  The component (`TitleComponent` in this case) then references the template file in its metadata `templateUrl` property:
+  The component (`HeroTitleComponent` in this case) then references the template file in its metadata `templateUrl` property:
 +makeTabs(`
-  cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts,
-  cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6,
-  cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6,
-  cb-ts-to-js/js/app/hero-di-inject-additional.component.js`,
-  'metadata, metadata, metadata, metadata',
+    cb-ts-to-js/ts/app/hero-title.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6,
+    cb-ts-to-js/js-es6/app/hero-title.component.es6,
+    cb-ts-to-js/js/app/hero-title.component.js`,
+  'templateUrl, templateUrl, templateUrl, templateUrl',
   `TypeScript,
-  ES6 JavaScript with decorators,
-  ES6 JavaScript,
-  ES5 JavaScript`)(format='.')
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)(format='.')
 
 :marked
-  Note that the _TypeScript_ and both _ES6_ file `templateUrl` properties identify the location of the template file _relative to the component module_.
+  Note that the _TypeScript_ and both _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_.
   All three metadata configurations specify the `moduleId` property 
   so that Angular can calculate the proper module address.
-.l-sub-section
-  :marked
-    The `moduleId` may not be needed with certain tooling but it's safest to provide it anyway.
-:marked
+
   The _ES5_ approach shown here does not support modules and therefore there is no way to calculate a _module-relative URL_.
   The `templateUrl` for the _ES5_ code must specify the _path from the project root_ and 
   omits the irrelevant `moduleId` property. 
   
+.l-sub-section
+  :marked
+    With the right tooling, the `moduleId` may not be needed in the other JavaScript dialects either.
+    But it's safest to provide it anyway.
 
-  ***Angular class API***
+a#dsl
+.l-main-section
+:marked
+  ## _ES5_ DSL
 
   This _ES5_ pattern of creating a constructor and annotating it with metadata is so common that Angular 
   provides a convenience API to make it a little more compact and locates the metadata above the constructor, 
   as you would if you wrote in _TypeScript_ or _ES6-with-decorators_.
 
-  Set a component variable to the result of an `ng.core.Component` function call.
+  This _API_ (_Application Programming Interface_) is commonly known as the _ES5 DSL_ (_Domain Specific Language_).
+
+  Set an application namespace property (e.g., `app.HeroDslComponent`) to the result of an `ng.core.Component` function call.
   Pass the same metadata object to `ng.core.Component` as you did before.
-  
   Then chain a call to the `Class` method which takes an object defining the class constructor and instance methods.
 
-  Here is an example of the component class API next to the annotated function version for comparison:
+  Here is an example of the `HeroComponent`, re-written with the DSL,
+  next to the original _ES5_ version for comparison:
 
 +makeTabs(`
-    cb-ts-to-js/js/app/hero-dsl.component.js,
+    cb-ts-to-js/js/app/hero.component.js,
     cb-ts-to-js/js/app/hero.component.js
-  `,`
-    component,
-    metadata
-  `,`
-    ES5 JavaScript with Class API,
+  `,
+  'dsl,',
+  `
+    ES5 JavaScript with DSL,
     ES5 JavaScript
   `)
+
+.callout.is-helpful
+  header Name the constructor
+  :marked
+    A **named** constructor displays clearly in the console log
+    if the component throws a runtime error. 
+    An **unnamed** constructor displays as an anonymous function (e.g., `class0`) 
+    which is impossible to find in the source code.
+
+:marked
+  ### Properties with getters and setters
+
+  _TypeScript_ and _ES6_ support with getters and setters.
+  Here's an example of a read-only _TypeScript_ property with a getter
+  that prepares a toggle-button label for the next clicked state:
++makeExample('cb-ts-to-js/ts/app/hero-queries.component.ts', 'defined-property', 'ts/app/hero-queries.component.ts')(format='.')
+
+:marked
+  This _TypeScript_ "getter" property is transpiled to an _ES5_
+  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"
+     target="_blank" title="Defined Properties">defined property</a>.
+  The _ES5 DSL_ does not support _defined properties_ directly
+  but you can still create them by extracting the "class" prototype and
+  adding the _defined property_ in raw JavaScript like this:
++makeExample('cb-ts-to-js/js/app/hero-queries.component.js', 'defined-property','js/app/hero-queries.component.ts')(format='.')
+
 :marked
-  There are similar APIs for other decorated classes. 
+  ### DSL for other classes
+  There are similar DSLs for other decorated classes. 
   You can define a directive with `ng.core.Directive`: 
 
 code-example.
-  var MyDirective = ng.core.Directive({
+  app.MyDirective = ng.core.Directive({
     selector: '[myDirective]'
   }).Class({
     ...
@@ -305,18 +329,20 @@ code-example.
 :marked
   and a pipe with `ng.core.Pipe`:
 code-example.  
-  var MyPipe = ng.core.Pipe({
+  app.MyPipe = ng.core.Pipe({
     name: 'myPipe'
   }).Class({
     ...
   });
 
+a#interfaces
+.l-main-section
 :marked
-  ### Interfaces
+  ## Interfaces
 
   A _TypeScript_ interface helps ensure that a class implements the interface's members correctly.
   We strongly recommend Angular interfaces where appropriate. 
-  For example, a component that implements the `ngOnInit` lifecycle hook method
+  For example, the component class that implements the `ngOnInit` lifecycle hook method
   should implement the `OnInit` interface.
 
   _TypeScript_ interfaces exist for developer convenience and are not used by Angular at runtime.
@@ -327,16 +353,18 @@ code-example.
     cb-ts-to-js/ts/app/hero-lifecycle.component.ts,
     cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6,
     cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js/app/hero-lifecycle.component.js,
     cb-ts-to-js/js/app/hero-lifecycle.component.js
-  `,`
-  `,`
-    TypeScript,
+  `,
+  ',,,,dsl',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
-    ES5 JavaScript
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
   `)  
 
-a#property-metadata
+a#io-decorators
 .l-main-section
 :marked
   ## Input and Output Metadata
@@ -357,16 +385,18 @@ a#property-metadata
   combined in the metadata `inputs` and `outputs` _arrays_.
 
 +makeTabs(`
-    cb-ts-to-js/ts/app/hero-io.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6,
-    cb-ts-to-js/js-es6/app/hero-io.component.es6,
-    cb-ts-to-js/js/app/hero-io.component.js
-  `,`
-  `,`
-    TypeScript,
+    cb-ts-to-js/ts/app/confirm.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/confirm.component.es6,
+    cb-ts-to-js/js-es6/app/confirm.component.es6,
+    cb-ts-to-js/js/app/confirm.component.js,
+    cb-ts-to-js/js/app/confirm.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
-    ES5 JavaScript
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
   `)
 :marked
   In the previous example, one of the public-facing binding names (`cancelMsg`) 
@@ -376,53 +406,76 @@ a#property-metadata
   
   In _TypeScript_ and _ES6-with-decorators_, 
   you specify the special binding name in the argument to the property decorator.
+  
   In _ES5_ and _plain ES6_ code, convey this pairing with the `propertyName: bindingName` syntax in the class metadata.
   
 .l-main-section
 :marked
   ## Dependency Injection
+  Angular relies heavily on [Dependency Injection](../guide/dependency-injection.html) to provide services to the objects it creates.
+  When Angular creates a new component, directive, pipe or another service, 
+  it sets the class constructor parameters to instances of services provided by an _Injector_.
 
-  ### Injection by Type
+  The developer must tell Angular what to inject into each parameter.
 
-  Angular can often use _TypeScript_ type information to determine what needs to be injected.
-  _ES6-with-decorators_ can also make use of type information.
+  ### Injection by Class Type
 
-  Since no type information is available in _ES5_/_ES6_ JavaScript, you must identify "injectables" in 
-  some other way.
+  The easiest and most popular technique in _TypeScript_ and _ES6-with-decorators_ is to set the constructor parameter type
+  to the class associated with the service to inject. 
+  
+  The _TypeScript_ transpiler writes parameter type information into the generated JavaScript.
+  Angular reads that information at runtime and locates the corresponding service in the appropriate _Injector_..
+  The _ES6-with-decorators_ transpiler does essentially the same thing using the same parameter-typing syntax.
 
-  Attach a `parameters` array to the constructor function. 
-  Each array item is the dependency injection token that identifies the thing to be injected. 
-  Often the token is the constructor function for the class-like dependency.
+  _ES5_ and _plain ES6_ lack types so you must identify "injectables" by attaching a **`parameters`** array to the constructor function. 
+  Each item in the array specifies the service's injection token.
+
+  As with _TypeScript_ the most popular token is a class, 
+  or rather a _constructor function_ that represents a class in _ES5_ and _plain ES6_.
+  The format of the `parameters` array varies:
   
-  In _ES6_ the decorators need to be inside a nested array.
-  When writing in the _ES5_ class convenience API, you can supply the parameter tokens by wrapping 
-  the constructor in an array.
+  * _plain ES6_ &mdash; nest each constructor function in a sub-array.
+
+  * _ES5_ &mdash; simply list the constructor functions.
+
+  When writing with _ES5 DSL_, set the `Class.constructor` property to
+  an array whose first parameters are the injectable constructor functions and whose
+  last parameter is the class constructor itself. 
+  This format should be familiar to Angular 1 developers.
 
 +makeTabs(`
     cb-ts-to-js/ts/app/hero-di.component.ts,
     cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6,
     cb-ts-to-js/js-es6/app/hero-di.component.es6,
     cb-ts-to-js/js/app/hero-di.component.js,
-    cb-ts-to-js/js/app/hero-di-inline.component.js
-  `,`
-  `,`
-    TypeScript,
+    cb-ts-to-js/js/app/hero-di.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
     ES5 JavaScript,
-    ES5 JavaScript with Class API
+    ES5 JavaScript with DSL
   `)
 
 :marked
   ### Injection with the @Inject decorator
 
-  When the thing being injected doesn't correspond directly to a type, you use the 
-  `@Inject()` decorator to supply the injection token.
-  In this example, you are injecting a string identified by the "heroName" token. 
+  Sometimes the dependency injection token isn't a class or constructor function.
+  
+  In _TypeScript_ and _ES6-with-decorators_, you precede the class constructor parameter
+  by calling the `@Inject()` decorator with the injection token.
+  In the following example, the token is the string `'heroName'`.
+
+  The other JavaScript dialogs add a `parameters` array to the class contructor function.
+  Each item constains a new instance of `Inject('heroName')`:
+  
+  * _plain ES6_ &mdash; each item is a new instance of `Inject(token)` in a sub-array.
+
+  * _ES5_ &mdash; simply list the string tokens.
 
-  In _ES5_/_ES6_ JavaScript you add the token string to the injection parameters array.
-  Alternatively, when using the _ES5_ convenience class API you can create a token with the 
-  `Inject` method and add that to the constructor array in the annotations.
+  When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition
+  array as before. Create a `new ng.core.Inject(token)` for each parameter. 
 
 +makeTabs(`
     cb-ts-to-js/ts/app/hero-di-inject.component.ts,
@@ -430,67 +483,74 @@ a#property-metadata
     cb-ts-to-js/js-es6/app/hero-di-inject.component.es6,
     cb-ts-to-js/js/app/hero-di-inject.component.js,
     cb-ts-to-js/js/app/hero-di-inject.component.js
-  `,`
-  ,
-  ,
-  ,
-  parameters,
-  ctor
-  `,`
-    TypeScript,
+  `,
+  ',,,,dsl',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
     ES5 JavaScript,
-    ES5 JavaScript with Class API
+    ES5 JavaScript with DSL
   `)
 
 :marked
   ### Additional Injection Decorators
 
-  You can attach additional decorators to constructor parameters to qualify the injection behavior. 
-  You can mark optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
-  inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
-  inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
-  and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)).
-
-  In ES6 JavaScript you just add the extra decorators to the nested injection parameters array.
+  You can qualify injection behavior with injection decorators from `@angular/core`.
 
-  To achieve the same effect in _ES5_ JavaScript, use a nested array with the constructor 
-  array notation in which the injection information precedes the constructor function itself.
+  In _TypeScript_ and _ES6-with-decorators_, 
+  you precede the constructor parameters with injection qualifiers such as:
+  * [`@Optional`](../api/core/index/Optional-decorator.html) sets the parameter to `null` if the service is missing
+  * [`@Attribute`](../api/core/index/Attribute-interface.html) to inject a host element attribute value
+  * [`@ContentChild`](../api/core/index/ContentChild-decorator.html) to inject a content child
+  * [`@ViewChild`](../api/core/index/ViewChild-decorator.html) to inject a view child
+  * [`@Host`](../api/core/index/Host-decorator.html) to inject a service in this component or its host
+  * [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) to inject a service provided in an ancestor of this component
+
+  In _plain ES6_ and _ES5_, create an instance of the equivalent injection qualifier in a nested array within the `parameters` array.
+  For example, you'd write `new Optional()` in _plain ES6_ and `new ng.core.Optional()` in _ES5_.
   
-  You can apply other additional parameter decorators such as
-  [`@Host`](../api/core/index/Host-decorator.html) and
-  [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
-  by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
-  parameters array.
+
+  When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition
+  array as before. Use a nested array to define a parameter's complete injection specification.
+
 +makeTabs(`
-    cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6,
-    cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6,
-    cb-ts-to-js/js/app/hero-di-inject-additional.component.js
-  `,`
-  `,`
-    TypeScript,
+    cb-ts-to-js/ts/app/hero-title.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6,
+    cb-ts-to-js/js-es6/app/hero-title.component.es6,
+    cb-ts-to-js/js/app/hero-title.component.js,
+    cb-ts-to-js/js/app/hero-title.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
-    ES5 JavaScript
-  `)  
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+.l-sub-section
+  :marked
+    In the example above, there is no provider for the `'titlePrefix'` token.
+    Without `Optional`, Angular would raise an error.
+    With `Optional`, Angular sets the constructor parameter to `null` 
+    and the component displays the title without a prefix.
 
-a#host-query-metadata
+a#host-binding
 .l-main-section
 :marked
-  ## Host and Query Metadata
+  ## Host Binding
+  Angular supports bindings to properties and events of the _host element_ which is the
+  element whose tag matches the component selector.
 
   ### Host Decorators
 
-  In _TypeScript_ and _ES6-with-decorators_ you can use host property decorators to bind a host
+  In _TypeScript_ and _ES6-with-decorators_, you can use host property decorators to bind a host
   element to a component or directive.
   The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
   binds host element properties to component data properties. 
   The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator binds
   host element events to component event handlers.
 
-  When using _ES5_/_ES6_, add a `host` attribute to the component metadata to achieve the
+  In _plain ES6_ or _ES5_, add a `host` attribute to the component metadata to achieve the
   same effect as `@HostBinding` and `@HostListener`. 
   
   The  `host` value is an object whose properties are host property and listener bindings:
@@ -500,54 +560,74 @@ a#host-query-metadata
   * Each value identifies the corresponding component property or method.
 
 +makeTabs(`
-    cb-ts-to-js/ts/app/heroes-bindings.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6,
-    cb-ts-to-js/js-es6/app/heroes-bindings.component.es6,
-    cb-ts-to-js/js/app/heroes-bindings.component.js
-  `,`
-  `,`
-    TypeScript,
+    cb-ts-to-js/ts/app/hero-host.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6,
+    cb-ts-to-js/js-es6/app/hero-host.component.es6,
+    cb-ts-to-js/js/app/hero-host.component.js,
+    cb-ts-to-js/js/app/hero-host.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
-    ES5 JavaScript
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  ### Host Metadata
+  Some developers prefer to specify host properties and listeners
+  in the component metadata. 
+  They'd _rather_ do it the way you _must_ do it _ES5_ and _plain ES6_.
+
+  The following re-implementation of the `HeroComponent` reminds us that _any property metadata decorator_
+  can be expressed as component or directive metadata in both _TypeScript_ and _ES6-with-decorators_.
+  These particular _TypeScript_ and _ES6_ code snippets happen to be identical.
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-host-meta.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
+  `,
+  '',
+  ` TypeScript,
+    ES6 JavaScript with decorators
   `)
-.alert.is-helpful
-  :marked
-    In _TypeScript_ and _ES6-with-decorators_ you can also use the `queries` metadata 
-    instead of the `@ViewChild` and `@ContentChild` property decorators.    
 
+a#view-child-decorators
+.l-main-section
 :marked
-  ### Query Decorators
+  ### View and Child Decorators
   
-  There are several property decorators for querying the descendants of
-  a component or directive.
+  Several _property_ decorators query a component's nested view and content components.
   
+.l-sub-section
+  :marked
+     _View_ children are associated with element tags that appear _within_ the component's template.
+     
+     _Content_ children are associated with elements that appear _between_ the component's element tags;
+     they are projected into an `<ng-content>` slot in the component's template.     
+:marked
   The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
   [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
   allow a component to query instances of other components that are used in
   its view. 
 
-  In _ES5_/_ES6_ JavaScript you access a component's view children by adding a `queries` attribute to
-  the component metadata. It should be an object where:
-  
-  * Each key is the name of a component property that will hold the view children
-  * Each value is an instance of either `ViewChild` or `ViewChildren`.
+  In _ES5_ and _ES6_, you access a component's view children by adding a `queries` property to the component metadata. 
+  The `queries` property value is a hash map.
+
+  * each _key_ is the name of a component property that will hold the view child or children.
+  * each _value_ is a new instance of either `ViewChild` or `ViewChildren`.
 
 +makeTabs(`
-    cb-ts-to-js/ts/app/heroes-queries.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
-    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
-    cb-ts-to-js/js/app/heroes-queries.component.js
-  `,`
-    view,
-    view,
-    view,
-    view
-  `,`
-    TypeScript,
+    cb-ts-to-js/ts/app/hero-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6,
+    cb-ts-to-js/js-es6/app/hero-queries.component.es6,
+    cb-ts-to-js/js/app/hero-queries.component.js
+  `,
+  'view, view, view, view',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
-    ES5 JavaScript
+    ES5 JavaScript with DSL
   `)
 
 :marked
@@ -560,22 +640,23 @@ a#host-query-metadata
   [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html).
 
 +makeTabs(`
-    cb-ts-to-js/ts/app/heroes-queries.component.ts,
-    cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6,
-    cb-ts-to-js/js-es6/app/heroes-queries.component.es6,
-    cb-ts-to-js/js/app/heroes-queries.component.js
-  `,`
-    content,
-    content,
-    content,
-    content
-  `,`
-    TypeScript,
+    cb-ts-to-js/ts/app/hero-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6,
+    cb-ts-to-js/js-es6/app/hero-queries.component.es6,
+    cb-ts-to-js/js/app/hero-queries.component.js
+  `,
+  'content, content, content, content',
+  ` TypeScript,
     ES6 JavaScript with decorators,
     ES6 JavaScript,
-    ES5 JavaScript
+    ES5 JavaScript with DSL
   `)
 
+.alert.is-helpful
+  :marked
+    In _TypeScript_ and _ES6-with-decorators_ you can also use the `queries` metadata 
+    instead of the `@ViewChild` and `@ContentChild` property decorators.    
+
 a#aot
 .l-main-section
 :marked