diff --git a/.travis.yml b/.travis.yml
index 755b29e6a7..bf6b8894aa 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,7 +10,7 @@ env:
     - DBUS_SESSION_BUS_ADDRESS=/dev/null
     - DISPLAY=:99.0
     - CHROME_BIN=chromium-browser
-    - LATEST_RELEASE=2.0.0-rc.4
+    - LATEST_RELEASE=2.0.0-rc.5
     - TASK_FLAGS="--dgeni-log=warn"
     # - TASK_FLAGS=""
   matrix:
diff --git a/gulpfile.js b/gulpfile.js
index c6e15ae13f..33a555d09e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -344,10 +344,14 @@ function runE2eDartTests(appDir, outputFile) {
     gutil.log('http-server failed to launch over ' + deployDir);
     return false;
   }
-  var pubUpgradeSpawnInfo = spawnExt('pub', ['upgrade'], { cwd: appDir });
-  var prepPromise = pubUpgradeSpawnInfo.promise.then(function (data) {
-    return spawnExt('pub', ['build'], { cwd: appDir }).promise;
-  });
+  if (argv.pub === false) {
+    var prepPromise = Promise.resolve(true);
+  } else {
+    var pubUpgradeSpawnInfo = spawnExt('pub', ['upgrade'], { cwd: appDir });
+    var prepPromise = pubUpgradeSpawnInfo.promise.then(function (data) {
+      return spawnExt('pub', ['build'], { cwd: appDir }).promise;
+    });
+  }
   return runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile);
 }
 
@@ -441,7 +445,7 @@ gulp.task('add-example-boilerplate', function(done) {
 // copies boilerplate files to locations
 // where an example app is found
 gulp.task('_copy-example-boilerplate', function (done) {
-  if (!argv.fast) buildStyles(copyExampleBoilerplate, done);
+  return argv.fast ? done() : buildStyles(copyExampleBoilerplate, done);
 });
 
 //Builds Angular 2 Docs CSS file from Bootstrap npm LESS source
@@ -604,20 +608,20 @@ gulp.task('build-dart-cheatsheet', [], function() {
 
 gulp.task('dartdoc', ['pub upgrade'], function() {
   const ngRepoPath = ngPathFor('dart');
-  if (argv.fast && fs.existsSync(path.resolve(ngRepoPath, 'doc'))) {
-    gutil.log('Skipping dartdoc: --fast flag enabled and "doc" dir exists');
+  if (argv.fast && fs.existsSync(path.resolve(ngRepoPath, 'docs', 'api'))) {
+    gutil.log('Skipping dartdoc: --fast flag enabled and "docs/api" dir exists');
     return true;
   }
   checkAngularProjectPath(ngRepoPath);
   const topLevelLibFilePath = path.resolve(ngRepoPath, 'lib', 'angular2.dart');
   const tmpPath = topLevelLibFilePath + '.disabled';
-  if (!fs.existsSync(topLevelLibFilePath)) throw new Error(`Missing file: ${topLevelLibFilePath}`);
-  fs.renameSync(topLevelLibFilePath, tmpPath);
+  renameIfExistsSync(topLevelLibFilePath, tmpPath);
   gutil.log(`Hiding top-level angular2 library: ${topLevelLibFilePath}`);
-  const dartdoc = spawnExt('dartdoc', ['--output', 'doc/api', '--add-crossdart'], { cwd: ngRepoPath});
+  // Remove dartdoc '--add-crossdart' flag while we are fixing links to API pages.
+  const dartdoc = spawnExt('dartdoc', ['--output', 'docs/api'], { cwd: ngRepoPath});
   return dartdoc.promise.finally(() => {
       gutil.log(`Restoring top-level angular2 library: ${topLevelLibFilePath}`);
-      fs.renameSync(tmpPath, topLevelLibFilePath);
+      renameIfExistsSync(tmpPath, topLevelLibFilePath);
   })
 });
 
@@ -1235,15 +1239,14 @@ function buildDartCheatsheet() {
 
 
 function buildApiDocsForDart() {
-  const apiDir = 'api';
   const vers = 'latest';
   const dab = require('./tools/dart-api-builder/dab')(ANGULAR_IO_PROJECT_PATH);
   const log = dab.log;
 
   log.level = _dgeniLogLevel;
   const dabInfo = dab.dartPkgConfigInfo;
-  dabInfo.ngIoDartApiDocPath = path.join(DOCS_PATH, 'dart', vers, apiDir);
-  dabInfo.ngDartDocPath = path.join(ngPathFor('dart'), 'doc', apiDir);
+  dabInfo.ngIoDartApiDocPath = path.join(DOCS_PATH, 'dart', vers, 'api');
+  dabInfo.ngDartDocPath = path.join(ngPathFor('dart'), 'docs', 'api');
   // Exclude API entries for developer/internal libraries. Also exclude entries for
   // the top-level catch all "angular2" library (otherwise every entry appears twice).
   dabInfo.excludeLibRegExp = new RegExp(/^(?!angular2)|\.testing|_|codegen|^angular2$/);
@@ -1455,3 +1458,11 @@ function checkAngularProjectPath(_ngPath) {
   if (fs.existsSync(ngPath)) return;
   throw new Error('API related tasks require the angular2 repo to be at ' + ngPath);
 }
+
+function renameIfExistsSync(oldPath, newPath) {
+  if (fs.existsSync(oldPath)) {
+      fs.renameSync(oldPath, newPath);
+  } else {
+    gutil.log(`renameIfExistsSync cannot find file to rename: ${oldPath}`);
+  }
+}
diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade
index d9317707f3..946f82d2f4 100644
--- a/public/_includes/_util-fns.jade
+++ b/public/_includes/_util-fns.jade
@@ -39,6 +39,15 @@
 //- Location of sample code
 - var _liveLink = 'live link';
 
+//- NgModule related
+- var _AppModuleVsAppComp = 'AppModule'
+- var _appModuleTsVsAppCompTs = 'app/app.module.ts'
+- var _appModuleTsVsMainTs = 'app/app.module.ts'
+- var _bootstrapModule = 'bootstrapModule'
+- var _moduleVsComp = 'module'
+- var _moduleVsRootComp = 'module'
+- var _platformBrowserDynamicVsBootStrap = 'platformBrowserDynamic'
+
 //- Other
 - var _truthy = 'truthy';
 - var _falsey = 'falsey';
@@ -90,14 +99,14 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
 //- ending is given or is just (), then the title will be suffixed with
 //- either "(excerpt)", or "(#{_region})" when _region is defined.
 mixin makeExcerpt(_filePath, _region, _title, stylePatterns)
-  - var matches = _filePath.match(/(.*)\s+\(([\w ]*)\)$/);
+  - var matches = _filePath.match(/(.*)\s+\(([^\)]*)\)$/);
   - var parenText;
   - if (matches) { _filePath = matches[1]; parenText = matches[2]; }
   - var adjustments = adjustExamplePathAndTitle({filePath:_filePath, title:_title});
   - var filePath = adjustments.filePath;
   - var title = adjustments.title;
-  - var region = _region || parenText;
-  - var excerpt = !region || parenText === '' ? 'excerpt' : parenText || region;
+  - var region = _region || (_region === '' ? '' : parenText);
+  - var excerpt = parenText || region || 'excerpt';
   - if (title) title = title + ' (' + excerpt + ')';
   +makeExample(filePath, region, title, stylePatterns)(format='.')
 
@@ -214,8 +223,8 @@ script.
 -   // E.g. of a project relative path is 'app/main.ts'
 -   if (ex.title === null || ex.title === undefined) {
 -     // Title is not given so take it to be ex.filePath.
--     // Is title like styles.1.css? Then drop the '.1' qualifier:
--     var matches = ex.filePath.match(/^(.*)\.\d(\.\w+)$/);
+-     // Title like styles.1.css or foo_1.dart? Then drop the '.1' or '_1' qualifier:
+-     var matches = ex.filePath.match(/^(.*)[\._]\d(\.\w+)$/);
 -     ex.title = matches ? matches[1] + matches[2] : ex.filePath;
 -   }
 -   ex.filePath = getExampleName() + '/' + _docsFor + '/' + ex.filePath;
diff --git a/public/docs/_examples/architecture/dart/pubspec.yaml b/public/docs/_examples/architecture/dart/pubspec.yaml
index 4da6837c0b..84d0121f5f 100644
--- a/public/docs/_examples/architecture/dart/pubspec.yaml
+++ b/public/docs/_examples/architecture/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/attribute-directives/dart/pubspec.yaml b/public/docs/_examples/attribute-directives/dart/pubspec.yaml
index 2afe4114d8..6cfb11ee2d 100644
--- a/public/docs/_examples/attribute-directives/dart/pubspec.yaml
+++ b/public/docs/_examples/attribute-directives/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
index 08391524b9..dec4a4e223 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
@@ -2,17 +2,16 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
-import { RouterModule }   from '@angular/router';
 
 import { AppComponent }  from './app.component';
 import { MovieListComponent } from './movie-list.component';
-import { routes } from './app.routes';
+import { routing } from './app.routing';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    RouterModule.forRoot(routes, {})
+    routing
   ],
   declarations: [
     AppComponent,
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts
deleted file mode 100644
index 67aa75ed25..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { RouterConfig }  from '@angular/router';
-
-import { MovieListComponent } from './movie-list.component';
-
-export const routes: RouterConfig = [
-  { path: '', redirectTo: '/movies', pathMatch: 'full' },
-  { path: 'movies', component: MovieListComponent }
-];
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts
new file mode 100644
index 0000000000..fb042725eb
--- /dev/null
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
+
+import { MovieListComponent } from './movie-list.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/movies', pathMatch: 'full' },
+  { path: 'movies', component: MovieListComponent }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
index 326ea4e945..7b9487e815 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
@@ -1,15 +1,16 @@
 // #docregion
 import { BrowserModule }                from '@angular/platform-browser';
 import { FormsModule }                  from '@angular/forms';
-import { XHRBackend }                   from '@angular/http';
-// import { appRouterProviders }        from './app.routes';
+import { HttpModule }                   from '@angular/http';
+
+/* import { routing }                   from './app.routing';*/
 import { LocationStrategy,
          HashLocationStrategy }         from '@angular/common';
 import { NgModule }                     from '@angular/core';
 
 import { HeroData }                     from './hero-data';
-import { InMemoryBackendService,
-         SEED_DATA }                    from 'angular2-in-memory-web-api';
+import { InMemoryWebApiModule }         from 'angular2-in-memory-web-api';
+
 
 import { AppComponent }                 from './app.component';
 import { HeroBioComponent }             from './hero-bio.component';
@@ -31,44 +32,43 @@ import { ParentFinderComponent,
          BethComponent,
          BobComponent }                 from './parent-finder.component';
 
-const DIRECTIVES = [
+const declarations = [
+    AppComponent,
     HeroBiosComponent, HeroBiosAndContactsComponent, HeroBioComponent,
     HeroesBaseComponent, SortedHeroesComponent,
     HeroOfTheMonthComponent, HeroContactComponent,
     HighlightDirective,
     ParentFinderComponent,
-    AppComponent
 ];
 
-const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
+const a_components = [AliceComponent, AlexComponent ];
 
-// #docregion C_DIRECTIVES
-const C_DIRECTIVES = [
+const b_components = [ BarryComponent, BethComponent, BobComponent ];
+
+const c_components = [
   CarolComponent, ChrisComponent, CraigComponent,
   CathyComponent
 ];
-// #enddocregion C_DIRECTIVES
 
-// #docregion bootstrap
 @NgModule({
-  imports: [ BrowserModule, FormsModule ],
-  declarations: [ ...DIRECTIVES,
-                  ...B_DIRECTIVES,
-                  ...C_DIRECTIVES,
-                  AliceComponent,
-                  AlexComponent ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    InMemoryWebApiModule.forRoot(HeroData)
+    // routing TODO: add routes
+  ],
+  declarations: [
+    declarations,
+    a_components,
+    b_components,
+    c_components,
+  ],
   bootstrap: [ AppComponent ],
+  // #docregion providers
   providers: [
-    // appRouterProviders, TODO: add routes
-    { provide: LocationStrategy, useClass: HashLocationStrategy },
-
-    { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
-    { provide: SEED_DATA,  useClass: HeroData } // in-mem server data
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
   ]
+  // #enddocregion providers
 })
-export class AppModule {
-  constructor() {
-  }
-}
-// #enddocregion bootstraps
-
+export class AppModule { }
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.routes.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.routes.ts
deleted file mode 100644
index c8eb6ee683..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/app.routes.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { provideRouter, RouterConfig }  from '@angular/router';
-
-const routes: RouterConfig = [];
-
-export const appRouterProviders = [
-  provideRouter(routes)
-];
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts
new file mode 100644
index 0000000000..2d3556371d
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts
@@ -0,0 +1,10 @@
+import { ModuleWithProviders }   from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
+
+const routes: Routes = [];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+
+export const appRoutingProviders: any[] = [
+
+];
diff --git a/public/docs/_examples/component-styles/dart/pubspec.yaml b/public/docs/_examples/component-styles/dart/pubspec.yaml
index 731e9e5d8e..0bdc04cb83 100755
--- a/public/docs/_examples/component-styles/dart/pubspec.yaml
+++ b/public/docs/_examples/component-styles/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/dependency-injection/dart/pubspec.yaml b/public/docs/_examples/dependency-injection/dart/pubspec.yaml
index b3b5a1cb42..0ef93066be 100644
--- a/public/docs/_examples/dependency-injection/dart/pubspec.yaml
+++ b/public/docs/_examples/dependency-injection/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/displaying-data/dart/pubspec.yaml b/public/docs/_examples/displaying-data/dart/pubspec.yaml
index 8c57ff7300..c5ef73f402 100644
--- a/public/docs/_examples/displaying-data/dart/pubspec.yaml
+++ b/public/docs/_examples/displaying-data/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/forms/dart/pubspec.yaml b/public/docs/_examples/forms/dart/pubspec.yaml
index 89b203abf0..51664a3cd5 100644
--- a/public/docs/_examples/forms/dart/pubspec.yaml
+++ b/public/docs/_examples/forms/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml b/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
index d81a211702..9575041134 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
+++ b/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
index c405c874ac..9c2413c559 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
@@ -7,7 +7,7 @@ import 'logger_service.dart';
 //////////////////
 // #docregion child-view
 @Component(
-  selector: 'my-child',
+  selector: 'my-child-view',
   template: '<input [(ngModel)]="hero">')
 class ChildViewComponent {
   String hero = 'Magneta';
@@ -20,7 +20,7 @@ class ChildViewComponent {
 // #docregion template
   template: '''
     <div>-- child view begins --</div>
-      <my-child></my-child>
+      <my-child-view></my-child-view>
     <div>-- child view ends --</div>
     <p *ngIf="comment.isNotEmpty" class="comment">{{comment}}</p>''',
 // #enddocregion template
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/do_check_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/do_check_component.dart
index 5483b9be8f..449b6e0092 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/do_check_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/do_check_component.dart
@@ -92,7 +92,7 @@ class DoCheckComponent implements DoCheck, OnChanges {
 
 @Component(
     selector: 'do-check-parent',
-    templateUrl: 'on_changes_parent_component.html',
+    templateUrl: 'do_check_parent_component.html',
     styles: const ['.parent {background: Lavender}'],
     directives: const [DoCheckComponent])
 class DoCheckParentComponent {
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/do_check_parent_component.html b/public/docs/_examples/lifecycle-hooks/dart/lib/do_check_parent_component.html
new file mode 100644
index 0000000000..ef3c30be28
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/do_check_parent_component.html
@@ -0,0 +1,13 @@
+<div class="parent">
+  <h2>{{title}}</h2>
+
+  <table>
+    <tr><td>Power: </td><td><input [(ngModel)]="power"></td></tr>
+    <tr><td>Hero.name: </td><td><input [(ngModel)]="hero.name"></td></tr>
+  </table>
+  <p><button (click)="reset()">Reset Log</button></p>
+
+  <!-- #docregion do-check -->
+  <do-check [hero]="hero" [power]="power"></do-check>
+  <!-- #enddocregion do-check -->
+</div>
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/on_changes_parent_component.html b/public/docs/_examples/lifecycle-hooks/dart/lib/on_changes_parent_component.html
index 7889ce8e91..a0fd404931 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/on_changes_parent_component.html
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/on_changes_parent_component.html
@@ -7,8 +7,7 @@
   </table>
   <p><button (click)="reset()">Reset Log</button></p>
 
-<!-- #docregion on-changes -->
+  <!-- #docregion on-changes -->
   <on-changes [hero]="hero" [power]="power"></on-changes>
-<!-- #enddocregion on-changes -->
-  <do-check [hero]="hero" [power]="power"></do-check>
+  <!-- #enddocregion on-changes -->
 </div>
diff --git a/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml b/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
index 0710ddbb86..3624f56e05 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
+++ b/public/docs/_examples/lifecycle-hooks/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/lifecycle-hooks/dart/web/main.dart b/public/docs/_examples/lifecycle-hooks/dart/web/main.dart
index 5013275e6a..f9143d4116 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/web/main.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/web/main.dart
@@ -1,8 +1,6 @@
-// #docregion
 import 'package:angular2/platform/browser.dart';
-
 import 'package:lifecycle_hooks/app_component.dart';
 
-main() {
+void main() {
   bootstrap(AppComponent);
 }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
index 4acf5de663..2470c9595e 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app.module';
 
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html
index 5c76a6056c..a0fd404931 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html
@@ -7,7 +7,7 @@
   </table>
   <p><button (click)="reset()">Reset Log</button></p>
 
-<!-- #docregion on-changes -->
+  <!-- #docregion on-changes -->
   <on-changes [hero]="hero" [power]="power"></on-changes>
-<!-- #enddocregion on-changes -->
+  <!-- #enddocregion on-changes -->
 </div>
diff --git a/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts
index 96eebf5dac..994807b5bd 100644
--- a/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts
+++ b/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts
@@ -1,3 +1,4 @@
+import { ModuleWithProviders } from '@angular/core';
 import { Routes,
          RouterModule } from '@angular/router';
 
@@ -7,4 +8,4 @@ export const routes: Routes = [
   { path: 'heroes', loadChildren: 'app/hero/hero.module.3' }
 ];
 
-export const routing = RouterModule.forRoot(routes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
diff --git a/public/docs/_examples/ngmodule/ts/app/app.routing.ts b/public/docs/_examples/ngmodule/ts/app/app.routing.ts
index 09fa0225d8..6e654ca649 100644
--- a/public/docs/_examples/ngmodule/ts/app/app.routing.ts
+++ b/public/docs/_examples/ngmodule/ts/app/app.routing.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders } from '@angular/core';
 import { Routes,
          RouterModule } from '@angular/router';
 
@@ -11,5 +12,5 @@ export const routes: Routes = [
 ];
 
 // #docregion forRoot
-export const routing = RouterModule.forRoot(routes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
 // #enddocregion forRoot
diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts
index f90fc36789..5490649283 100644
--- a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts
+++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts
@@ -1,7 +1,8 @@
+import { ModuleWithProviders } from '@angular/core';
 import { RouterModule }  from '@angular/router';
 
 import { ContactComponent } from './contact.component.3';
 
-export const routing = RouterModule.forChild([
+export const routing: ModuleWithProviders = RouterModule.forChild([
   { path: 'contact', component: ContactComponent}
 ]);
diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts
index fe9af67fbf..065e78dabd 100644
--- a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts
+++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts
@@ -1,9 +1,10 @@
+import { ModuleWithProviders } from '@angular/core';
 import { RouterModule }  from '@angular/router';
 
 import { ContactComponent } from './contact.component';
 
 // #docregion routing
-export const routing = RouterModule.forChild([
+export const routing: ModuleWithProviders = RouterModule.forChild([
   { path: 'contact', component: ContactComponent}
 ]);
 // #enddocregion
diff --git a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts b/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts
index a0e8b850b7..c9aeb83d5f 100644
--- a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts
+++ b/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts
@@ -1,3 +1,4 @@
+import { ModuleWithProviders } from '@angular/core';
 import { Routes,
          RouterModule }  from '@angular/router';
 
@@ -10,4 +11,4 @@ const routes: Routes = [
   { path: ':id', component: CrisisDetailComponent }
 ];
 
-export const routing = RouterModule.forChild(routes);
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);
diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts
index 181e48faf5..e14d4a7725 100644
--- a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts
+++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts
@@ -1,3 +1,4 @@
+import { ModuleWithProviders } from '@angular/core';
 import { Routes,
          RouterModule }  from '@angular/router';
 
@@ -15,4 +16,4 @@ const routes: Routes = [
   }
 ];
 
-export const routing = RouterModule.forChild(routes);
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);
diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts
index 951ffd7d12..7f364ee988 100644
--- a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts
+++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts
@@ -1,3 +1,4 @@
+import { ModuleWithProviders } from '@angular/core';
 import { Routes,
          RouterModule }  from '@angular/router';
 
@@ -15,4 +16,4 @@ const routes: Routes = [
   }
 ];
 
-export const routing = RouterModule.forChild(routes);
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 7015bd0767..6c253c3e4c 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -35,7 +35,7 @@
     "@angular/router": "3.0.0-rc.1",
     "@angular/router-deprecated": "2.0.0-rc.2",
     "@angular/upgrade": "2.0.0-rc.5",
-    "angular2-in-memory-web-api": "0.0.15",
+    "angular2-in-memory-web-api": "0.0.17",
     "bootstrap": "^3.3.6",
     "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
diff --git a/public/docs/_examples/pipes/dart/pubspec.yaml b/public/docs/_examples/pipes/dart/pubspec.yaml
index 4afa2870c0..8edddf0efa 100644
--- a/public/docs/_examples/pipes/dart/pubspec.yaml
+++ b/public/docs/_examples/pipes/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/pipes/e2e-spec.ts b/public/docs/_examples/pipes/e2e-spec.ts
index 01c9e5fd13..5f9c4607dc 100644
--- a/public/docs/_examples/pipes/e2e-spec.ts
+++ b/public/docs/_examples/pipes/e2e-spec.ts
@@ -64,7 +64,7 @@ describe('Pipes', function () {
   });
 
 
-  it('should support flying heroes (pure) ', function () {
+  xit('should support flying heroes (pure) ', function () {
     let nameEle = element(by.css('flying-heroes input[type="text"]'));
     let canFlyCheckEle = element(by.css('flying-heroes #can-fly'));
     let mutateCheckEle = element(by.css('flying-heroes #mutate'));
@@ -95,7 +95,7 @@ describe('Pipes', function () {
   });
 
 
-  it('should support flying heroes (impure) ', function () {
+  xit('should support flying heroes (impure) ', function () {
     let nameEle = element(by.css('flying-heroes-impure input[type="text"]'));
     let canFlyCheckEle = element(by.css('flying-heroes-impure #can-fly'));
     let mutateCheckEle = element(by.css('flying-heroes-impure #mutate'));
diff --git a/public/docs/_examples/quickstart/dart/pubspec.yaml b/public/docs/_examples/quickstart/dart/pubspec.yaml
index 0c08200992..ec9d8d2f81 100644
--- a/public/docs/_examples/quickstart/dart/pubspec.yaml
+++ b/public/docs/_examples/quickstart/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/quickstart/dart/web/styles_1.css b/public/docs/_examples/quickstart/dart/web/styles_1.css
deleted file mode 100644
index 27e60d67c0..0000000000
--- a/public/docs/_examples/quickstart/dart/web/styles_1.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/* #docregion */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-body {
-  margin: 2em;
-}
-
-/*
-* See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
-* for the full set of master styles used by the documentation samples
-*/
diff --git a/public/docs/_examples/quickstart/ts/styles.1.css b/public/docs/_examples/quickstart/ts/styles.1.css
deleted file mode 100644
index fbc30e2c9e..0000000000
--- a/public/docs/_examples/quickstart/ts/styles.1.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/* #docregion */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-body {
-  margin: 2em;
-}
-
- /*
-  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
-  * for the full set of master styles used by the documentation samples
-  */
diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
index 901b8f01d0..63e2109db3 100644
--- a/public/docs/_examples/quickstart/ts/systemjs.config.1.js
+++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
@@ -41,7 +41,7 @@
 
   // Bundled (~40 requests):
   function packUmd(pkgName) {
-    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
+    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
   }
 
   // Most environments should use UMD; some (Karma) need the individual index files
diff --git a/public/docs/_examples/router/ts/app/app.routing.1.ts b/public/docs/_examples/router/ts/app/app.routing.1.ts
index ccdff404a4..6a420d55ac 100644
--- a/public/docs/_examples/router/ts/app/app.routing.1.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.1.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import { ModuleWithProviders } from '@angular/core';
 // #docregion route-config
 import { Routes, RouterModule } from '@angular/router';
 
@@ -36,6 +37,6 @@ export const appRoutingProviders: any[] = [
 
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
 // #enddocregion route-config
 // #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.routing.2.ts b/public/docs/_examples/router/ts/app/app.routing.2.ts
index 81c04c86da..1115c9084e 100644
--- a/public/docs/_examples/router/ts/app/app.routing.2.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.2.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import { ModuleWithProviders } from '@angular/core';
 // #docregion route-config
 import { Routes, RouterModule } from '@angular/router';
 
@@ -17,5 +18,5 @@ export const appRoutingProviders: any[] = [
 
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
 // #enddocregion route-config
diff --git a/public/docs/_examples/router/ts/app/app.routing.3.ts b/public/docs/_examples/router/ts/app/app.routing.3.ts
index 2eab693570..92930849f0 100644
--- a/public/docs/_examples/router/ts/app/app.routing.3.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.3.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { CrisisListComponent } from './crisis-center/crisis-list.component';
@@ -12,4 +13,4 @@ export const appRoutingProviders: any[] = [
 
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.4.ts b/public/docs/_examples/router/ts/app/app.routing.4.ts
index 59153e9e53..ff04dd8bfd 100644
--- a/public/docs/_examples/router/ts/app/app.routing.4.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.4.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders }   from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 const appRoutes: Routes = [
@@ -9,4 +10,4 @@ export const appRoutingProviders: any[] = [
 
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.5.ts b/public/docs/_examples/router/ts/app/app.routing.5.ts
index 8334e865a5..ce153c7b1f 100644
--- a/public/docs/_examples/router/ts/app/app.routing.5.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.5.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders }   from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { loginRoutes,
@@ -12,4 +13,4 @@ export const appRoutingProviders: any[] = [
   authProviders
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.6.ts b/public/docs/_examples/router/ts/app/app.routing.6.ts
index 33465b837b..ceee844f0e 100644
--- a/public/docs/_examples/router/ts/app/app.routing.6.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.6.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders } from '@angular/core';
 // #docregion import-router
 import { Routes, RouterModule }   from '@angular/router';
 // #enddocregion import-router
@@ -32,7 +33,7 @@ export const appRoutingProviders: any[] = [
   CanDeactivateGuard
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
 // #enddocregion
 
 /* A link parameters array
diff --git a/public/docs/_examples/router/ts/app/app.routing.ts b/public/docs/_examples/router/ts/app/app.routing.ts
index 1e320cffea..bf456cba9a 100644
--- a/public/docs/_examples/router/ts/app/app.routing.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders } from '@angular/core';
 // #docregion import-router
 import { Routes, RouterModule }   from '@angular/router';
 // #enddocregion import-router
@@ -32,4 +33,4 @@ export const appRoutingProviders: any[] = [
   CanDeactivateGuard
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
index 0d53587aa4..7c7b913c31 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders }   from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { CrisisDetailComponent } from './crisis-detail.component';
@@ -17,5 +18,5 @@ const crisisCenterRoutes: Routes = [
   }
 ];
 
-export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
+export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
 // #enddocregion routes
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
index a95ab751f3..07dcf64c81 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders }   from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { CrisisDetailComponent } from './crisis-detail.component';
@@ -24,5 +25,5 @@ const crisisCenterRoutes: Routes = [
   }
 ];
 
-export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
+export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
 // #enddocregion routes
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
index 8d92662132..77cddebf0e 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import { ModuleWithProviders }   from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { CrisisDetailComponent } from './crisis-detail.component';
@@ -38,7 +39,7 @@ const crisisCenterRoutes: Routes = [
   }
 ];
 
-export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
+export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
 // #enddocregion
 
 /*
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts
index fa5d1e887c..e21767ecb6 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import { ModuleWithProviders }   from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { CrisisDetailComponent } from './crisis-detail.component';
@@ -40,7 +41,7 @@ const crisisCenterRoutes: Routes = [
   }
 ];
 
-export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
+export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
 // #enddocregion
 
 /*
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts
index cb7cda5d31..a6fbb5bddf 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import { ModuleWithProviders }   from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { CrisisCenterComponent } from './crisis-center.component';
@@ -49,4 +50,4 @@ const crisisCenterRoutes: Routes = [
   }
 ];
 
-export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
+export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
index 2d044f9de9..77bc573718 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import { ModuleWithProviders }   from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { CrisisCenterComponent } from './crisis-center.component';
@@ -45,6 +46,6 @@ const crisisCenterRoutes: Routes = [
   }
 ];
 
-export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
+export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
 // #enddocregion lazy-load-crisis-center
 // #enddocregion
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts b/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
index 89270ec492..4831fdd97b 100644
--- a/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
+++ b/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { HeroListComponent }    from './hero-list.component';
@@ -11,5 +12,5 @@ const heroesRoutes: Routes = [
 // #enddocregion hero-detail-route
 ];
 
-export const heroesRouting = RouterModule.forChild(heroesRoutes);
+export const heroesRouting: ModuleWithProviders = RouterModule.forChild(heroesRoutes);
 // #enddocregion
diff --git a/public/docs/_examples/router/ts/app/main.ts b/public/docs/_examples/router/ts/app/main.ts
index ba9421d573..961a226688 100644
--- a/public/docs/_examples/router/ts/app/main.ts
+++ b/public/docs/_examples/router/ts/app/main.ts
@@ -1,6 +1,6 @@
 // #docregion
-import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app.module';
 
-browserDynamicPlatform().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/server-communication/dart/pubspec.yaml b/public/docs/_examples/server-communication/dart/pubspec.yaml
index 3d8e06cbe0..1d381b2288 100644
--- a/public/docs/_examples/server-communication/dart/pubspec.yaml
+++ b/public/docs/_examples/server-communication/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
   http: ^0.11.3+3
diff --git a/public/docs/_examples/server-communication/ts/app/app.module.1.ts b/public/docs/_examples/server-communication/ts/app/app.module.1.ts
index 51e52573cb..51329e31cb 100644
--- a/public/docs/_examples/server-communication/ts/app/app.module.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/app.module.1.ts
@@ -14,7 +14,7 @@ import { AppComponent } from './app.component';
     JsonpModule
   ],
   declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
+  bootstrap:    [ AppComponent ]
 })
 export class AppModule { }
 
diff --git a/public/docs/_examples/server-communication/ts/app/app.module.ts b/public/docs/_examples/server-communication/ts/app/app.module.ts
index 528110661b..95490f2b1d 100644
--- a/public/docs/_examples/server-communication/ts/app/app.module.ts
+++ b/public/docs/_examples/server-communication/ts/app/app.module.ts
@@ -2,11 +2,12 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpModule, JsonpModule, XHRBackend } from '@angular/http';
+import { HttpModule, JsonpModule }  from '@angular/http';
 
-import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
-import { HeroData } from './hero-data';
-import { AppComponent } from './app.component';
+import { InMemoryWebApiModule }     from 'angular2-in-memory-web-api';
+import { HeroData }                 from './hero-data';
+
+import { AppComponent }             from './app.component';
 
 import { HeroListComponent }        from './toh/hero-list.component';
 import { HeroListPromiseComponent } from './toh/hero-list.component.promise';
@@ -19,11 +20,10 @@ import { WikiSmartComponent } from './wiki/wiki-smart.component';
     BrowserModule,
     FormsModule,
     HttpModule,
-    JsonpModule
-  ],
-  providers: [
-    { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
-    { provide: SEED_DATA,  useClass: HeroData }                // in-mem server data
+    JsonpModule,
+    // #docregion in-mem-web-api
+    InMemoryWebApiModule.forRoot(HeroData)
+    // #enddocregion in-mem-web-api
   ],
   declarations: [
     AppComponent,
diff --git a/public/docs/_examples/server-communication/ts/app/hero-data.ts b/public/docs/_examples/server-communication/ts/app/hero-data.ts
index ad10b464c7..e5e0bab986 100644
--- a/public/docs/_examples/server-communication/ts/app/hero-data.ts
+++ b/public/docs/_examples/server-communication/ts/app/hero-data.ts
@@ -1,5 +1,6 @@
 // #docregion
-export class HeroData {
+import { InMemoryDbService } from 'angular2-in-memory-web-api';
+export class HeroData implements InMemoryDbService {
   createDb() {
     let heroes = [
       { id: '1', name: 'Windstorm' },
diff --git a/public/docs/_examples/structural-directives/dart/pubspec.yaml b/public/docs/_examples/structural-directives/dart/pubspec.yaml
index daba4aa174..3a8e521ee9 100644
--- a/public/docs/_examples/structural-directives/dart/pubspec.yaml
+++ b/public/docs/_examples/structural-directives/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/style-guide/ts/app/app.routes.ts b/public/docs/_examples/style-guide/ts/app/app.routes.ts
index 3d5d6b3c15..1fb26f08ea 100644
--- a/public/docs/_examples/style-guide/ts/app/app.routes.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.routes.ts
@@ -1,4 +1,4 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { AppComponent as S0101 } from '../01-01/app';
 // import { AppComponent as S0207 } from '../02-07/app';
@@ -27,7 +27,7 @@ import { AppComponent as S0101 } from '../01-01/app';
 // import { AppComponent as S0704 } from '../07-04/app';
 // import { AppComponent as S0901 } from '../09-01/app';
 
-export const routes: RouterConfig = [
+export const routes: Routes = [
   { path: '', redirectTo: '/01-01', pathMatch: 'full' },
   { path: '01-01', component: S0101 },
   // { path: '02-07', component: S0207 },
@@ -56,4 +56,3 @@ export const routes: RouterConfig = [
   // { path: '07-04', component: S0704 },
   // { path: '09-01', component: S0901 },
 ];
-
diff --git a/public/docs/_examples/style-guide/ts/app/main.ts b/public/docs/_examples/style-guide/ts/app/main.ts
index 77e1c29934..6e2dfd46b7 100644
--- a/public/docs/_examples/style-guide/ts/app/main.ts
+++ b/public/docs/_examples/style-guide/ts/app/main.ts
@@ -2,16 +2,14 @@ import { NgModule } from '@angular/core';
 import { browserDynamicPlatform }   from '@angular/platform-browser-dynamic';
 import { BrowserModule }            from '@angular/platform-browser';
 
-import { HttpModule,
-         XHRBackend }   from '@angular/http';
+import { HttpModule }           from '@angular/http';
+import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
+
 import { RouterModule } from '@angular/router';
 
 import { HashLocationStrategy,
          LocationStrategy } from '@angular/common';
 
-import { InMemoryBackendService,
-         SEED_DATA }       from 'angular2-in-memory-web-api';
-
 import 'rxjs/add/operator/map';
 
 import { HeroData }     from './hero-data';
@@ -49,6 +47,7 @@ const moduleMetadata = {
   imports: [
     BrowserModule,
     HttpModule,
+    InMemoryWebApiModule.forRoot(HeroData),
 
     s0101.AppModule,
     s0207.AppModule,
@@ -77,17 +76,16 @@ const moduleMetadata = {
     s0704.AppModule,
     s0901.AppModule,
 
+
     RouterModule.forRoot([
       { path: '', redirectTo: '/01-01', pathMatch: 'full' }
     ], {/* enableTracing: true */}),
   ],
-  declarations: [AppComponent],
   providers: [
-    { provide: LocationStrategy, useClass: HashLocationStrategy },
-    { provide: XHRBackend, useClass: InMemoryBackendService },
-    { provide: SEED_DATA,  useClass: HeroData }
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
   ],
-  bootstrap: [ AppComponent ]
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
 };
 
 @NgModule(moduleMetadata)
diff --git a/public/docs/_examples/styles.css b/public/docs/_examples/styles.css
index 62ddfa5121..d7b83f9e81 100644
--- a/public/docs/_examples/styles.css
+++ b/public/docs/_examples/styles.css
@@ -1,3 +1,4 @@
+/* #docregion , quickstart, toh */
 /* Master Styles */
 h1 {
   color: #369;
@@ -12,10 +13,12 @@ h2, h3 {
 body {
   margin: 2em;
 }
+/* #enddocregion quickstart */
 body, input[text], button {
   color: #888;
   font-family: Cambria, Georgia;
 }
+/* #enddocregion toh */
 a {
   cursor: pointer;
   cursor: hand;
@@ -135,7 +138,7 @@ nav a.active {
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
-
+/* #docregion toh */
 /* everywhere else */
 * {
   font-family: Arial, Helvetica, sans-serif;
diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js
index 1921a431c0..2fb97dbfc8 100644
--- a/public/docs/_examples/systemjs.config.js
+++ b/public/docs/_examples/systemjs.config.js
@@ -40,7 +40,7 @@
 
   // Bundled (~40 requests):
   function packUmd(pkgName) {
-    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
+    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
   }
 
   // Most environments should use UMD; some (Karma) need the individual index files
diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.dart b/public/docs/_examples/template-syntax/dart/lib/app_component.dart
index 6d9199c175..6a3def5aa4 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/app_component.dart
@@ -108,8 +108,7 @@ class AppComponent implements OnInit, AfterViewInit {
 
   bool onSave([UIEvent event = null]) {
     HtmlElement el = event?.target;
-    var evtMsg =
-        event != null ? ' Event target is ${el.innerHtml}.' : '';
+    var evtMsg = event != null ? ' Event target is ${el.innerHtml}.' : '';
     alerter('Saved. $evtMsg');
     return false;
   }
@@ -126,8 +125,12 @@ class AppComponent implements OnInit, AfterViewInit {
   }
 
   String getStyles(Element el) {
-    var showStyles = setStyles();
-    return JSON.encode(showStyles);
+    final style = el.style;
+    final Map styles = <String, String>{};
+    for (var i = 0; i < style.length; i++) {
+      styles[style.item(i)] = style.getPropertyValue(style.item(i));
+    }
+    return JSON.encode(styles);
   }
 
   Map<String, bool> _previousClasses = {};
@@ -140,8 +143,8 @@ class AppComponent implements OnInit, AfterViewInit {
     };
     // #docregion setClasses
     // compensate for DevMode (sigh)
-    if (JSON.encode(_previousClasses) ==
-        JSON.encode(classes)) return _previousClasses;
+    if (JSON.encode(_previousClasses) == JSON.encode(classes))
+      return _previousClasses;
     _previousClasses = classes;
     // #enddocregion setClasses
     return classes;
@@ -149,8 +152,8 @@ class AppComponent implements OnInit, AfterViewInit {
   // #enddocregion setClasses
 
   // #docregion setStyles
-  Map setStyles() {
-    return {
+  Map<String, String> setStyles() {
+    return <String, String>{
       'font-style': canSave ? 'italic' : 'normal', // italic
       'font-weight': !isUnchanged ? 'bold' : 'normal', // normal
       'font-size': isSpecial ? '24px' : '8px' // 24px
@@ -158,8 +161,27 @@ class AppComponent implements OnInit, AfterViewInit {
   }
   // #enddocregion setStyles
 
+  // #docregion NgStyle
+  bool isItalic = false;
+  bool isBold = false;
+  String fontSize = 'large';
+
+  Map<String, String> setStyle() {
+    return {
+      'font-style': isItalic ? 'italic' : 'normal',
+      'font-weight': isBold ? 'bold' : 'normal',
+      'font-size': fontSize
+    };
+  }
+  // #enddocregion NgStyle
+
   String title = 'Template Syntax';
+  // #docregion evil-title
+  String evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
+  // #enddocregion evil-title
+
   String toeChoice;
+
   String toeChooser(Element picker) {
     List<Element> choices = picker.children;
     for (var i = 0; i < choices.length; i++) {
@@ -187,13 +209,16 @@ class AppComponent implements OnInit, AfterViewInit {
   int heroesNoTrackByChangeCount = 0;
   int heroesWithTrackByChangeCount = 0;
 
-  @ViewChildren('noTrackBy') QueryList<ElementRef> childrenNoTrackBy;
-  @ViewChildren('withTrackBy') QueryList<ElementRef> childrenWithTrackBy;
+  @ViewChildren('noTrackBy')
+  QueryList<ElementRef> childrenNoTrackBy;
+  @ViewChildren('withTrackBy')
+  QueryList<ElementRef> childrenWithTrackBy;
 
   void _detectNgForTrackByEffects() {
     /// Converts [viewChildren] to a list of [Element].
     List<Element> _extractChildren(QueryList<ElementRef> viewChildren) =>
-        viewChildren.toList()[0].nativeElement.children.toList() as List<Element>;
+        viewChildren.toList()[0].nativeElement.children.toList()
+        as List<Element>;
 
     {
       // Updates 'without TrackBy' statistics.
diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.html b/public/docs/_examples/template-syntax/dart/lib/app_component.html
index c7542c3039..9fd72765ed 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.html
+++ b/public/docs/_examples/template-syntax/dart/lib/app_component.html
@@ -197,13 +197,18 @@ button</button>
 <!-- #enddocregion property-binding-7 -->
 
 <!-- #docregion property-binding-vs-interpolation -->
-Interpolated: <img src="{{heroImageUrl}}"><br>
-Property bound: <img [src]="heroImageUrl">
+<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
 
-<div>The interpolated title is {{title}}</div>
-<div [innerHTML]="'The [innerHTML] title is '+title"></div>
+<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <!-- #enddocregion property-binding-vs-interpolation -->
 
+<!-- #docregion property-binding-vs-interpolation-sanitization -->
+<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
+<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
+<!-- #enddocregion property-binding-vs-interpolation-sanitization -->
+
 <a class="to-toc" href="#toc">top</a>
 
 <!-- attribute binding -->
@@ -409,6 +414,18 @@ bindon-ngModel
 <!-- NgStyle binding -->
 <hr><h2 id="ngStyle">NgStyle Binding</h2>
 
+<!-- #docregion NgStyle -->
+<div>
+  <p [ngStyle]="setStyle()" #styleP>Change style of this text!</p>
+
+  <label>Italic: <input type="checkbox" [(ngModel)]="isItalic"></label> |
+  <label>Bold: <input type="checkbox" [(ngModel)]="isBold"></label> |
+  <label>Size: <input type="text" [(ngModel)]="fontSize"></label>
+
+  <p>Style set to: <code>'{{styleP.style.cssText}}'</code></p>
+</div>
+<!-- #enddocregion NgStyle -->
+
 <!-- #docregion NgStyle-1 -->
 <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
   This div is x-large.
diff --git a/public/docs/_examples/template-syntax/dart/pubspec.yaml b/public/docs/_examples/template-syntax/dart/pubspec.yaml
index 92574e0a45..f27859910c 100644
--- a/public/docs/_examples/template-syntax/dart/pubspec.yaml
+++ b/public/docs/_examples/template-syntax/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-1/dart/pubspec.yaml b/public/docs/_examples/toh-1/dart/pubspec.yaml
index 9657ed659d..da508674f5 100644
--- a/public/docs/_examples/toh-1/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-1/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-1/e2e-spec.ts b/public/docs/_examples/toh-1/e2e-spec.ts
index 15acf6e434..51a935acab 100644
--- a/public/docs/_examples/toh-1/e2e-spec.ts
+++ b/public/docs/_examples/toh-1/e2e-spec.ts
@@ -19,7 +19,7 @@ class Hero {
     let _name = await detail.element(by.css('h2')).getText();
     return {
       id: +_id.substr(_id.indexOf(' ') + 1),
-      name: _name.substr(0, _name.indexOf(' '))
+      name: _name.substr(0, _name.lastIndexOf(' '))
     };
   }
 }
diff --git a/public/docs/_examples/toh-2/dart/pubspec.yaml b/public/docs/_examples/toh-2/dart/pubspec.yaml
index 9657ed659d..da508674f5 100644
--- a/public/docs/_examples/toh-2/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-2/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-2/e2e-spec.ts b/public/docs/_examples/toh-2/e2e-spec.ts
index 256ffbb5d7..617ca38a1f 100644
--- a/public/docs/_examples/toh-2/e2e-spec.ts
+++ b/public/docs/_examples/toh-2/e2e-spec.ts
@@ -31,7 +31,7 @@ class Hero {
         let _name = await detail.element(by.css('h2')).getText();
         return {
             id: +_id.substr(_id.indexOf(' ') + 1),
-            name: _name.substr(0, _name.indexOf(' '))
+            name: _name.substr(0, _name.lastIndexOf(' '))
         };
     }
 }
diff --git a/public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts b/public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts
index 10475a0954..801c550130 100644
--- a/public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts
+++ b/public/docs/_examples/toh-2/ts-snippets/app.component.snippets.pt2.ts
@@ -40,7 +40,7 @@
 // #enddocregion ng-if
 
 // #docregion hero-array-1
-public heroes = HEROES;
+heroes = HEROES;
 // #enddocregion hero-array-1
 
 // #docregion heroes-template-1
diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts
index 5d10fc55a9..3e7c86f150 100644
--- a/public/docs/_examples/toh-2/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-2/ts/app/app.component.ts
@@ -102,6 +102,8 @@ export class AppComponent {
   // #enddocregion selected-hero
 
   // #docregion on-select
-  onSelect(hero: Hero) { this.selectedHero = hero; }
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
   // #enddocregion on-select
 }
diff --git a/public/docs/_examples/toh-3/dart/pubspec.yaml b/public/docs/_examples/toh-3/dart/pubspec.yaml
index 9657ed659d..da508674f5 100644
--- a/public/docs/_examples/toh-3/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-3/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-3/e2e-spec.ts b/public/docs/_examples/toh-3/e2e-spec.ts
index 070dd69ebd..0f9c747b90 100644
--- a/public/docs/_examples/toh-3/e2e-spec.ts
+++ b/public/docs/_examples/toh-3/e2e-spec.ts
@@ -31,7 +31,7 @@ class Hero {
         let _name = await detail.element(by.css('h2')).getText();
         return {
             id: +_id.substr(_id.indexOf(' ') + 1),
-            name: _name.substr(0, _name.indexOf(' '))
+            name: _name.substr(0, _name.lastIndexOf(' '))
         };
     }
 }
diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts
index fe5a5b98ad..022efc31eb 100644
--- a/public/docs/_examples/toh-3/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-3/ts/app/app.component.ts
@@ -89,5 +89,7 @@ export class AppComponent {
   heroes = HEROES;
   selectedHero: Hero;
 
-  onSelect(hero: Hero) { this.selectedHero = hero; }
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
 }
diff --git a/public/docs/_examples/toh-4/dart/pubspec.yaml b/public/docs/_examples/toh-4/dart/pubspec.yaml
index 9657ed659d..da508674f5 100644
--- a/public/docs/_examples/toh-4/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-4/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-4/e2e-spec.ts b/public/docs/_examples/toh-4/e2e-spec.ts
index 8f7852a3e3..8c109167af 100644
--- a/public/docs/_examples/toh-4/e2e-spec.ts
+++ b/public/docs/_examples/toh-4/e2e-spec.ts
@@ -31,7 +31,7 @@ class Hero {
         let _name = await detail.element(by.css('h2')).getText();
         return {
             id: +_id.substr(_id.indexOf(' ') + 1),
-            name: _name.substr(0, _name.indexOf(' '))
+            name: _name.substr(0, _name.lastIndexOf(' '))
         };
     }
 }
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.ts b/public/docs/_examples/toh-4/ts/app/app.component.1.ts
index 5a0a4d0524..675c7a64d0 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.1.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.1.ts
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
 
 import { Hero } from './hero';
 // #docregion hero-service-import
-import { HeroService } from './hero.service.1';
+import { HeroService } from './hero.service.2';
 // #enddocregion hero-service-import
 
 // Testable but never shown
@@ -41,7 +41,7 @@ export class AppComponent implements OnInit {
   constructor(private heroService: HeroService) { }
   // #enddocregion ctor
   // #docregion getHeroes
-  getHeroes() {
+  getHeroes(): void {
     // #docregion get-heroes
     this.heroes = this.heroService.getHeroes();
     // #enddocregion get-heroes
@@ -50,7 +50,7 @@ export class AppComponent implements OnInit {
 
   // #docregion ng-on-init
   // #docregion on-init
-  ngOnInit() {
+  ngOnInit(): void {
     // #enddocregion on-init
     this.getHeroes();
     // #docregion on-init
@@ -58,6 +58,8 @@ export class AppComponent implements OnInit {
   // #enddocregion on-init
   // #enddocregion ng-on-init
 
-  onSelect(hero: Hero) { this.selectedHero = hero; }
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
   // #docregion on-init
 }
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts
index 00bee85659..b16acb8375 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -82,14 +82,16 @@ export class AppComponent implements OnInit {
   constructor(private heroService: HeroService) { }
 
 // #docregion get-heroes
-  getHeroes() {
+  getHeroes(): void {
     this.heroService.getHeroes().then(heroes => this.heroes = heroes);
   }
 // #enddocregion get-heroes
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.getHeroes();
   }
 
-  onSelect(hero: Hero) { this.selectedHero = hero; }
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
 }
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts
index 5a15d5c285..15e4c44285 100644
--- a/public/docs/_examples/toh-4/ts/app/hero.service.1.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero.service.1.ts
@@ -1,19 +1,25 @@
 // #docplaster
 // #docregion
-// #docregion empty-class
+// #docregion empty-class, full
 import { Injectable } from '@angular/core';
 
 // #enddocregion empty-class
+import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
 
 // #docregion empty-class, getHeroes-stub
 @Injectable()
 export class HeroService {
-  // #enddocregion empty-class
-  getHeroes() {
-    // #enddocregion getHeroes-stub
-    return HEROES;
-    // #docregion getHeroes-stub
+  // #enddocregion empty-class, getHeroes-stub, full
+  /*
+  // #docregion getHeroes-stub
+  getHeroes(): void {
   }
-  // #docregion empty-class
+  // #enddocregion getHeroes-stub
+  */
+  // #docregion full
+  getHeroes(): Hero[] {
+    return HEROES;
+  }
+  // #docregion empty-class, getHeroes-stub
 }
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.2.ts b/public/docs/_examples/toh-4/ts/app/hero.service.2.ts
new file mode 100644
index 0000000000..d14fe02410
--- /dev/null
+++ b/public/docs/_examples/toh-4/ts/app/hero.service.2.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { HEROES } from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+
+  getHeroes(): Hero[] {
+    return HEROES;
+  }
+}
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.ts b/public/docs/_examples/toh-4/ts/app/hero.service.ts
index 87eb9ec673..01272c1395 100644
--- a/public/docs/_examples/toh-4/ts/app/hero.service.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero.service.ts
@@ -9,14 +9,14 @@ import { HEROES } from './mock-heroes';
 @Injectable()
 export class HeroService {
   // #docregion get-heroes
-  getHeroes() {
+  getHeroes(): Promise<Hero[]> {
     return Promise.resolve(HEROES);
   }
   // #enddocregion get-heroes, just-get-heroes
   // #enddocregion
   // See the "Take it slow" appendix
   // #docregion get-heroes-slowly
-  getHeroesSlowly() {
+  getHeroesSlowly(): Promise<Hero[]> {
     return new Promise<Hero[]>(resolve =>
       setTimeout(() => resolve(HEROES), 2000) // 2 seconds
     );
diff --git a/public/docs/_examples/toh-5/dart/lib/app_component.dart b/public/docs/_examples/toh-5/dart/lib/app_component.dart
index ecf2bf4f3c..ba1ed39c88 100644
--- a/public/docs/_examples/toh-5/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/app_component.dart
@@ -1,18 +1,18 @@
 // #docplaster
 // #docregion
 import 'package:angular2/core.dart';
+// #docregion import-router
 import 'package:angular2/router.dart';
+// #enddocregion import-router
 
-import 'package:angular2_tour_of_heroes/heroes_component.dart';
-import 'package:angular2_tour_of_heroes/hero_service.dart';
-import 'package:angular2_tour_of_heroes/dashboard_component.dart';
-// #docregion hero-detail-import
-import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
-// #enddocregion hero-detail-import
+import 'dashboard_component.dart';
+import 'hero_detail_component.dart';
+import 'hero_service.dart';
+import 'heroes_component.dart';
 
 @Component(
     selector: 'my-app',
-    // #docregion template
+    // #docregion template, template-v3
     template: '''
       <h1>{{title}}</h1>
       <nav>
@@ -20,26 +20,32 @@ import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
         <a [routerLink]="['Heroes']">Heroes</a>
       </nav>
       <router-outlet></router-outlet>''',
-    // #enddocregion template
-    // #docregion style-urls
+    // #enddocregion template, template-v3
+    // #docregion styleUrls
     styleUrls: const ['app_component.css'],
-    // #enddocregion style-urls
+    // #enddocregion styleUrls
+    // #docregion directives-and-providers
     directives: const [ROUTER_DIRECTIVES],
     providers: const [HeroService, ROUTER_PROVIDERS])
+// #enddocregion directives-and-providers
+// #docregion heroes
 @RouteConfig(const [
-  // #docregion dashboard-route
+  // #enddocregion heroes
+  // #docregion dashboard
   const Route(
       path: '/dashboard',
       name: 'Dashboard',
       component: DashboardComponent,
       useAsDefault: true),
-  // #enddocregion dashboard-route
-  // #docregion hero-detail-route
+  // #enddocregion dashboard
+  // #docregion hero-detail
   const Route(
       path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
-  // #enddocregion hero-detail-route
+  // #enddocregion hero-detail
+  // #docregion heroes
   const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
 ])
+// #enddocregion heroes
 class AppComponent {
   String title = 'Tour of Heroes';
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/app_component_1.dart b/public/docs/_examples/toh-5/dart/lib/app_component_1.dart
index 880974b28f..8455181dbc 100644
--- a/public/docs/_examples/toh-5/dart/lib/app_component_1.dart
+++ b/public/docs/_examples/toh-5/dart/lib/app_component_1.dart
@@ -1,25 +1,40 @@
 // #docplaster
-// #docregion
+// #docregion , v2
 import 'package:angular2/core.dart';
-// #enddocregion
-import 'package:angular2/router.dart'; // for testing only
+// #enddocregion ,
+// #docregion v2
+import 'package:angular2/router.dart';
 // #docregion
 
 import 'hero_service.dart';
 import 'heroes_component.dart';
 
+// #enddocregion v2
 @Component(
     selector: 'my-app',
     template: '''
       <h1>{{title}}</h1>
       <my-heroes></my-heroes>''',
     directives: const [HeroesComponent],
-    providers: const [
-      // #enddocregion
-      ROUTER_PROVIDERS,
-      // #docregion
-      HeroService
-    ])
+    providers: const [HeroService])
+// #enddocregion ,
+class Bogus {}
+
+// #docregion v2
+@Component(
+    selector: 'my-app',
+    // #docregion template-v2
+    template: '''
+      <h1>{{title}}</h1>
+      <a [routerLink]="['Heroes']">Heroes</a>
+      <router-outlet></router-outlet>''',
+    // #enddocregion template-v2
+    directives: const [ROUTER_DIRECTIVES],
+    providers: const [HeroService, ROUTER_PROVIDERS])
+@RouteConfig(const [
+  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
+])
+// #docregion ,
 class AppComponent {
   String title = 'Tour of Heroes';
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/app_component_2.dart b/public/docs/_examples/toh-5/dart/lib/app_component_2.dart
deleted file mode 100644
index 024c2b6ac9..0000000000
--- a/public/docs/_examples/toh-5/dart/lib/app_component_2.dart
+++ /dev/null
@@ -1,31 +0,0 @@
-// #docplaster
-// #docregion
-import 'package:angular2/core.dart';
-// #docregion import-router
-import 'package:angular2/router.dart';
-// #enddocregion import-router
-
-import 'hero_service.dart';
-import 'heroes_component.dart';
-
-@Component(
-    selector: 'my-app',
-    // #docregion template
-    template: '''
-      <h1>{{title}}</h1>
-      <a [routerLink]="['Heroes']">Heroes</a>
-      <router-outlet></router-outlet>''',
-    // #enddocregion template
-    // #docregion directives-and-providers
-    directives: const [ROUTER_DIRECTIVES],
-    providers: const [ROUTER_PROVIDERS, HeroService]
-    // #enddocregion directives-and-providers
-)
-// #docregion route-config
-@RouteConfig(const [
-  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
-])
-// #enddocregion route-config
-class AppComponent {
-  String title = 'Tour of Heroes';
-}
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
index ff0fb8c0d1..8b2f6fe4af 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
@@ -12,9 +12,9 @@ import 'hero_service.dart';
 
 @Component(
     selector: 'my-dashboard',
-    // #docregion template-url
+    // #docregion templateUrl
     templateUrl: 'dashboard_component.html',
-    // #enddocregion template-url
+    // #enddocregion templateUrl
     // #docregion css
     styleUrls: const ['dashboard_component.css']
     // #enddocregion css
@@ -35,7 +35,7 @@ class DashboardComponent implements OnInit {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
-  // #docregion goto-detail
+  // #docregion gotoDetail
   void gotoDetail(Hero hero) {
     var link = [
       'HeroDetail',
@@ -43,5 +43,5 @@ class DashboardComponent implements OnInit {
     ];
     _router.navigate(link);
   }
-// #enddocregion goto-detail
+// #enddocregion gotoDetail
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
index aa9afb38d7..c5304f572a 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
@@ -22,5 +22,5 @@ class DashboardComponent implements OnInit {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
-  gotoDetail() {/* not implemented yet */}
+  gotoDetail(Hero hero) {/* not implemented yet */}
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
index a6c506a231..a99528cbaa 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
@@ -1,30 +1,28 @@
 // #docplaster
 // #docregion , v2
+// #docregion added-imports
 import 'dart:async';
-import 'dart:html';
+import 'dart:html' show window;
 
-// #docregion import-oninit
+// #enddocregion added-imports
 import 'package:angular2/core.dart';
-// #enddocregion import-oninit
-// #docregion import-route-params
+// #docregion added-imports
 import 'package:angular2/router.dart';
-// #enddocregion import-route-params
 
+// #enddocregion added-imports
 import 'hero.dart';
-// #docregion import-hero-service
+// #docregion added-imports
 import 'hero_service.dart';
-// #enddocregion import-hero-service
+// #enddocregion added-imports
 
-// #docregion extract-template
 @Component(
     selector: 'my-hero-detail',
-    // #docregion template-url
+    // #docregion templateUrl
     templateUrl: 'hero_detail_component.html',
-    // #enddocregion template-url, v2
+    // #enddocregion templateUrl, v2
     styleUrls: const ['hero_detail_component.css']
     // #docregion v2
     )
-// #enddocregion extract-template
 // #docregion implement
 class HeroDetailComponent implements OnInit {
   // #enddocregion implement
@@ -36,19 +34,17 @@ class HeroDetailComponent implements OnInit {
   HeroDetailComponent(this._heroService, this._routeParams);
   // #enddocregion ctor
 
-  // #docregion ng-oninit
+  // #docregion ngOnInit
   Future<Null> ngOnInit() async {
-    // #docregion get-id
     var idString = _routeParams.get('id');
-    var id = int.parse(idString, onError: (_) => null);
-    // #enddocregion get-id
+    var id = int.parse(idString ?? '', onError: (_) => null);
     if (id != null) hero = await (_heroService.getHero(id));
   }
-  // #enddocregion ng-oninit
+  // #enddocregion ngOnInit
 
-  // #docregion go-back
+  // #docregion goBack
   void goBack() {
     window.history.back();
   }
-  // #enddocregion go-back
+  // #enddocregion goBack
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/hero_service.dart b/public/docs/_examples/toh-5/dart/lib/hero_service.dart
index e626b38200..b8e04a67c6 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero_service.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero_service.dart
@@ -16,8 +16,8 @@ class HeroService {
         const Duration(seconds: 2), () => mockHeroes);
   }
 
-  // #docregion get-hero
+  // #docregion getHero
   Future<Hero> getHero(int id) async =>
       (await getHeroes()).firstWhere((hero) => hero.id == id);
-  // #enddocregion get-hero
+  // #enddocregion getHero
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
index 48e1a167bf..e19c3ab3be 100644
--- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
@@ -6,27 +6,28 @@ import 'package:angular2/core.dart';
 import 'package:angular2/router.dart';
 
 import 'hero.dart';
-import 'hero_detail_component.dart';
 import 'hero_service.dart';
 
-// #docregion metadata, heroes-component-renaming
+// #docregion metadata, renaming
 @Component(
     selector: 'my-heroes',
-    // #enddocregion heroes-component-renaming
+    // #enddocregion renaming
     templateUrl: 'heroes_component.html',
-    styleUrls: const ['heroes_component.css'],
-    directives: const [HeroDetailComponent])
-// #docregion heroes-component-renaming
-// #enddocregion heroes-component-renaming, metadata
-// #docregion class, heroes-component-renaming
+    styleUrls: const ['heroes_component.css']
+// #docregion renaming
+)
+// #enddocregion metadata
+// #docregion class
 class HeroesComponent implements OnInit {
-  // #enddocregion heroes-component-renaming
+  // #enddocregion renaming
   final Router _router;
   final HeroService _heroService;
   List<Hero> heroes;
   Hero selectedHero;
 
+  // #docregion renaming
   HeroesComponent(this._heroService, this._router);
+  // #enddocregion renaming
 
   Future<Null> getHeroes() async {
     heroes = await _heroService.getHeroes();
@@ -44,5 +45,5 @@ class HeroesComponent implements OnInit {
         'HeroDetail',
         {'id': selectedHero.id.toString()}
       ]);
-  // #docregion heroes-component-renaming
+  // #docregion renaming
 }
diff --git a/public/docs/_examples/toh-5/dart/pubspec.yaml b/public/docs/_examples/toh-5/dart/pubspec.yaml
index 9657ed659d..da508674f5 100644
--- a/public/docs/_examples/toh-5/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-5/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/toh-5/dart/web/styles_1.css b/public/docs/_examples/toh-5/dart/web/styles_1.css
deleted file mode 100644
index dee6d5b8ca..0000000000
--- a/public/docs/_examples/toh-5/dart/web/styles_1.css
+++ /dev/null
@@ -1,24 +0,0 @@
-/* #docregion toh-excerpt */
-/* Master Styles */
-h1 {
-  color: #369; 
-  font-family: Arial, Helvetica, sans-serif;   
-  font-size: 250%;
-}
-h2, h3 { 
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;   
-  font-weight: lighter;
-}
-body { 
-  margin: 2em; 
-}
-body, input[text], button { 
-  color: #888; 
-  font-family: Cambria, Georgia; 
-}
-/* . . . */
-/* everywhere else */
-* { 
-  font-family: Arial, Helvetica, sans-serif; 
-}
diff --git a/public/docs/_examples/toh-5/e2e-spec.ts b/public/docs/_examples/toh-5/e2e-spec.ts
index e0dc96b63e..2ae0d5b93b 100644
--- a/public/docs/_examples/toh-5/e2e-spec.ts
+++ b/public/docs/_examples/toh-5/e2e-spec.ts
@@ -1,113 +1,190 @@
 /// <reference path='../_protractor/e2e.d.ts' />
 'use strict';
-describe('Tutorial', function () {
 
-  beforeAll(function () {
-    browser.get('');
-  });
+const expectedH1 = 'Tour of Heroes';
+const expectedTitle = `Angular 2 ${expectedH1}`;
+const targetHero = { id: 15, name: 'Magneta' };
+const targetHeroDashboardIndex = 3;
+const nameSuffix = 'X';
+const newHeroName = targetHero.name + nameSuffix;
 
-  function getPageStruct() {
-    let hrefEles = element.all(by.css('my-app a'));
+type WPromise<T> = webdriver.promise.Promise<T>;
+
+class Hero {
+    id: number;
+    name: string;
+
+    // Factory methods
+
+    // Get hero from s formatted as '<id> <name>'.
+    static fromString(s: string): Hero {
+        return {
+            id: +s.substr(0, s.indexOf(' ')),
+            name: s.substr(s.indexOf(' ') + 1),
+        };
+    }
+
+    // Get hero id and name from the given detail element.
+    static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+        // Get hero id from the first <div>
+        let _id = await detail.all(by.css('div')).first().getText();
+        // Get name from the h2
+        let _name = await detail.element(by.css('h2')).getText();
+        return {
+            id: +_id.substr(_id.indexOf(' ') + 1),
+            name: _name.substr(0, _name.lastIndexOf(' '))
+        };
+    }
+}
+
+describe('Tutorial part 5', () => {
+
+  beforeAll(() => browser.get(''));
+
+  function getPageElts() {
+    let hrefElts = element.all(by.css('my-app a'));
 
     return {
-      hrefs: hrefEles,
-      myDashboardHref: hrefEles.get(0),
-      myDashboardParent: element(by.css('my-app my-dashboard')),
-      topHeroes: element.all(by.css('my-app my-dashboard .module.hero')),
+      hrefs: hrefElts,
 
-      myHeroesHref: hrefEles.get(1),
-      myHeroesParent: element(by.css('my-app my-heroes')),
+      myDashboardHref: hrefElts.get(0),
+      myDashboard: element(by.css('my-app my-dashboard')),
+      topHeroes: element.all(by.css('my-app my-dashboard > div h4')),
+
+      myHeroesHref: hrefElts.get(1),
+      myHeroes: element(by.css('my-app my-heroes')),
       allHeroes: element.all(by.css('my-app my-heroes li')),
+      selectedHero: element(by.css('my-app li.selected')),
+      selectedHeroSubview: element(by.css('my-app my-heroes > div')),
 
-      heroDetail: element(by.css('my-app my-hero-detail'))
+      heroDetail: element(by.css('my-app my-hero-detail > div'))
     };
   }
 
-  it('should be able to see the start screen', function () {
-    let page = getPageStruct();
-    expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
-    expect(page.myDashboardHref.getText()).toEqual('Dashboard');
-    expect(page.myHeroesHref.getText()).toEqual('Heroes');
-  });
+  describe('Initial page', () => {
 
-  it('should be able to see dashboard choices', function () {
-    let page = getPageStruct();
-    expect(page.topHeroes.count()).toBe(4, 'should be 4 dashboard hero choices');
-  });
+    it(`has title '${expectedTitle}'`, () => {
+        expect(browser.getTitle()).toEqual(expectedTitle);
+    });
 
-  it('should be able to toggle the views', function () {
-    let page = getPageStruct();
+    it(`has h1 '${expectedH1}'`, () => {
+        expectHeading(1, expectedH1);
+    });
 
-    expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes');
-    page.myHeroesHref.click().then(function() {
-      expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element');
-      expect(page.allHeroes.count()).toBeGreaterThan(4, 'should be more than 4 heroes shown');
-      return page.myDashboardHref.click();
-    }).then(function() {
-      expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element');
+    const expectedViewNames = ['Dashboard', 'Heroes'];
+    it(`has views ${expectedViewNames}`, () => {
+      let viewNames = getPageElts().hrefs.map(el => el.getText());
+      expect(viewNames).toEqual(expectedViewNames);
+    });
+
+    it('has dashboard as the active view', () => {
+      let page = getPageElts();
+      expect(page.myDashboard.isPresent()).toBeTruthy();
     });
 
   });
 
-  it('should be able to edit details from "Dashboard" view', function () {
-    let page = getPageStruct();
-    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
-    let heroEle = page.topHeroes.get(3);
-    let heroDescrEle = heroEle.element(by.css('h4'));
-    let heroDescr: string;
-    return heroDescrEle.getText().then(function(text) {
-      heroDescr = text;
-      return heroEle.click();
-    }).then(function() {
-      return editDetails(page, heroDescr, '-foo');
-    }).then(function() {
-      expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
-      expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
+  describe('Dashboard tests', () => {
+
+    beforeAll(() => browser.get(''));
+
+    it('has top heroes', () => {
+      let page = getPageElts();
+      expect(page.topHeroes.count()).toEqual(4);
     });
+
+    it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`saves and shows ${newHeroName} in Dashboard`, () => {
+      element(by.buttonText('Back')).click();
+      let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+      expect(targetHeroElt.getText()).toEqual(newHeroName);
+    });
+
   });
 
-  it('should be able to edit details from "Heroes" view', function () {
-    let page = getPageStruct();
-    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
-    let viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
-    let heroEle: protractor.ElementFinder;
-    let heroDescr: string;
-    page.myHeroesHref.click().then(function() {
-      expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
-      expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
-      expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
-      heroEle = page.allHeroes.get(2);
-      return heroEle.getText();
-    }).then(function(text) {
-      // remove leading 'id' from the element
-      heroDescr = text.substr(text.indexOf(' ') + 1);
-      return heroEle.click();
-    }).then(function() {
-      expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
-      return viewDetailsButtonEle.click();
-    }).then(function() {
-      return editDetails(page, heroDescr, '-bar');
-    }).then(function() {
-      expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be back');
-      expect(heroEle.getText()).toContain(heroDescr + '-bar');
-      expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should again NOT be present');
+  describe('Heroes tests', () => {
+
+    beforeAll(() => browser.get(''));
+
+    it('can switch to Heroes view', () => {
+      getPageElts().myHeroesHref.click();
+      let page = getPageElts();
+      expect(page.myHeroes.isPresent()).toBeTruthy();
+      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
     });
+
+    it(`selects and shows ${targetHero.name} as selected in list`, () => {
+      getHeroLiEltById(targetHero.id).click();
+      let expectedText = `${targetHero.id} ${targetHero.name}`;
+      expect(getPageElts().selectedHero.getText()).toBe(expectedText);
+    });
+
+    it('shows selected hero subview', async () => {
+      let page = getPageElts();
+      let title = page.selectedHeroSubview.element(by.css('h2')).getText();
+      let expectedTitle = `${targetHero.name.toUpperCase()} is my hero`;
+      expect(title).toEqual(expectedTitle);
+    });
+
+    it('can route to hero details', async () => {
+      element(by.buttonText('View Details')).click();
+
+      let page = getPageElts();
+      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      let hero = await Hero.fromDetail(page.heroDetail);
+      expect(hero.id).toEqual(targetHero.id);
+      expect(hero.name).toEqual(targetHero.name);
+    });
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`shows ${newHeroName} in Heroes list`, () => {
+      element(by.buttonText('Back')).click();
+      let expectedText = `${targetHero.id} ${newHeroName}`;
+      expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText);
+    });
+
   });
 
-  function editDetails(page: any, origValue: string, textToAdd: string) {
-    expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
-    expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present');
-    expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
-    let inputEle = page.heroDetail.element(by.css('input'));
-    expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
-    let backButtonEle = page.heroDetail.element(by.css('button'));
-    expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
-    let detailTextEle = page.heroDetail.element(by.css('div h2'));
-    expect(detailTextEle.getText()).toContain(origValue);
-    return sendKeys(inputEle, textToAdd).then(function () {
-      expect(detailTextEle.getText()).toContain(origValue + textToAdd);
-      return backButtonEle.click();
-    });
+  async function dashboardSelectTargetHero() {
+    let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+    expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    targetHeroElt.click();
+
+    let page = getPageElts();
+    expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name);
+  }
+
+  async function updateHeroNameInDetailView() {
+    // Assumes that the current view is the hero details view.
+    addToHeroName(nameSuffix);
+
+    let page = getPageElts();
+    let hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newHeroName);
   }
 
 });
+
+function addToHeroName(text: string): WPromise<void> {
+  let input = element(by.css('input'));
+  return sendKeys(input, text);
+}
+
+function expectHeading(hLevel: number, expectedText: string): void {
+    let hTag = `h${hLevel}`;
+    let hText = element(by.css(hTag)).getText();
+    expect(hText).toEqual(expectedText, hTag);
+};
+
+function getHeroLiEltById(id: number) {
+  let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
+  return spanForId.element(by.xpath('..'));
+}
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.ts b/public/docs/_examples/toh-5/ts/app/app.component.1.ts
index cbdd040437..c9f5db9712 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.1.ts
@@ -1,7 +1,8 @@
 // #docplaster
-// #docregion
+// #docregion , v2
 import { Component } from '@angular/core';
 
+// #enddocregion v2
 @Component({
   selector: 'my-app',
   template: `
@@ -9,6 +10,33 @@ import { Component } from '@angular/core';
     <my-heroes></my-heroes>
   `
 })
+// #enddocregion
+// #docregion v2
+@Component({
+  selector: 'my-app',
+  // #docregion template-v2
+  template: `
+     <h1>{{title}}</h1>
+     <a routerLink="/heroes">Heroes</a>
+     <router-outlet></router-outlet>
+   `
+  // #enddocregion template-v2
+})
+// #enddocregion
+@Component({
+  selector: 'my-app',
+  // #docregion template-v3
+  template: `
+     <h1>{{title}}</h1>
+     <nav>
+       <a routerLink="/dashboard">Dashboard</a>
+       <a routerLink="/heroes">Heroes</a>
+     </nav>
+     <router-outlet></router-outlet>
+   `
+  // #enddocregion template-v3
+})
+// #docregion , v2
 export class AppComponent {
   title = 'Tour of Heroes';
 }
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.2.ts b/public/docs/_examples/toh-5/ts/app/app.component.2.ts
deleted file mode 100644
index 82e5147775..0000000000
--- a/public/docs/_examples/toh-5/ts/app/app.component.2.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  // #docregion template
-  template: `
-    <h1>{{title}}</h1>
-    <a routerLink="/heroes">Heroes</a>
-    <router-outlet></router-outlet>
-  `
-  // #enddocregion template
-})
-export class AppComponent {
-  title = 'Tour of Heroes';
-}
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.3.ts b/public/docs/_examples/toh-5/ts/app/app.component.3.ts
deleted file mode 100644
index 2d1f83853c..0000000000
--- a/public/docs/_examples/toh-5/ts/app/app.component.3.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  // #docregion template
-  template: `
-    <h1>{{title}}</h1>
-    <nav>
-      <a routerLink="/dashboard">Dashboard</a>
-      <a routerLink="/heroes">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `,
-  // #enddocregion template
-  // #docregion style-urls
-  styleUrls: ['app/app.component.css'],
-  // #enddocregion style-urls
-})
-export class AppComponent {
-  title = 'Tour of Heroes';
-}
-// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts
index fbf2279067..12fe3bfd52 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.ts
@@ -1,4 +1,3 @@
-// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
@@ -14,9 +13,9 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `,
   // #enddocregion template
-  // #docregion style-urls
+  // #docregion styleUrls
   styleUrls: ['app/app.component.css'],
-  // #enddocregion style-urls
+  // #enddocregion styleUrls
 })
 export class AppComponent {
   title = 'Tour of Heroes';
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.1.ts b/public/docs/_examples/toh-5/ts/app/app.module.1.ts
index 473ca08fb8..e1cda9b620 100644
--- a/public/docs/_examples/toh-5/ts/app/app.module.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.module.1.ts
@@ -3,11 +3,10 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }   from './app.component';
-
-import { HeroesComponent }  from './heroes.component';
-
-import { HeroService }  from './hero.service';
+import { AppComponent }        from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroService }         from './hero.service';
 
 @NgModule({
   imports: [
@@ -16,6 +15,7 @@ import { HeroService }  from './hero.service';
   ],
   declarations: [
     AppComponent,
+    HeroDetailComponent,
     HeroesComponent
   ],
   providers: [
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.2.ts b/public/docs/_examples/toh-5/ts/app/app.module.2.ts
deleted file mode 100644
index 1a4ac0f48d..0000000000
--- a/public/docs/_examples/toh-5/ts/app/app.module.2.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-
-import { AppComponent }   from './app.component';
-import { routing }        from './app.routing';
-
-import { HeroesComponent }  from './heroes.component';
-
-import { HeroService }  from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule,
-    routing
-  ],
-  declarations: [
-    AppComponent,
-    HeroesComponent
-  ],
-  providers: [
-    HeroService
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {
-}
-// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.3.ts b/public/docs/_examples/toh-5/ts/app/app.module.3.ts
deleted file mode 100644
index 2eca272b26..0000000000
--- a/public/docs/_examples/toh-5/ts/app/app.module.3.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-
-import { AppComponent }   from './app.component';
-import { routing }        from './app.routing';
-
-import { HeroesComponent }  from './heroes.component';
-// #docregion dashboard-declaration
-import { DashboardComponent } from './dashboard.component';
-// #enddocregion dashboard-declaration
-// #docregion hero-detail-declaration
-import { HeroDetailComponent } from './hero-detail.component';
-// #enddocregion hero-detail-declaration
-import { HeroService }  from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule,
-    routing
-  ],
-// #docregion dashboard-declaration, hero-detail-declaration
-
-  declarations: [
-// #enddocregion dashboard-declaration, hero-detail-declaration
-    AppComponent,
-    HeroesComponent,
-// #docregion dashboard-declaration
-    DashboardComponent,
-// #enddocregion dashboard-declaration
-// #docregion hero-detail-declaration
-    HeroDetailComponent
-// #enddocregion hero-detail-declaration
-// #docregion dashboard-declaration, hero-detail-declaration
-  ],
-// #enddocregion dashboard-declaration, hero-detail-declaration
-  providers: [
-    HeroService
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {
-}
-// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.ts b/public/docs/_examples/toh-5/ts/app/app.module.ts
index 47cc9415bb..67bafebd38 100644
--- a/public/docs/_examples/toh-5/ts/app/app.module.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.module.ts
@@ -1,16 +1,17 @@
+// #docplaster
 // #docregion
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }   from './app.component';
-import { routing }        from './app.routing';
-
-import { HeroesComponent }      from './heroes.component';
+import { AppComponent }         from './app.component';
 import { DashboardComponent }   from './dashboard.component';
 import { HeroDetailComponent }  from './hero-detail.component';
-
-import { HeroService }  from './hero.service';
+import { HeroesComponent }      from './heroes.component';
+import { HeroService }          from './hero.service';
+// #docregion routing
+import { routing } from './app.routing';
+// #docregion routing
 
 @NgModule({
   imports: [
@@ -18,17 +19,20 @@ import { HeroService }  from './hero.service';
     FormsModule,
     routing
   ],
+  // #enddocregion routing
+  // #docregion dashboard, hero-detail
   declarations: [
     AppComponent,
-    HeroesComponent,
     DashboardComponent,
-    HeroDetailComponent
+    HeroDetailComponent,
+    HeroesComponent
   ],
+  // #enddocregion dashboard, hero-detail
   providers: [
     HeroService
   ],
   bootstrap: [ AppComponent ]
+  // #docregion routing
 })
 export class AppModule {
 }
-// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.routing.1.ts b/public/docs/_examples/toh-5/ts/app/app.routing.1.ts
index 055b26754e..a69db4104b 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routing.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routing.1.ts
@@ -1,5 +1,5 @@
-// #docregion
-// #docregion routing-config
+// #docregion , heroes, routing
+import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { HeroesComponent } from './heroes.component';
@@ -10,8 +10,8 @@ const appRoutes: Routes = [
     component: HeroesComponent
   }
 ];
-// #enddocregion routing-config
+// #enddocregion heroes, routing
 
 // #docregion routing-export
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
 // #enddocregion routing-export
diff --git a/public/docs/_examples/toh-5/ts/app/app.routing.2.ts b/public/docs/_examples/toh-5/ts/app/app.routing.2.ts
deleted file mode 100644
index a75df506e7..0000000000
--- a/public/docs/_examples/toh-5/ts/app/app.routing.2.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// #docregion
-import { Routes, RouterModule } from '@angular/router';
-
-import { DashboardComponent } from './dashboard.component';
-import { HeroesComponent }    from './heroes.component';
-// #docregion hero-detail-import
-import { HeroDetailComponent } from './hero-detail.component';
-// #enddocregion hero-detail-import
-
-const appRoutes: Routes = [
-  // #docregion redirect-route
-  {
-    path: '',
-    redirectTo: '/dashboard',
-    pathMatch: 'full'
-  },
-  // #enddocregion redirect-route
-  // #docregion dashboard-route
-  {
-    path: 'dashboard',
-    component: DashboardComponent
-  },
-  // #enddocregion dashboard-route
-  // #docregion hero-detail-route
-  {
-    path: 'detail/:id',
-    component: HeroDetailComponent
-  },
-  // #enddocregion hero-detail-route
-  {
-    path: 'heroes',
-    component: HeroesComponent
-  }
-];
-
-export const routing = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/toh-5/ts/app/app.routing.ts b/public/docs/_examples/toh-5/ts/app/app.routing.ts
index 62071e2567..81f6d05ed2 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routing.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routing.ts
@@ -1,30 +1,43 @@
-// #docregion
+// #docplaster
+// #docregion , heroes
+import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { DashboardComponent }  from './dashboard.component';
-import { HeroesComponent }     from './heroes.component';
-// #docregion hero-detail-import
-import { HeroDetailComponent } from './hero-detail.component';
-// #enddocregion hero-detail-import
+// #enddocregion heroes
+import { DashboardComponent }   from './dashboard.component';
+// #docregion heroes
+import { HeroesComponent }      from './heroes.component';
+// #enddocregion heroes
+import { HeroDetailComponent }  from './hero-detail.component';
+// #docregion heroes
 
 const appRoutes: Routes = [
+  // #enddocregion heroes
+  // #docregion redirect
   {
     path: '',
     redirectTo: '/dashboard',
     pathMatch: 'full'
   },
+  // #enddocregion redirect
+  // #docregion dashboard
   {
     path: 'dashboard',
     component: DashboardComponent
   },
+  // #enddocregion dashboard
+  // #docregion hero-detail
   {
     path: 'detail/:id',
     component: HeroDetailComponent
   },
+  // #enddocregion hero-detail
+  // #docregion heroes
   {
     path: 'heroes',
     component: HeroesComponent
   }
 ];
+// #enddocregion heroes
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts
index e6b9609ab0..38decd2b50 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts
@@ -17,10 +17,10 @@ export class DashboardComponent implements OnInit {
 
   constructor(private heroService: HeroService) { }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.heroService.getHeroes()
       .then(heroes => this.heroes = heroes.slice(1, 5));
   }
 
-  gotoDetail() { /* not implemented yet */}
+  gotoDetail(hero: Hero): void { /* not implemented yet */}
 }
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
index 6dd4b1abc2..3deb5bc2ec 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
@@ -10,9 +10,9 @@ import { HeroService } from './hero.service';
 
 @Component({
   selector: 'my-dashboard',
-  // #docregion template-url
+  // #docregion templateUrl
   templateUrl: 'app/dashboard.component.html',
-  // #enddocregion template-url
+  // #enddocregion templateUrl
   // #docregion css
   styleUrls: ['app/dashboard.component.css']
   // #enddocregion css
@@ -29,15 +29,15 @@ export class DashboardComponent implements OnInit {
   }
   // #enddocregion ctor
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.heroService.getHeroes()
       .then(heroes => this.heroes = heroes.slice(1, 5));
   }
 
-  // #docregion goto-detail
-  gotoDetail(hero: Hero) {
+  // #docregion gotoDetail
+  gotoDetail(hero: Hero): void {
     let link = ['/detail', hero.id];
     this.router.navigate(link);
   }
-  // #enddocregion goto-detail
+  // #enddocregion gotoDetail
 }
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts
new file mode 100644
index 0000000000..efbe8ee913
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.1.ts
@@ -0,0 +1,27 @@
+// Imports in comments cause problems when the app is executed
+// (some error about 'traceur' missing). Hence this separate file
+// is solely for containing the transitory state of the imports.
+
+// #docregion added-imports
+// Keep the Input import for now, we'll remove it later:
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+
+import { HeroService } from './hero.service';
+// #enddocregion added-imports
+
+// Bogus code below this point. It is only here to make lint happy.
+import { Hero } from './hero';
+
+@Component({})
+export class HeroDetailComponent implements OnInit {
+  @Input() hero: Hero;
+  bogus: Params;
+
+  constructor(
+    private heroService: HeroService,
+    private route: ActivatedRoute) {
+  }
+
+  ngOnInit() {}
+}
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 713d27c9f2..5513904452 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -1,30 +1,22 @@
 // #docplaster
-// #docregion
-// #docregion import-oninit, v2
+// #docregion , v2
 import { Component, OnInit } from '@angular/core';
-// #enddocregion import-oninit
-// #docregion import-activated-route
 import { ActivatedRoute, Params } from '@angular/router';
-// #enddocregion import-activated-route
 
 import { Hero } from './hero';
-// #docregion import-hero-service
 import { HeroService } from './hero.service';
-// #enddocregion import-hero-service
 
-// #docregion extract-template
 @Component({
   selector: 'my-hero-detail',
-  // #docregion template-url
+  // #docregion templateUrl
   templateUrl: 'app/hero-detail.component.html',
-  // #enddocregion template-url, v2
+  // #enddocregion templateUrl, v2
   styleUrls: ['app/hero-detail.component.css']
   // #docregion v2
 })
-// #enddocregion extract-template
 // #docregion implement
 export class HeroDetailComponent implements OnInit {
-  // #enddocregion implement
+// #enddocregion implement
   hero: Hero;
 
   // #docregion ctor
@@ -34,21 +26,19 @@ export class HeroDetailComponent implements OnInit {
   }
   // #enddocregion ctor
 
-  // #docregion ng-oninit
-  ngOnInit() {
-    // #docregion get-id
+  // #docregion ngOnInit
+  ngOnInit(): void {
     this.route.params.forEach((params: Params) => {
       let id = +params['id'];
       this.heroService.getHero(id)
         .then(hero => this.hero = hero);
     });
-    // #enddocregion get-id
   }
-  // #enddocregion ng-oninit
+  // #enddocregion ngOnInit
 
-  // #docregion go-back
-  goBack() {
+  // #docregion goBack
+  goBack(): void {
     window.history.back();
   }
-// #enddocregion go-back
+// #enddocregion goBack
 }
diff --git a/public/docs/_examples/toh-5/ts/app/hero.service.ts b/public/docs/_examples/toh-5/ts/app/hero.service.ts
index 900d0da712..67215fb228 100644
--- a/public/docs/_examples/toh-5/ts/app/hero.service.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero.service.ts
@@ -6,21 +6,21 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class HeroService {
-  getHeroes() {
+  getHeroes(): Promise<Hero[]> {
     return Promise.resolve(HEROES);
   }
 
   // See the "Take it slow" appendix
-  getHeroesSlowly() {
+  getHeroesSlowly(): Promise<Hero[]> {
     return new Promise<Hero[]>(resolve =>
       setTimeout(() => resolve(HEROES), 2000) // 2 seconds
     );
   }
 
-  // #docregion get-hero
-  getHero(id: number) {
+  // #docregion getHero
+  getHero(id: number): Promise<Hero> {
     return this.getHeroes()
                .then(heroes => heroes.find(hero => hero.id === id));
   }
-  // #enddocregion get-hero
+  // #enddocregion getHero
 }
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
index c0dbd9c8e7..da66bfa7af 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -6,18 +6,18 @@ import { Router } from '@angular/router';
 import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
-// #docregion heroes-component-renaming, metadata
+// #docregion renaming, metadata
 @Component({
   selector: 'my-heroes',
-  // #enddocregion heroes-component-renaming
+  // #enddocregion renaming
   templateUrl: 'app/heroes.component.html',
   styleUrls:  ['app/heroes.component.css']
-  // #docregion heroes-component-renaming
+  // #docregion renaming
 })
-// #enddocregion heroes-component-renaming, metadata
-// #docregion class, heroes-component-renaming
+// #enddocregion metadata
+// #docregion class
 export class HeroesComponent implements OnInit {
-  // #enddocregion heroes-component-renaming
+  // #enddocregion renaming
   heroes: Hero[];
   selectedHero: Hero;
 
@@ -25,18 +25,20 @@ export class HeroesComponent implements OnInit {
     private router: Router,
     private heroService: HeroService) { }
 
-  getHeroes() {
+  getHeroes(): void {
     this.heroService.getHeroes().then(heroes => this.heroes = heroes);
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.getHeroes();
   }
 
-  onSelect(hero: Hero) { this.selectedHero = hero; }
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
 
-  gotoDetail() {
+  gotoDetail(): void {
     this.router.navigate(['/detail', this.selectedHero.id]);
   }
-  // #docregion heroes-component-renaming
+  // #docregion renaming
 }
diff --git a/public/docs/_examples/toh-5/ts/styles.1.css b/public/docs/_examples/toh-5/ts/styles.1.css
deleted file mode 100644
index dee6d5b8ca..0000000000
--- a/public/docs/_examples/toh-5/ts/styles.1.css
+++ /dev/null
@@ -1,24 +0,0 @@
-/* #docregion toh-excerpt */
-/* Master Styles */
-h1 {
-  color: #369; 
-  font-family: Arial, Helvetica, sans-serif;   
-  font-size: 250%;
-}
-h2, h3 { 
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;   
-  font-weight: lighter;
-}
-body { 
-  margin: 2em; 
-}
-body, input[text], button { 
-  color: #888; 
-  font-family: Cambria, Georgia; 
-}
-/* . . . */
-/* everywhere else */
-* { 
-  font-family: Arial, Helvetica, sans-serif; 
-}
diff --git a/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart
index da965c301c..d23b7f543d 100644
--- a/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart
+++ b/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart
@@ -1,4 +1,4 @@
-// #docregion , search
+// #docregion
 import 'dart:async';
 
 import 'package:angular2/core.dart';
@@ -6,6 +6,7 @@ import 'package:angular2/router.dart';
 
 import 'hero.dart';
 import 'hero_service.dart';
+// #docregion search
 import 'hero_search_component.dart';
 
 @Component(
diff --git a/public/docs/_examples/toh-6/dart/pubspec.yaml b/public/docs/_examples/toh-6/dart/pubspec.yaml
index cdb0ce29f1..6f07f46995 100644
--- a/public/docs/_examples/toh-6/dart/pubspec.yaml
+++ b/public/docs/_examples/toh-6/dart/pubspec.yaml
@@ -7,7 +7,7 @@ environment:
   sdk: '>=1.13.0 <2.0.0'
   # #docregion additions
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   # #enddocregion additions
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
diff --git a/public/docs/_examples/toh-6/dart/web/main.dart b/public/docs/_examples/toh-6/dart/web/main.dart
index ff344d1a54..7e41d5d227 100644
--- a/public/docs/_examples/toh-6/dart/web/main.dart
+++ b/public/docs/_examples/toh-6/dart/web/main.dart
@@ -1,6 +1,5 @@
 // #docplaster
-// #docregion final
-// #docregion v1
+// #docregion , v1, v2
 import 'package:angular2/core.dart';
 import 'package:angular2/platform/browser.dart';
 import 'package:angular2_tour_of_heroes/app_component.dart';
@@ -15,7 +14,7 @@ void main() {
     // [provide(Client, useFactory: () => new BrowserClient(), deps: [])]
   );
 }
-// #enddocregion final
+// #enddocregion v2,
 /*
 // #docregion v1
 import 'package:http/browser_client.dart';
diff --git a/public/docs/_examples/toh-6/ts/app/app.module.1.ts b/public/docs/_examples/toh-6/ts/app/app.module.1.ts
deleted file mode 100644
index 6924d5a390..0000000000
--- a/public/docs/_examples/toh-6/ts/app/app.module.1.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-
-// Imports for loading & configuring the in-memory web api
-import { HttpModule, XHRBackend } from '@angular/http';
-
-import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
-import { InMemoryDataService }               from './in-memory-data.service';
-
-import { AppComponent }   from './app.component';
-import { routing }        from './app.routing';
-
-import { HeroesComponent }      from './heroes.component';
-import { DashboardComponent }   from './dashboard.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-
-import { HeroService }  from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule,
-    routing,
-    HttpModule
-  ],
-  declarations: [
-    AppComponent,
-    HeroesComponent,
-    DashboardComponent,
-    HeroDetailComponent
-  ],
-  providers: [
-    HeroService,
-    { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
-    { provide: SEED_DATA,  useClass: InMemoryDataService }     // in-mem server data
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {
-}
-// #enddocregion final
diff --git a/public/docs/_examples/toh-6/ts/app/app.module.2.ts b/public/docs/_examples/toh-6/ts/app/app.module.2.ts
deleted file mode 100644
index 2ec598cd0b..0000000000
--- a/public/docs/_examples/toh-6/ts/app/app.module.2.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { HttpModule }     from '@angular/http';
-
-import { AppComponent }   from './app.component';
-import { routing }        from './app.routing';
-
-import { HeroesComponent }      from './heroes.component';
-import { DashboardComponent }   from './dashboard.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-// #docregion hero-search-declaration
-import { HeroSearchComponent } from './hero-search.component';
-// #enddocregion hero-search-declaration
-
-import { HeroService }  from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule,
-    routing,
-    HttpModule
-  ],
-// #docregion hero-search-declaration
-
-  declarations: [
-    AppComponent,
-    HeroesComponent,
-    DashboardComponent,
-    HeroDetailComponent,
-    HeroSearchComponent
-  ],
-// #enddocregion hero-search-declaration
-  providers: [
-    HeroService
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {
-}
-// #enddocregion
diff --git a/public/docs/_examples/toh-6/ts/app/app.module.ts b/public/docs/_examples/toh-6/ts/app/app.module.ts
index 0beff178e0..1712c79371 100644
--- a/public/docs/_examples/toh-6/ts/app/app.module.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.module.ts
@@ -1,45 +1,53 @@
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
+// #docplaster
+// #docregion , v1, v2
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+import { HttpModule }    from '@angular/http';
 
+// #enddocregion v1
 // Imports for loading & configuring the in-memory web api
-import { HttpModule, XHRBackend } from '@angular/http';
+import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
+import { InMemoryDataService }  from './in-memory-data.service';
 
-import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
-import { InMemoryDataService }               from './in-memory-data.service';
-
-import { AppComponent }   from './app.component';
-import { routing }        from './app.routing';
-
-import { HeroesComponent }      from './heroes.component';
+// #docregion v1
+import { AppComponent }         from './app.component';
 import { DashboardComponent }   from './dashboard.component';
+import { HeroesComponent }      from './heroes.component';
 import { HeroDetailComponent }  from './hero-detail.component';
+import { HeroService }          from './hero.service';
+// #enddocregion v1, v2
 import { HeroSearchComponent }  from './hero-search.component';
-
-import { HeroService }  from './hero.service';
+// #docregion v1, v2
+import { routing }              from './app.routing';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing,
-    HttpModule
+    HttpModule,
+    // #enddocregion v1
+    // #docregion in-mem-web-api
+    InMemoryWebApiModule.forRoot(InMemoryDataService),
+    // #enddocregion in-mem-web-api
+    // #docregion v1
+    routing
   ],
+  // #docregion search
   declarations: [
     AppComponent,
-    HeroesComponent,
     DashboardComponent,
     HeroDetailComponent,
+    HeroesComponent,
+  // #enddocregion v1, v2
     HeroSearchComponent
+  // #docregion v1, v2
   ],
+  // #enddocregion search
   providers: [
     HeroService,
-    { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
-    { provide: SEED_DATA,  useClass: InMemoryDataService }     // in-mem server data
   ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule {
 }
-// #enddocregion
diff --git a/public/docs/_examples/toh-6/ts/app/app.routing.ts b/public/docs/_examples/toh-6/ts/app/app.routing.ts
index c5753a4ee9..7acd3b9863 100644
--- a/public/docs/_examples/toh-6/ts/app/app.routing.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.routing.ts
@@ -1,4 +1,5 @@
 // #docregion
+import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { DashboardComponent }  from './dashboard.component';
@@ -25,4 +26,4 @@ const appRoutes: Routes = [
   }
 ];
 
-export const routing = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
index 4a90a4d6bf..dd2e2ef2ce 100644
--- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
@@ -19,12 +19,12 @@ export class DashboardComponent implements OnInit {
     private heroService: HeroService) {
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.heroService.getHeroes()
       .then(heroes => this.heroes = heroes.slice(1, 5));
   }
 
-  gotoDetail(hero: Hero) {
+  gotoDetail(hero: Hero): void {
     let link = ['/detail', hero.id];
     this.router.navigate(link);
   }
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
index 062917401e..4329f63a2c 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -27,7 +27,7 @@ export class HeroDetailComponent implements OnInit {
   }
 
   // #docregion ngOnInit
-  ngOnInit() {
+  ngOnInit(): void {
     this.route.params.forEach((params: Params) => {
       if (params['id'] !== undefined) {
         let id = +params['id'];
@@ -43,7 +43,7 @@ export class HeroDetailComponent implements OnInit {
   // #enddocregion ngOnInit
 
   // #docregion save
-  save() {
+  save(): void {
     this.heroService
         .save(this.hero)
         .then(hero => {
@@ -54,7 +54,7 @@ export class HeroDetailComponent implements OnInit {
   }
   // #enddocregion save
   // #docregion goBack
-  goBack(savedHero: Hero = null) {
+  goBack(savedHero: Hero = null): void {
     this.close.emit(savedHero);
     if (this.navigated) { window.history.back(); }
   }
diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
index 25ada285ac..384002098d 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts
@@ -28,11 +28,13 @@ export class HeroSearchComponent implements OnInit {
   // #docregion searchTerms
 
   // Push a search term into the observable stream.
-  search(term: string) { this.searchTerms.next(term); }
+  search(term: string): void {
+    this.searchTerms.next(term);
+  }
   // #enddocregion searchTerms
   // #docregion search
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.heroes = this.searchTerms
       .debounceTime(300)        // wait for 300ms pause in events
       .distinctUntilChanged()   // ignore if next search term is same as previous
@@ -49,7 +51,7 @@ export class HeroSearchComponent implements OnInit {
   }
   // #enddocregion search
 
-  gotoDetail(hero: Hero) {
+  gotoDetail(hero: Hero): void {
     let link = ['/detail', hero.id];
     this.router.navigate(link);
   }
diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts
index 95a31707eb..ae2e47670a 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts
@@ -1,6 +1,7 @@
 // #docregion
 import { Injectable }     from '@angular/core';
 import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs';
 
 import { Hero }           from './hero';
 
@@ -9,7 +10,7 @@ export class HeroSearchService {
 
   constructor(private http: Http) {}
 
-  search(term: string) {
+  search(term: string): Observable<Hero[]> {
     return this.http
                .get(`app/heroes/?name=${term}`)
                .map((r: Response) => r.json().data as Hero[]);
diff --git a/public/docs/_examples/toh-6/ts/app/hero.service.ts b/public/docs/_examples/toh-6/ts/app/hero.service.ts
index 04012768be..21d036ad9e 100644
--- a/public/docs/_examples/toh-6/ts/app/hero.service.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero.service.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Injectable }    from '@angular/core';
-import { Headers, Http } from '@angular/http';
+import { Headers, Http, Response } from '@angular/http';
 
 // #docregion rxjs
 import 'rxjs/add/operator/toPromise';
@@ -17,7 +17,7 @@ export class HeroService {
 
   constructor(private http: Http) { }
 
-  getHeroes() {
+  getHeroes(): Promise<Hero[]> {
     return this.http.get(this.heroesUrl)
     // #docregion to-promise
                .toPromise()
@@ -31,7 +31,7 @@ export class HeroService {
   }
   // #enddocregion getHeroes
 
-  getHero(id: number) {
+  getHero(id: number): Promise<Hero> {
     return this.getHeroes()
                .then(heroes => heroes.find(hero => hero.id === id));
   }
@@ -46,7 +46,7 @@ export class HeroService {
   // #enddocregion save
 
   // #docregion delete
-  delete(hero: Hero) {
+  delete(hero: Hero): Promise<Response> {
     let headers = new Headers();
     headers.append('Content-Type', 'application/json');
 
@@ -75,7 +75,7 @@ export class HeroService {
 
   // #docregion put
   // Update existing Hero
-  private put(hero: Hero) {
+  private put(hero: Hero): Promise<Hero> {
     let headers = new Headers();
     headers.append('Content-Type', 'application/json');
 
@@ -90,7 +90,7 @@ export class HeroService {
   // #enddocregion put
 
   // #docregion handleError
-  private handleError(error: any) {
+  private handleError(error: any): Promise<any> {
     console.error('An error occurred', error);
     return Promise.reject(error.message || error);
   }
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
index e5c5ab1c49..b3d17549e8 100644
--- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
@@ -24,7 +24,7 @@ export class HeroesComponent implements OnInit {
     private router: Router,
     private heroService: HeroService) { }
 
-  getHeroes() {
+  getHeroes(): void {
     this.heroService
         .getHeroes()
         .then(heroes => this.heroes = heroes)
@@ -32,19 +32,19 @@ export class HeroesComponent implements OnInit {
   }
 
   // #docregion addHero
-  addHero() {
+  addHero(): void {
     this.addingHero = true;
     this.selectedHero = null;
   }
 
-  close(savedHero: Hero) {
+  close(savedHero: Hero): void {
     this.addingHero = false;
     if (savedHero) { this.getHeroes(); }
   }
   // #enddocregion addHero
 
   // #docregion deleteHero
-  deleteHero(hero: Hero, event: any) {
+  deleteHero(hero: Hero, event: any): void {
     event.stopPropagation();
     this.heroService
         .delete(hero)
@@ -56,16 +56,16 @@ export class HeroesComponent implements OnInit {
   }
   // #enddocregion deleteHero
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.getHeroes();
   }
 
-  onSelect(hero: Hero) {
+  onSelect(hero: Hero): void {
     this.selectedHero = hero;
     this.addingHero = false;
   }
 
-  gotoDetail() {
+  gotoDetail(): void {
     this.router.navigate(['/detail', this.selectedHero.id]);
   }
 }
diff --git a/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts b/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts
index 261795a641..c63151a122 100644
--- a/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts
+++ b/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts
@@ -1,5 +1,6 @@
 // #docregion , init
-export class InMemoryDataService {
+import { InMemoryDbService } from 'angular2-in-memory-web-api';
+export class InMemoryDataService implements InMemoryDbService {
   createDb() {
     let heroes = [
       {id: 11, name: 'Mr. Nice'},
diff --git a/public/docs/_examples/user-input/dart/pubspec.yaml b/public/docs/_examples/user-input/dart/pubspec.yaml
index fa28056488..c56f2d27a4 100644
--- a/public/docs/_examples/user-input/dart/pubspec.yaml
+++ b/public/docs/_examples/user-input/dart/pubspec.yaml
@@ -5,7 +5,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/public/docs/_examples/webpack/e2e-spec.ts.disabled b/public/docs/_examples/webpack/e2e-spec.ts
similarity index 100%
rename from public/docs/_examples/webpack/e2e-spec.ts.disabled
rename to public/docs/_examples/webpack/e2e-spec.ts
diff --git a/public/docs/_examples/webpack/ts/config/karma-test-shim.js b/public/docs/_examples/webpack/ts/config/karma-test-shim.js
index 27fa731f5a..2a6b7f363c 100644
--- a/public/docs/_examples/webpack/ts/config/karma-test-shim.js
+++ b/public/docs/_examples/webpack/ts/config/karma-test-shim.js
@@ -5,10 +5,10 @@ require('core-js/es6');
 require('reflect-metadata');
 
 require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
-require('zone.js/dist/jasmine-patch');
 require('zone.js/dist/async-test');
 require('zone.js/dist/fake-async-test');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/proxy-zone');
 
 var appContext = require.context('../src', true, /\.spec\.ts/);
 
@@ -17,7 +17,4 @@ appContext.keys().forEach(appContext);
 var testing = require('@angular/core/testing');
 var browser = require('@angular/platform-browser-dynamic/testing');
 
-testing.setBaseTestProviders(
-  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
-);
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
diff --git a/public/docs/_examples/webpack/ts/config/webpack.test.js b/public/docs/_examples/webpack/ts/config/webpack.test.js
index 352e4f6126..147c94dfcd 100644
--- a/public/docs/_examples/webpack/ts/config/webpack.test.js
+++ b/public/docs/_examples/webpack/ts/config/webpack.test.js
@@ -1,4 +1,6 @@
 // #docregion
+var helpers = require('./helpers');
+
 module.exports = {
   devtool: 'inline-source-map',
 
@@ -23,7 +25,13 @@ module.exports = {
       },
       {
         test: /\.css$/,
+        exclude: helpers.root('src', 'app'),
         loader: 'null'
+      },
+      {
+        test: /\.css$/,
+        include: helpers.root('src', 'app'),
+        loader: 'raw'
       }
     ]
   }
diff --git a/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts b/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts
index d7d0696aef..a6512a11e7 100644
--- a/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts
+++ b/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts
@@ -1,21 +1,16 @@
 // #docregion
-import {
-  addProviders,
-  inject,
-} from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 
 describe('App', () => {
   beforeEach(() => {
-    addProviders([
-      AppComponent
-    ]);
+    TestBed.configureTestingModule({ declarations: [AppComponent]});
   });
 
-  it ('should work', inject([AppComponent], (app: AppComponent) => {
-    // Add real test here
-    expect(2).toBe(2);
-  }));
+  it ('should work', () => {
+    let fixture = TestBed.createComponent(AppComponent);
+    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
+  });
 });
 // #enddocregion
diff --git a/public/docs/_examples/webpack/ts/src/main.ts b/public/docs/_examples/webpack/ts/src/main.ts
index 0057db95ab..e1d8cbc0fe 100644
--- a/public/docs/_examples/webpack/ts/src/main.ts
+++ b/public/docs/_examples/webpack/ts/src/main.ts
@@ -1,5 +1,5 @@
 // #docregion
-import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
 
 import { AppModule } from './app/app.module';
@@ -10,5 +10,5 @@ if (process.env.ENV === 'production') {
 }
 // #enddocregion enable-prod
 
-browserDynamicPlatform().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule);
 // #enddocregion
diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json
index a93259c9ab..48138a453b 100644
--- a/public/docs/dart/latest/_data.json
+++ b/public/docs/dart/latest/_data.json
@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>angular.io/dart</b>! The current Angular 2 Dart release is <b>beta.18</b>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Welcome to <b>angular.io/dart</b>! The current Angular 2 Dart release is <b>beta.20</b>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
diff --git a/public/docs/dart/latest/_util-fns.jade b/public/docs/dart/latest/_util-fns.jade
index 330b0e38f0..a4a0cf461c 100644
--- a/public/docs/dart/latest/_util-fns.jade
+++ b/public/docs/dart/latest/_util-fns.jade
@@ -20,6 +20,15 @@ include ../../../_includes/_util-fns
 - var _indexHtmlDir = 'web';
 - var _mainDir = 'web';
 
+//- NgModule related
+- var _AppModuleVsAppComp = 'AppComponent'
+- var _appModuleTsVsAppCompTs = 'app/app_component.dart'
+- var _appModuleTsVsMainTs = 'web/main.dart'
+- var _bootstrapModule = 'bootstrap'
+- var _moduleVsComp = 'component'
+- var _moduleVsRootComp = 'root component'
+- var _platformBrowserDynamicVsBootStrap = 'bootstrap'
+
 //- Deprecated
 mixin liveExampleLink(linkText, exampleUrlPartName)
   - var text = linkText || '在线例子';
diff --git a/public/docs/dart/latest/glossary.jade b/public/docs/dart/latest/glossary.jade
index 673436c805..26feb4d9f3 100644
--- a/public/docs/dart/latest/glossary.jade
+++ b/public/docs/dart/latest/glossary.jade
@@ -1,35 +1,68 @@
-include _util-fns
+extends ../../ts/_cache/glossary.jade
 
-block var-def
-  - var fragPath='../../ts/latest/_fragments/';
+block includes
+  include _util-fns
 
-!=partial(fragPath + 'glossary-intro')
-!=partial(fragPath + 'glossary-a1')
-!=partial(fragPath + 'glossary-a-2')
-!=partial(fragPath + 'glossary-b-c')
-!=partial(fragPath + 'glossary-d1')
-!=partial(fragPath + 'glossary-d2')
-!=partial(fragPath + 'glossary-e1')
-!=partial(fragPath + 'glossary-e2')
-!=partial(fragPath + 'glossary-f-l')
-!=partial(fragPath + 'glossary-m1')
-//partial(fragPath + 'glossary-m2') not needed in dart
-!=partial(fragPath + 'glossary-n-s-1')
-
-:marked
-  ## snake_case
-
-.l-sub-section
+block annotation-defn
   :marked
-    The practice of writing compound words or phrases such that each word is separated by an
-    underscore (`_`).
-    
-    Library and file names are often spelled in snake_case. Examples include:
-    `angular2_tour_of_heroes` and `app_component.dart`.
-    
-    This form is also known as **underscore case**.
+    When unqualified, _annotation_ refers to a Dart [metadata
+    annotation][metadata] (as opposed to, say, a type annotation).  A metadata
+    annotation begins with the character `@`, followed by either a reference
+    to a compile-time constant (such as [`Component`](#component)) or a call
+    to a constant constructor. See the [Dart Language Guide][metadata] for
+    details.
 
-!=partial(fragPath + 'glossary-n-s-2')
-!=partial(fragPath + 'glossary-t1')
-//partial(fragPath + 'glossary-t2') notneeded in dart
-!=partial(fragPath + 'glossary-u-z')
+    The corresponding term in TypeScript and JavaScript is
+    [_decorator_](!{docsPath}/ts/latest/glossary.html#decorator).
+
+    [metadata]: https://www.dartlang.org/guides/language/language-tour#metadata
+
+block bootstrap-defn-top
+  :marked
+    We launch an Angular application by "bootstrapping" it with the
+    [bootstrap][bootstrap] method.  The `bootstrap` method identifies an
+    application's top level "root" [Component](#component) and optionally
+    registers service [providers](#provider) with the [dependency injection
+    system](#dependency-injection).
+
+    [bootstrap]: !{docsLatest}/api/angular2.platform.browser/bootstrap.html
+
+block decorator-defn
+  :marked
+    When used in this guide, these JavaScript terms are taken as synonymous with
+    [annotation](#annotation).
+
+block module-defn
+  //- Taken from the Dart Difference in guide/architecture.jade
+  :marked
+    In this guide, the term _module_ refers to a Dart compilation unit, such
+    as a library, or a package. (If a Dart file has no `library` or `part`
+    directive, then that file itself is a library and thus a compilation
+    unit.) For more information about compilation units, see
+    the chapter on "Libraries and Scripts" in the
+    [Dart Language Specification](https://www.dartlang.org/docs/spec/).
+
+block routing-component-defn
+  :marked
+    A [Component](#component) with an attached router.
+
+    In most cases, the component became attached to a [router](#router) by means
+    of a `@RouterConfig` #{decorator} that defined routes to views controlled by this component.
+
+    The component's template has a `RouterOutlet` element where it can display views produced by the router.
+
+    It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
+
+block append snake-case-defn
+  :marked
+      Library and file names are often spelled in snake_case. Examples include:
+      `angular2_tour_of_heroes` and `app_component.dart`.
+
+block zone-defn
+  :marked
+    Zones are a mechanism for encapsulating and intercepting
+    a Dart application's asynchronous activity.
+
+    To learn more, consult the [zones article][zones].
+
+    [zones]: https://www.dartlang.org/articles/libraries/zones
diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade
index c840601347..3e4c5011e3 100644
--- a/public/docs/dart/latest/guide/dependency-injection.jade
+++ b/public/docs/dart/latest/guide/dependency-injection.jade
@@ -101,7 +101,7 @@ block dart-map-alternative
     As an alternative to using a configuration `Map`, we can define
     a custom configuration class:
 
-  +makeExample('lib/app_config.dart (alternative config)','config-alt')
+  +makeExcerpt('lib/app_config.dart (alternative config)','config-alt')
 
   :marked
     Defining a configuration class has a few benefits. One key benefit
diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade
index 19b7d09aa5..73651c1092 100644
--- a/public/docs/dart/latest/guide/forms.jade
+++ b/public/docs/dart/latest/guide/forms.jade
@@ -1,6 +1,5 @@
 include ../_util-fns
 
-<!-- http://plnkr.co/edit/wg154K -->
 :marked
   We’ve all used a form to log in, submit a help request, place an order, book a flight,
   schedule a meeting, and perform countless other data entry tasks.
@@ -30,6 +29,8 @@ include ../_util-fns
 
   - How to share information across controls with template reference variables
 
+  Run the <live-example></live-example>.
+
 .l-main-section
 :marked
   ## Template-driven forms
diff --git a/public/docs/dart/latest/guide/glossary.jade b/public/docs/dart/latest/guide/glossary.jade
index eeef440cb0..1d2eb49664 100644
--- a/public/docs/dart/latest/guide/glossary.jade
+++ b/public/docs/dart/latest/guide/glossary.jade
@@ -1,4 +1,4 @@
 extends ../glossary
 
 block var-def
-  - var fragPath='../../../ts/latest/_fragments/';
+  include ../_util-fns
diff --git a/public/docs/dart/latest/guide/lifecycle-hooks.jade b/public/docs/dart/latest/guide/lifecycle-hooks.jade
index c67c1fa3f2..f9a87bbada 100644
--- a/public/docs/dart/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/dart/latest/guide/lifecycle-hooks.jade
@@ -3,9 +3,16 @@ extends ../../../ts/_cache/guide/lifecycle-hooks.jade
 block includes
   include ../_util-fns
 
-block optional-interfaces
-  //- n/a for Dart
+block other-angular-subsystems
+  :marked
+    The router, for instance, also has its own [router lifecycle
+    hooks](router.html#router-lifecycle-hooks) that allow us to tap into
+    specific moments in route navigation.
+    A parallel can be drawn between `ngOnInit` and `routerOnActivate`.  Both are
+    prefixed so as to avoid collision, and both run right when a component is
+    being initialized.
 
 block tick-methods
   :marked
-    The `LoggerService.tick` method, which returns a `Future`, postpones the update one turn of the of the browser's update cycle ... and that's long enough.
+    The `LoggerService.tick` method, which returns a `Future`, postpones the
+    update one turn of the of the browser's update cycle ... and that's long enough.
diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade
index 8f00bc1339..bd73ed73da 100644
--- a/public/docs/dart/latest/guide/user-input.jade
+++ b/public/docs/dart/latest/guide/user-input.jade
@@ -6,10 +6,12 @@ include ../_util-fns
   In this chapter we learn to bind to those events using the Angular
   event binding syntax.
 
+  Run the <live-example></live-example>.
+
 :marked
   ## Binding to user input events
 
-  We can use Angular event bindings <!-- PENDING: link to ./template-syntax.html#event-binding -->
+  We can use [Angular event bindings](./template-syntax.html#event-binding)
   to respond to [any DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
 
   The syntax is simple. We surround the DOM event name with
diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade
index 8126efc8dc..c9e2f66385 100644
--- a/public/docs/dart/latest/quickstart.jade
+++ b/public/docs/dart/latest/quickstart.jade
@@ -4,8 +4,10 @@ block includes
   include _util-fns
   - var _Install = 'Get'
   - var _prereq = 'the Dart SDK'
-  - var _angular_browser_uri = 'package:angular2/platform/browser.dart'
-  - var _angular_core_uri = 'package:angular2/core.dart'
+  - var _angular_browser_uri = 'angular2/platform/browser.dart'
+  - var _angular_core_uri = 'angular2/core.dart'
+  - var _stepInit = 3
+  - var _quickstartSrcURL='https://github.com/angular-examples/quickstart'
 
 block setup-tooling
   :marked
@@ -20,9 +22,6 @@ block setup-tooling
     [DT]: https://www.dartlang.org/tools/
     [pub]: https://www.dartlang.org/tools/pub/
 
-block download-source
-  // exclude this section from Dart
-
 block package-and-config-files
   :marked
     In the project folder just created, create a file named
@@ -31,7 +30,7 @@ block package-and-config-files
     packages as dependencies, as well as the `angular2` transformer.
     It can also specify other packages and transformers for the app to use,
     such as [dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).
-    Angular 2 is still changing, so provide an exact version: **2.0.0-beta.18**.
+    Angular 2 is still changing, so provide an exact version: **2.0.0-beta.20**.
 
     [pubspec]: https://www.dartlang.org/tools/pub/pubspec.html
 
@@ -59,9 +58,6 @@ block create-main
     li a #[b folder named #[code web]]
     li a <b>file named #[code #[+adjExPath('app/main.ts')]]</b> with the following content:
 
-block index-html-commentary-for-ts
-  //- N/A
-
 block run-app
   p.
     We have a few options for running our app.
@@ -87,10 +83,10 @@ block build-app
       in the [proper folders](#wrap-up),
       and run `pub get`.
 
-  .l-verbose-section
-    h3#section-angular-run-app Building the app (generating JavaScript)
-
+  .l-verbose-section#section-angular-run-app
     :marked
+      ### Building the app (generating JavaScript)
+
       Before deploying the app, we need to generate JavaScript files.
       The `pub build` command makes that easy.
 
@@ -98,11 +94,12 @@ block build-app
       &gt; <span class="blk">pub build</span>
       Loading source assets...
 
-    p.
+    :marked
       The generated JavaScript appears, along with supporting files,
-      under a directory named <code>build</code>.
+      under a directory named `build`.
 
-    h4#angular_transformer Using the Angular transformer
+    #angular_transformer
+    h4 Using the Angular transformer
 
     p.
       When generating JavaScript for an Angular app,
@@ -124,7 +121,7 @@ block build-app
       <a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
       transformer wiki page</a>.
 
-    #performance.l-sub-section
+    .l-sub-section#performance
       h3 Performance, the transformer, and Angular 2 libraries
       p.
         When an app imports <code>bootstrap.dart</code>,
@@ -136,7 +133,8 @@ block build-app
         (<code>entry_points</code> in <code>pubspec.yaml</code>)
         so that they don't use mirrors.
 
-    h4#dart_to_js_script_rewriter Using dart_to_js_script_rewriter
+    #dart_to_js_script_rewriter
+    h4 Using dart_to_js_script_rewriter
 
     :marked
       To improve the app's performance, convert the
@@ -196,13 +194,10 @@ block project-files
       quickstart/ts/app/main.ts,
       quickstart/ts/index.html,
       quickstart/dart/pubspec.yaml,
-      quickstart/ts/styles.1.css`
-    ,null,
+      quickstart/ts/styles.css`,
+    ',,,,quickstart',
     `app/app.component.ts,
     app/main.ts,
     index.html,
     pubspec.yaml,
-    styles.css`)
-
-block what-next-ts-overhead
-  //- N/A
+    styles.css (excerpt)`)
diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade
index 00fe8db972..6be571c148 100644
--- a/public/docs/dart/latest/tutorial/toh-pt5.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt5.jade
@@ -1,702 +1,168 @@
-include ../_util-fns
+extends ../../../ts/_cache/tutorial/toh-pt5
 
-:marked
-  # Routing Around the App
-  We received new requirements for our Tour of Heroes application:
-  * Add a *Dashboard* view.
-  * Navigate between the *Heroes* and *Dashboard* views.
-  * Clicking on a hero in either view navigates to a detail view of the selected hero.
-  * Clicking a *deep link* in an email opens the detail view for a particular hero.
+block includes
+  include ../_util-fns
+  - var _appRoutingTsVsAppComp = 'AppComponent'
+  - var _declsVsDirectives = 'directives'
+  - var _RoutesVsAtRouteConfig = '@RouteConfig'
+  - var _RouterModuleVsRouterDirectives = 'ROUTER_DIRECTIVES'
+  - var _redirectTo = 'useAsDefault'
 
-  When we’re done, users will be able to navigate the app like this:
-figure.image-display
-  img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
-:marked
-  We'll add Angular’s *Component Router* to our app to satisfy these requirements.
-.l-sub-section
-  :marked
-    The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
-    than we will in this tutorial.
-
-  Run the <live-example></live-example> for this part.
-
-.l-main-section
-:marked
-  ## Where We Left Off
-  Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service
-  and hero detail component. If not, we’ll need to go back and follow the previous chapters.
-
-.filetree
+block intro-file-tree
+  .filetree
     .file angular2_tour_of_heroes
     .children
-        .file lib
-        .children
-            .file app_component.dart
-            .file hero.dart
-            .file hero_detail_component.dart
-            .file hero_service.dart
-            .file mock_heroes.dart
-        .file web
-        .children
-            .file index.html
-            .file main.dart
-            .file styles.css
-        .file pubspec.yaml
-:marked
-  ### Keep the app compiling and running
-  Open a terminal/console window.
-  Start the Dart compiler, watch for changes, and start our server by entering the command:
+      .file lib
+      .children
+        .file app_component.dart
+        .file hero.dart
+        .file hero_detail_component.dart
+        .file hero_service.dart
+        .file mock_heroes.dart
+      .file web
+      .children
+        .file index.html
+        .file main.dart
+        .file styles.css
+      .file pubspec.yaml
 
-code-example(language="bash").
-  pub serve
-
-:marked
-  The application runs and updates automatically as we continue to build the Tour of Heroes.
-
-  ## Action plan
-  Here's our plan:
-
-  * Turn `AppComponent` into an application shell that only handles navigation
-  * Relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
-  * Add routing
-  * Create a new `DashboardComponent`
-  * Tie the *Dashboard* into the navigation structure
-
-.l-sub-section
+block keep-app-running
   :marked
-      *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view.
+    ### Keep the app compiling and running
 
-.l-main-section
-:marked
-  ## Splitting the *AppComponent*
+    Open a terminal/console window.
+    Start the Dart compiler, watch for changes, and start our server by entering the command:
 
-  Our current app loads `AppComponent` and immediately displays the list of heroes.
+  code-example(language="bash").
+    pub serve
 
-  Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them.
+block app-comp-v1
+  +makeExcerpt('lib/app_component_1.dart (v1)', '')
 
-  The `AppComponent` should only handle navigation.
-  Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
-
-  ### *HeroesComponent*
-  `AppComponent` is already dedicated to *Heroes*.
-  Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
-  and create a new `AppComponent` shell separately.
-
-  The steps are to rename:
-  * `app_component.dart` file to `heroes_component.dart`
-  * `AppComponent` class to `HeroesComponent`
-  * Selector `my-app` to `my-heroes`
-
-:marked
-+makeExample('toh-5/dart/lib/heroes_component.dart', 'heroes-component-renaming', 'lib/heroes_component.dart (showing renamings only)')(format=".")
-
-:marked
-  ## Create *AppComponent*
-  The new `AppComponent` will be the application shell.
-  It will have some navigation links at the top and a display area below for the pages we navigate to.
-
-  The initial steps are:
-
-  * create a new file named `app_component.dart`.
-  * define an `AppComponent` class.
-  * expose an application `title` property.
-  * add the `@Component` metadata annotation above the class with a `my-app` selector.
-  * add a template with `<h1>` tags surrounding a binding to the `title` property.
-  * add the `<my-heroes>` tags to the template so we still see the heroes.
-  * add the `HeroesComponent` to the `directives` list so Angular recognizes the `<my-heroes>` tags.
-  * add the `HeroService` to the `providers` list because we'll need it in every other view.
-  * add the supporting `import` statements.
-
-  Our first draft looks like this:
-+makeExample('toh-5/dart/lib/app_component_1.dart', null, 'lib/app_component.dart (v1)')
-:marked
-.callout.is-critical
-  header Remove <i>HeroService</i> from the <i>HeroesComponent</i> providers
+block angular-router
   :marked
-    Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` list.
-    We are *promoting* this service from the `HeroesComponent` to the `AppComponent`.
-    We ***do not want two copies*** of this service at two different levels of our app.
-:marked
-  The app still runs and still displays heroes.
-  Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked!
-  We have done no harm.
+    The Angular router is a combination of multiple services
+    (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), and a
+    configuration annotation (`RouteConfig`). We'll get them all by importing
+    the router library:
 
-:marked
-  ## Add Routing
+  +makeExcerpt('app/app.component.ts (router imports)', 'import-router')
 
-  We're ready to take the next step.
-  Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button.
-  In other words, we'd like to navigate to the list of heroes.
-
-  We'll need the Angular *Component Router*.
-
-  ### Add a base tag
-
-:marked
-  First, edit `index.html` and add `<base href="/">` at the top of the `<head>` section.
-+makeExample('toh-5/dart/web/index.html', 'base-href', 'index.html (base href)')(format=".")
-.callout.is-important
-  header base href is essential
   :marked
-      See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters.
-:marked
-  ### Make the router available
+    ### Make the router available
 
-  Not all apps need routing, which is why the Angular *Component Router* is in a separate, optional module library.
+    Not all apps need routing, which is why the Angular *Component Router* is
+    in a separate, optional library module.
 
-  The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`),
-  and a configuration annotation (`RouteConfig`). We'll get them all by importing `router.dart`:
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'import-router', 'lib/app_component.dart (router imports)')(format=".")
+    Like for any service, we make router services available to the application
+    by adding them to the `providers` list.  Let's update the `directives` and
+    `providers` lists to include the router assets:
 
-:marked
-  The *Component Router* is a service. Like any service, we have to make it
-  available to the application by adding it to the `providers` list.
+  +makeExcerpt('app/app.component.ts (excerpt)', 'directives-and-providers')
 
-  Let's update the `directives` and `providers` metadata lists to *include* the router assets.
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'directives-and-providers', 'lib/app_component.dart (directives and providers)')(format=".")
-:marked
-  Notice that we also removed the `HeroesComponent` from the `directives` list.
-  `AppComponent` no longer shows heroes; that will be the router's job.
-  We'll soon remove `<my-heroes>` from the template too.
-
-  ### Add and configure the router
-
-  The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` annotation to simultaneously
-  (a) assign a router to the component and (b) configure that router with *routes*.
-
-  *Routes* tell the router  which views to display when a user clicks a link or
-  pastes a URL into the browser address bar.
-
-  Let's define our first route, a route to the `HeroesComponent`.
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'route-config', 'lib/app_component.dart (RouteConfig for heroes)')(format=".")
-:marked
-  `@RouteConfig` takes a list of *route definitions*.
-  We have only one route definition at the moment but rest assured, we'll add more.
-
-  This *route definition* has three parts:
-  * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`).
-
-  * **name**: the official name of the route; it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`).
-
-  * **component**: the component that the router should create when navigating to this route (`HeroesComponent`).
-
-.l-sub-section
   :marked
-      Learn more about defining routes with @RouteConfig in the [Routing](../guide/router.html) chapter.
-:marked
-  ### Router Outlet
+    Notice that we also removed the `HeroesComponent` from the `directives` list.
+    `AppComponent` no longer shows heroes; that will be the router's job.
+    We'll soon remove `<my-heroes>` from the template too.
 
-  If we paste the path, `/heroes`, into the browser address bar,
-  the router should match it to the `'Heroes'` route and display the `HeroesComponent`.
-  But where?
-
-  We have to ***tell it where*** by adding `<router-outlet>` marker tags to the bottom of the template.
-  `RouterOutlet` is one of the `ROUTER_DIRECTIVES`.
-  The router displays each component immediately below the `<router-outlet>` as we navigate through the application.
-
-  ### Router Links
-  We don't really expect users to paste a route URL into the address bar.
-  We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
-
-  The revised template looks like this:
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'template', 'lib/app_component.dart (template v1)')(format=".")
-:marked
-  Notice the `[routerLink]` binding in the anchor tag.
-  We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list
-  that tells the router where to navigate when the user clicks the link.
-
-  We define a *routing instruction* with a *link parameters list*.
-  The list only has one element in our little sample, the quoted ***name* of the route** to follow.
-  Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
-.l-sub-section
+block router-config-intro
   :marked
-      Learn about the *link parameters list* in the [Routing](../guide/router.html#link-parameters-array) chapter.
-:marked
-  Refresh the browser.  We see only the app title. We don't see the heroes list.
-.l-sub-section
+    ### Configure routes and add the router
+
+    The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig`
+    annotation to simultaneously:
+
+    - Assign a router to the component
+    - Configure that router with *routes*
+
+block routerLink
   :marked
-    The browser's address bar shows `/`.
-    The route path to `HeroesComponent` is `/heroes`, not `/`.
-    We don't have a route that matches the path `/`, so there is nothing to show.
-    That's something we'll want to fix.
-:marked
-  We click the "Heroes" navigation link, the browser bar updates to `/heroes`,
-  and now we see the list of heroes. We are navigating at last!
+    Notice the `[routerLink]` binding in the anchor tag.
+    We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list
+    that tells the router where to navigate when the user clicks the link.
 
-  At this stage, our `AppComponent` looks like this.
-+makeExample('toh-5/dart/lib/app_component_2.dart',null, 'lib/app_component.dart (v2)')
-:marked
-  The  *AppComponent* is now attached to a router and displaying routed views.
-  For this reason and to distinguish it from other kinds of components,
-  we call this type of component a *Router Component*.
+    We define a *routing instruction* with a *link parameters list*.
+    The list only has one element in our little sample, the quoted ***name* of the route** to follow.
+    Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
+  .l-sub-section
+    :marked
+      Learn about the *link parameters list*
+      in the [Routing](../guide/router.html#link-parameters-array) chapter.
 
-
-:marked
-  ## Add a *Dashboard*
-  Routing only makes sense when we have multiple views. We need another view.
-
-  Create a placeholder `DashboardComponent` that gives us something to navigate to and from.
-+makeExample('toh-5/dart/lib/dashboard_component_1.dart',null, 'lib/dashboard_component.dart (v1)')(format=".")
-:marked
-  We’ll come back and make it more useful later.
-
-  ### Configure the dashboard route
-  Go back to `app_component.dart` and teach it to navigate to the dashboard.
-
-  Import the `DashboardComponent` so we can reference it in the dashboard route definition.
-
-  Add the following `'Dashboard'` route definition to the `@RouteConfig` list of definitions.
-+makeExample('toh-5/dart/lib/app_component.dart','dashboard-route', 'lib/app_component.dart (Dashboard route)')(format=".")
-.l-sub-section
+block redirect-vs-use-as-default
   :marked
-    **useAsDefault**
-
-    We want the app to show the dashboard when it starts and
-    we want to see a nice URL in the browser address bar that says `/dashboard`.
-    Remember that the browser launches with `/` in the address bar.
-    We don't have a route for that path and we'd rather not create one.
-
-    Fortunately we can add the `useAsDefault: true` property to the *route definition* and the
+    We don't need a route definition for that. Instead,
+    we add `useAsDefault: true` to the dashboard *route definition* and the
     router will display the dashboard when the browser URL doesn't match an existing route.
-:marked
-  Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
 
-+makeExample('toh-5/dart/lib/app_component.dart','template', 'lib/app_component.dart (template)')(format=".")
-.l-sub-section
+block templateUrl-path-resolution
   :marked
-    We nestled the two links within `<nav>` tags.
-    They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
-:marked
-  Refresh the browser. The app displays the dashboard and
-  we can navigate between the dashboard and the heroes.
+    The value of `templateUrl` can be an [asset][] in this package or another
+    package. To use an asset in another package, use a full package reference,
+    such as `'package:some_other_package/dashboard_component.html'`.
 
-  ## Dashboard Top Heroes
-  Let’s spice up the dashboard by displaying the top four heroes at a glance.
+    [asset]: https://www.dartlang.org/tools/pub/glossary#asset
 
-  Replace the `template` metadata with a `templateUrl` property that points to a new
-  template file.
-
-+makeExample('toh-5/dart/lib/dashboard_component.dart', 'template-url', 'lib/dashboard_component.dart (templateUrl)')(format=".")
-.l-sub-section
+block route-params
   :marked
-    We specify the path _all the way back to the application root_ &mdash; 
-    because Angular doesn't support relative paths _by default_.
-    We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
-:marked
-  Create that file with these contents:
-+makeExample('toh-5/dart/lib/dashboard_component.html', null, 'lib/dashboard_component.html')(format=".")
-:marked
-  We use `*ngFor` once again to iterate over a list of heroes and display their names.
-  We added extra `<div>` elements to help with styling later in this chapter.
+    We will no longer receive the hero in a parent component property binding.
+    The new `HeroDetailComponent` should take the `id` parameter from the router's
+    `RouteParams` service and use the `HeroService` to fetch the hero with that `id`.
 
-  There's a `(click)` binding to a `gotoDetail` method we haven't written yet and
-  we're displaying a list of heroes that we don't have.
-  We have work to do, starting with those heroes.
-
-  ### Share the *HeroService*
-
-  We'd like to re-use the `HeroService` to populate the component's `heroes` list.
-
-  Recall earlier in the chapter that we removed the `HeroService` from the `providers` list of the `HeroesComponent`
-  and added it to the `providers` list of the top level `AppComponent`.
-
-  That move created a singleton `HeroService` instance, available to *all* components of the application.
-  Angular will inject `HeroService` and we'll use it here in the `DashboardComponent`.
-
-  ### Get heroes
-  Open the `dashboard_component.dart` and add the requisite `import` statements.
-+makeExample('toh-5/dart/lib/dashboard_component_2.dart','imports', 'lib/dashboard_component.dart (imports)')(format=".")
-:marked
-  We need `OnInit` interface because we'll initialize the heroes in the `ngOnInit` method as we've done before.
-
-  Now implement the `DashboardComponent` class like this:
-+makeExample('toh-5/dart/lib/dashboard_component_2.dart','component', 'lib/dashboard_component.dart (class)')
-:marked
-  We saw this kind of logic before in the `HeroesComponent`.
-  * create a `heroes` list property
-  * inject the `HeroService` in the constructor and hold it in a private `_heroService` field.
-  * call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
-
-  The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice*
-  and stub the `gotoDetail` method until we're ready to implement it.
-
-  Refresh the browser and see four heroes in the new dashboard.
-
-.l-main-section
-:marked
-  ## Navigate to Hero Details
-
-  Although we display the details of a selected hero at the bottom of the `HeroesComponent`,
-  we don't yet *navigate* to the `HeroDetailComponent` in the three ways specified in our requirements:
-  1. from the *Dashboard* to a selected hero.
-  1. from the *Heroes* list to a selected hero.
-  1. from a "deep link" URL pasted into the browser address bar.
-
-  Adding a `'HeroDetail'` route seem an obvious place to start.
-
-  ### Routing to a hero detail
-
-  We'll add a route to the `HeroDetailComponent`  in the `AppComponent` where our other routes are configured.
-
-  The new route is a bit unusual in that we must tell the `HeroDetailComponent` *which hero to show*.
-  We didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.
-
-  At the moment the parent `HeroesComponent` sets the component's `hero` property to a hero object with a binding like this.
-code-example(format='').
-  &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
-:marked
-  That clearly won't work in any of our routing scenarios.
-  Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
-
-  ### Parameterized route
-  We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11, we could expect to see an URL such as this:
-code-example(format='').
-  /detail/11
-:marked
-  The `/detail/` part of that URL is constant. The trailing numeric `id` part changes from hero to hero.
-  We need to represent that variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`.
-
-  ### Configure a Route with a Parameter
-
-  Here's the *route definition* we'll use.
-+makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (route to HeroDetailComponent)')(format=".")
-:marked
-  The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
-  when navigating to the `HeroDetailComponent`.
-.l-sub-section
+block ngOnInit
   :marked
-      Of course we have to import the `HeroDetailComponent` before we create this route:
-  +makeExample('toh-5/dart/lib/app_component.dart','hero-detail-import')(format=".")
-:marked
-  We're finished with the `AppComponent`.
+    Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` service
+    and use the `HeroService` to fetch the hero with that `id`.
 
-  We won't add a `'Hero Detail'` link to the template because users
-  don't click a navigation *link* to view a particular hero.
-  They click a *hero* whether that hero is displayed on the dashboard or in the heroes list.
-
-  We'll get to those *hero* clicks later in the chapter.
-  There's no point in working on them until the `HeroDetailComponent`
-  is ready to be navigated *to*.
-
-  That will require an `HeroDetailComponent` overhaul.
-
-.l-main-section
-:marked
-  ## Revise the *HeroDetailComponent*
-
-  Before we rewrite the `HeroDetailComponent`, let's review what it looks like now:
-
-+makeExample('toh-4/dart/lib/hero_detail_component.dart', null, 'lib/hero_detail_component.dart (current)')
-:marked
-  The template won't change. We'll display a hero the same way. The big changes are driven by how we get the hero.
-
-  We will no longer receive the hero in a parent component property binding.
-  The new `HeroDetailComponent` should take the `id` parameter from the router's `RouteParams` service
-  and use the `HeroService` to fetch the hero with that `id`.
-
-  We need an import statement to reference the `RouteParams`.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-route-params')(format=".")
-:marked
-  We import the `HeroService`so we can fetch a hero.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-hero-service')(format=".")
-:marked
-  We use the `OnInit` interface from the already imported `angular2/core.dart` package because we'll
-  call the `HeroService` inside the `ngOnInit` component lifecycle hook.
-
-  We inject both the `RouteParams` service and the `HeroService` into the constructor as we've done before,
-  making private variables for both:
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'ctor', 'lib/hero_detail_component.dart (constructor)')(format=".")
-:marked
-  Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` service
-  and use the `HeroService` to fetch the hero with that `id`.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'ng-oninit', 'lib/hero_detail_component.dart (ngOnInit)')(format=".")
-:marked
-  Notice how we extract the `id` by calling the `RouteParams.get` method.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'get-id')(format=".")
-:marked
-  The hero `id` is a number. Route parameters are *always strings*.
-  So we convert the route parameter value to a number with the `int.parse` static method.
-
-  ### Add *HeroService.getHero*
-  The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
-  We better fix that quickly before someone notices that we broke the app.
-
-  Open `HeroService` and add the `getHero` method. It's trivial given that we're still faking data access:
-+makeExample('toh-5/dart/lib/hero_service.dart', 'get-hero', 'lib/hero_service.dart (getHero)')(format=".")
-:marked
-  Return to the `HeroDetailComponent` to clean up loose ends.
-
-  ### Find our way back
-
-  We can navigate *to* the `HeroDetailComponent` in several ways.
-  How do we navigate somewhere else when we're done?
-
-  The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
-  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
-
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'go-back', 'lib/hero_detail_component.dart (goBack)')(format=".")
-.l-sub-section
+block extract-id
   :marked
-    Going back too far could take us out of the application.
-    That's acceptable in a demo. We'd guard against it in a real application,
-    perhaps with the [*routerCanDeactivate* hook](../api/router/index/CanDeactivate-interface.html).
-:marked
-  Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
-+makeExample('toh-5/dart/lib/hero_detail_component.html', 'back-button')(format=".")
-:marked
-  Modifing the template to add this button spurs us to take one more incremental improvement and migrate the template to its own file
-  called `hero_detail_component.html`
-+makeExample('toh-5/dart/lib/hero_detail_component.html', '', 'lib/hero_detail_component.html')(format=".")
-:marked
-  We update the component metadata with a `templateUrl` pointing to the template file that we just created.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'template-url', 'lib/hero_detail_component.dart (templateUrl)')(format=".")
-:marked
-  Here's the (nearly) finished `HeroDetailComponent`:
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'v2', 'lib/hero_detail_component.dart (latest)')(format=".")
+    Notice how we extract the `id` by calling the `RouteParams.get` method.
 
-.l-main-section
-:marked
-  ## Select a *Dashboard* Hero
-  When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
-
-  In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
-+makeExample('toh-5/dart/lib/dashboard_component.html','click', 'lib/dashboard_component.html (click binding)')(format=".")
-:marked
-  We stubbed the `gotoDetail` method when we rewrote the `DashboardComponent`.
-  Now we give it a real implementation.
-+makeExample('toh-5/dart/lib/dashboard_component.dart','goto-detail', 'lib/dashboard_component.dart (gotoDetail)')(format=".")
-:marked
-  The `gotoDetail` method navigates in two steps:
-  1. set a route *link parameters list*
-  1. pass the list to the router's navigate method.
-
-  We wrote *link parameters lists* in the `AppComponent` for the navigation links.
-  Those lists had only one element, the name of the destination route.
-
-  This list has two elements, the ***name*** of the destination route and a ***route parameter object***
-  with an `id` field set to the value of the selected hero's `id`.
-
-  The two list items align with the ***name*** and ***:id*** token in the parameterized `HeroDetail` route configuration we added to `AppComponent` earlier in the chapter.
-+makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (hero detail route)')(format=".")
-:marked
-  The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
-  import the `router` reference and inject it in the constructor (along with the `HeroService`):
-
-+makeExample('toh-5/dart/lib/dashboard_component.dart','import-router', 'lib/dashboard_component.dart (excerpts)')(format=".")
-+makeExample('toh-5/dart/lib/dashboard_component.dart','ctor')(format=".")
-:marked
-  Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
-
-.l-main-section
-:marked
-  ## Select a Hero in the *HeroesComponent*
-  We'll do something similar in the `HeroesComponent`.
-
-  That component's current template exhibits a "master/detail" style with the list of heroes
-  at the top and details of the selected hero below.
-
-+makeExample('toh-4/dart/lib/app_component.dart','template', 'lib/heroes_component.dart (current template)')(format=".")
-
-:marked
-  Delete the last line of the template with the `<my-hero-detail>` tags.
-
-  We'll no longer show the full `HeroDetailComponent` here.
-  We're going to display the hero detail on its own page and route to it as we did in the dashboard.
-
-  But we'll throw in a small twist for variety.
-  When the user selects a hero from the list, we *won't* go to the detail page.
-  We'll show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
-
-  ### Add the *mini-detail*
-  Add the following HTML fragment at the bottom of the template where the `<my-hero-detail>` used to be:
-+makeExample('toh-5/dart/lib/heroes_component.html','mini-detail')(format=".")
-:marked
-  After clicking a hero, the user should see something like this below the hero list:
-
-figure.image-display
-  img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70")
-:marked
-  ### Format with the *UpperCasePipe*
-
-  Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `UpperCasePipe`
-  that we slipped into the interpolation binding. Look for it right after the pipe operator ( | ).
-+makeExample('toh-5/dart/lib/heroes_component.html','pipe')(format=".")
-:marked
-  Pipes are a good way to format strings, currency amounts, dates and other display data.
-  Angular ships with several pipes and we can write our own.
-.l-sub-section
+block heroes-component-cleanup
   :marked
-    Learn about pipes in the [Pipes](../guide/pipes.html) chapter.
-:marked
-  ### Move content out of the component file
-  We are not done. We still have to update the component class to support navigation to the
-  `HeroDetailComponent` when the user clicks the *View Details* button.
+    Because the template for `HeroesComponent` no longer uses `HeroDetailComponent`
+    directly &mdash; instead using the router to _navigate_ to it &mdash; we can
+    drop the `directives` argument from `@Component` and remove the unused hero detail
+    import. The revised `@Component` looks like this:
 
-  This component file is really big. Most of it is either template or CSS styles.
-  It's difficult to find the component logic amidst the noise of HTML and CSS.
+block css-files
+  +makeTabs(
+    `toh-5/dart/lib/hero_detail_component.css,
+    toh-5/dart/lib/dashboard_component.css`,
+    null,
+    `lib/hero_detail_component.css,
+    lib/dashboard_component.css`)
 
-  Let's migrate the template and the styles to their own files before we make any more changes:
-  1. *Cut-and-paste* the template contents into a new `heroes_component.html` file.
-  1. *Cut-and-paste* the styles contents into a new `heroes_component.css` file.
-  1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
-  
-  Because the template for `HeroesComponent` no longer uses `HeroDetailComponent` 
-  directly &mdash; instead using the router to _navigate_ to it &mdash; we can 
-  remove `HeroDetailComponent` from the directives list. That
-  list is now empty, so we can remove the `directives` argument. The revised
-  `@Component` looks like this:
-
-+makeExample('toh-5/dart/lib/heroes_component.dart', 'metadata', 'lib/heroes_component.dart (revised metadata)')(format=".")
-:marked
-  Now we can see what's going on as we update the component class along the same lines as the dashboard:
-  1. Import the `router`
-  1. Inject the `router` in the constructor (along with the `HeroService`)
-  1. Implement the `gotoDetail` method by calling the `router.navigate` method
-  with a two-part `HeroDetail` *link parameters list*.
-
-  Here's the revised component class:
-+makeExample('toh-5/dart/lib/heroes_component.dart', 'class', 'lib/heroes_component.dart (class)')
-:marked
-  Refresh the browser and start clicking.
-  We can navigate around the app, from the dashboard to hero details and back,
-  for heroes list to the mini-detail to the hero details and back to the heroes again.
-  We can jump back and forth between the dashboard and the heroes.
-
-  We've met all of the navigational requirements that propelled this chapter.
-
-.l-main-section
-:marked
-  ## Styling the App
-  The app is functional but pretty ugly.
-  Our creative designer team provided some CSS files to make it look better.
-
-  ### A Dashboard with Style
-  The designers think we should display the dashboard heroes in a row of rectangles.
-  They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
-
-  If we paste these ~60 lines into the component `styles` metadata,
-  they'll completely obscure the component logic.
-  Let's not do that. It's easier to edit CSS in a separate `*.css` file anyway.
-
-  Add a `dashboard_component.css` file to the `app` folder and reference
-  that file in the component metadata's `styleUrls` list property like this:
-+makeExample('toh-5/dart/lib/dashboard_component.dart', 'css', 'lib/dashboard_component.dart (styleUrls)')(format=".")
-:marked
-.l-sub-section
-  :marked
-    The `styleUrls` property is a list of style file names (with paths).
-    We could list multiple style files from different locations if we needed them.
-    As with `templateUrl`, we must specify the path _all the way back to the application root_.
-:marked
-  ### Stylish Hero Details
-  The designers also gave us CSS styles specifically for the `HeroDetailComponent`.
-
-  Add a `hero_detail_component.css` to the `app` folder and refer to that file inside
-  the `styleUrls` list as we did for `DashboardComponent`.
-
-  Here's the content for the aforementioned component CSS files.
-+makeTabs(
-`toh-5/dart/lib/hero_detail_component.css,
-toh-5/dart/lib/dashboard_component.css`,
-null,
-`lib/hero_detail_component.css,
-lib/dashboard_component.css`)
-:marked
-  ### Style the Navigation Links
-  The designers gave us CSS to make the navigation links in our `AppComponent` look more like selectable buttons.
-  We cooperated by surrounding those links in `<nav>` tags.
-
-  Add a `app_component.css` file to the `app` folder with the following content.
-+makeExample('toh-5/dart/lib/app_component.css', '', 'lib/app_component.css (navigation styles)')
-.l-sub-section
+block router-link-active
   :marked
     **The *router-link-active* class**
 
     The Angular Router adds the `router-link-active` class to the HTML navigation element
     whose route matches the active route. All we have to do is define the style for it. Sweet!
-:marked
-  Set the `AppComponent`’s `styleUrls` property to this CSS file.
-+makeExample('toh-5/dart/lib/app_component.dart','style-urls', 'lib/app_component.dart (styleUrls)')(format=".")
-:marked
-  ### Global application styles
-  When we add styles to a component, we're keeping everything a component needs
-  &mdash; HTML, the CSS, the code &mdash; together in one convenient place.
-  It's pretty easy to package it all up and re-use the component somewhere else.
 
-  We can also create styles at the *application level* outside of any component.
-
-  Our designers provided some basic styles to apply to elements across the entire app.
-  These correspond to the full set of master styles that we 
-  introduced earlier (see 
-  [QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
-  Here is an excerpt.
-
-+makeExample('toh-5/ts/styles.1.css', 'toh-excerpt', 'styles.css (app styles excerpt)')(format=".")
-
-- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
-
-:marked
-  Add a new file named `styles.css` in the root folder, if there isn't one already.
-  Ensure that it contains the [master styles given here](!{styles_css}).
-
-  If necessary, also edit `index.html` to refer to this stylesheet.
-+makeExample('toh-5/ts/index.html','css', 'index.html (link ref)')(format=".")
-:marked
-  Look at the app now. Our dashboard, heroes, and navigation links are styling!
-
-figure.image-display
-  img(src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations")
-
-.l-main-section
-:marked
-  ## Application structure and code
-
-  Review the sample source code in the <live-example></live-example> for this chapter.
-  Verify that we have the following structure:
-
-.filetree
-  .file angular2_tour_of_heroes
-  .children
-    .file lib
+block file-tree-end
+  .filetree
+    .file angular2_tour_of_heroes
     .children
-      .file app_component.dart
-      .file app_component.css
-      .file dashboard_component.css
-      .file dashboard_component.html
-      .file dashboard_component.dart
-      .file hero.dart
-      .file hero_detail_component.css
-      .file hero_detail_component.html
-      .file hero_detail_component.dart
-      .file hero_service.dart
-      .file heroes_component.css
-      .file heroes_component.html
-      .file heroes_component.dart
-      .file main.dart
-      .file mock_heroes.dart
-    .file web
-    .children
-      .file main.dart
-      .file index.html
-      .file styles.css
-    .file pubspec.yaml
-
-.l-main-section
-:marked
-  ## Recap
-
-  ### The Road Behind
-  We travelled a great distance in this chapter
-  - We added the Angular *Component Router* to navigate among different components.
-  - We learned how to create router links to represent navigation menu items.
-  - We used router parameters to navigate to the details of user selected hero.
-  - We shared the `HeroService` among multiple components.
-  - We moved HTML and CSS out of the component file and into their own files.
-  - We added the `uppercase` pipe to format data.
-
-  ### The Road Ahead
-  We have much of the foundation we need to build an application.
-  We're still missing a key piece: remote data access.
-
-  In the next chapter, 
-  we’ll replace our mock data with data retrieved from a server using http.
+      .file lib
+      .children
+        .file app_component.css
+        .file app_component.dart
+        .file dashboard_component.css
+        .file dashboard_component.dart
+        .file dashboard_component.html
+        .file hero.dart
+        .file hero_detail_component.css
+        .file hero_detail_component.dart
+        .file hero_detail_component.html
+        .file hero_service.dart
+        .file heroes_component.css
+        .file heroes_component.dart
+        .file heroes_component.html
+        .file mock_heroes.dart
+      .file web
+      .children
+        .file index.html
+        .file main.dart
+        .file styles.css
+      .file pubspec.yaml
diff --git a/public/docs/dart/latest/tutorial/toh-pt6.jade b/public/docs/dart/latest/tutorial/toh-pt6.jade
index 888bdb78bf..0ca2c931ed 100644
--- a/public/docs/dart/latest/tutorial/toh-pt6.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt6.jade
@@ -6,7 +6,7 @@ block includes
   - var _Angular_Http = 'Dart <code>BrowserClient</code>'
   - var _httpUrl = 'https://pub.dartlang.org/packages/http'
   - var _Angular_http_library = 'Dart <a href="' + _httpUrl + '"><b>http</b></a> package'
-  - var _HTTP_PROVIDERS = 'BrowserClient'
+  - var _HttpModule = 'BrowserClient'
   - var _JSON_stringify = 'JSON.encode'
 
 block start-server-and-watch
@@ -17,15 +17,15 @@ block start-server-and-watch
 
   code-example(language="bash").
       pub serve
- 
+
 block http-library
   :marked
-    We'll be using the !{_Angular_http_library}'s 
+    We'll be using the !{_Angular_http_library}'s
     `BrowserClient` class to communicate with a server.
 
     ### Pubspec updates
-    
-    We need to add package dependencies for the 
+
+    We need to add package dependencies for the
     `stream_transformers` and !{_Angular_http_library}s.
 
     We also need to add a `resolved_identifiers` entry, to inform the [angular2
@@ -45,10 +45,21 @@ block http-providers
   :marked
     Before our app can use `#{_Http}`, we have to register it as a service provider.
 
+    We should be able to access `!{_Http}` services from anywhere in the application.
+    So we register it in the `bootstrap` call where we
+    launch the application and its root `AppComponent`.
+
+  +makeExcerpt('app/main.ts','v1')
+
+  :marked
+    Notice that we supply `!{_HttpModule}` in a list, as the second parameter to
+    the `bootstrap` method.  This has the same effect as the `providers` list in
+    `@Component` annotation.
+
 block backend
   :marked
     We want to replace `BrowserClient`, the service that talks to the remote server,
-    with the in-memory web API service. 
+    with the in-memory web API service.
     Our in-memory web API service, shown below, is implemented using the
     `http` library `MockClient` class.
     All `http` client implementations share a common `Client` interface, so
@@ -77,7 +88,7 @@ block hero-detail-comp-updates
   :marked
     ### Edit in the *HeroDetailComponent*
 
-    We already have `HeroDetailComponent` for viewing details about a specific hero. 
+    We already have `HeroDetailComponent` for viewing details about a specific hero.
     Supporting edit functionality is a natural extension of the detail view,
     so we are able to reuse `HeroDetailComponent` with a few tweaks.
 
@@ -87,9 +98,6 @@ block hero-detail-comp-save-and-goback
 block add-new-hero-via-detail-comp
   //- N/A
 
-block heroes-comp-directives
-  //- N/A
-
 block heroes-comp-add
   //- N/A
 
@@ -194,10 +202,10 @@ block file-summary
      lib/hero_search_component.dart,
      lib/hero_search_component.html,
      lib/hero_search_service.dart`)
-     
+
   +makeTabs(
     `toh-6/dart/pubspec.yaml,
      toh-6/dart/web/main.dart`,
-    `,final`,
+    null,
     `pubspec.yaml,
      web/main.dart`)
diff --git a/public/docs/js/latest/glossary.jade b/public/docs/js/latest/glossary.jade
index 3b2d90d2f2..17e889224f 100644
--- a/public/docs/js/latest/glossary.jade
+++ b/public/docs/js/latest/glossary.jade
@@ -1,35 +1,4 @@
-include _util-fns
-// From ts/glossary.jade, the folder ts/latest/_fragments is generated which contains a bunch of partial files.
-// These partials comprise the glossary,a subset of these partials should be used to generate the glossary for
-// __javascript__ under BASICS.
-!=partial('../../ts/latest/_fragments/glossary-intro')
-//!=partial('../../ts/latest/_fragments/glossary-a-1') not needed in javascript
-!=partial('../../ts/latest/_fragments/glossary-a-2')
-!=partial('../../ts/latest/_fragments/glossary-b-c')
-!=partial('../../ts/latest/_fragments/glossary-d1')
-!=partial('../../ts/latest/_fragments/glossary-d2')
-!=partial('../../ts/latest/_fragments/glossary-e1')
-!=partial('../../ts/latest/_fragments/glossary-e2')
-!=partial('../../ts/latest/_fragments/glossary-f-l')
-!=partial('../../ts/latest/_fragments/glossary-m1')
-!=partial('../../ts/latest/_fragments/glossary-m2')
-!=partial('../../ts/latest/_fragments/glossary-n-s')
-!=partial('../../ts/latest/_fragments/glossary-t1')
-!=partial('../../ts/latest/_fragments/glossary-t2')
-!=partial('../../ts/latest/_fragments/glossary-u-z')
+extends ../../ts/latest/glossary.jade
 
-// NOTE: (ericjim): I am almost certain these lines are doing nothing,
-// so instead I use `!=partial` to include the glossary fragments.
-//+includeShared('{ts}', 'intro')
-//+includeShared('{ts}', 'a2')
-//+includeShared('{ts}', 'b-c')
-//+includeShared('{ts}', 'd1')
-//+includeShared('{ts}', 'd2')
-//+includeShared('{ts}', 'e1')
-//+includeShared('{ts}', 'e2')
-//+includeShared('{ts}', 'f-l')
-//+includeShared('{ts}', 'm1')
-//+includeShared('{ts}', 'n-s')
-//+includeShared('{ts}', 't1')
-//+includeShared('{ts}', 't2')
-//+includeShared('{ts}', 'u-z')
\ No newline at end of file
+block includes
+  include _util-fns
diff --git a/public/docs/js/latest/guide/glossary.jade b/public/docs/js/latest/guide/glossary.jade
index a66284569e..1d2eb49664 100644
--- a/public/docs/js/latest/guide/glossary.jade
+++ b/public/docs/js/latest/guide/glossary.jade
@@ -1 +1,4 @@
-!= partial("../glossary")
+extends ../glossary
+
+block var-def
+  include ../_util-fns
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index 3dc5beb299..4aec047caf 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -217,7 +217,7 @@ code-example(format="").
   Angular apps are composed of [Angular Modules](guide/ngmodule.html) that 
   snuggly contain all our components and everything else we need for our app.
 
-  Create the `app/app.module.ts` file with the following content:
+  Create the `app/app.module.js` file with the following content:
 
 +makeExample('quickstart/js/app/app.module.js', null, 'app/app.module.js')
 
diff --git a/public/docs/ts/_cache/glossary.jade b/public/docs/ts/_cache/glossary.jade
new file mode 100644
index 0000000000..53fe6be9b5
--- /dev/null
+++ b/public/docs/ts/_cache/glossary.jade
@@ -0,0 +1,795 @@
+block includes
+  include _util-fns
+
+//- current.path = ['docs', lang, 'latest', ...]
+- var lang = current.path[1]
+- var docsPath='/' + current.path[0]
+- var docsLatest='/' + current.path.slice(0,3).join('/');
+- var _at = lang === 'js' ? '' : '@'
+- var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>'
+
+:marked
+  # Angular 2 Glossary
+
+  Angular 2 has a vocabulary of its own.
+  Most Angular 2 terms are everyday English words
+  with a specific meaning within the Angular system.
+
+  We have gathered here the most prominent terms
+  and a few less familiar ones that have unusual or
+  unexpected definitions.
+
+  [A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I)
+  [J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R)
+  [S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z)
+
+.l-main-section#A
+
++ifDocsFor('ts')
+  a#aot
+  :marked
+    ## Ahead of Time (AOT) Compilation
+  .l-sub-section
+    :marked
+      Angular applications can be compiled by developers at build-time.
+      By compiling your application using the compiler-cli, `ngc`, you can boostrap directly
+      to a Module Factory, meaning you don't need to include the Angular compiler in your javascript bundle.
+      Ahead of Time compiled applications also benefit from decreased load time and increased performance.
+
+  :marked
+    ## Angular Module
+  .l-sub-section
+    :marked
+      Helps us organize an application into cohesive blocks of functionality.
+      An Angular module identifies the components, directives, and pipes that are used by the application
+      along with the list of external Angular modules that the application needs, such as `FormsModule`.
+
+      Every Angular application has an application root module class. By convention the class is
+      called `AppModule` and resides in a file named `app.component.ts`.
+
+      See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples.
+
++ifDocsFor('ts|dart')
+  :marked
+    ## Annotation
+  .l-sub-section
+    block annotation-defn
+      :marked
+        In practice, a synonym for [Decoration](#decorator).
+
+:marked
+  ## Attribute Directive
+.l-sub-section
+  :marked
+    A category of [Directive](#directive) that can listen to and modify the behavior of
+    other HTML elements, attributes, properties, and components. They are usually represented
+    as HTML attributes, hence the name.
+
+    The `ngClass` directive for adding and removing CSS class names is a good example of
+    an Attribute Directive.
+
+.l-main-section#B
+
++ifDocsFor('ts|js')
+  :marked
+    ## Barrel
+  .l-sub-section
+    :marked
+      A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module.
+      The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
+
+      Imagine three ES2015 modules in a `heroes` folder:
+    code-example.
+      // heroes/hero.component.ts
+      export class HeroComponent {}
+
+      // heroes/hero.model.ts
+      export class Hero {}
+
+      // heroes/hero.service.ts
+      export class HeroService {}
+    :marked
+      Without a barrel, a consumer would need three import statements:
+    code-example.
+      import { HeroComponent } from '../heroes/hero.component.ts';
+      import { Hero }          from '../heroes/hero.model.ts';
+      import { HeroService }   from '../heroes/hero.service.ts';
+    :marked
+      We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items:
+    code-example.
+      export * from './hero.model.ts';   // re-export all of its exports
+      export * from './hero.service.ts'; // re-export all of its exports
+      export { HeroComponent } from './hero.component.ts'; // re-export the named thing
+    :marked
+      Now a consumer can import what it needs from the barrel.
+    code-example.
+      import { Hero, HeroService } from '../heroes'; // index is implied
+    :marked
+      The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
+
+      That's why we can write this:
+
+    +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
+
+    .alert.is-important
+      :marked
+        Note that you can often achieve this same goal using [Angular modules](#angular-module) instead.
+
+:marked
+  ## Binding
+.l-sub-section
+  :marked
+    Almost always refers to [Data Binding](#data-binding) and the act of
+    binding an HTML object property to a data object property.
+
+    May refer to a [Dependency Injection](#dependency-injection) binding
+    between a "token" or "key" and a dependency [provider](#provider).
+    This more rare usage should be clear in context.
+
+:marked
+  ## Bootstrap
+.l-sub-section
+  block bootstrap-defn-top
+    :marked
+      We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
+      The bootstraping identifies an application's top level "root" [Component](#component), which is the first
+      component that is loaded for the application. For more information see the [QuickStart](!{docsLatest}/quickstart.html).
+  :marked
+    One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
+
+.l-main-section#C
+:marked
+  ## camelCase
+.l-sub-section
+  :marked
+    The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
+    _except the first letter which is a lowercase letter_.
+
+    Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`.
+
+    This form is also known as **lower camel case**, to distinguish it from **upper camel case** which we call [PascalCase](#pascalcase).
+    When we write "camelCase" in this documentation we always mean *lower camel case*.
+
+:marked
+  ## Component
+.l-sub-section
+  :marked
+    An Angular class responsible for exposing data
+    to a [View](#view) and handling most of the view’s display
+    and user-interaction logic.
+
+    The Component is one of the most important building blocks in the Angular system.
+    It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template).
+
+    The  developer applies the `!{_at}Component` !{_decoratorLink} to
+    the component class, thereby attaching to the class the essential component metadata
+    that Angular needs to create a component instance and render it with its template
+    as a view.
+
+    Those familiar with "MVC" and "MVVM" patterns will recognize
+    the Component in the role of "Controller" or "View Model".
+
+.l-main-section#D
+:marked
+  ## dash-case
+.l-sub-section
+  :marked
+    The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
+    This form is also known as [kebab-case](#kebab-case).
+
+    [Directive](#directive) selectors (like `my-app`) <span if-docs="ts">and
+    the root of filenames (such as `hero-list.component.ts`)</span> are often
+    spelled in dash-case.
+
+:marked
+  ## Data Binding
+.l-sub-section
+  :marked
+    Applications display data values to a user and respond to user
+    actions (clicks, touches, keystrokes).
+
+    We could push application data values into HTML, attach
+    event listeners, pull changed values from the screen, and
+    update application data values ... all by hand.
+
+    Or we could declare the relationship between an HTML widget
+    and an application data source ... and let a data binding
+    framework handle the details.
+
+    Data Binding is that second approach. Angular has a rich
+    data binding framework with a variety of data binding
+    operations and supporting declaration syntax.
+
+     The many forms of binding include:
+     * [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation)
+     * [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding)
+     * [Event Binding](!{docsLatest}/guide/template-syntax.html#event-binding)
+     * [Attribute Binding](!{docsLatest}/guide/template-syntax.html#attribute-binding)
+     * [Class Binding](!{docsLatest}/guide/template-syntax.html#class-binding)
+     * [Style Binding](!{docsLatest}/guide/template-syntax.html#style-binding)
+     * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ng-model)
+
+    Learn more about data binding in the
+    [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) chapter.
+
++ifDocsFor('ts|dart')
+  a#decorator
+  a#decoration
+  :marked
+    ## Decorator | Decoration
+  .l-sub-section
+    block decorator-defn
+      :marked
+        A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
+
+        Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
+
+        We apply a decorator by positioning it
+        immediately above or to the left of the thing it decorates.
+
+        Angular has its own set of decorators to help it interoperate with our application parts.
+        Here is an example of a `@Component` decorator that identifies a
+        class as an Angular [Component](#component) and an `@Input` decorator applied to a property
+        of that component.
+        The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
+        ```
+        @Component({...})
+        export class AppComponent {
+          constructor(@Inject('SpecialFoo') public foo:Foo) {}
+          @Input() name:string;
+        }
+        ```
+        The scope of a decorator is limited to the language feature
+        that it decorates. None of the decorations shown here will "leak" to other
+        classes appearing below it in the file.
+
+      .alert.is-important
+        :marked
+          Always include the parentheses `()` when applying a decorator.
+          A decorator is a **function** that must be called when applied.
+
+:marked
+  ## Dependency Injection
+.l-sub-section
+  :marked
+    Dependency Injection is both a design pattern and a mechanism
+    for creating and delivering parts of an application to other
+    parts of an application that request them.
+
+    Angular developers prefer to build applications by defining many simple parts
+    that each do one thing well and then wire them together at runtime.
+
+    These parts often rely on other parts. An Angular [Component](#component)
+    part might rely on a service part to get data or perform a calculation. When a
+    part "A" relies on another part "B", we say that "A" depends on "B" and
+    that "B" is a dependency of "A".
+
+    We can ask a "Dependency Injection System" to create "A"
+    for us and handle all the dependencies.
+    If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
+    and returns a fully prepared instance of "A".
+
+    Angular provides and relies upon its own sophisticated
+    [Dependency Injection](dependency-injection.html) system
+    to assemble and run applications by "injecting" application parts
+    into other application parts where and when needed.
+
+    At the core there is an [`Injector`](#injector) that returns dependency values on request.
+    The expression `injector.get(token)` returns the value associated with the given token.
+
+    A token is an Angular type (`OpaqueToken`). We rarely deal with tokens directly; most
+    methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
+    to a token. When we write `injector.get(Foo)`, the injector returns
+    the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
+
+    Angular makes similar requests internally during many of its operations
+    as when it creates a [`Component`](#component) for display.
+
+    The `Injector` maintains an internal map of tokens to dependency values.
+    If the `Injector` can't find a value for a given token, it creates
+    a new value using a `Provider` for that token.
+
+    A [Provider](#provider) is a recipe for
+    creating new instances of a dependency value associated with a particular token.
+
+    An injector can only create a value for a given token if it has
+    a `Provider` for that token in its internal provider registry.
+    Registering providers is a critical preparatory step.
+
+    Angular registers some of its own providers with every injector.
+    We can register our own providers.
+
+    Learn more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) chapter.
+:marked
+  ## Directive
+.l-sub-section
+  :marked
+    An Angular class responsible for creating, re-shaping, and interacting with HTML elements
+    in the browser DOM. Directives are Angular's most fundamental feature.
+
+    A Directive is almost always associated with an HTML element or attribute.
+    We often refer to such an element or attribute as the directive itself.
+    When Angular finds a directive in an HTML template,
+    it creates the matching directive class instance
+    and gives that instance control over that portion of the browser DOM.
+
+    Developers can invent custom HTML markup (e.g., `<my-directive>`) to
+    associate with their custom directives. They add this custom markup to HTML templates
+    as if they were writing native HTML. In this way, directives become extensions of
+    HTML itself.
+
+    Directives fall into one of three categories:
+
+    1. [Components](#component) that combine application logic with an HTML template to
+    render application [views]. Components are usually represented as HTML elements.
+    They are the building blocks of an Angular application and the
+    developer can expect to write a lot of them.
+
+    1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
+    other HTML elements, attributes, properties, and components. They are usually represented
+    as HTML attributes, hence the name.
+
+    1. [Structural Directives](#structural-directive), a directive responsible for
+    shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
+    elements and their children.
+
+.l-main-section#E
+
+:marked
+  ## ECMAScript
+.l-sub-section
+  :marked
+    The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
+
+    The latest approved version of JavaScript is
+    [ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
+    (AKA "ES2016" or "ES7") and many Angular 2 developers will write their applications
+    either in this version of the language or a dialect that strives to be
+    compatible with it such as [TypeScript](#typesScript).
+
+    Most modern browsers today only support the much older "ECMAScript 5" (AKA ES5) standard.
+    Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
+    to ES5 JavaScript.
+
+    Angular 2 developers may choose to write in ES5 directly.
+
+:marked
+  ## ES2015
+.l-sub-section
+  :marked
+    Short hand for "[ECMAScript 2015](#ecmascript=2015)".
+:marked
+  ## ES6
+.l-sub-section
+  :marked
+    Short hand for "[ECMAScript 2015](#ecmascript=2015)".
+:marked
+  ## ES5
+.l-sub-section
+  :marked
+    Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
+    See [ECMAScript](#ecmascript).
+
+a#F
+a#G
+a#H
+.l-main-section#I
+:marked
+  ## Injector
+.l-sub-section
+  :marked
+    An object in the Angular [dependency injection system](#dependency-injection)
+    that can find a named "dependency" in its cache or create such a thing
+    with a registered [provider](#provider).
+
+:marked
+  ## Input
+.l-sub-section
+  :marked
+    A directive property that can be the ***target*** of a
+    [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding).
+    Data values flow *into* this property from the data source identified
+    in the template expression to the right of the equal sign.
+
+    See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter.
+
+:marked
+  ## Interpolation
+.l-sub-section
+  :marked
+    A form of [Property Data Binding](#data-binding) in which a
+    [template expression](#template-expression) between double-curly braces
+    renders as text.  That text may be concatenated with neighboring text
+    before it is assigned to an element property
+    or displayed between element tags as in this example.
+
+  code-example(language="html" escape="html").
+    <label>My current hero is {{hero.name}}</label>
+
+  :marked
+    Learn more about interpolation in the
+    [Template Syntax](!{docsLatest}/guide/template-syntax.html#interpolation) chapter.
+
+.l-main-section#J
+
++ifDocsFor('ts')
+  a#jit
+  :marked
+    ## Just in Time (JIT) Compilation
+  .l-sub-section
+    :marked
+      With Angular _Just in Time_  bootstrapping you compile your components and modules in the browser
+      and launch the application dynamically. This is a good choice during development.
+      Consider the [Ahead of Time](#aot) mode for production apps.
+
+.l-main-section#K
+:marked
+  ## kebab-case
+.l-sub-section
+  :marked
+    See [dash-case](#dash-case).
+
+.l-main-section#L
+:marked
+  ## Lifecycle Hooks
+.l-sub-section
+  :marked
+    [Directives](#directive) and [Components](#component) have a lifecycle
+    managed by Angular as it creates, updates and destroys them.
+
+    Developers can tap into key moments in that lifecycle by implementing
+    one or more of the "Lifecycle Hook" interfaces.
+
+    Each interface has a single hook method whose name is the interface name prefixed with `ng`.
+    For example, the `OnInit` interface has a hook method names `ngOnInit`.
+
+    Angular calls these hook methods in the following order:
+    * `ngOnChanges` - called when an [input](#input)/[output](#output) binding values change
+    * `ngOnInit` - after the first `ngOnChanges`
+    * `ngDoCheck` - developer's custom change detection
+    * `ngAfterContentInit` - after component content initialized
+    * `ngAfterContentChecked` - after every check of component content
+    * `ngAfterViewInit` - after component's view(s) are initialized
+    * `ngAfterViewChecked` - after every check of a component's view(s)
+    * `ngOnDestroy` - just before the directive is destroyed.
+
+    Learn more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks.html) chapter.
+
+.l-main-section#M
+
+:marked
+  ## Module
+.l-sub-section
+  block module-defn
+    .alert.is-important
+      :marked
+       In Angular, there are two types of modules:
+       - [Angular modules](#angular-module).
+       See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples.
+       - ES2015 modules as described in this section.
+
+    :marked
+      Angular apps are modular.
+
+      In general, we assemble our application from many modules, both the ones we write ourselves
+      and the ones we acquire from others.
+
+      A typical module is a cohesive block of code dedicated to a single purpose.
+
+      A module **exports** something of value in that code, typically one thing such as a class.
+      A module that needs that thing, **imports** it.
+
+      The structure of Angular modules and the import/export syntax
+      is based on the [ES2015](#es2015) module standard
+      described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
+
+      An application that adheres to this standard requires a module loader to
+      load modules on request and resolve inter-module dependencies.
+      Angular does not ship with a module loader and does not have a preference
+      for any particular 3rd party library (although most samples use SystemJS).
+      Application developers may pick any module library that conforms to the standard
+
+      Modules are typically named after the file in which the exported thing is defined.
+      The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts)
+      class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
+
+      Developers rarely access Angular feature modules directly.
+      We usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
+
+a#N
+.l-main-section#O
+
++ifDocsFor('ts|js')
+  :marked
+    ## Observable
+  .l-sub-section
+    :marked
+      We can think of an observable as an array whose items arrive asynchronously over time.
+      Observables help us manage asynchronous data, such as data coming from a backend service.
+      Observables are used within Angular itself, including Angular's event system and its http client service.
+
+      To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).
+      Observables are a proposed feature for ES 2016, the next version of JavaScript.
+
+:marked
+  ## Output
+.l-sub-section
+  :marked
+    A directive property that can be the ***target*** of an
+    [Event Binding](!{docsLatest}/guide/template-syntax.html#property-binding).
+    Events stream *out* of this property to the receiver identified
+    in the template expression to the right of the equal sign.
+
+    See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter.
+
+.l-main-section#P
+
+:marked
+  ## PascalCase
+.l-sub-section
+  :marked
+    The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
+    Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
+
+    This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase).
+    In this documentation, "PascalCase" means *upper camel case* and  "camelCase" means *lower camel case*.
+
+:marked
+  ## Pipe
+.l-sub-section
+  :marked
+    An Angular pipe is a function that transforms input values to output values for
+    display in a [view](#view). We use the `!{_at}Pipe` !{_decoratorLink}
+    to associate the pipe function with a name. We can then use that
+    name in our HTML to declaratively transform values on screen.
+
+    Here's an example that uses the built-in `currency` pipe to display
+    a numeric value in the local currency.
+
+  code-example(language="html" escape="html").
+    <label>Price: </label>{{product.price | currency}}
+  :marked
+    Learn more in the chapter on [pipes](!{docsLatest}/guide/pipes.html) .
+
+- var _ProviderUrl = docsLatest+'/api/'+(lang == 'dart' ? 'angular2.core' : 'core/index')+'/Provider-class.html'
+:marked
+  ## Provider
+.l-sub-section
+  :marked
+    A [Provider](!{_ProviderUrl}) creates a new instance of a dependency for the
+    [Dependency Injection](#dependency-injection) system.
+    It relates a lookup token to code &mdash; sometimes called a "recipe" &mdash;
+    that can create a dependency value.
+
+a#Q
+.l-main-section#R
+
++ifDocsFor('ts|js')
+  :marked
+    ## Reactive Forms
+  .l-sub-section
+    :marked
+      A technique for building Angular forms through code in a component.
+      The alternate technique is [Template-Driven Forms](#template-driven-forms).
+
+      When building reactive forms:
+      - The "source of truth" is the component. The validation is defined using code in the component.
+      - Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`.
+      - The template input elements do *not* use `ngModel`.
+      - The associated Angular directives are all prefixed with `Form` such as `FormGroup`, `FormControl`, and `FormControlName`.
+
+      Reactive forms are powerful, flexible, and great for more complex data entry form scenarios, such as dynamic generation
+      of form controls.
+
+:marked
+  ## Router
+.l-sub-section
+  :marked
+    Most applications consist of many screens or [views](#view).
+    The user navigates among them by clicking links and buttons
+    and taking other similar actions that cause the application to
+    replace one view with another.
+
+    The Angular [Component Router](!{docsLatest}/guide/router.html) is a richly featured mechanism for configuring
+    and managing the entire view navigation process including the creation and destruction
+    of views.
+  +ifDocsFor('ts|js')
+    :marked
+      In most cases, components becomes attached to a [router](#router) by means
+      of a `RouterConfig` that defines routes to views.
+
+      A [routing component's](#routing-component) template has a `RouterOutlet` element
+      where it can display views produced by the router.
+
+      Other views in the application likely have anchor tags or buttons with `RouterLink`
+      directives that users can click to navigate.
+
+      See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
+
++ifDocsFor('ts|js')
+  :marked
+    ## RouterModule
+  .l-sub-section
+    :marked
+      A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
+
+      See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
+
+:marked
+  ## Routing Component
+.l-sub-section
+  block routing-component-defn
+    :marked
+      An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations.
+
+      See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more.
+
+.l-main-section#S
+
++ifDocsFor('ts|js')
+  :marked
+    ## Scoped Package
+  .l-sub-section
+    :marked
+      Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
+      `@angular/http`, and `@angular/router`.
+
+      A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
+
+      We import a scoped package the same way we'd import a *normal* package.
+      The only difference, from a consumer perspective,
+      is that the package name begins with the Angular *scope name*, `@angular`.
+
+    +makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
+
+a#snake-case
+:marked
+  ## snake_case
+
+.l-sub-section
+  block snake-case-defn
+    :marked
+      The practice of writing compound words or phrases such that each word is separated by an
+      underscore (`_`). This form is also known as **underscore case**.
+
+:marked
+  ## Service
+.l-sub-section
+  :marked
+    Components are great and all, but what do we do with data or logic that are not associated
+    with a specific view or that we want to share across components? We build services!
+
+    Applications often require services such as a hero data service or a logging service.
+    Our components depend on these services to do the heavy lifting.
+
+    A service is a class with a focused purpose.
+    We often create a service to implement features that are
+    independent from any specific view,
+    provide share data or logic across components, or encapsulate external interactions.
+
+    See the [Services](!{docsLatest}/tutorial/toh-pt4.html) chapter of the tutorial to learn more.
+
+:marked
+  ## Structural Directive
+.l-sub-section
+  :marked
+    A category of [Directive](#directive) that can
+    shape or re-shape HTML layout, typically by adding, removing, or manipulating
+    elements and their children.
+
+    The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
+    good examples in this category.
+
+    See the [Structural Directives](!{docsLatest}/guide/structural-directives.html) chapter to learn more.
+
+.l-main-section#T
+:marked
+  ## Template
+.l-sub-section
+  :marked
+    A template is a chunk of HTML that Angular uses to render a [view](#view) with
+    the support and continuing guidance of an Angular [Directive](#directive),
+    most notably a [Component](#component).
+
+    We write templates in a special [Template Syntax](!{docsLatest}/guide/template-syntax.html).
+
++ifDocsFor('ts|js')
+  :marked
+    ## Template-Driven Forms
+  .l-sub-section
+    :marked
+      A technique for building Angular forms using HTML forms and input elements in the view.
+      The alternate technique is [Reactive Forms](#reactive-forms).
+
+      When building template-driven forms:
+      - The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
+      - [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements.
+      - Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and
+      two-way binding set up.
+      - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
+
+      Template-driven forms are convenient, quick, and simple and are a good choice for many basic data entry form scenarios.
+
+      Learn how to build template-driven forms
+      in the [Forms](!{docsLatest}/guide/forms.html) chapter.
+
+:marked
+  ## Template Expression
+.l-sub-section
+  :marked
+    An expression is a !{_Lang}-like syntax that Angular evaluates within
+    a [data binding](#data-binding).  Learn how to write template expressions
+    in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#template-expressions) chapter.
+
+:marked
+  ## Transpile
+.l-sub-section
+  :marked
+    The process of transforming code written in one form of JavaScript
+    (e.g., TypeScript) into another form of JavaScript  (e.g., [ES5](#es5)).
+
+ :marked
+  ## TypeScript
+.l-sub-section
+  :marked
+    A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
+    language features and many features that may arrive in future versions
+    of JavaScript such as [Decorators](#decorator).
+
+    TypeScript is also noteable for its optional typing system which gives
+    us compile-time type-checking and strong tooling support (e.g. "intellisense",
+    code completion, refactoring, and intelligent search). Many code editors
+    and IDEs support TypeScript either natively or with plugins.
+
+    TypeScript is the preferred language for Angular 2 development although
+    we are welcome to write in other JavaScript dialects such as [ES5](#es5).
+
+    Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
+
+a#U
+.l-main-section#V
+
+:marked
+  ## View
+.l-sub-section
+  :marked
+    A view is a portion of the screen that displays information and responds
+    to user actions such as clicks, mouse moves, and keystrokes.
+
+    Angular renders a view under the control of one or more [Directives](#directive),
+    especially  [Component](#component) directives and their companion [Templates](#template).
+    The Component plays such a prominent role that we often
+    find it convenient to refer to a component as a view.
+
+    Views often contain other views and any view might be loaded and unloaded
+    dynamically as the user navigates through the application, typically
+    under the control of a [router](#router).
+
+a#W
+a#X
+a#Y
+.l-main-section#Z
+
+:marked
+  ## Zone
+.l-sub-section
+  block zone-defn
+    :marked
+      Zones are a mechanism for encapsulating and intercepting
+      a JavaScript application's asynchronous activity.
+
+      The browser DOM and JavaScript have a limited number
+      of asynchronous activities, activities such as DOM events (e.g., clicks),
+      [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and
+      [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
+      calls to remote servers.
+
+      Zones intercept all of these activities and give a "zone client" the opportunity
+      to take action before and after the async activity completes.
+
+      Angular runs our application in a zone where it can respond to
+      asynchronous events by checking for data changes and updating
+      the information it displays via [data bindings](#data-binding).
+
+      Learn more about zones in this
+      [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
diff --git a/public/docs/ts/_cache/guide/hierarchical-dependency-injection.jade b/public/docs/ts/_cache/guide/hierarchical-dependency-injection.jade
index 6fcf422eda..f5bd734b41 100644
--- a/public/docs/ts/_cache/guide/hierarchical-dependency-injection.jade
+++ b/public/docs/ts/_cache/guide/hierarchical-dependency-injection.jade
@@ -8,7 +8,7 @@ block includes
   Angular has a Hierarchical Dependency Injection system.
   There is actually a tree of injectors
   that parallel an application's component tree.
-  We can re-configure the injectors at any level of that component tree with
+  We can reconfigure the injectors at any level of that component tree with
   interesting and useful results.
 
   In this chapter we explore these points and write some code.
@@ -67,10 +67,10 @@ figure.image-display
      We'll reserve discussion of this option for another day.
 :marked
   Such a proliferation of injectors makes little sense until we consider the possibility that injectors at different levels can be
-  configured with different providers. We don't *have* to re-configure providers at every level. But we *can*.
+  configured with different providers. We don't *have* to reconfigure providers at every level. But we *can*.
 
-  If we don't re-configure, the tree of injectors appears to be flat. All requests bubble up to the root injector that we
-  configured with the `bootstrap` method.
+  If we don't reconfigure, the tree of injectors appears to be flat. All requests bubble up to the root 
+  <span if-docs="ts">NgModule</span> injector that we configured with the `!{_bootstrapModule}` method.
 
   The ability to configure one or more providers at different levels opens up interesting and useful possibilities.
 
@@ -140,11 +140,14 @@ figure.image-display
   Look closely at the metadata for our `HeroEditComponent`. Notice the `providers` property.
 
 +makeExample('hierarchical-dependency-injection/ts/app/hero-editor.component.ts', 'providers')
+
+- var _root_NgModule = _docsFor == 'dart' ? '<code>bootstrap</code> arguments' : 'root <code>NgModule</code>'
 :marked
   This adds a `RestoreService` provider to the injector of the `HeroEditComponent`.
-  Couldn’t we simply alter our bootstrap call to this?
+  Couldn’t we simply alter our !{_root_NgModule} to include this provider?
+
++makeExcerpt(_appModuleTsVsMainTs, 'bad-alternative')
 
-+makeExample('hierarchical-dependency-injection/ts/app/main.ts', 'bad-alternative')
 :marked
   Technically we could, but our component wouldn’t quite behave the way it is supposed to. Remember that each injector treats the services that it provides as singletons. However, in order to be able to have multiple instances of `HeroEditComponent` edit multiple heroes at the same time we need to have multiple instances of the `RestoreService`. More specifically, each instance of `HeroEditComponent` needs to be bound to its own instance of the `RestoreService`.
 
@@ -159,20 +162,14 @@ figure.image-display
   we would have exactly one instance of that service and it would be shared across the entire application.
 
   That’s clearly not what we want in this scenario. We want each component to have its own instance of the `RestoreService`.
-  Defining (or re-defining) a provider at the component level creates a new instance of the service for each new instance
+  Defining (or redefining) a provider at the component level creates a new instance of the service for each new instance
   of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`,
   scoped to that component instance and its child components.
 
-  <!--
-    ## Advanced Dependency Injection in Angular 2
-
-    Restrict Dependency Lookups
-    [TODO] (@Host) This has been postponed for now until we come up with a decent use case
-
-
-    .l-main-section
-    :marked
-      ## Dependency Visibility
-
-    [TODO] (providers vs viewProviders) This has been postponed for now until come up with a decent use case
-    -->
+//- ## Advanced Dependency Injection in Angular 2
+//- Restrict Dependency Lookups
+//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
+//- .l-main-section
+//-   :marked
+//-     ## Dependency Visibility
+//- [TODO] (providers vs viewProviders) This has been postponed for now until come up with a decent use case
diff --git a/public/docs/ts/_cache/guide/lifecycle-hooks.jade b/public/docs/ts/_cache/guide/lifecycle-hooks.jade
index 427a1f61ea..baf55b3df8 100644
--- a/public/docs/ts/_cache/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/_cache/guide/lifecycle-hooks.jade
@@ -12,13 +12,13 @@ block includes
   that give us visibility into these key moments and the ability to act when they occur.
 
   We cover these hooks in this chapter and demonstrate how they work in code.
-  
+
   * [The lifecycle hooks](#hooks-overview)
   * [The hook-call sequence](#hook-sequence)
   * [Other Angular lifecycle hooks](#other-lifecycles)
   * [The lifecycle sample](#the-sample)
     * [All](#peek-a-boo)
-    * [Spying OnInit and OnDestroy](#spy) 
+    * [Spying OnInit and OnDestroy](#spy)
     * [OnChanges](#onchanges)
     * [DoCheck](#docheck)
     * [AfterViewInit and AfterViewChecked](#afterview)
@@ -35,7 +35,7 @@ a#hooks-overview
 
   Developers can tap into key moments in that lifecycle by implementing
   one or more of the *Lifecycle Hook* interfaces in the Angular `core` library.
-  
+
   Each interface has a single hook method whose name is the interface name prefixed with `ng`.
   For example, the `OnInit` interface has a hook method named `ngOnInit`.
   We might implement it in a component class like this:
@@ -43,12 +43,14 @@ a#hooks-overview
 :marked
   No directive or component will implement all of them and some of the hooks only make sense for components.
   Angular only calls a directive/component hook method *if it is defined*.
-block optional-interfaces
+
++ifDocsFor('ts|js')
   .l-sub-section
     :marked
       ### Interface optional?
+
       The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
-      The JavaScript language doesn't have interfaces. 
+      The JavaScript language doesn't have interfaces.
       Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
 
       Fortunately, they aren't necessary.
@@ -58,8 +60,8 @@ block optional-interfaces
       Angular will find and call methods like `ngOnInit()`, with or without the interfaces.
 
       Nonetheless, we strongly recommend adding interfaces to TypeScript directive classes
-      in order to benefit from strong typing and editor tooling.  
-  
+      in order to benefit from strong typing and editor tooling.
+
 :marked
   Here are the component lifecycle hook methods:
 
@@ -67,7 +69,7 @@ block optional-interfaces
 
 table(width="100%")
   col(width="20%")
-  col(width="80%") 
+  col(width="80%")
   tr
     th Hook
     th Purpose
@@ -80,19 +82,19 @@ table(width="100%")
     td ngOnChanges
     td
       :marked
-        Respond after Angular sets a data-bound input property. 
+        Respond after Angular sets a data-bound input property.
         The method receives a `changes` object of current and previous values.
   tr(style=top)
     td ngDoCheck
     td
       :marked
-        Detect and act upon changes that Angular can or won't
+        Detect and act upon changes that Angular can't or won't
         detect on its own. Called every change detection run.
   tr(style=top)
     td ngOnDestroy
     td
       :marked
-        Cleanup just before Angular destroys the directive/component. 
+        Cleanup just before Angular destroys the directive/component.
         Unsubscribe observables and detach event handlers to avoid memory leaks.
 
 :marked
@@ -100,7 +102,7 @@ table(width="100%")
 
 table(width="100%")
   col(width="20%")
-  col(width="80%") 
+  col(width="80%")
   tr
     th Hook
     th Purpose
@@ -131,11 +133,11 @@ a(id="hook-sequence")
 .l-main-section
 :marked
   ## Lifecycle sequence
-  *After* Angular creates a component/directive by `new`-ing its constructor, 
-  it calls the lifecycle hook methods in the following sequence at specific moments:  
+  *After* Angular creates a component/directive by `new`-ing its constructor,
+  it calls the lifecycle hook methods in the following sequence at specific moments:
 table(width="100%")
   col(width="20%")
-  col(width="80%") 
+  col(width="80%")
   tr
     th Hook
     th Timing
@@ -184,14 +186,13 @@ a(id="other-lifecycles")
 .l-main-section
 :marked
   ## Other lifecycle hooks
-  
-  Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed. 
-  The router, for instance, also has it's own [router lifecycle hooks](router.html#router-lifecycle-hooks)
-  that allow us to tap into specific moments in route navigation.
-  
-  A parallel can be drawn between `ngOnInit` and `routerOnActivate`. 
-  Both are prefixed so as to avoid collision, and both run right when a component is 'booting' up.
-  
+
+  Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed.
+
+block other-angular-subsystems
+  //- N/A for TS.
+
+:marked
   3rd party libraries might implement their hooks as well in order to give us, the developers, more
   control over how these libraries are used.
 
@@ -203,14 +204,14 @@ a(id="other-lifecycles")
   demonstrates the lifecycle hooks in action through a series of exercises
   presented as components under the control of the root `AppComponent`.
 
-  They follow a common pattern:  a *parent* component serves as a test rig for 
+  They follow a common pattern:  a *parent* component serves as a test rig for
   a *child* component that illustrates one or more of the lifecycle hook methods.
-  
-  Here's a brief description of each exercise: 
+
+  Here's a brief description of each exercise:
 
 table(width="100%")
   col(width="20%")
-  col(width="80%") 
+  col(width="80%")
   tr
     th Component
     th Description
@@ -225,9 +226,9 @@ table(width="100%")
     td
       :marked
         Directives have lifecycle hooks too.
-        We create a `SpyDirective` that logs when the element it spies upon is 
+        We create a `SpyDirective` that logs when the element it spies upon is
         created or destroyed using the `ngOnInit` and `ngOnDestroy` hooks.
-        
+
         We apply the `SpyDirective` to a `<div>` in an `ngFor` *hero* repeater
         managed by the parent `SpyComponent`.
   tr(style=top)
@@ -238,7 +239,7 @@ table(width="100%")
         every time one of the component input properties changes.
         Shows how to interpret the `changes` object.
   tr(style=top)
-    td <a href="#docheck">DoCheck</a> 
+    td <a href="#docheck">DoCheck</a>
     td
       :marked
         Implements an `ngDoCheck` method with custom change detection.
@@ -260,14 +261,14 @@ table(width="100%")
     td Counter
     td
       :marked
-        Demonstrates a combination of a component and a directive 
+        Demonstrates a combination of a component and a directive
         each with its own hooks.
-        
+
         In this example, a `CounterComponent` logs a change (via `ngOnChanges`)
         every time the parent component increments its input counter property.
         Meanwhile, we apply the `SpyDirective` from the previous example
         to the `CounterComponent` log and watch log entries be created and destroyed.
-    
+
 :marked
   We discuss the exercises in further detail over this chapter as we learn more about the lifecycle hooks.
 
@@ -279,23 +280,23 @@ a(id="peek-a-boo")
 
   In real life, we'd rarely if ever implement all of the interfaces like this.
   We do so in peek-a-boo in order to watch Angular call the hooks in the expected order.
-  
+
   In this snapshot, we clicked the *Create...* button and then the *Destroy...* button.
 figure.image-display
   img(src="/resources/images/devguide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo")
 :marked
-  The sequence of log messages follows the prescribed hook calling order: 
-  `OnChanges`, `OnInit`, `DoCheck`&nbsp;(3x), `AfterContentInit`, `AfterContentChecked`&nbsp;(3x), 
+  The sequence of log messages follows the prescribed hook calling order:
+  `OnChanges`, `OnInit`, `DoCheck`&nbsp;(3x), `AfterContentInit`, `AfterContentChecked`&nbsp;(3x),
   `AfterViewInit`, `AfterViewChecked`&nbsp;(3x), and `OnDestroy`.
-  
+
 .l-sub-section
   :marked
     The constructor isn't an Angular hook *per se*.
     We log in it to confirm that input properties (the `name` property in this case) have no assigned values at construction.
 :marked
-  Had we clicked the *Update Hero* button, we'd have seen another `OnChanges` and two more triplets of 
+  Had we clicked the *Update Hero* button, we'd have seen another `OnChanges` and two more triplets of
   `DoCheck`, `AfterContentChecked` and `AfterViewChecked`.
-  Clearly these three hooks fire a *lot* and we must keep the logic we put in these hooks 
+  Clearly these three hooks fire a *lot* and we must keep the logic we put in these hooks
   as lean as possible!
 
   Our next examples focus on hook details.
@@ -304,74 +305,74 @@ figure.image-display
 .l-main-section
 :marked
   ## Spying *OnInit* and *OnDestroy*
-  
+
   We're going undercover for these two hooks. We want to know when an element is initialized or destroyed,
-  but we don't want *it* to know we're watching. 
-  
-  This is the perfect infiltration job for a directive. 
+  but we don't want *it* to know we're watching.
+
+  This is the perfect infiltration job for a directive.
   Our heroes will never know it's there.
-  
+
 .l-sub-section
   :marked
-    Kidding aside, we're emphasizing two key points: 
-    
+    Kidding aside, we're emphasizing two key points:
+
     1. Angular calls hook methods for *directives* as well as components.
-    
+
     2. A spy directive can gives us insight into a DOM object that we cannot change directly.
-    Obviously we can't change the implementation of a native `div`. 
+    Obviously we can't change the implementation of a native `div`.
     We can't modify a third party component either.
     But we can watch both with a directive.
 
-  
+
 :marked
-  Our sneaky spy directive is simple,  consisting almost entirely of `ngOnInit` and `ngOnDestroy` hooks 
+  Our sneaky spy directive is simple,  consisting almost entirely of `ngOnInit` and `ngOnDestroy` hooks
   that log messages to the parent via an injected `LoggerService`.
-  
+
 +makeExample('lifecycle-hooks/ts/app/spy.directive.ts', 'spy-directive')(format=".")
 
 :marked
   We can apply the spy to any native or component element and it'll be initialized and destroyed
-  at the same time as that element. 
+  at the same time as that element.
   Here we attach it to the repeated hero `<div>`
 +makeExample('lifecycle-hooks/ts/app/spy.component.html', 'template')(format=".")
 
 :marked
-  Each spy's birth and death marks the birth and death of the attached hero `<div>` 
+  Each spy's birth and death marks the birth and death of the attached hero `<div>`
   with an entry in the *Hook Log* as we see here:
-  
+
 figure.image-display
   img(src='/resources/images/devguide/lifecycle-hooks/spy-directive.gif' alt="Spy Directive")
 
 :marked
   Adding a hero results in a new hero `<div>`. The spy's `ngOnInit` logs that event.
   We see a new entry for each hero.
-  
-  The *Reset* button clears the `heroes` list. 
+
+  The *Reset* button clears the `heroes` list.
   Angular removes all hero divs from the DOM and destroys their spy directives at the same time.
   The spy's `ngOnDestroy` method reports its last moments.
-  
+
   The `ngOnInit` and `ngOnDestroy` methods have more vital roles to play in real applications.
   Let's see why we need them.
-    
+
   ### OnInit
-  
+
   We turn to `ngOnInit` for two main reasons:
   1. To perform complex initializations shortly after construction
   1. To set up the component after Angular sets the input properties
-  
-  An `ngOnInit` often fetches data for the component as shown in the 
+
+  An `ngOnInit` often fetches data for the component as shown in the
   [Tutorial](../tutorial/toh-pt4.html#oninit) and [HTTP](server-communication.html#oninit) chapters.
-  
+
   We don't fetch data in a component constructor. Why?
-  Because experienced developers agree that components should be cheap and safe to construct. 
+  Because experienced developers agree that components should be cheap and safe to construct.
   We shouldn't worry that a new component will try to contact a remote server when
   created under test or before we decide to display it.
   Constructors should do no more than set the initial local variables to simple values.
-  
+
   When a component must start working _soon_ after creation,
   we can count on Angular to call the `ngOnInit` method to jumpstart it.
   That's where the heavy initialization logic belongs.
-  
+
   Remember also that a directive's data-bound input properties are not set until _after construction_.
   That's a problem if we need to initialize the directive based on those properties.
   They'll have been set when our `ngOninit` runs.
@@ -382,11 +383,11 @@ figure.image-display
     It only calls `ngOnit` once.
 :marked
   ### OnDestroy
-  
+
   Put cleanup logic in `ngOnDestroy`, the logic that *must* run before Angular destroys the directive.
-  
+
   This is the time to notify another part of the application that this component is going away.
-  
+
   This is the place to free resources that won't be garbage collected automatically.
   Unsubscribe from observables and DOM events. Stop interval timers.
   Unregister all callbacks that this directive registered with global or application services.
@@ -395,17 +396,17 @@ figure.image-display
 .l-main-section
 :marked
   ## OnChanges
-  
-  We monitor the `OnChanges` hook in this example. 
+
+  We monitor the `OnChanges` hook in this example.
   Angular calls its `ngOnChanges` method whenever it detects changes to ***input properties*** of the component (or directive).
-  
+
   Here is our implementation of the hook.
 +makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'ng-on-changes', 'OnChangesComponent (ngOnChanges)')(format=".")
 :marked
-  The `ngOnChanges` method takes an object that maps each changed property name to a 
+  The `ngOnChanges` method takes an object that maps each changed property name to a
   [SimpleChange](../api/core/index/SimpleChange-class.html) object with the current and previous property values.
   We iterate over the changed properties and log them.
-  
+
   The input properties for our example `OnChangesComponent` are `hero` and `power`.
 +makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'inputs')(format=".")
 :marked
@@ -417,14 +418,14 @@ figure.image-display
 
 figure.image-display
   img(src='/resources/images/devguide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges")
-  
+
 :marked
   We see log entries as the string value of the *power* property changes. But the `ngOnChanges` did not catch changes to `hero.name`
-  That's surprising at first. 
-  
-  Angular only calls the hook when the value of the input property changes. 
+  That's surprising at first.
+
+  Angular only calls the hook when the value of the input property changes.
   The value of the `hero` property is the *reference to the hero object*.
-  Angular doesn't care that the hero's own `name` property changed. 
+  Angular doesn't care that the hero's own `name` property changed.
   The hero object *reference* didn't change so, from Angular's perspective, there is no change to report!
 
 .l-main-section
@@ -433,27 +434,27 @@ figure.image-display
   We can use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
 .l-sub-section
   :marked
-    With this method we can detect a change that Angular overlooked. 
+    With this method we can detect a change that Angular overlooked.
     What we do with that information to refresh the display is a separate matter.
 :marked
   The *DoCheck* sample extends the *OnChanges* sample with this implementation of `DoCheck`:
 +makeExample('lifecycle-hooks/ts/app/do-check.component.ts', 'ng-do-check', 'DoCheckComponent (ngDoCheck)')(format=".")
 :marked
   We manually check everything that we care about, capturing and comparing against previous values.
-  We write a special message to the log when there are no substantive changes 
+  We write a special message to the log when there are no substantive changes
   to the hero or the power so we can keep an eye on the method's performance characteristics.
-  
+
   The results are illuminating:
 
 figure.image-display
   img(src='/resources/images/devguide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck")
 :marked
   We now are able to detect when the hero's `name` has changed. But we must be careful.
-  
-  The `ngDoCheck` hook is called with enormous frequency &mdash; 
+
+  The `ngDoCheck` hook is called with enormous frequency &mdash;
   after _every_ change detection cycle no matter where the change occurred.
-  It's called over twenty times in this example before the user can do anything. 
-  
+  It's called over twenty times in this example before the user can do anything.
+
   Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
   Mere mousing into another input box triggers a call.
   Relatively few calls reveal actual changes to pertinent data.
@@ -461,7 +462,7 @@ figure.image-display
 
 .l-sub-section
   :marked
-    We also see that the `ngOnChanges` method is called in contradiction of the 
+    We also see that the `ngOnChanges` method is called in contradiction of the
     [incorrect API documentation](../api/core/index/DoCheck-class.html).
 
 .l-main-section
@@ -469,15 +470,15 @@ figure.image-display
   ## AfterView
   The *AfterView* sample explores the `AfterViewInit` and `AfterViewChecked` hooks that Angular calls
   *after* it creates a component's child views.
-  
+
   Here's a child view that displays a hero's name in an input box:
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'child-view', 'ChildComponent')(format=".")
 :marked
   The `AfterViewComponent` displays this child view *within its template*:
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'template', 'AfterViewComponent (template)')(format=".")
 :marked
-  The following hooks take action based on changing values *within the child view* 
-  which we can only reach by querying for the child view via the property decorated with 
+  The following hooks take action based on changing values *within the child view*
+  which we can only reach by querying for the child view via the property decorated with
   [@ViewChild](../api/core/index/ViewChild-var.html).
 
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".")
@@ -485,15 +486,15 @@ figure.image-display
 :marked
   ### Abide by the unidirectional data flow rule
   The `doSomething` method updates the screen when the hero name exceeds 10 characters.
-  
+
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'do-something', 'AfterViewComponent (doSomething)')(format=".")
 :marked
   Why does the `doSomething` method wait a tick before updating `comment`?
-  
+
   Because we must adhere to Angular's unidirectional data flow rule which says that
   we may not update the view *after* it has been composed.
   Both hooks fire after the component's view has been composed.
-  
+
   Angular throws an error if we update component's data-bound `comment` property immediately (try it!).
 block tick-methods
   :marked
@@ -512,19 +513,19 @@ figure.image-display
   ## AfterContent
   The *AfterContent* sample explores the `AfterContentInit` and `AfterContentChecked` hooks that Angular calls
   *after* Angular projects external content into the component.
-  
+
   ### Content projection
   *Content projection* is a way to import HTML content from outside the component and insert that content
   into the component's template in a designated spot.
- 
+
 .l-sub-section
   :marked
     Angular 1 developers know this technique as *transclusion*.
-  
+
 :marked
-  We'll illustrate with a variation on the [previous](#afterview) example 
+  We'll illustrate with a variation on the [previous](#afterview) example
   whose behavior and output is almost the same.
-  
+
   This time, instead of including the child view within the template, we'll import it from
   the `AfterContentComponent`'s parent. Here's the parent's template.
 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'parent-template', 'AfterContentParentComponent (template excerpt)')(format=".")
@@ -532,11 +533,11 @@ figure.image-display
   Notice that the `<my-child>` tag is tucked between the `<after-content>` tags.
   We never put content between a component's element tags *unless we intend to project that content
   into the component*.
-  
+
   Now look at the component's template:
 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'template', 'AfterContentComponent (template)')(format=".")
 :marked
-  The `<ng-content>` tag is a *placeholder* for the external content. 
+  The `<ng-content>` tag is a *placeholder* for the external content.
   They tell Angular where to insert that content.
   In this case, the projected content is the `<my-child>` from the parent.
 figure.image-display
@@ -549,26 +550,26 @@ figure.image-display
 :marked
   ### AfterContent hooks
   *AfterContent* hooks are similar to the *AfterView* hooks. The key difference is the kind of child component
-  that we're looking for. 
-  
+  that we're looking for.
+
   * The *AfterView* hooks concern `ViewChildren`, the child components whose element tags
   appear *within* the component's template.
-  
+
   * The *AfterContent* hooks concern `ContentChildren`, the child components that Angular
   projected into the component.
-  
+
   The following *AfterContent* hooks take action based on changing values in a  *content child*
-  which we can only reach by querying for it via the property decorated with 
+  which we can only reach by querying for it via the property decorated with
   [@ContentChild](../api/core/index/ContentChild-var.html).
 
 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".")
 
 :marked
    ### No unidirectional flow worries
-   
+
    This component's `doSomething` method update's the component's data-bound `comment` property immediately.
-   There's no [need to wait](#wait-a-tick). 
-   
+   There's no [need to wait](#wait-a-tick).
+
    Recall that Angular calls both *AfterContent* hooks before calling either of the *AfterView* hooks.
    Angular completes composition of the projected content *before* finishing the composition of this component's view.
    We still have a window of opportunity to modify that view.
diff --git a/public/docs/ts/_cache/guide/template-syntax.jade b/public/docs/ts/_cache/guide/template-syntax.jade
index 3e0fb06ce8..6cebce7b81 100644
--- a/public/docs/ts/_cache/guide/template-syntax.jade
+++ b/public/docs/ts/_cache/guide/template-syntax.jade
@@ -858,13 +858,22 @@ block style-property-name-dart-diff
   header [()] = banana in a box
   :marked
     To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
-:marked
-  Alternatively, we can use the canonical prefix form:
-+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-2')(format=".")
+
++ifDocsFor('ts|js')
+  .callout.is-important
+    header FormsModule is Required to use ngModel
+    :marked
+      Before we can use the `ngModel` directive in a two-way data binding,
+      we must import the `FormsModule` and add it to the Angular module's `imports` list.
+      Learn more about the `FormsModule` and `ngModel` in the
+      [Forms](../guide/forms.html#ngModel) chapter.
+
+  +makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
+
 :marked
   There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
 
-  ### Inside [(ngModel)]
+  ### Inside `[(ngModel)]`
   We could have achieved the same result with separate bindings to
   the `<input>` element's  `value` property and `input` event.
 +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
diff --git a/public/docs/ts/_cache/quickstart.jade b/public/docs/ts/_cache/quickstart.jade
index 5de3efe99c..e793e8488a 100644
--- a/public/docs/ts/_cache/quickstart.jade
+++ b/public/docs/ts/_cache/quickstart.jade
@@ -4,6 +4,11 @@ block includes
   - var _prereq = 'Node.js'
   - var _angular_browser_uri = '@angular/platform-browser-dynamic'
   - var _angular_core_uri = '@angular/core'
+  - var _stepInit = 4 // Step # after NgModule step
+  - var _quickstartSrcURL='https://github.com/angular/quickstart/blob/master/README.md'
+
+//- TS/Dart shared step counter
+- var step = _stepInit
 
 :marked
   Our QuickStart goal is to build and run a super-simple
@@ -37,14 +42,16 @@ figure.image-display
   - [Step 1](#create-and-configure): Create the app’s project folder and
     define package dependencies and special project setup
   - [Step 2](#root-component): Create the app’s Angular root component
-  - [Step 3](#main): Add <span ngio-ex>main.ts</span>, identifying the root component to Angular
-  - [Step 4](#index): Add `index.html`, the web page that hosts the application
-  - [Step 5](#build-and-run): Build and run the app
+  <li if-docs="ts">[Step 3](#ngmodule): Create an Angular Module</li>
+  - [Step !{step++}](#main): Add <span ngio-ex>main.ts</span>, identifying the root component to Angular
+  - [Step !{step++}](#index): Add `index.html`, the web page that hosts the application
+  - [Step !{step++}](#build-and-run): Build and run the app
   - [Make some changes to the app](#make-some-changes)
   - [Wrap up](#wrap-up)
 
-.l-main-section
-h2#prereq Prerequisite: #{_prereq}
+- var step = _stepInit // reinitialize step counter for headers to come
+.l-main-section#prereq
+h2 Prerequisite: #{_prereq}
 
 block setup-tooling
   :marked
@@ -56,14 +63,13 @@ block setup-tooling
       by running `node -v` and `npm -v` in a terminal/console window.
       Older versions produce errors.
 
-block download-source
-  .l-main-section
-  .callout.is-helpful
-    header Download the source
-    :marked
-      Instead of following each step of these instructions, we can
-      [download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
-      from github and follow its brief instructions.
+.l-main-section
+.callout.is-helpful
+  header Download the source
+  :marked
+    Instead of following each step of these instructions, we can
+    [download the QuickStart source](!{_quickstartSrcURL})
+    from GitHub and follow its brief instructions.
 
 .l-main-section
 button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)").
@@ -84,18 +90,18 @@ button(class="verbose on md-primary md-button md-ink-ripple", type="button", onc
   code-example(format="nocode").
     Click the glyph on the right to copy code snippets to the clipboard  ==>
 
-.l-main-section
-h2#create-and-configure Step 1: Create and configure the project
-
 - var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'package definition and configuration files'
 
+.l-main-section#create-and-configure
 :marked
+  ## Step 1: Create and configure the project
+
   In this step we:
   * [(a) Create the project folder](#create-the-project-folder)
   * [(b) Add #{_package_and_config_files}](#add-config-files)
   * [(c) #{_Install} packages](#install-packages)
 
-h3 (a) Create the project folder
+  ### (a) Create the project folder
 
 - var _ = _docsFor == 'dart' ? '_' : '-';
 code-example(language="sh").
@@ -207,9 +213,10 @@ block install-packages
 :marked
   **We're all set.** Let's write some code.
 
-.l-main-section
-h2#root-component Step 2: Our first Angular component
+.l-main-section#root-component
 :marked
+  ## Step 2: Our first Angular component
+
   Let's create a folder to hold our application and add a super-simple Angular component.
 
   **Create #{_an} #{_appDir} subfolder** off the project root directory:
@@ -301,57 +308,93 @@ p.
   +ifDocsFor('ts')
     :marked
       We **export** `AppComponent` so that we can **import** it elsewhere in our application,
-      as we'll see when we create `main.ts`.
+      as we'll see when we create `app.module.ts`.
+
++ifDocsFor('ts')
+  .l-main-section#ngmodule
+  :marked
+    ## Step 3: Our own `app.module.ts`
+
+    We compose Angular apps into closely related blocks of functionality with [Angular Modules](guide/ngmodule.html).
+    Every app requires at least one module, the _root module_, that we call `AppModule` by convention.
+
+    Create the file `app/app.module.ts` with the following content:
+
+  +makeExample('app/app.module.ts')(format='.')
+
+  .l-verbose-section
+    :marked
+      We're passing metadata to the `NgModule` decorator function:
+
+      1. `imports` - the _other_ modules that export material we need in _this_ module.
+      Almost every application's _root module_ should import the `BrowserModule`.
+
+      1. `declarations` - components and directives that belong to _this_ module.
+
+      1. `bootstrap` - identifies the _root component_ that Angular should _bootstrap_ when it starts the application.
+
+      We import our lone `app.component.ts` and add it to both the `declarations` and `bootstrap` arrays.
+
+      ### Angular Modules import other modules
+      Notice that we also add the `BrowserModule` from `@angular/platform-browser` to the `imports` array.
+      This is the Angular Module that contains all the needed Angular bits and pieces to run our app in the browser.
+
+      Angular itself is split into separate Angular Modules so we only need to import the ones we really use.
+
+      One of the most common ones is `FormsModule`, and soon we'll also see `RouterModule` and `HttpModule`.
 
 .l-main-section
-h2#main Step 3: Add #[code #[+adjExPath('main.ts')]]
+h2#main Step !{step++}: Add #[code #[+adjExPath('main.ts')]]
 
 block create-main
-  p.
-    Now we need something to tell Angular to load the root component.
-    Create the file #[code #[+adjExPath('app/main.ts')]] with the following content:
+  :marked
+    Now we need something to tell Angular to load the app module.
+    Create the file `app/main.ts` with the following content:
 
 +makeExample('app/main.ts')
 
+- var _pBD_bootstrapModule = _docsFor == 'dart' ? _bootstrapModule : 'platformBrowserDynamic().bootstrapModule'
 .l-verbose-section
   :marked
     We import the two things we need to launch the application:
 
-    1. Angular's browser `bootstrap` function
-    1. The application root component, `AppComponent`.
+    1. Angular's browser `!{_platformBrowserDynamicVsBootStrap}` function
+    1. The application !{_moduleVsRootComp}, `!{_AppModuleVsAppComp}`.
 
-    Then we call `bootstrap` with `AppComponent`.
+    Then we call `!{_pBD_bootstrapModule}` with `AppComponent`.
 
     ### Bootstrapping is platform-specific
-    Notice that we import the `bootstrap` function from `#{_angular_browser_uri}`,
-    not `#{_angular_core_uri}`.
+
+    Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function 
+    from `#{_angular_browser_uri}`, not `#{_angular_core_uri}`.
     Bootstrapping isn't core because there isn't a single way to bootstrap the app.
     True, most applications that run in a browser call the bootstrap function from
     this library.
 
-    But it is possible to load a component in a different environment.
+    But it is possible to load a !{_moduleVsComp} in a different environment.
     We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/).
     We might wish to render the first page of our application on the server
     to improve launch performance or facilitate
     [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf).
     These targets require a different kind of bootstrap function that we'd import from a different library.
 
-    ### Why create separate *<span ngio-ex>main.ts</span>* and app component files?
+    ### Why create separate *<span ngio-ex>main.ts</span>*<span if-docs="ts">, app module</span> and app component files?
 
-    Both <span ngio-ex>main.ts</span> and the app component files are tiny.
+    Then <span ngio-ex>main.ts</span><span if-docs="ts">, app module</span>
+    and the app component files are tiny.
     This is just a QuickStart.
-    We could have merged these two files into one
-    and spared ourselves some complexity.
+    We could have merged these files into one and spared ourselves some complexity.
 
     We'd rather demonstrate the proper way to structure an Angular application.
-    App bootstrapping is a separate concern from presenting a view.
+    App bootstrapping is a separate concern from<span if-docs="ts"> creating a module or</span>
+    presenting a view.
     Mixing concerns creates difficulties down the road.
-    We might launch the `AppComponent` in multiple environments with different bootstrappers.
+    We might launch the `!{_AppModuleVsAppComp}` in multiple environments with different bootstrappers.
     Testing the component is much easier if it doesn't also try to run the entire application.
     Let's make the small extra effort to do it *the right way*.
 
 .l-main-section
-h2#index Step 4: Add #[code index.html]
+h2#index Step !{step++}: Add #[code index.html]
 :marked
   In the *#{_indexHtmlDir}* folder
   create an `index.html` file and paste the following lines into it:
@@ -362,7 +405,7 @@ h2#index Step 4: Add #[code index.html]
   :marked
     The `index.html` file defines the web page that hosts the application.
 
-  block index-html-commentary-for-ts
+  +ifDocsFor('ts')
     :marked
       The noteworthy sections of HTML are:
 
@@ -463,10 +506,12 @@ h2#index Step 4: Add #[code index.html]
 
       ### *&lt;my-app&gt;*
 
-  a(id="my-app")
+  a#my-app
   :marked
-    When Angular calls the `bootstrap` function in <span ngio-ex>main.ts</span>, it reads the `AppComponent`
-    metadata, finds the `my-app` selector, locates an element tag named `my-app`,
+    When Angular calls the `!{_bootstrapModule}` function in <span ngio-ex>main.ts</span>,
+    it reads the `!{_AppModuleVsAppComp}` metadata<span if-docs="ts">, sees that 
+    `AppComponent` is the bootstrap component</span>,
+    finds the `my-app` selector, locates an element tag named `my-app`,
     and renders our application's view between those tags.
 
 :marked
@@ -474,13 +519,18 @@ h2#index Step 4: Add #[code index.html]
   Styles aren't essential but they're nice, and `index.html` assumes we have
   a stylesheet called `styles.css`.
 
-  Create a `styles.css` file in the *#{_indexHtmlDir}* folder and start styling, perhaps with the minimal
-  styles shown below. For the full set of master styles used by the documentation samples,
-  see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
-+makeExcerpt('styles.1.css')
+  Create a `styles.css` file in the *#{_indexHtmlDir}* folder and start styling,
+  perhaps with the minimal styles shown below.
 
-.l-main-section
-h2#build-and-run Step 5: Build and run the app!
++makeExcerpt('styles.css (excerpt)', 'quickstart')
+
+.callout.is-helpful
+  :marked
+    For the full set of master styles used by the documentation samples,
+    see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
+
+.l-main-section#build-and-run
+h2 Step !{step++}: Build and run the app!
 block run-app
   :marked
     Open a terminal window and enter this command:
@@ -528,6 +578,7 @@ block project-file-structure
       .file app
       .children
         .file app.component.ts
+        .file app.module.ts
         .file main.ts
       .file node_modules ...
       .file typings ...
@@ -543,21 +594,24 @@ block project-file-structure
 block project-files
   +makeTabs(`
       quickstart/ts/app/app.component.ts,
+      quickstart/ts/app/app.module.ts,
       quickstart/ts/app/main.ts,
       quickstart/ts/index.html,
       quickstart/ts/package.1.json,
       quickstart/ts/tsconfig.1.json,
       quickstart/ts/typings.1.json,
-      quickstart/ts/styles.1.css,
+      quickstart/ts/styles.css,
       quickstart/ts/systemjs.config.1.js`
-    ,null,
+    ,
+    ',,,,,,, quickstart,',
     `app/app.component.ts,
+    app/app.module.ts,
     app/main.ts,
     index.html,
     package.json,
     tsconfig.json,
     typings.json,
-    styles.css,
+    styles.css (excerpt),
     systemjs.config.js`)
 
 .l-main-section
@@ -570,7 +624,7 @@ block project-files
   static file server. That's about all we'd expect to do for a "Hello, World" app.
 
   **We have greater ambitions!**
-block what-next-ts-overhead
++ifDocsFor('ts')
   :marked
     The good news is that the overhead of setup is (mostly) behind us.
     We'll probably only touch the `package.json` to update libraries.
diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade
new file mode 100644
index 0000000000..06b180163a
--- /dev/null
+++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade
@@ -0,0 +1,920 @@
+- var _example = 'toh-5';
+
+block includes
+  include ../_util-fns
+  - var _appRoutingTsVsAppComp = 'app.routing.ts'
+  - var _declsVsDirectives = 'declarations'
+  - var _RoutesVsAtRouteConfig = 'Routes'
+  - var _RouterModuleVsRouterDirectives = 'RouterModule'
+  - var _redirectTo = 'redirectTo'
+
+:marked
+  # Routing Around the App
+
+  We received new requirements for our Tour of Heroes application:
+
+  * Add a *Dashboard* view.
+  * Navigate between the *Heroes* and *Dashboard* views.
+  * Clicking on a hero in either view navigates to a detail view of the selected hero.
+  * Clicking a *deep link* in an email opens the detail view for a particular hero.
+
+  When we’re done, users will be able to navigate the app like this:
+
+figure.image-display
+  img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
+
+:marked
+  We'll add Angular’s *Component Router* to our app to satisfy these requirements.
+
+.l-sub-section
+  :marked
+    The [Routing and Navigation](../guide/router.html) chapter covers the router
+    in more detail than we will in this tutorial.
+
+:marked
+  Run the <live-example></live-example> for this part.
+
++ifDocsFor('ts|js')
+  .l-sub-section
+    img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
+
+    :marked
+      To see the URL changes in the browser address bar,
+      pop out the preview window by clicking the blue 'X' button in the upper right corner:
+
+.l-main-section
+:marked
+  ## Where We Left Off
+
+  Before we continue with our Tour of Heroes, let’s verify that
+  we have the following structure after adding our hero service
+  and hero detail component. If not, we’ll need to go back and follow the previous chapters.
+
+block intro-file-tree
+  .filetree
+    .file angular2-tour-of-heroes
+    .children
+      .file app
+      .children
+        .file app.component.ts
+        .file app.module.ts
+        .file hero.service.ts
+        .file hero.ts
+        .file hero-detail.component.ts
+        .file main.ts
+        .file mock-heroes.ts
+      .file node_modules ...
+      .file typings ...
+      .file index.html
+      .file package.json
+      .file styles.css
+      .file systemjs.config.js
+      .file tsconfig.json
+      .file typings.json
+
+block keep-app-running
+  :marked
+    ### Keep the app transpiling and running
+
+    Open a terminal/console window and enter the following command to
+    start the TypeScript compiler, start the server, and watch for changes:
+
+  code-example(language="bash").
+    npm start
+
+:marked
+  The application runs and updates automatically as we continue to build the Tour of Heroes.
+
+  ## Action plan
+
+  Here's our plan:
+
+  * Turn `AppComponent` into an application shell that only handles navigation
+  * Relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
+  * Add routing
+  * Create a new `DashboardComponent`
+  * Tie the *Dashboard* into the navigation structure
+
+.l-sub-section
+  :marked
+    *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view.
+
+.l-main-section
+:marked
+  ## Splitting the *AppComponent*
+
+  Our current app loads `AppComponent` and immediately displays the list of heroes.
+
+  Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*)
+  and then default to one of them.
+
+  The `AppComponent` should only handle navigation.
+  Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
+
+  ### *HeroesComponent*
+
+  `AppComponent` is already dedicated to *Heroes*.
+  Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
+  and create a new `AppComponent` shell separately.
+
+  The steps are to rename:
+  * <span ngio-ex>app.component.ts</span> file to <span ngio-ex>heroes.component.ts</span>
+  * `AppComponent` class to `HeroesComponent`
+  * Selector `my-app` to `my-heroes`
+
++makeExcerpt('app/heroes.component.ts (showing renamings only)', 'renaming')
+
+:marked
+  ## Create *AppComponent*
+
+  The new `AppComponent` will be the application shell.
+  It will have some navigation links at the top and a display area below for the pages we navigate to.
+
+  The initial steps are:
+
+  * Create the file <span ngio-ex>app/app.component.ts</span>.
+  * Define an <span if-docs="ts">exported</span> `AppComponent` class.
+  * Add an `@Component` !{_decorator} above the class with a `my-app` selector.
+  * Move the following from `HeroesComponent` to `AppComponent`:
+    * `title` class property
+    * `@Component` template `<h1>` element, which contains a binding to  `title`
+  * Add a `<my-heroes>` element to the app template just below the heading so we still see the heroes.
+  * Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `<my-heroes>` tags.
+  * Add `HeroService` to the  `providers` !{_array} of `!{_AppModuleVsAppComp}` because we'll need it in every other view.
+  * Remove `HeroService` from the `HeroesComponent` `providers` !{_array} since it has been promoted.
+  * Add the supporting `import` statements for `AppComponent`.
+
+  Our first draft looks like this:
+
+block app-comp-v1
+  +makeTabs(
+    `toh-5/ts/app/app.component.1.ts,
+    toh-5/ts/app/app.module.1.ts`,
+    ',',
+    `app/app.component.ts (v1),
+    app/app.module.ts (v1)`)
+
+:marked
+  The app still runs and still displays heroes.
+  Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked!
+  We have done no harm.
+
+:marked
+  ## Add Routing
+
+  We're ready to take the next step.
+  Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button.
+  In other words, we'd like to navigate to the list of heroes.
+
+  We'll need the Angular *Component Router*.
+
+block angular-router
+  :marked
+    The Angular router is an external, optional Angular NgModule called `RouterModule`.
+    The router is a combination of multiple provided services (`RouterModule`),
+    multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`),
+    and a configuration (`Routes`). We'll configure our routes first.
+
+:marked
+  ### Add the base tag
+
+  Open `index.html` and add `<base href="/">` at the top of the `<head>` section.
+
++makeExcerpt('index.html', 'base-href')
+
+.callout.is-important
+  header base href is essential
+  :marked
+    See the *base href* section of the [Router](../guide/router.html#!#base-href)
+    chapter to learn why this matters.
+
+a#configure-routes
+block router-config-intro
+  :marked
+    ### Configure routes
+
+    Our application doesn't have any routes yet.
+    We'll start by creating a configuration file for the application routes.
+
+:marked
+  *Routes* tell the router which views to display when a user clicks a link or
+  pastes a URL into the browser address bar.
+
+  Let's define our first route as a route to the heroes component:
+
+- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.routing.ts'
++makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
+
+- var _are = _docsFor == 'dart' ? 'takes' : 'are'
+- var _routePathPrefix = _docsFor == 'dart' ? '/' : ''
+:marked
+  The `!{_RoutesVsAtRouteConfig}` !{_are} !{_an} !{_array} of *route definitions*.
+  We have only one route definition at the moment but rest assured, we'll add more.
+
+  This *route definition* has the following parts:
+
+  - **path**: the router matches this route's path to the URL in the browser address bar (`!{_routePathPrefix}heroes`).
+  <li if-docs="dart"> **name**: the official name of the route;
+   it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`).</li>
+  - **component**: the component that the router should create when navigating to this route (`HeroesComponent`).
+
+.l-sub-section
+  :marked
+    Learn more about defining routes with `!{_RoutesVsAtRouteConfig}` in the [Routing](../guide/router.html) chapter.
+
++ifDocsFor('ts|js')
+  :marked
+    We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes.
+    This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`.
+
+  +makeExcerpt('app/app.routing.ts (excerpt)', 'routing')
+
+  .l-sub-section
+    :marked
+      We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
+      The `forRoot` method gives us the Router service providers and directives needed for routing.
+
+  :marked
+    ### Make the router available
+
+    We've setup initial routes in the `app.routing.ts` file. Now we'll add it to our root NgModule.
+
+    Import the `routing` constant from `app.routing.ts` and add it the `imports` !{_array} of `AppModule`.
+
+  +makeExcerpt('app/app.module.ts', 'routing')
+
+- var _heroesRoute = _docsFor == 'dart' ? "'Heroes'" : 'heroes'
+:marked
+  ### Router Outlet
+
+  If we paste the path, `/heroes`, into the browser address bar,
+  the router should match it to the `!{_heroesRoute}` route and display the `HeroesComponent`.
+  But where?
+
+  We have to ***tell it where*** by adding a `<router-outlet>` element to the bottom of the template.
+  `RouterOutlet` is one of the <span if-docs="ts">directives provided by</span> the `!{_RouterModuleVsRouterDirectives}`.
+  The router displays each component immediately below the `<router-outlet>` as we navigate through the application.
+
+  ### Router Links
+
+  We don't really expect users to paste a route URL into the address bar.
+  We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
+
+  The revised template looks like this:
+
++makeExcerpt('app/app.component.1.ts', 'template-v2')
+
+block routerLink
+  :marked
+    Notice the `routerLink` binding in the anchor tag.
+    We bind the `RouterLink` directive (another of the `RouterModule` directives) to a string
+    that tells the router where to navigate when the user clicks the link.
+
+    Since our link is not dynamic, we define a *routing instruction* with a **one-time binding** to our route **path**.
+    Looking back at the route configuration, we confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.
+  .l-sub-section
+    :marked
+      Learn more about dynamic router links and the *link parameters array*
+      in the [Routing](../guide/router.html#link-parameters-array) chapter.
+
+:marked
+  Refresh the browser.  We see only the app title and heroes link. We don't see the heroes list.
+
+.l-sub-section
+  :marked
+    The browser's address bar shows `/`.
+    The route path to `HeroesComponent` is `/heroes`, not `/`.
+    We don't have a route that matches the path `/`, so there is nothing to show.
+    That's something we'll want to fix.
+
+:marked
+  We click the *Heroes* navigation link, the browser bar updates to `/heroes`,
+  and now we see the list of heroes. We are navigating at last!
+
+  At this stage, our `AppComponent` looks like this.
+
++makeExample('app/app.component.1.ts', 'v2', 'app/app.component.ts (v2)')
+
+:marked
+  The  *AppComponent* is now attached to a router and displaying routed views.
+  For this reason and to distinguish it from other kinds of components,
+  we call this type of component a *Router Component*.
+
+:marked
+  ## Add a *Dashboard*
+
+  Routing only makes sense when we have multiple views. We need another view.
+
+  Create a placeholder `DashboardComponent` that gives us something to navigate to and from.
+
++makeExcerpt('app/dashboard.component.1.ts (v1)', '')
+
+:marked
+  We’ll come back and make it more useful later.
+
+  ### Configure the dashboard route
+
+  Go back to `!{_appRoutingTsVsAppComp}` and teach it to navigate to the dashboard.
+
+  Import the dashboard component and
+  add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
+
+- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.routing.ts'
++makeExcerpt(_file + ' (Dashboard route)', 'dashboard')
+
++ifDocsFor('ts|js')
+  :marked
+    Also import and add `DashboardComponent` to our root NgModule's `declarations`.
+
+  +makeExcerpt('app/app.module.ts', 'dashboard')
+
+:marked
+  #### !{_redirectTo}
+
+  We want the app to show the dashboard when it starts and
+  we want to see a nice URL in the browser address bar that says `/dashboard`.
+  Remember that the browser launches with `/` in the address bar.
+
+block redirect-vs-use-as-default
+  :marked
+    We can use a redirect route to make this happen. Add the following
+    to our array of route definitions:
+
+  +makeExcerpt('app/app.routing.ts','redirect')
+
+  .l-sub-section
+    :marked
+      Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter.
+
+:marked
+  #### Add navigation to the template
+
+  Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
+
+- var _vers = _docsFor == 'dart' ? '' : '.1'
++makeExcerpt('app/app.component' + _vers + '.ts', 'template-v3')
+
+.l-sub-section
+  :marked
+    We nestled the two links within `<nav>` tags.
+    They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
+
+:marked
+  To see these changes in your browser, go to the application root (`/`) and reload.
+  The app displays the dashboard and we can navigate between the dashboard and the heroes.
+
+  ## Dashboard Top Heroes
+
+  Let’s spice up the dashboard by displaying the top four heroes at a glance.
+
+  Replace the `template` metadata with a `templateUrl` property that points to a new
+  template file.
+
++makeExcerpt('app/dashboard.component.ts', 'templateUrl')
+
+.l-sub-section
+  block templateUrl-path-resolution
+    :marked
+      We specify the path _all the way back to the application root_ &mdash;
+      <span if-docs="ts">`app/` in this case &mdash;</span>
+      because Angular doesn't support relative paths _by default_.
+      We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
+
+:marked
+  Create that file with this content:
+
++makeExcerpt('app/dashboard.component.html')
+
+:marked
+  We use `*ngFor` once again to iterate over a list of heroes and display their names.
+  We added extra `<div>` elements to help with styling later in this chapter.
+
+  There's a `(click)` binding to a `gotoDetail` method we haven't written yet and
+  we're displaying a list of heroes that we don't have.
+  We have work to do, starting with those heroes.
+
+  ### Share the *HeroService*
+
+  We'd like to re-use the `HeroService` to populate the component's `heroes` !{_array}.
+
+  Recall earlier in the chapter that we removed the `HeroService` from the `providers` !{_array} of `HeroesComponent`
+  and added it to the `providers` !{_array} of `!{_AppModuleVsAppComp}`.
+
+  That move created a singleton `HeroService` instance, available to *all* components of the application.
+  Angular will inject `HeroService` and we'll use it here in the `DashboardComponent`.
+
+  ### Get heroes
+
+  Open <span ngio-ex>dashboard.component.ts</span> and add the requisite `import` statements.
+
++makeExcerpt('app/dashboard.component.2.ts','imports')
+
+:marked
+  Now implement the `DashboardComponent` class like this:
+
++makeExcerpt('app/dashboard.component.2.ts (class)', 'component')
+
+:marked
+  We've seen this kind of logic before in the `HeroesComponent`:
+
+  * Define a `heroes` !{_array} property.
+  * Inject the `HeroService` in the constructor and hold it in a private `!{_priv}heroService` field.
+  * Call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
+
+  The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th)
+  and stub the `gotoDetail` method until we're ready to implement it.
+
+  Refresh the browser and see four heroes in the new dashboard.
+
+.l-main-section
+:marked
+  ## Navigate to Hero Details
+
+  Although we display the details of a selected hero at the bottom of the `HeroesComponent`,
+  we don't yet *navigate* to the `HeroDetailComponent` in the three ways specified in our requirements:
+
+  1. from the *Dashboard* to a selected hero.
+  1. from the *Heroes* list to a selected hero.
+  1. from a "deep link" URL pasted into the browser address bar.
+
+  Adding a hero-detail route seems like an obvious place to start.
+
+  ### Routing to a hero detail
+
+  We'll add a route to the `HeroDetailComponent` in `!{_appRoutingTsVsAppComp}` where our other routes are configured.
+
+  The new route is a bit unusual in that we must tell the `HeroDetailComponent` *which hero to show*.
+  We didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.
+
+  At the moment the parent `HeroesComponent` sets the component's `hero` property to a
+  hero object with a binding like this.
+
+code-example(language="html").
+  &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
+
+:marked
+  That clearly won't work in any of our routing scenarios.
+  Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
+
+  ### Parameterized route
+
+  We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11,
+  we could expect to see an URL such as this:
+
+code-example(format='').
+  /detail/11
+
+:marked
+  The `/detail/` part of that URL is constant. The trailing numeric `id` part changes from hero to hero.
+  We need to represent that variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`.
+
+  ### Configure a Route with a Parameter
+
+  Here's the *route definition* we'll use.
+
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
++makeExcerpt(_file + ' (hero detail)','hero-detail')
+
+:marked
+  The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
+  when navigating to the `HeroDetailComponent`.
+
+.l-sub-section
+  :marked
+    Remember to import the hero detail component before creating this route.
+
++ifDocsFor('ts|js')
+  :marked
+    Add the `HeroDetailComponent` to our root NgModule's `declarations`.
+
+  +makeExcerpt('app/app.module.ts', 'hero-detail')
+
+:marked
+  We're finished with the application routes.
+
+  We won't add a `'Hero Detail'` link to the template because users
+  don't click a navigation *link* to view a particular hero.
+  They click a *hero* whether that hero is displayed on the dashboard or in the heroes list.
+
+  We'll get to those *hero* clicks later in the chapter.
+  There's no point in working on them until the `HeroDetailComponent`
+  is ready to be navigated *to*.
+
+  That will require an `HeroDetailComponent` overhaul.
+
+.l-main-section
+:marked
+  ## Revise the *HeroDetailComponent*
+
+  Before we rewrite the `HeroDetailComponent`, let's review what it looks like now:
+
++makeExample('toh-4/ts/app/hero-detail.component.ts', null, 'app/hero-detail.component.ts (current)')
+
+:marked
+  The template won't change. We'll display a hero the same way.
+  The big changes are driven by how we get the hero.
+
+block route-params
+  :marked
+    We will no longer receive the hero in a parent component property binding.
+    The new `HeroDetailComponent` should take the `id` parameter from the `params` observable
+    in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.
+
+:marked
+  First, add the requisite imports:
+
+- var _vers = _docsFor == 'dart' ? '' : '.1'
++makeExcerpt('app/hero-detail.component' + _vers + '.ts', 'added-imports', '')
+
+- var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
+:marked
+  Let's have the `!{_ActivatedRoute}` service and the `HeroService` injected
+  into the constructor, saving their values in private fields:
+
++makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
+
+:marked
+  We tell the class that we want to implement the `OnInit` interface.
+
++makeExcerpt('app/hero-detail.component.ts', 'implement', '')(format=".")
+
+block ngOnInit
+  :marked
+    Inside the `ngOnInit` lifecycle hook, we use the `params` observable to
+    extract the `id` parameter value from the `ActivateRoute` service
+    and use the `HeroService` to fetch the hero with that `id`.
+
++makeExcerpt('app/hero-detail.component.ts', 'ngOnInit')
+
+block extract-id
+  :marked
+    Notice how we extract the `id` by calling the `forEach` method
+    which will deliver our !{_array} of route parameters.
+
+- var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
+:marked
+  The hero `id` is a number. Route parameters are *always strings*.
+  So we convert the route parameter value to a number with the !{_str2int}.
+
+  ### Add *HeroService.getHero*
+
+  The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
+  We better fix that quickly before someone notices that we broke the app.
+
+  Open `HeroService` and add a `getHero` method that filters the heroes list from `getHeroes` by `id`:
+
++makeExcerpt('app/hero.service.ts', 'getHero')
+
+:marked
+  Let's return to the `HeroDetailComponent` to clean up loose ends.
+
+  ### Find our way back
+
+  We can navigate *to* the `HeroDetailComponent` in several ways.
+  How do we navigate somewhere else when we're done?
+
+  The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
+  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack.
+
++makeExcerpt('app/hero-detail.component.ts', 'goBack')
+
+- var _CanDeactivateGuard = _docsFor == 'dart' ? '<em>routerCanDeactivate</em> hook' : '<em>CanDeactivate</em> guard'
+- var _CanDeactivateGuardUri = _docsFor == 'dart' ? 'angular2.router/CanDeactivate-class' : 'router/index/CanDeactivate-interface'
+.l-sub-section
+  :marked
+    Going back too far could take us out of the application.
+    That's acceptable in a demo. We'd guard against it in a real application,
+    perhaps with the [!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html).
+
+:marked
+  Then we wire this method with an event binding to a *Back* button that we
+  add to the bottom of the component template.
+
++makeExcerpt('app/hero-detail.component.html', 'back-button', '')
+
+:marked
+  Modifing the template to add this button spurs us to take one more
+  incremental improvement and migrate the template to its own file,
+  called <span ngio-ex>hero-detail.component.html</span>:
+
++makeExample('app/hero-detail.component.html')
+
+:marked
+  We update the component metadata with a `templateUrl` pointing to the template file that we just created.
+
++makeExcerpt('app/hero-detail.component.ts', 'templateUrl')
+
+:marked
+  Refresh the browser and see the results.
+
+.l-main-section
+:marked
+  ## Select a *Dashboard* Hero
+
+  When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
+
+  In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
+
++makeExcerpt('app/dashboard.component.html', 'click')
+
+:marked
+  We stubbed the `gotoDetail` method when we rewrote the `DashboardComponent`.
+  Now we give it a real implementation.
+
++makeExcerpt('app/dashboard.component.ts','gotoDetail')
+
+- var _pathVsName = _docsFor == 'dart' ? 'name' : 'path'
+:marked
+  The `gotoDetail` method navigates in two steps:
+
+  1. Set a route *link parameters !{_array}*
+  1. Pass the !{_array} to the router's navigate method
+
+  For navigation, we wrote router links <span if-docs="dart">as *link
+  parameters !{_array}s*</span> in the [`AppComponent`
+  template](#router-links).  Those link<span if-docs="dart"> parameters
+  !{_array}</span>s had only one element, the !{_pathVsName} of the
+  destination route.
+
+  This link parameters !{_array} has two elements, the ***!{_pathVsName}*** of
+  the destination route and a ***route parameter*** <span if-docs="dart">with
+  an `id` field</span> set to the value of the selected hero's `id`.
+
+  The two !{_array} items align with the ***!{_pathVsName}*** and ***:id***
+  token in the parameterized hero detail route definition we added to
+  `!{_appRoutingTsVsAppComp}` earlier in the chapter:
+
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
++makeExcerpt(_file + ' (hero detail)', 'hero-detail')
+
+:marked
+  The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
+  import the `router` reference and inject it in the constructor (along with the `HeroService`):
+
++makeExcerpt('app/dashboard.component.ts ()','import-router', '')
+
++makeExcerpt('app/dashboard.component.ts', 'ctor', '')
+
+:marked
+  Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
+
+.l-main-section
+:marked
+  ## Select a Hero in the *HeroesComponent*
+
+  We'll do something similar in the `HeroesComponent`.
+
+  That component's current template exhibits a "master/detail" style with the list of heroes
+  at the top and details of the selected hero below.
+
++makeExample('toh-4/ts/app/app.component.ts','template', 'app/heroes.component.ts (current template)')(format=".")
+
+:marked
+  Delete the last line of the template with the `<my-hero-detail>` tags.
+
+  We'll no longer show the full `HeroDetailComponent` here.
+  We're going to display the hero detail on its own page and route to it as we did in the dashboard.
+
+  But we'll throw in a small twist for variety.
+  When the user selects a hero from the list, we *won't* go to the detail page.
+  We'll show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
+
+  ### Add the *mini-detail*
+
+  Add the following HTML fragment at the bottom of the template where the `<my-hero-detail>` used to be:
+
++makeExcerpt('app/heroes.component.html', 'mini-detail', '')
+
+:marked
+  After clicking a hero, the user should see something like this below the hero list:
+
+figure.image-display
+  img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70")
+
+:marked
+  ### Format with the *uppercase* pipe
+
+  Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `uppercase` pipe
+  that we slipped into the interpolation binding. Look for it right after the pipe operator ( | ).
+
++makeExcerpt('app/heroes.component.html', 'pipe', '')
+
+:marked
+  Pipes are a good way to format strings, currency amounts, dates and other display data.
+  Angular ships with several pipes and we can write our own.
+
+.l-sub-section
+  :marked
+    Learn about pipes in the [Pipes](../guide/pipes.html) chapter.
+
+:marked
+  ### Move content out of the component file
+
+  We are not done. We still have to update the component class to support navigation to the
+  `HeroDetailComponent` when the user clicks the *View Details* button.
+
+  This component file is really big. Most of it is either template or CSS styles.
+  It's difficult to find the component logic amidst the noise of HTML and CSS.
+
+  Let's migrate the template and the styles to their own files before we make any more changes:
+
+  1. *Cut-and-paste* the template contents into a new <span ngio-ex>heroes.component.html</span> file.
+  1. *Cut-and-paste* the styles contents into a new <span ngio-ex>heroes.component.css</span> file.
+  1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
+
+.l-sub-section
+  :marked
+    The `styleUrls` property is !{_an} !{_array} of style file names (with paths).
+    We could list multiple style files from different locations if we needed them.
+    <span if-docs="ts">As with `templateUrl`, we must specify the path _all the way
+    back to the application root_.</span>
+
+block heroes-component-cleanup
+  //- Only relevant for Dart.
+
++makeExcerpt('app/heroes.component.ts (revised metadata)', 'metadata')
+
+:marked
+  Now we can see what's going on as we update the component class along the same lines as the dashboard:
+
+  1. Import the `router`
+  1. Inject the `router` in the constructor (along with the `HeroService`)
+  1. Implement the `gotoDetail` method by calling the `router.navigate` method
+
+  with a two-part hero-detail link parameters !{_array}.
+
+  Here's the revised component class:
+
++makeExcerpt('app/heroes.component.ts', 'class')
+
+:marked
+  Refresh the browser and start clicking.
+  We can navigate around the app, from the dashboard to hero details and back,
+  for heroes list to the mini-detail to the hero details and back to the heroes again.
+  We can jump back and forth between the dashboard and the heroes.
+
+  We've met all of the navigational requirements that propelled this chapter.
+
+.l-main-section
+:marked
+  ## Styling the App
+
+  The app is functional but pretty ugly.
+  Our creative designer team provided some CSS files to make it look better.
+
+  ### A Dashboard with Style
+
+  The designers think we should display the dashboard heroes in a row of rectangles.
+  They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
+
+  If we paste these ~60 lines into the component `styles` metadata,
+  they'll completely obscure the component logic.
+  Let's not do that. It's easier to edit CSS in a separate `*.css` file anyway.
+
+  Add a <span ngio-ex>dashboard.component.css</span> file to the `!{_appDir}` folder and reference
+  that file in the component metadata's `styleUrls` !{_array} property like this:
+
++makeExcerpt('app/dashboard.component.ts (styleUrls)', 'css')
+
+:marked
+  ### Stylish Hero Details
+
+  The designers also gave us CSS styles specifically for the `HeroDetailComponent`.
+
+  Add a <span ngio-ex>hero-detail.component.css</span> to the `!{_appDir}`
+  folder and refer to that file inside
+  the `styleUrls` !{_array} as we did for `DashboardComponent`.
+  Let's also remove the `hero` property `@Input` !{_decorator}
+  <span if-docs="ts">and its import</span>
+  while we are at it.
+
+  Here's the content for the aforementioned component CSS files.
+
+block css-files
+  +makeTabs(
+    `toh-5/ts/app/hero-detail.component.css,
+    toh-5/ts/app/dashboard.component.css`,
+    null,
+    `app/hero-detail.component.css,
+    app/dashboard.component.css`)
+
+:marked
+  ### Style the Navigation Links
+
+  The designers gave us CSS to make the navigation links in our `AppComponent` look more like selectable buttons.
+  We cooperated by surrounding those links in `<nav>` tags.
+
+  Add a <span ngio-ex>app.component.css</span> file to the `!{_appDir}` folder with the following content.
+
++makeExcerpt('app/app.component.css (navigation styles)', '')
+
+.l-sub-section
+  block router-link-active
+    :marked
+      **The *routerLinkActive* directive**
+
+      The Angular Router provides a `routerLinkActive` directive we can use to
+      add a class to the HTML navigation element whose route matches the active route.
+      All we have to do is define the style for it. Sweet!
+
+    +makeExcerpt('app/app.component.ts (active router links)', 'template')
+
+:marked
+  Set the `AppComponent`’s `styleUrls` property to this CSS file.
+
++makeExcerpt('app/app.component.ts','styleUrls')
+
+:marked
+  ### Global application styles
+
+  When we add styles to a component, we're keeping everything a component needs
+  &mdash; HTML, the CSS, the code &mdash; together in one convenient place.
+  It's pretty easy to package it all up and re-use the component somewhere else.
+
+  We can also create styles at the *application level* outside of any component.
+
+  Our designers provided some basic styles to apply to elements across the entire app.
+  These correspond to the full set of master styles that we
+  introduced earlier (see
+  [QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
+  Here is an excerpt:
+
++makeExcerpt('styles.css (excerpt)', 'toh')
+
+- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
+
+:marked
+  Create the file <span ngio-ex>styles.css</span>, if it doesn't exist already.
+  Ensure that it contains the [master styles given here](!{styles_css}).
+
+  If necessary, also edit <span ngio-ex>index.html</span> to refer to this stylesheet.
+
++makeExcerpt('index.html (link ref)', 'css')
+
+:marked
+  Look at the app now. Our dashboard, heroes, and navigation links are styling!
+
+figure.image-display
+  img(src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations")
+
+.l-main-section
+:marked
+  ## Application structure and code
+
+  Review the sample source code in the <live-example></live-example> for this chapter.
+  Verify that we have the following structure:
+
+block file-tree-end
+  .filetree
+    .file angular2-tour-of-heroes
+    .children
+      .file app
+      .children
+        .file app.component.css
+        .file app.component.ts
+        .file app.module.ts
+        .file app.routing.ts
+        .file dashboard.component.css
+        .file dashboard.component.html
+        .file dashboard.component.ts
+        .file hero.service.ts
+        .file hero.ts
+        .file hero-detail.component.css
+        .file hero-detail.component.html
+        .file hero-detail.component.ts
+        .file heroes.component.css
+        .file heroes.component.html
+        .file heroes.component.ts
+        .file main.ts
+        .file mock-heroes.ts
+      .file node_modules ...
+      .file typings ...
+      .file index.html
+      .file package.json
+      .file styles.css
+      .file systemjs.config.js
+      .file tsconfig.json
+      .file typings.json
+
+.l-main-section
+:marked
+  ## Recap
+
+  ### The Road Behind
+
+  We travelled a great distance in this chapter
+
+  - We added the Angular *Component Router* to navigate among different components.
+  - We learned how to create router links to represent navigation menu items.
+  - We used router link parameters to navigate to the details of user selected hero.
+  - We shared the `HeroService` among multiple components.
+  - We moved HTML and CSS out of the component file and into their own files.
+  - We added the `uppercase` pipe to format data.
+
+  ### The Road Ahead
+
+  We have much of the foundation we need to build an application.
+  We're still missing a key piece: remote data access.
+
+  In the next chapter,
+  we’ll replace our mock data with data retrieved from a server using http.
diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade
index c93ec199ca..cb7f750aec 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt6.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade
@@ -5,7 +5,7 @@ block includes
   - var _Http = 'Http'; // Angular `Http` library name.
   - var _Angular_Http = 'Angular <code>Http</code>'
   - var _Angular_http_library = 'Angular HTTP library'
-  - var _HTTP_PROVIDERS = 'HTTP_PROVIDERS'
+  - var _HttpModule = 'HttpModule'
   - var _JSON_stringify = 'JSON.stringify'
 
 :marked
@@ -53,25 +53,24 @@ block http-library
 block http-providers
   :marked
     Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
-    The `HTTP_PROVIDERS` array from `@angular/http` library holds providers for the complete set of http services.
+    The `HttpModule` from `@angular/http` library holds providers for the complete set of `http` services.
 
-:marked
-  We should be able to access `!{_Http}` services from anywhere in the application.
-  So we register them in the `bootstrap` call of <span ngio-ex>main.ts</span> where we
-  launch the application and its root `AppComponent`.
+    We should be able to access `http` services from anywhere in the application.
+    So we register them in the `imports` array of `app.module.ts` where we
+    bootstrap the application and its root `AppComponent`.
 
-+makeExcerpt('app/main.ts','v1')
+  +makeExcerpt('app/app.module.ts (v1)')
 
-:marked
-  Notice that we supply `!{_HTTP_PROVIDERS}` in !{_an} !{_array} as the second parameter to the `bootstrap` method.
-  This has the same effect as the `providers` !{_array} in `@Component` !{_decorator}.
+  :marked
+    Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
 
 .l-main-section
 :marked
   ## Simulating the web API
 
-  We generally recommend registering application-wide services in the root `AppComponent` *providers*.
-  Here we're registering in `main` for a special reason.
+  We recommend registering application-wide services in the root
+  `!{_AppModuleVsAppComp}` *providers*.  <span if-docs="dart">Here we're
+  registering in `main` for a special reason.</span>
 
   Our application is in the early stages of development and far from ready for production.
   We don't even have a web server that can handle requests for heroes.
@@ -79,12 +78,13 @@ block http-providers
 
   We're going to *trick* the HTTP client into fetching and saving data from
   a mock service, the *in-memory web API*.
+  <span if-docs="dart"> The application itself doesn't need to know and
+  shouldn't know about this.  So we'll slip the in-memory web API into the
+  configuration *above* the `AppComponent`.</span>
 
-  The application itself doesn't need to know and shouldn't know about this.
-  So we'll slip the in-memory web API into the configuration *above* the `AppComponent`.
+  Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick:
 
-  Here is a version of `main` that performs this trick
-+makeExcerpt('app/main.ts', 'final')
++makeExcerpt(_appModuleTsVsMainTs, 'v2')
 
 block backend
   :marked
@@ -133,7 +133,7 @@ block get-heroes-details
     *Observables* are a powerful way to manage asynchronous data flows.
     We'll learn about [Observables](#observables) later in this chapter.
 
-    For *now* we get back on familiar ground by immediately by 
+    For *now* we get back on familiar ground by immediately by
     converting that `Observable` to a `Promise` using the `toPromise` operator.
   +makeExcerpt('app/hero.service.ts', 'to-promise', '')
   :marked
@@ -326,19 +326,6 @@ block add-new-hero-via-detail-comp
   Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions used in the template.
   Let's start with *add*.
 
-block heroes-comp-directives
-  :marked
-    We're using the `HeroDetailComponent` to capture the new hero information.
-    We have to tell Angular about that by importing the `HeroDetailComponent` and referencing it in the component metadata `directives` array.
-  +makeExcerpt('app/heroes.component.ts (HeroDetailComponent)', 'hero-detail-component')
-  .l-sub-section
-    :marked
-      These are the same lines that we removed in the previous [Routing](toh-pt5.html) chapter.
-      We didn't know at the time that we'd need the *HeroDetailComponent* again. So we tidied up.
-
-      Now we *must* put these lines back. If we don't, Angular will ignore the `<my-hero-detail>`
-      tag and pushing the *Add New Hero* button will have no visible effect.
-:marked
   Implement the click handler for the *Add New Hero* button.
 
 +makeExcerpt('app/heroes.component.ts', 'addHero')
@@ -372,7 +359,7 @@ block observables-section-intro
     Each `Http` method  returns an `Observable` of HTTP `Response` objects.
 
     Our `HeroService` converts that `Observable` into a `Promise` and returns the promise to the caller.
-    In this section we learn to return the `Observable` directly and discuss when and why that might be 
+    In this section we learn to return the `Observable` directly and discuss when and why that might be
     a good thing to do.
 
     ### Background
@@ -385,15 +372,15 @@ block observables-section-intro
     Recall that our `HeroService` quickly chained the `toPromise` operator to the `Observable` result of `http.get`.
     That operator converted the `Observable` into a `Promise` and we passed that promise back to the caller.
 
-    Converting to a promise is often a good choice. We typically ask `http` to fetch a single chunk of data. 
+    Converting to a promise is often a good choice. We typically ask `http` to fetch a single chunk of data.
     When we receive the data, we're done.
-    A single result in the form of a promise is easy for the calling component to consume 
+    A single result in the form of a promise is easy for the calling component to consume
     and it helps that promises are widely understood by JavaScript programmers.
 
 :marked
-  But requests aren't always "one and done". We may start one request, 
+  But requests aren't always "one and done". We may start one request,
   then cancel it, and make a different request before the server has responded to the first request.
-  Such a _request-cancel-new-request_ sequence is difficult to implement with *!{_Promise}s*. 
+  Such a _request-cancel-new-request_ sequence is difficult to implement with *!{_Promise}s*.
   It's easy with *!{_Observable}s* as we'll see.
 
   ### Search-by-name
@@ -407,12 +394,12 @@ block observables-section-intro
 :marked
   The `!{_priv}http.get()` call in `HeroSearchService` is similar to the one
   in the `HeroService`, although the URL now has a query string.
-  <span if-docs="ts">Another notable difference: we no longer call `toPromise`, 
+  <span if-docs="ts">Another notable difference: we no longer call `toPromise`,
   we simply return the *observable* instead.</span>
 
   ### HeroSearchComponent
 
-  Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`. 
+  Let's create a new `HeroSearchComponent` that calls this new `HeroSearchService`.
 
   The component template is simple &mdash; just a text box and a list of matching search results.
 
@@ -435,7 +422,7 @@ block observables-section-intro
 
 :marked
   #### Search terms
-  
+
   Let's focus on the `!{_priv}searchTerms`:
 
 +makeExcerpt('app/hero-search.component.ts', 'searchTerms', '')
@@ -466,7 +453,7 @@ block observable-transformers
     Fortunately, we can chain `Observable` operators to the string `Observable` that reduce the request flow.
     We'll make fewer calls to the `HeroSearchService` and still get timely results. Here's how:
 
-    * `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds 
+    * `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
     before passing along the latest string. We'll never make requests more frequently than 300ms.
 
     * `distinctUntilChanged` ensures that we only send a request if the filter text changed.
@@ -481,21 +468,21 @@ block observable-transformers
       (formerly known as "flatMapLatest") is very clever.
 
       Every qualifying key event can trigger an http call.
-      Even with a 300ms pause between requests, we could have multiple http requests in flight 
+      Even with a 300ms pause between requests, we could have multiple http requests in flight
       and they may not return in the order sent.
 
       `switchMap` preserves the original request order while returning
-       only the observable from the most recent http call. 
+       only the observable from the most recent http call.
       Results from prior calls are canceled and discarded.
 
-      We also short-circuit the http call and return an observable containing an empty array 
+      We also short-circuit the http call and return an observable containing an empty array
       if the search text is empty.
 
       Note that _canceling_ the `HeroSearchService` observable won't actually abort a pending http request
       until the service supports that feature, a topic for another day.
       We are content for now to discard unwanted results.
   :marked
-    * `catch` intercepts a failed observable. 
+    * `catch` intercepts a failed observable.
     Our simple example prints the error to the console; a real life application should do better.
     Then we return an observable containing an empty array to clear the search result.
 
@@ -510,7 +497,7 @@ block observable-transformers
     :marked
       Many authorities say we should do just that.
   :marked
-    We take a different approach in this example. 
+    We take a different approach in this example.
     We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
 
   +makeExample('app/rxjs-extensions.ts')
@@ -527,10 +514,12 @@ block observable-transformers
 
 +makeExample('app/dashboard.component.html')
 
+- var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
+- var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
 :marked
-  And finally, we import the `HeroSearchComponent` and add it to the `directives` !{_array}.
+  And finally, we import the `HeroSearchComponent` and add it to the `!{_declarations}` !{_array}:
 
-+makeExcerpt('app/dashboard.component.ts', 'search')
++makeExcerpt(declFile, 'search')
 
 :marked
   Run the app again, go to the *Dashboard*, and enter some text in the search box.
@@ -554,7 +543,8 @@ block filetree
       .children
         .file app.component.ts
         .file app.component.css
-        .file app.routes.ts
+        .file app.module.ts
+        .file app.routing.ts
         .file dashboard.component.css
         .file dashboard.component.html
         .file dashboard.component.ts
@@ -566,7 +556,7 @@ block filetree
         .file hero-search.component.css (new)
         .file hero-search.component.ts (new)
         .file hero-search.service.ts (new)
-        .file rxjs-operators.ts
+        .file rxjs-extensions.ts
         .file hero.service.ts
         .file heroes.component.css
         .file heroes.component.html
@@ -578,7 +568,7 @@ block filetree
       .file index.html
       .file package.json
       .file styles.css
-      .file systemjs.config.json
+      .file systemjs.config.js
       .file tsconfig.json
       .file typings.json
 
@@ -593,12 +583,13 @@ block filetree
   - We updated our components to allow adding, editing and deleting of heroes.
   - We configured an in-memory web API.
   - We learned how to use !{_Observable}s.
-  
+
   Here are the files we added or changed in this chapter.
 
 block file-summary
   +makeTabs(
     `toh-6/ts/app/app.component.ts,
+     toh-6/ts/app/app.module.ts,
      toh-6/ts/app/heroes.component.ts,
      toh-6/ts/app/heroes.component.html,
      toh-6/ts/app/heroes.component.css,
@@ -606,8 +597,9 @@ block file-summary
      toh-6/ts/app/hero-detail.component.html,
      toh-6/ts/app/hero.service.ts,
      toh-6/ts/app/in-memory-data.service.ts`,
-    null,
+    ',,,,,,,,',
     `app.comp...ts,
+     app.mod...ts,
      heroes.comp...ts,
      heroes.comp...html,
      heroes.comp...css,
@@ -622,11 +614,11 @@ block file-summary
     toh-6/ts/app/hero-search.component.ts,
     toh-6/ts/app/hero-search.component.html,
     toh-6/ts/app/hero-search.component.css,
-    toh-6/ts/app/rxjs-operators.ts`,
+    toh-6/ts/app/rxjs-extensions.ts`,
     null,
     `hero-search.service.ts,
     hero-search.component.ts,
-    hero-search.service.html,
+    hero-search.component.html,
     hero-search.component.css,
-    rxjs-operators.ts`
+    rxjs-extensions.ts`
   )
diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade
index 7486d12381..ee5485ebb8 100644
--- a/public/docs/ts/latest/cookbook/dependency-injection.jade
+++ b/public/docs/ts/latest/cookbook/dependency-injection.jade
@@ -166,37 +166,16 @@ include ../_util-fns
 .l-main-section
 :marked
   ## External module configuration
-  ## 外部模块设置
-
-  We can register _certain_ module providers in the `NgModule` rather than in the root application component.
+  We often register providers in the `NgModule` rather than in the root application component.
+    
+  We do this when (a) we expect the service to be injectable everywhere
+  or (b) we must configure another application global service _before it starts_.
   
-  也可以在`NgModule`中注册_某些_模块中的提供商，而非在应用程序根组件里。
-
-  We'd do this when we expect to select or configure external modules that support our application
-  but (a) aren't conceptually part of the application and (b) that we could change later without
-  altering the essential logic of the application.
+  We see an example of the second case here, where we configure the Component Router with a non-default
+  [location strategy](../guide/router.html#location-strategy) by listing its provider 
+  in the `providers` list of the `AppModule`.
   
-  使用外部模块时，如果满足下面两个条件，就应该在引导过程中注册：a)它在概念上不是程序的一部分，以及 b)将来可能要在不改变主要应用逻辑的情况下更换它。
-
-  For example, we might configure the Component Router with different
-  [location strategies](../guide/router.html#location-strategy)  based on environmental factors. 
-  The choice of location strategy doesn't matter to the application itself.
-  
-  比如，可能会根据不同的环境组件路由器，使用不同的[location策略](../guide/router.html#location-strategy)来配置组件路由器。而这个location策略不会直接影响到应用程序本身。
-
-  We could sneak in a fake HTTP backend with sample data during development rather than
-  allow http calls to a remote server (that might not yet exist). 
-  We'll switch to the real backend in production. 
-  The application shouldn't know or care one way or the other.
-  
-  在开发过程中，可以偷偷把一个假的带样本数据的HTTP后端嵌入进来，以代替对一个远程服务器(可能还不存在)进行http查询。在产品发布时再切换到真正的后端。应用程序不用知道也不用管正在跟哪个后端打交道。
-
-  See both examples in the following `app.module.ts`
-  where we list their service providers in the `providers` array of the `NgModule` (AppModule).
-  
-  在这个`app.module.ts`中，我们把它们的服务提供商列在`NgModel`（AppModule）的`providers`数组中。
-
-+makeExample('cb-dependency-injection/ts/app/app.module.ts','bootstrap','app/app.module.ts')(format='.') 
++makeExample('cb-dependency-injection/ts/app/app.module.ts','providers','app/app.module.ts (providers)')(format='.') 
 
 a(id="injectable")
 a(id="nested-dependencies")
diff --git a/public/docs/ts/latest/cookbook/rc4-to-rc5.jade b/public/docs/ts/latest/cookbook/rc4-to-rc5.jade
index 74ba872fd6..5fe854a1b6 100644
--- a/public/docs/ts/latest/cookbook/rc4-to-rc5.jade
+++ b/public/docs/ts/latest/cookbook/rc4-to-rc5.jade
@@ -62,7 +62,7 @@ code-example(format='.' language='bash').
   Update the Angular CLI if you're using that tool
 
 code-example(format='.'  language='bash').
-  npm install @angular/angular-cli @angular/tsc-wrapped --save-dev
+  npm install angular-cli @angular/tsc-wrapped --save-dev
 
 :marked
   ## 2. Create an _NgModule_
diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade
index cf9defee54..bc34fc08f4 100644
--- a/public/docs/ts/latest/glossary.jade
+++ b/public/docs/ts/latest/glossary.jade
@@ -1,6 +1,13 @@
-include _util-fns
+block includes
+  include _util-fns
+
+//- current.path = ['docs', lang, 'latest', ...]
+- var lang = current.path[1]
+- var docsPath='/' + current.path[0]
+- var docsLatest='/' + current.path.slice(0,3).join('/');
+- var _at = lang === 'js' ? '' : '@'
+- var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>'
 
-// #docregion intro
 :marked
   # Angular 2词汇表
 
@@ -20,58 +27,58 @@ include _util-fns
   [A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I)
   [J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R)
   [S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z)
-// #enddocregion intro
 
-// #docregion a1
-<a id="A"></a>
-// #enddocregion a1
-a#aot
-.l-main-section
-:marked
-  ## Ahead of Time (AOT) Compilation
+.l-main-section#A
 
-  ## Ahead of Time (AOT) 提前编译
-.l-sub-section
++ifDocsFor('ts')
+  a#aot
   :marked
-    Angular applications can be compiled by developers at build-time. 
-    By compiling your application using the compiler-cli, `ngc`, you can boostrap directly 
-    to a Module Factory, meaning you don't need to include the Angular compiler in your javascript bundle. 
-    Ahead of Time compiled applications also benefit from decreased load time and increased performance.
+    ## Ahead of Time (AOT) Compilation
+  
+    ## Ahead of Time (AOT) 提前编译
+    
+  .l-sub-section
+    :marked
+      Angular applications can be compiled by developers at build-time. 
+      By compiling your application using the compiler-cli, `ngc`, you can boostrap directly 
+      to a Module Factory, meaning you don't need to include the Angular compiler in your javascript bundle. 
+      Ahead of Time compiled applications also benefit from decreased load time and increased performance.
+  
+      开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序，应用可以从一个模块工厂(Module Factory)直接启动，意思是不再需要把Angular编译器添加到JavaScript包中。提前编译的应用程序将加载迅速，并具有更高的性能。
 
-    开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序，应用可以从一个模块工厂(Module Factory)直接启动，意思是不再需要把Angular编译器添加到JavaScript包中。提前编译的应用程序将加载迅速，并具有更高的性能。
-
-.l-main-section
-<a id="angular-module"></a>
-:marked
-  ## Angular Module
-
-  ## Angular模块 
-.l-sub-section
   :marked
-    Helps us organize an application into cohesive blocks of functionality.
-    An Angular module identifies the components, directives, and pipes that are used by the application
-    along with the list of external Angular modules that the application needs, such as `FormsModule`.
-
-    帮助我们将一个应用程序组织成拼合的功能模块群。一个Angular模块标识了被应用程序使用的组件、指令和管道等，它同时包含了应用程序需要的外来Angular模块的列表，比如`FormsModule`。
-
-    Every Angular application has an application root module class. By convention the class is
-    called `AppModule` and resides in a file named `app.component.ts`.
-
-    每个Angular应用程序都有一个应用程序根模块类。按规约这个类的名字为`AppModule`，存放在名为`app.component.ts`的文件。
-
-    See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples.
-
-    到[Angular模块](/docs/ts/latest/guide/ngmodule.html)章节查看详情。
-:marked
-  ## Annotation
-  ## 注解(Annotation)
-.l-sub-section
+    ## Angular Module
+  
+    ## Angular模块 
+  .l-sub-section
+    :marked
+      Helps us organize an application into cohesive blocks of functionality.
+      An Angular module identifies the components, directives, and pipes that are used by the application
+      along with the list of external Angular modules that the application needs, such as `FormsModule`.
+  
+      帮助我们将一个应用程序组织成拼合的功能模块群。一个Angular模块标识了被应用程序使用的组件、指令和管道等，它同时包含了应用程序需要的外来Angular模块的列表，比如`FormsModule`。
+  
+      Every Angular application has an application root module class. By convention the class is
+      called `AppModule` and resides in a file named `app.component.ts`.
+  
+      每个Angular应用程序都有一个应用程序根模块类。按规约这个类的名字为`AppModule`，存放在名为`app.component.ts`的文件。
+  
+      See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples.
+  
+      到[Angular模块](!{docsLatest}/guide/ngmodule.html)章节查看详情。
+      
++ifDocsFor('ts|dart')
   :marked
-    In practice a synonym for [Decoration](#decorator).
-
-    [装饰器(Decoration)](#decorator)在实践中的同义词。
-// #enddocregion a-1
-// #docregion a-2
+    ## Annotation
+    
+    ## 注解(Annotation)
+  .l-sub-section
+    block annotation-defn
+      :marked
+        In practice a synonym for [Decoration](#decorator).
+    
+        [装饰器(Decoration)](#decorator)在实践中的同义词。
+  
 :marked
   ## Attribute Directive
   ## 属性型指令(Attribute Directive)
@@ -87,82 +94,75 @@ a#aot
     an Attribute Directive.
 
     `ngClass`指令就是典型的属性型指令。它可以添加或移除CSS类名。
-// #enddocregion a-2
-
-// #docregion b-c
-- var lang = current.path[1]
-- var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
-- var atSym = lang === 'js' ? '' : '@'
-<a id="B"></a>
-.l-main-section
-:marked
-  ## Barrel
-  ## 封装桶(Barrel)
-.l-sub-section
-  :marked
-    A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module.
-    The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
     
-    封装桶是把一系列模块中的*导出结果*归纳进一个单一的快捷模块的一种方式。
-    封装桶本身是一个模块文件，它重新导出*选中的*导出，这些导入来自其它文件。
+.l-main-section#B
 
-    Imagine three ES2015 modules in a `heroes` folder:
++ifDocsFor('ts|js')
+  :marked
+    ## Barrel
+    ## 封装桶(Barrel)
+  .l-sub-section
+    :marked
+      A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module.
+      The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
+      
+      封装桶是把一系列模块中的*导出结果*归纳进一个单一的快捷模块的一种方式。
+      封装桶本身是一个模块文件，它重新导出*选中的*导出，这些导入来自其它文件。
+  
+      Imagine three ES2015 modules in a `heroes` folder:
+  
+      设想在`heroes`目录下有三个ES2015的模块：
 
-    设想在`heroes`目录下有三个ES2015的模块：
+    code-example.
+      // heroes/hero.component.ts
+      export class HeroComponent {}
+      
+      // heroes/hero.model.ts
+      export class Hero {}
+      
+      // heroes/hero.service.ts
+      export class HeroService {}
+    :marked
+      Without a barrel, a consumer would need three import statements:
+  
+      假如没有封装桶，消费者就需要三条import语句：
+  
+    code-example.
+      import { HeroComponent } from '../heroes/hero.component.ts';
+      import { Hero }          from '../heroes/hero.model.ts';
+      import { HeroService }   from '../heroes/hero.service.ts';
+    :marked
+      We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items:
+  
+      在`heroes`目录下添加一个封装桶(按规约叫做`index`)，它导出所有这三条：
+  
+    code-example.
+      export * from './hero.model.ts';   // re-export all of its exports
+      export * from './hero.service.ts'; // re-export all of its exports
+      export { HeroComponent } from './hero.component.ts'; // re-export the named thing
+    :marked
+      Now a consumer can import what it needs from the barrel.
+  
+      现在，消费者就就可以从这个封装桶中导入它需要的东西了。
+  
+    code-example.
+      import { Hero, HeroService } from '../heroes'; // index is implied
+    :marked
+      The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
+  
+      Angular的每个[范围化包(Scoped Package)](#scoped-package)都有一个叫做`index`的封装桶。
 
-  code-example.
-    // heroes/hero.component.ts
-    export class HeroComponent {}
+      That's why we can write this:
     
-    // heroes/hero.model.ts
-    export class Hero {}
+      这就是为什么可以这样写：
     
-    // heroes/hero.service.ts
-    export class HeroService {}
-  :marked
-    Without a barrel, a consumer would need three import statements:
+    +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
 
-    假如没有封装桶，消费者就需要三条import语句：
+    .alert.is-important
+      :marked
+        Note that you can often achieve this same goal using [Angular modules](#angular-module) instead.
 
-  code-example.
-    import { HeroComponent } from '../heroes/hero.component.ts';
-    import { Hero }          from '../heroes/hero.model.ts';
-    import { HeroService }   from '../heroes/hero.service.ts';
-  :marked
-    We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items:
-
-    在`heroes`目录下添加一个封装桶(按规约叫做`index`)，它导出所有这三条：
-
-  code-example.
-    export * from './hero.model.ts';   // re-export all of its exports
-    export * from './hero.service.ts'; // re-export all of its exports
-    export { HeroComponent } from './hero.component.ts'; // re-export the named thing
-  :marked
-    Now a consumer can import what it needs from the barrel.
-
-    现在，消费者就就可以从这个封装桶中导入它需要的东西了。
-
-  code-example.
-    import { Hero, HeroService } from '../heroes'; // index is implied
-  :marked
-    The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
-
-    Angular的每个[范围化包(Scoped Package)](#scoped-package)都有一个叫做`index`的封装桶。
-
-// #enddocregion b-c
-:marked
-  That's why we can write this:
-
-  这就是为什么可以这样写的原因：
-
-+makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
-// #docregion b-c
-
-.alert.is-important
-  :marked
-    Note that you can often achieve this same goal using [Angular modules](#angular-module) instead.
-
-    注意，你可以利用[Angular模块](#angular-module)达到同样的目的。
+        注意，你可以利用[Angular模块](#angular-module)达到同样的目的。
 
 :marked
   ## Binding
@@ -185,20 +185,20 @@ a#aot
   ## Bootstrap
   ## 启动/引导(Bootstrap)
 .l-sub-section
-  :marked
-    We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
-    The bootstraping identifies an application's top level "root" [Component](#component), which is the first
-    component that is loaded for the application. For more information see the [QuickStart](/docs/ts/latest/quickstart.html).
+  block bootstrap-defn-top
+    :marked
+      We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
+      The bootstraping identifies an application's top level "root" [Component](#component), which is the first
+      component that is loaded for the application. For more information see the [QuickStart](/docs/ts/latest/quickstart.html).
+  
+      通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component)，
+      并可能通过[依赖注入体系(Dependency Injection System)](#dependency-injection)注册服务的[提供商(Provider)](#provider)。
+  
+      One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
+  
+      你可以在同一个`index.html`中引导多个应用，每个应用都有它自己的顶级根组件。
 
-    通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component)，
-    并可能通过[依赖注入体系(Dependency Injection System)](#dependency-injection)注册服务的[提供商(Provider)](#provider)。
-
-    One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
-
-    你可以在同一个`index.html`中引导多个应用，每个应用都有它自己的顶级根组件。
-
-<a id="C"></a>
-.l-main-section
+.l-main-section#C
 :marked
   ## camelCase
   ## 驼峰式命名法(camelCase)
@@ -236,12 +236,12 @@ a#aot
     组件是Angular系统中最重要的基本构造块儿之一。
     它其实是一个拥有[模板(Template)](#template)的[指令(Directive)](#directive)。
 
-    The  developer applies the `#{atSym}Component` !{decorator} to
+    The  developer applies the `#{_at}Component` !{_decoratorLink} to
     the component class, thereby attaching to the class the essential component metadata
     that Angular needs to create a component instance and render it with its template
     as a view.
 
-    开发人员使用`#{atSym}Component`!{decoratorCn}来装饰一个组件类，也就是把这个核心组件的元数据附加到类上。
+    开发人员使用`#{_at}Component`!{decoratorCn}来装饰一个组件类，也就是把这个核心组件的元数据附加到类上。
     Angular会利用这个元数据信息创建一个组件实例，并把组件的模板作为视图渲染出来。
 
     Those familiar with "MVC" and "MVVM" patterns will recognize
@@ -250,26 +250,24 @@ a#aot
     如果你熟悉 "MVC" 和 "MVVM" 架构模式，就会意识到“组件”充当了“控制器(Controller)”和“视图模型(View Model)”的角色。
 // #enddocregion b-c
 
-// #docregion d1
-<a id="D"></a>
-.l-main-section
+.l-main-section#D
 :marked
   ## dash-case
   ## 中线命名法(dash-case)
 .l-sub-section
   :marked
     The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-). 
+    This form is also known as [kebab-case](#kebab-case).    
 
     使用中线(`-`)分隔每个单词来书写词汇或短语的方法叫做中线命名法。
-
-    Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and the `hero-list.component.ts`.
-
-    指令的选择器和文件名通常都是通过中线命名法来命名的。比如`my-app` 和 `hero-list.component.ts`。
-
-    This form is also known as [kebab-case](#kebab-case).
-
     这种命名法也被称为[烤串命名法(kebab-case)](#kebab-case)。
 
+    [Directive](#directive) selectors (like `my-app`) <span if-docs="ts">and
+    the root of filenames (such as `hero-list.component.ts`)</span> are often
+    spelled in dash-case.
+
+    [指令](#directive)的选择器（例如`my-app`）<span if-docs="ts">和文件名（比如``hero-list.component.ts`）</span>通常都是通过中线命名法来命名的。
+
 :marked
   ## Data Binding
   ## 数据绑定(Data Binding)
@@ -300,80 +298,81 @@ a#aot
 
      The many forms of binding include:
      绑定形式包括：
-     * [Interpolation](/docs/ts/latest/guide/template-syntax.html#interpolation)
-     * [插值表达式(Interpolation)](/docs/ts/latest/guide/template-syntax.html#interpolation)
-     * [Property Binding](/docs/ts/latest/guide/template-syntax.html#property-binding)
-     * [属性绑定(Property Binding)](/docs/ts/latest/guide/template-syntax.html#property-binding)
-     * [Event Binding](/docs/ts/latest/guide/template-syntax.html#event-binding)
-     * [事件绑定(Event Binding)](/docs/ts/latest/guide/template-syntax.html#event-binding)
-     * [Attribute Binding](/docs/ts/latest/guide/template-syntax.html#attribute-binding)
-     * [Attribute绑定(Attribute Binding)](/docs/ts/latest/guide/template-syntax.html#attribute-binding)
-     * [Class Binding](/docs/ts/latest/guide/template-syntax.html#class-binding)
-     * [CSS类绑定(Class Binding)](/docs/ts/latest/guide/template-syntax.html#class-binding)
-     * [Style Binding](/docs/ts/latest/guide/template-syntax.html#style-binding)
-     * [样式绑定(Style Binding)](/docs/ts/latest/guide/template-syntax.html#style-binding)
-     * [Two-way data binding with ngModel](/docs/ts/latest/guide/template-syntax.html#ng-model)
-     * [基于ngModel的双向数据绑定(Two-way data binding with ngModel)](/docs/ts/latest/guide/template-syntax.html#ng-model)
+     * [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation)
+     * [插值表达式(Interpolation)](!{docsLatest}/guide/template-syntax.html#interpolation)
+     * [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding)
+     * [属性绑定(Property Binding)](!{docsLatest}/guide/template-syntax.html#property-binding)
+     * [Event Binding](!{docsLatest}/guide/template-syntax.html#event-binding)
+     * [事件绑定(Event Binding)](!{docsLatest}/guide/template-syntax.html#event-binding)
+     * [Attribute Binding](!{docsLatest}/guide/template-syntax.html#attribute-binding)
+     * [Attribute绑定(Attribute Binding)](!{docsLatest}/guide/template-syntax.html#attribute-binding)
+     * [Class Binding](!{docsLatest}/guide/template-syntax.html#class-binding)
+     * [CSS类绑定(Class Binding)](!{docsLatest}/guide/template-syntax.html#class-binding)
+     * [Style Binding](!{docsLatest}/guide/template-syntax.html#style-binding)
+     * [样式绑定(Style Binding)](!{docsLatest}/guide/template-syntax.html#style-binding)
+     * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ng-model)
+     * [基于ngModel的双向数据绑定(Two-way data binding with ngModel)](!{docsLatest}/guide/template-syntax.html#ng-model)
 
     Learn more about data binding in the
-    [Template Syntax](/docs/ts/latest/guide/template-syntax.html#data-binding) chapter.
+    [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) chapter.
 
     要了解关于数据绑定的更多知识，请参见[模板语法](guide/template-syntax.html#data-binding)一章。
 
-// #enddocregion d1
-<a id="decorator"></a> <a id="decoration"></a>
-:marked
-  ## Decorator | Decoration
-  ## 装饰器(Decorator | Decoration)
-.l-sub-section
++ifDocsFor('ts|dart')
+  a#decorator
+  a#decoration
   :marked
-    A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
+    ## Decorator | Decoration
+    ## 装饰器(Decorator | Decoration)
+  .l-sub-section
+    block decorator-defn
+      :marked
+        A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
+    
+        装饰器是一个**函数**，这个函数将元数据添加到类、类成员(属性、方法)和函数上。
+    
+        Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
+    
+        装饰器是一个JavaScript的语言[特性](https://github.com/wycats/javascript-decorators)，装饰器在TypeScript里面已经采纳并实现了，并被推荐到了ES2016(也就是ES7)。
+    
+        We apply a decorator by positioning it
+        immediately above or to the left of the thing it decorates.
+    
+        应用装饰器的方法是把装饰器放到被装饰对象的上面或左边。
+    
+        Angular has its own set of decorators to help it interoperate with our application parts.
+        Here is an example of a `@Component` decorator that identifies a
+        class as an Angular [Component](#component) and an `@Input` decorator applied to a property
+        of that component.
+    
+        Angular使用自己的一套装饰器来实现应用程序各部分之间的相互操作。
+        下面的例子中使用了`@Component`装饰器来将一个类标记为一个Angular[组件(Component)](#component)，并用`@Input`装饰器来装饰该组件的一个属性。
+    
+        The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
+    
+        `@Component`装饰器中被省略的参数对象还可以包含和组件有关的元数据。
+    
+        ```
+        @Component({...})
+        export class AppComponent {
+          constructor(@Inject('SpecialFoo') public foo:Foo) {}
+          @Input() name:string;
+        }
+        ```
+    
+        The scope of a decorator is limited to the language feature
+        that it decorates. None of the decorations shown here will "leak" to other
+        classes appearing below it in the file.
+    
+        一个装饰器的作用域会被限制在它所装饰的东西上，这是一个语言级特性。在上面这个例子中，就算别的类在同一个文件中紧跟着上面的类也不会有任何装饰器“泄露”到其它类。
+    
+      .alert.is-important
+        :marked
+          Always include the parentheses `()` when applying a decorator.
+          A decorator is a **function** that must be called when applied.
+    
+          永远别忘了在装饰器后面加括号`()`。因为装饰器是 **函数** ，在应用它的时候一定要被调用。
 
-    装饰器是一个**函数**，这个函数将元数据添加到类、类成员(属性、方法)和函数上。
-
-    Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
-
-    装饰器是一个JavaScript的语言[特性](https://github.com/wycats/javascript-decorators)，装饰器在TypeScript里面已经采纳并实现了，并被推荐到了ES2016(也就是ES7)。
-
-    We apply a decorator by positioning it
-    immediately above or to the left of the thing it decorates.
-
-    应用装饰器的方法是把装饰器放到被装饰对象的上面或左边。
-
-    Angular has its own set of decorators to help it interoperate with our application parts.
-    Here is an example of a `@Component` decorator that identifies a
-    class as an Angular [Component](#component) and an `@Input` decorator applied to a property
-    of that component.
-
-    Angular使用自己的一套装饰器来实现应用程序各部分之间的相互操作。
-    下面的例子中使用了`@Component`装饰器来将一个类标记为一个Angular[组件(Component)](#component)，并用`@Input`装饰器来装饰该组件的一个属性。
-
-    The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
-
-    `@Component`装饰器中被省略的参数对象还可以包含和组件有关的元数据。
-
-    ```
-    @Component({...})
-    export class AppComponent {
-      constructor(@Inject('SpecialFoo') public foo:Foo) {}
-      @Input() name:string;
-    }
-    ```
-
-    The scope of a decorator is limited to the language feature
-    that it decorates. None of the decorations shown here will "leak" to other
-    classes appearing below it in the file.
-
-    一个装饰器的作用域会被限制在它所装饰的东西上，这是一个语言级特性。在上面这个例子中，就算别的类在同一个文件中紧跟着上面的类也不会有任何装饰器“泄露”到其它类。
-
-  .alert.is-important
-    :marked
-      Always include the parentheses `()` when applying a decorator.
-      A decorator is a **function** that must be called when applied.
-
-      永远别忘了在装饰器后面加括号`()`。因为装饰器是 **函数** ，在应用它的时候一定要被调用。
-
-// #docregion d2
 :marked
   ## Dependency Injection
   ## 依赖注入(Dependency Injection)
@@ -452,10 +451,10 @@ a#aot
     Angular会为每个注册器注册很多Angular内建提供商。我们也可以注册自己的提供商。通常注册提供商的最佳时间是在应用程序开始[引导(Bootstrap)](#bootstrap)的时候。
     当然，我们也有其它很多机会注册提供商。
 
-    Learn more in the [Dependency Injection](/docs/ts/latest/guide/dependency-injection.html) chapter.
-
-    要了解关于依赖注入的更多知识，请参见[依赖注入(Dependency Injection)](guide/dependency-injection.html)一章。
+    Learn more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) chapter.
 
+    要了解关于依赖注入的更多知识，请参见[依赖注入(Dependency Injection)](!{docsLatest}/guide/dependency-injection.html)一章。
+    
 :marked
   ## Directive
   ## 指令(Directive)
@@ -504,11 +503,8 @@ a#aot
     1. [结构型指令(Structural Directive)](#structural-directive)：负责塑造或重塑HTML布局。这一般是通过添加、删除或者操作HTML元素及其子元素来实现的。
 // #enddocregion d2
 
-// #docregion e1
-<a id="E"></a>
-// #enddocregion e1
-// #docregion e2
-.l-main-section
+.l-main-section#E
+
 :marked
   ## ECMAScript
 .l-sub-section
@@ -518,40 +514,32 @@ a#aot
     [官方JavaScript语言规范](https://en.wikipedia.org/wiki/ECMAScript)
 
     The latest approved version of JavaScript is
-    [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
-    (AKA "ES2015" or "ES6") and many Angular 2 developers will write their applications
+    [ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
+    (AKA "ES2016" or "ES7") and many Angular 2 developers will write their applications
     either in this version of the language or a dialect that strives to be
     compatible with it such as [TypeScript](#typesScript).
 
     最新的被认可的JavaScript版本是[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)，(也叫“ES2015”或“ES6”)。Angular 2的开发者要么使用这个版本的JavaScript，要么使用与这个版本兼容的语言，比如[TypeScript](#typesScript)。
 
-    Most modern browsers today only support the prior "ECMAScript 5" (AKA ES5) standard.
-    Applications written in ES2015 or one of its dialects must be "[transpiled](#transpile)"
+    Most modern browsers today only support the much older "ECMAScript 5" (AKA ES5) standard.
+    Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
     to ES5 JavaScript.
 
-    目前，几乎所有现代游览器都只支持上一个版本的“ECMAScript 5” (也就是ES5)标准。使用ES2015或者其它兼容语言开发的应用程序，都必须被“[转译(Transpile)](#transpile)”成ES5 JavaScript。
+    目前，几乎所有现代游览器都只支持上老版本的“ECMAScript 5” (也就是ES5)标准。使用ES2015，ES2016或者其它兼容语言开发的应用程序，都必须被“[转译(Transpile)](#transpile)”成ES5 JavaScript。
 
     Angular 2 developers may choose to write in ES5 directly.
 
     Angular 2的开发者也可以选择直接使用ES5编程。
 
 :marked
-  ## ECMAScript 2015
-.l-sub-section
-  :marked
-    The latest released version of JavaScript,
-    [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
-    (AKA "ES2015" or "ES6")
-
-    最新发布的JavaScript版本，[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
-    (即 "ES2015" 或 "ES6")。
-:marked
-  ## ES2015
+  ## ES 2015
+  ## ES 2015
 .l-sub-section
   :marked
     Short hand for "[ECMAScript 2015](#ecmascript=2015)".
 
-    “[ECMAScript 2015](#ecmascript=2015)”的简写。
+    [ECMAScript 2015](#ecmascript=2015)的缩写。
+    
 :marked
   ## ES6
 .l-sub-section
@@ -569,12 +557,10 @@ a#aot
     “ECMAScript 5”的简写，大部分现代浏览器使用的JavaScript版本。参见[ECMAScript](#ecmascript)。
 // #enddocregion e2
 
-// #docregion f-l
-<a id="F"></a>
-<a id="G"></a>
-<a id="H"></a>
-<a id="I"></a>
-.l-main-section
+a#F
+a#G
+a#H
+.l-main-section#I
 :marked
   ## Injector
   ## 注入器(Injector)
@@ -591,15 +577,15 @@ a#aot
 .l-sub-section
   :marked
     A directive property that can be the ***target*** of a
-    [Property Binding](/docs/ts/latest/guide/template-syntax.html#property-binding).
+    [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding).
     Data values flow *into* this property from the data source identified
     in the template expression to the right of the equal sign.
 
-    指令属性可以作为[属性绑定](/docs/ts/latest/guide/template-syntax.html#property-binding)的目标。数据值会从模板表达式等号右侧的数据源中，流入这个属性。
+    指令属性可以作为[属性绑定](!{docsLatest}/guide/template-syntax.html#property-binding)的目标。数据值会从模板表达式等号右侧的数据源中，流入这个属性。
 
-    See the [Template Syntax](/docs/ts/latest/guide/template-syntax.html#inputs-outputs) chapter.
+    See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter.
 
-    参见[模板语法](/docs/ts/latest/guide/template-syntax.html#inputs-outputs)一章。
+    参见[模板语法](!{docsLatest}/guide/template-syntax.html#inputs-outputs)一章。
 
 :marked
   ## Interpolation
@@ -619,42 +605,33 @@ a#aot
 
   :marked
     Learn more about interpolation in the
-    [Template Syntax](/docs/ts/latest/guide/template-syntax.html#interpolation) chapter.
+    [Template Syntax](!{docsLatest}/guide/template-syntax.html#interpolation) chapter.
 
     要学习关于插值表达式的更多知识，参见[模板语法](/docs/ts/latest/guide/template-syntax.html#interpolation)一章。
+    
+.l-main-section#J
 
-<a id="J"></a>
-
-a#jit
-.l-main-section
-:marked
-  ## Just in Time (JIT) Compilation
-.l-sub-section
++ifDocsFor('ts')
+  a#jit
   :marked
-    With Angular _Just in Time_  bootstrapping you compile your components and modules in the browser
-    and launch the application dynamically. This is a good choice during development.
-    Consider the [Ahead of Time](#aot) mode for production apps.
+    ## Just in Time (JIT) Compilation
+  .l-sub-section
+    :marked
+      With Angular _Just in Time_  bootstrapping you compile your components and modules in the browser
+      and launch the application dynamically. This is a good choice during development.
+      Consider the [Ahead of Time](#aot) mode for production apps.
 
-<a id="K"></a>
+.l-main-section#K
 :marked
   ## kebab-case
   ## 烤串命名法(kebab-case)
 .l-sub-section
   :marked
-    The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
+    See [dash-case](#dash-case).
 
-    使用中线(`-`)分隔每个单词来书写复合词或短语的命名方法。
-    
-    Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and `hero-list.component.ts`.
-    
-    指令选择器和文件名等一般都用烤串命名法。比如`my-app`和`hero-list.component.ts`。
+    参见[中线命名法(dash-case)](#dash-case)。
 
-    This form is also known as [dash-case](#dash-case).
-
-    这种形式也叫[中线命名法(dash-case)](#dash-case)。
-
-<a id="L"></a>
-.l-main-section
+.l-main-section#L
 :marked
   ## Lifecycle Hooks
   ## 生命周期钩子(Lifecycle Hook)
@@ -696,111 +673,102 @@ a#jit
     * `ngOnDestroy` - just before the directive is destroyed.
     * `ngOnDestroy` - 在指令销毁前调用。
 
-    Learn more in the [Lifecycle Hooks](/docs/ts/latest/guide/lifecycle-hooks.html) chapter.
+    Learn more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks.html) chapter.
 
-    要了解更多，参见[生命周期钩子(Lifecycle Hook)](/docs/ts/latest/guide/lifecycle-hooks.html)一章。
+    要了解更多，参见[生命周期钩子(Lifecycle Hook)](!{docsLatest}/guide/lifecycle-hooks.html)一章。
 // #enddocregion f-l
 
-// #docregion m1
-<a id="M"></a>
-// #enddocregion m1
-// #docregion m2
-.l-main-section
+.l-main-section#M
+
 :marked
   ## Module
   ## 模块(Module)
 .l-sub-section
-
-  .alert.is-important
+  block module-defn
+    .alert.is-important
+      :marked
+       In Angular, there are two types of modules:
+  
+       在Angular里有两种模块：
+  
+       - [Angular modules](#angular-module).
+       See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples.
+  
+       - [Angular 模块](#angular-module).到[Angular Module](/docs/ts/latest/guide/ngmodule.html)章节查看详情和例子。
+  
+       - ES2015 modules as described in this section.
+  
+       - 本节描述的ES2015模块。
+  
     :marked
-     In Angular, there are two types of modules:
-
-     在Angular里有两种模块：
-
-     - [Angular modules](#angular-module).
-     See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples.
-
-     - [Angular 模块](#angular-module).到[Angular Module](/docs/ts/latest/guide/ngmodule.html)章节查看详情和例子。
-
-     - ES2015 modules as described in this section.
-
-     - 本节描述的ES2015模块。
+      Angular apps are modular.
+  
+      Angular应用程序是模块化的。
+  
+      In general, we assemble our application from many modules, both the ones we write ourselves
+      and the ones we acquire from others.
+  
+      一般来说，我们用模块来组装应用程序，这些模块包含我们自己编写的模块和从其它地方获取的模块。
+  
+      A typical module is a cohesive block of code dedicated to a single purpose.
+  
+      典型的模块，是具有单一用途的内聚代码块。
+  
+      A module **exports** something of value in that code, typically one thing such as a class.
+      A module that needs that thing, **imports** it.
+  
+      模块代码中通常会**导出(export)**一些东西，最典型的就是类。
+      模块如果需要什么东西，那就**导入(import)**它。
+  
+      The structure of Angular modules and the import/export syntax
+      is based on the [ES2015](#es2015) module standard
+      described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
+  
+      Angular的模块结构和输出/导入语法是基于[ES2015](#es2015)模块化标准的，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html)。
+  
+      An application that adheres to this standard requires a module loader to
+      load modules on request and resolve inter-module dependencies.
+      Angular does not ship with a module loader and does not have a preference
+      for any particular 3rd party library (although most samples use SystemJS).
+      Application developers may pick any module library that conforms to the standard
+  
+      采用这个标准的应用程序需要一个模块加载器来按需加载模块并解析模块的依赖关系。Angular不包含任何模块加载器，也不偏爱哪一个第三方库(虽然几乎所有例子都使用SystemJS)。
+      应用程序开发者可以自行选择任何与这个标准兼容的模块化库。
+  
+      Modules are typically named after the file in which the exported thing is defined.
+      The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts)
+      class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
+  
+      模块一般与它定义导出物的文件同名。比如, Angular的[日期管道(DatePipe)](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts)类属于名叫`date_pipe`的特性模块，位于文件`date_pipe.ts`中。
+  
+      Developers rarely access Angular feature modules directly.
+      We usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
+  
+      开发者很少需要直接访问Angular的特性模块。
+      我们通常会从一个Angular的[范围化包(Scoped Package)](#scoped-package)中导入它们，比如`@angular/core`。
+      
+a#N
+.l-main-section#O
 
++ifDocsFor('ts|js')
   :marked
-    Angular apps are modular.
-
-    Angular应用程序是模块化的。
-
-    In general, we assemble our application from many modules, both the ones we write ourselves
-    and the ones we acquire from others.
-
-    一般来说，我们用模块来组装应用程序，这些模块包含我们自己编写的模块和从其它地方获取的模块。
-
-    A typical module is a cohesive block of code dedicated to a single purpose.
-
-    典型的模块，是具有单一用途的内聚代码块。
-
-    A module **exports** something of value in that code, typically one thing such as a class.
-    A module that needs that thing, **imports** it.
-
-    模块代码中通常会**导出(export)**一些东西，最典型的就是类。
-    模块如果需要什么东西，那就**导入(import)**它。
-
-    The structure of Angular modules and the import/export syntax
-    is based on the [ES2015](#es2015) module standard
-    described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
-
-    Angular的模块结构和输出/导入语法是基于[ES2015](#es2015)模块化标准的，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html)。
-
-    An application that adheres to this standard requires a module loader to
-    load modules on request and resolve inter-module dependencies.
-    Angular does not ship with a module loader and does not have a preference
-    for any particular 3rd party library (although most samples use SystemJS).
-    Application developers may pick any module library that conforms to the standard
-
-    采用这个标准的应用程序需要一个模块加载器来按需加载模块并解析模块的依赖关系。Angular不包含任何模块加载器，也不偏爱哪一个第三方库(虽然几乎所有例子都使用SystemJS)。
-    应用程序开发者可以自行选择任何与这个标准兼容的模块化库。
-
-    Modules are typically named after the file in which the exported thing is defined.
-    The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts)
-    class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
-
-    模块一般与它定义导出物的文件同名。比如, Angular的[日期管道(DatePipe)](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts)类属于名叫`date_pipe`的特性模块，位于文件`date_pipe.ts`中。
-
-    Developers rarely access Angular feature modules directly.
-    We usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
-
-    开发者很少需要直接访问Angular的特性模块。
-    我们通常会从一个Angular的[范围化包(Scoped Package)](#scoped-package)中导入它们，比如`@angular/core`。
-
-// #enddocregion m2
-
-// #docregion n-s-1
-- var lang = current.path[1]
-- var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
-- var decoratorCn = lang === 'dart' ? '注解' : '<a href="#decorator">装饰器</a>'
-- var atSym = lang === 'js' ? '' : '@'
-<a id="N"></a>
-<a id="O"></a>
-.l-main-section
-:marked
-  ## Observable
-
-  ## Observable
-.l-sub-section
-  :marked
-    We can think of an observable as an array whose items arrive asynchronously over time. 
-    Observables help us manage asynchronous data, such as data coming from a backend service.
-    Observables are used within Angular itself, including Angular's event system and its http client service.
-
-    一个`Observable`是一个数组，它包含的元素在一段时间内异步到达。`Observable`帮助我们管理异步数据，比如来自后台服务的数据。
-    Angular自身使用了`Observable`，包括Angular的事件系统和它的http客户端服务。
-
-    To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).
-    Observables are a proposed feature for ES 2016, the next version of JavaScript.
-
-    为了利用`Observable`，Angular使用了名为Reactive Extensions (RxJS)的第三方包。
-    在下个版本的JavaScript - ES 2016中，`Observable`是建议的功能之一。
+    ## Observable
+  
+    ## Observable
+  .l-sub-section
+    :marked
+      We can think of an observable as an array whose items arrive asynchronously over time. 
+      Observables help us manage asynchronous data, such as data coming from a backend service.
+      Observables are used within Angular itself, including Angular's event system and its http client service.
+  
+      一个`Observable`是一个数组，它包含的元素在一段时间内异步到达。`Observable`帮助我们管理异步数据，比如来自后台服务的数据。
+      Angular自身使用了`Observable`，包括Angular的事件系统和它的http客户端服务。
+  
+      To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).
+      Observables are a proposed feature for ES 2016, the next version of JavaScript.
+  
+      为了利用`Observable`，Angular使用了名为Reactive Extensions (RxJS)的第三方包。
+      在下个版本的JavaScript - ES 2016中，`Observable`是建议的功能之一。
 
 :marked
   ## Output
@@ -808,7 +776,7 @@ a#jit
 .l-sub-section
   :marked
     A directive property that can be the ***target*** of an
-    [Event Binding](/docs/ts/latest/guide/template-syntax.html#property-binding).
+    [Event Binding](!{docsLatest}/guide/template-syntax.html#property-binding).
     Events stream *out* of this property to the receiver identified
     in the template expression to the right of the equal sign.
 
@@ -819,14 +787,14 @@ a#jit
 
     参见[模板语法](/docs/ts/latest/guide/template-syntax.html#inputs-outputs)一章。
 
-.l-main-section
-<a id="P"></a>
+.l-main-section#P
+
 :marked
   ## PascalCase
   ## Pascal命名法(PascalCase)
 .l-sub-section
   :marked
-    The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter. 
+    The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
     Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
     
     遵循“每个单词都用大写开头”的规则的书写复合词或短语的命名方法叫做Pascal命名法。类名一般都采用Pascal命名法。比如`Person`和`Customer`
@@ -843,7 +811,7 @@ a#jit
 .l-sub-section
   :marked
     An Angular pipe is a function that transforms input values to output values for
-    display in a [view](#view). We use the `#{atSym}Pipe` !{decorator}
+    display in a [view](#view). We use the `!{_at}Pipe` !{_decoratorLink}
     to associate the pipe function with a name. We can then use that
     name in our HTML to declaratively transform values on screen.
 
@@ -858,69 +826,61 @@ a#jit
   code-example(language="html" escape="html").
     <label>Price: </label>{{product.price | currency}}
   :marked
-    Learn more in the chapter on [pipes](/docs/ts/latest/guide/pipes.html) .
+    Learn more in the chapter on [pipes](!{docsLatest}/guide/pipes.html) .
 
     要了解更多，参见[管道](/docs/ts/latest/guide/pipes.html)一章。
 
+- var _ProviderUrl = docsLatest+'/api/'+(lang == 'dart' ? 'angular2.core' : 'core/index')+'/Provider-class.html'
 :marked
   ## Provider
   ## 提供商(Provider)
 .l-sub-section
   :marked
-    A Provider creates a new instance of a dependency for the Dependency Injection system.
-    It relates a lookup token to code - sometimes called a "recipe" - that can create a dependency value.
+    A [Provider](!{_ProviderUrl}) creates a new instance of a dependency for the
+    [Dependency Injection](#dependency-injection) system.
+    It relates a lookup token to code &mdash; sometimes called a "recipe" &mdash;
+    that can create a dependency value.
 
     依赖注入系统依靠提供商来创建依赖的实例。它把一个供查阅用的令牌和代码(有时也叫“配方”)关联到一起，以便创建依赖值。
 
-    For example, `new Provider(Foo, {useClass: Foo})` creates a `Provider`
-    that relates the `Foo` token to a function that creates a new instance of the `Foo` class.
+a#Q
+.l-main-section#R
 
-    比如，`new Provider(Foo, {useClass: Foo})`创建一个`Provider`，把令牌`Foo`联系到一个函数，该函数会创建一个`Foo`类的实例。
-
-    There are other ways to create tokens and recipes.
-    See [Dependency Injection](#dependency-injection) chapter to learn more.
-
-    还有其它一些方法创建令牌和配方。
-    参见[依赖注入(Dependency Injection)](#dependency-injection)以获取更多信息。
-
-.l-main-section
-<a id="Q"></a>
-<a id="R"></a>
-<a id="reactive-forms"></a>
-:marked
-  ## Reactive Forms
-  ## 动态表格（Reactive Forms）
-.l-sub-section
++ifDocsFor('ts|js')
   :marked
-    A technique for building Angular forms through code in a component.
-    The alternate technique is [Template-Driven Forms](#template-driven-forms).
-
-    通过组件代码来构建Angular表单的方法。
-
-    When building reactive forms:
-
-    构建动态表单是：
-
-    - The "source of truth" is the component. The validation is defined using code in the component.
-
-    - “真理来源”于组件。表单验证在组件代码中定义。
-
-    - Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`.
-
-    - 每个控制器都是在组件类中使用`new FormControl()`或者`FormBuilder`显性的创建的。
-
-    - The template input elements do *not* use `ngModel`.
-
-    - 模板中的`input`元素**不**使用`ngModel`。
-
-    - The associated Angular directives are all prefixed with `Form` such as `FormGroup`, `FormControl`, and `FormControlName`.
-
-    - 相关联的Angular指令全部以`Form`开头，比如`FormGroup`、`FormControl`和`FormControlName`。
-
-    Reactive forms are powerful, flexible, and great for more complex data entry form scenarios, such as dynamic generation
-    of form controls.
-
-    动态表单非常强大、灵活，它在复杂数据输入的场景下尤其好用，比如动态的生成表单控制器。
+    ## Reactive Forms
+    ## 动态表格（Reactive Forms）
+  .l-sub-section
+    :marked
+      A technique for building Angular forms through code in a component.
+      The alternate technique is [Template-Driven Forms](#template-driven-forms).
+  
+      通过组件代码来构建Angular表单的方法。
+  
+      When building reactive forms:
+  
+      构建动态表单是：
+  
+      - The "source of truth" is the component. The validation is defined using code in the component.
+  
+      - “真理来源”于组件。表单验证在组件代码中定义。
+  
+      - Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`.
+  
+      - 每个控制器都是在组件类中使用`new FormControl()`或者`FormBuilder`显性的创建的。
+  
+      - The template input elements do *not* use `ngModel`.
+  
+      - 模板中的`input`元素**不**使用`ngModel`。
+  
+      - The associated Angular directives are all prefixed with `Form` such as `FormGroup`, `FormControl`, and `FormControlName`.
+  
+      - 相关联的Angular指令全部以`Form`开头，比如`FormGroup`、`FormControl`和`FormControlName`。
+  
+      Reactive forms are powerful, flexible, and great for more complex data entry form scenarios, such as dynamic generation
+      of form controls.
+  
+      动态表单非常强大、灵活，它在复杂数据输入的场景下尤其好用，比如动态的生成表单控制器。
 
 :marked
   ## Router
@@ -939,78 +899,94 @@ a#jit
     of views.
 
     Angular的[组件路由器(Component Router)](guide/router.html)是一个特性丰富的机制，它可以配置和管理整个导航过程，包括建立和销毁视图。
-
-
-    In most cases, components becomes attached to a [router](#router) by means
-    of a `RouterConfig` that defines routes to views.
     
-    多数情况下，组件会通过`RouterConfig`中定义的路由到视图的对照表来附加到[路由器](#router)上。
-
-    A [routing component's](#routing-component) template has a `RouterOutlet` element where it can display views produced by the router.
-    
-    [路由组件](#routing-component)的模板中带有一个`RouterOutlet`元素，它用来显示由路由器生成的视图。
-
-    Other views in the application likely have anchor tags or buttons with `RouterLink` directives that users can click to navigate.
-    
-    应用中的其它视图中某些A标签或按钮上带有`RouterLink`指令，用户可以点击它们来导航到这里。
-
-    See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
-    
-    要了解更多，请参见[组件路由器](/docs/ts/latest/guide/router.html)一章。
-    
-:marked
-  ## RouterModule
-.l-sub-section
+  +ifDocsFor('ts|js')
+    :marked
+      In most cases, components becomes attached to a [router](#router) by means
+      of a `RouterConfig` that defines routes to views.
+      
+      多数情况下，组件会通过`RouterConfig`中定义的路由到视图的对照表来附加到[路由器](#router)上。
+  
+      A [routing component's](#routing-component) template has a `RouterOutlet` element where it can display views produced by the router.
+      
+      [路由组件](#routing-component)的模板中带有一个`RouterOutlet`元素，它用来显示由路由器生成的视图。
+  
+      Other views in the application likely have anchor tags or buttons with `RouterLink` directives that users can click to navigate.
+      
+      应用中的其它视图中某些A标签或按钮上带有`RouterLink`指令，用户可以点击它们来导航到这里。
+  
+      See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
+      
+      要了解更多，请参见[组件路由器](/docs/ts/latest/guide/router.html)一章。
+      
++ifDocsFor('ts|js')
   :marked
-    A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
-    
-    一个独立的[Angular模块](#angular-module)是用来提供导航时所需的必备服务提供商和指令的。
+    ## RouterModule
+  .l-sub-section
+    :marked
+      A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
+      
+      一个独立的[Angular模块](#angular-module)是用来提供导航时所需的必备服务提供商和指令的。
+  
+      See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
+      
+      要了解更多，请参见[组件路由器](/docs/ts/latest/guide/router.html)一章。
 
-    See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
-    
-    要了解更多，请参见[组件路由器](/docs/ts/latest/guide/router.html)一章。
-
-<a id="routing-component"></a>
 :marked
   ## Routing Component
   ## 路由组件(Routing Component)
 .l-sub-section
+  block routing-component-defn
+    :marked
+      An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations.
+      
+      带有RouterOutlet的Angular[组件](#component)基于路由器导航来显示视图。
+  
+      See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
+      
+      要了解更多，请参见[组件路由器](/docs/ts/latest/guide/router.html)一章。
+
+.l-main-section#S
+
++ifDocsFor('ts|js')
   :marked
-    An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations.
+    ## Scoped Package
     
-    带有RouterOutlet的Angular[组件](#component)基于路由器导航来显示视图。
+    ## 范围化包（Scoped Package）
 
-    See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
+  .l-sub-section
+      :marked
+        Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
+        `@angular/http`, and `@angular/router`.
+  
+        Angular模块是用一系列*范围化包*的形式发布的，比如`@angular/core`、`@angular/common`、`@angular/platform-browser-dynamic`、
+        `@angular/http`和`@angular/router`。
     
-    要了解更多，请参见[组件路由器](/docs/ts/latest/guide/router.html)一章。
+        A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
+        
+        [*范围化包(Scoped Package)*](https://docs.npmjs.com/misc/scope)是对相关*npm*包进行分组的一种方式。
+    
+        We import a scoped package the same way we'd import a *normal* package.
+        The only difference, from a consumer perspective, 
+        is that the package name begins with the Angular *scope name*, `@angular`.
+    
+        使用和导入*普通*包相同的方式导入范围化包。
+        从消费者的视角看，唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。
+  
+      +makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
 
-<a id="S"></a>
-.l-main-section
-// #enddocregion n-s-1
+a#snake-case
 :marked
-  ## Scoped Package
-  ## 范围化包(Scoped Package)
+  ## snake_case
+  ## 下划线命名法
+
 .l-sub-section
-  :marked
-    Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
-    `@angular/http`, and `@angular/router`.
-
-    Angular模块是用一系列*范围化包*的形式发布的，比如`@angular/core`、`@angular/common`、`@angular/platform-browser-dynamic`、
-    `@angular/http`和`@angular/router`。
-
-    A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
-    
-    [*范围化包(Scoped Package)*](https://docs.npmjs.com/misc/scope)是对相关*npm*包进行分组的一种方式。
-
-    We import a scoped package the same way we'd import a *normal* package.
-    The only difference, from a consumer perspective, 
-    is that the package name begins with the Angular *scope name*, `@angular`.
-
-    使用和导入*普通*包相同的方式导入范围化包。
-    从消费者的视角看，唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。
-
-  +makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
-// #docregion n-s-2
+  block snake-case-defn
+    :marked
+      The practice of writing compound words or phrases such that each word is separated by an
+      underscore (`_`). This form is also known as **underscore case**.
+      
+      用下划线分割单词或词组的命名方法称为**下划线命名法**。
 
 :marked
   ## Service
@@ -1018,7 +994,7 @@ a#jit
   ## 服务
 .l-sub-section
   :marked
-    Components are great and all … but what do we do with data or logic that are not associated 
+    Components are great and all, but what do we do with data or logic that are not associated
     with a specific view or that we want to share across components? We build services!
 
     组件很强大很好...但是，我们该如何处理那些不与任何特定视图相关的数据和逻辑？又如何在组件之间共享这些数据和逻辑？我们创建服务！    
@@ -1030,7 +1006,7 @@ a#jit
 
     A service is a class with a focused purpose.
     We often create a service to implement features that are
-    independent from any specific view, 
+    independent from any specific view,
     provide share data or logic across components, or encapsulate external interactions.
 
     服务是一个具有特定功能的类。我们经常创建服务来实现不依赖任何特定视图的特征、在组件之间提供共享数据或逻辑，或者封装外部互动等。
@@ -1059,9 +1035,7 @@ a#jit
     
 // #enddocregion n-s-2
 
-// #docregion t1
-<a id="T"></a>
-.l-main-section
+.l-main-section#T
 :marked
   ## Template
   ## 模板(Template)
@@ -1077,58 +1051,58 @@ a#jit
 
     使用特殊的[模板语法](/docs/ts/latest/guide/template-syntax.html)来编写模板。
 
-<a id="template-driven-forms"></a>
-:marked
-  ## Template-Driven Forms
-  
-  ## 模板驱动表单
-  
-.l-sub-section
++ifDocsFor('ts|js')
   :marked
-    A technique for building Angular forms using HTML forms and input elements in the view.
-    The alternate technique is [Reactive Forms](#reactive-forms).
+    ## Template-Driven Forms
     
-    这是一项在视图中使用HTML表单和输入类元素构建Angular表单的技术。
-    它的替代方案是[响应式表单](#reactive-forms)。
-
-    When building template-driven forms:
+    ## 模板驱动表单
     
-    当构建模板驱动表单时：
-    
-    - The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
-    
-    - “信任之源”是模板。验证规则是用属性（Attribute）的形式定义在独立输入控件上的。
-    
-    - [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements.
-    
-    - 使用`ngModel`的[双向绑定](#data-binding)负责组件模型和用户输入之间的同步。
-    
-    - Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and
-    two-way binding set up.
-    
-    - 在幕后，Angular为每个带有`name`属性和双向绑定的输入元素创建了一个新的控件。
-    
-    - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
-    
-    - 相关的Angular指令都带有`ng`前缀，比如`ngForm`、`ngModel`和`ngModelGroup`。
-
-    Template-driven forms are convenient, quick, and simple and are a good choice for many basic data entry form scenarios.
-    
-    模板驱动的表单便捷、快速、简单，是很多基础型数据输入表单的最佳选择。
-
-    Learn how to build template-driven forms
-    in the [Forms](/docs/ts/latest/guide/forms.html) chapter.
-    
-    要学习如何构建模板驱动型表单，请参见[表单](/docs/ts/latest/guide/forms.html)一章。
+  .l-sub-section
+    :marked
+      A technique for building Angular forms using HTML forms and input elements in the view.
+      The alternate technique is [Reactive Forms](#reactive-forms).
+      
+      这是一项在视图中使用HTML表单和输入类元素构建Angular表单的技术。
+      它的替代方案是[响应式表单](#reactive-forms)。
+  
+      When building template-driven forms:
+      
+      当构建模板驱动表单时：
+      
+      - The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
+      
+      - “信任之源”是模板。验证规则是用属性（Attribute）的形式定义在独立输入控件上的。
+      
+      - [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements.
+      
+      - 使用`ngModel`的[双向绑定](#data-binding)负责组件模型和用户输入之间的同步。
+      
+      - Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and
+      two-way binding set up.
+      
+      - 在幕后，Angular为每个带有`name`属性和双向绑定的输入元素创建了一个新的控件。
+      
+      - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
+      
+      - 相关的Angular指令都带有`ng`前缀，比如`ngForm`、`ngModel`和`ngModelGroup`。
+  
+      Template-driven forms are convenient, quick, and simple and are a good choice for many basic data entry form scenarios.
+      
+      模板驱动的表单便捷、快速、简单，是很多基础型数据输入表单的最佳选择。
+  
+      Learn how to build template-driven forms
+      in the [Forms](/docs/ts/latest/guide/forms.html) chapter.
+      
+      要学习如何构建模板驱动型表单，请参见[表单](/docs/ts/latest/guide/forms.html)一章。
 
 :marked
   ## Template Expression
   ## 模板表达式(Template Expression)
 .l-sub-section
   :marked
-    An expression is a JavaScript-like syntax that Angular evaluates within
+    An expression is a !{_Lang}-like syntax that Angular evaluates within
     a [data binding](#data-binding).  Learn how to write template expressions
-    in the [Template Syntax](/docs/ts/latest/guide/template-syntax.html#template-expressions) chapter.
+    in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#template-expressions) chapter.
 
     Angular用来在[数据绑定(Data Binding)](#data-binding)内求值的、**类似**JavaScript语法的表达式。到[模板语法](guide/template-syntax.html#template-expressions)一章中了解更多模板表达式的知识。
 // #enddocregion t1
@@ -1174,10 +1148,9 @@ a#jit
 
 // #enddocregion t2
 
-// #docregion u-z
-<a id="U"></a>
-<a id="V"></a>
-.l-main-section
+a#U
+.l-main-section#V
+
 :marked
   ## View
   ## 视图(View)
@@ -1202,43 +1175,43 @@ a#jit
 
     视图一般包含其它视图，在用户在应用程序中导航的时候，任何视图都可能被动态加载或卸载，这一般会在[路由器(Router)](#router)的控制下进行。
 
-.l-main-section
-<a id="W"></a>
-<a id="X"></a>
-<a id="Y"></a>
-<a id="Z"></a>
+a#W
+a#X
+a#Y
+.l-main-section#Z
+  
 :marked
   ## Zones
   ## 区域(Zones)
 .l-sub-section
-  :marked
-    Zones are a mechanism for encapsulating and intercepting
-    a JavaScript application's asynchronous activity.
+  block zone-defn
+    :marked
+      Zones are a mechanism for encapsulating and intercepting
+      a JavaScript application's asynchronous activity.
 
-    区域是一种用来封装和截听JavaScript应用程序异步动作的机制。
-
-    The browser DOM and JavaScript have a limited number
-    of asynchronous activities, activities such as DOM events (e.g., clicks),
-    [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and
-    [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
-    calls to remote servers.
-
-    浏览器中的DOM和JavaScript之间常会有一些数量有限的异步活动，比如DOM事件(如点击)、[承诺(Promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/
-    Promise)、和通过[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)查询远程服务等。
-
-    Zones intercept all of these activities and give a "zone client" the opportunity
-    to take action before and after the async activity completes.
-
-    区域能截听所有这些活动，并让“区域的客户”有机会在异步活动完成之前和之后采取行动。
-
-    Angular runs our application in a zone where it can respond to
-    asynchronous events by checking for data changes and updating
-    the information it displays via [data binding](#data-binding).
-
-    Angular会在一个 Zone 区域中运行应用程序，在这个区域中，它可以对异步事件做出反应，可以通过检查数据变更、利用[数据绑定(Data Binding)](#data-binding)来更新信息显示。
-
-    Learn more about zones in this
-    [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
-
-    到[Brian Ford的视频](https://www.youtube.com/watch?v=3IqtmUscE_U)学习更多关于区域的知识。
-// #enddocregion u-z
+      区域是一种用来封装和截听JavaScript应用程序异步动作的机制。
+  
+      The browser DOM and JavaScript have a limited number
+      of asynchronous activities, activities such as DOM events (e.g., clicks),
+      [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and
+      [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
+      calls to remote servers.
+  
+      浏览器中的DOM和JavaScript之间常会有一些数量有限的异步活动，比如DOM事件(如点击)、[承诺(Promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/
+      Promise)、和通过[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)查询远程服务等。
+  
+      Zones intercept all of these activities and give a "zone client" the opportunity
+      to take action before and after the async activity completes.
+  
+      区域能截听所有这些活动，并让“区域的客户”有机会在异步活动完成之前和之后采取行动。
+  
+      Angular runs our application in a zone where it can respond to
+      asynchronous events by checking for data changes and updating
+      the information it displays via [data bindings](#data-binding).
+  
+      Angular会在一个 Zone 区域中运行应用程序，在这个区域中，它可以对异步事件做出反应，可以通过检查数据变更、利用[数据绑定(Data Bindings)](#data-binding)来更新信息显示。
+  
+      Learn more about zones in this
+      [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
+  
+      到[Brian Ford的视频](https://www.youtube.com/watch?v=3IqtmUscE_U)学习更多关于区域的知识。
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index bc487b88b0..1777177297 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -51,10 +51,12 @@ include ../_util-fns
   - 向用户显示有效性验证的错误提示，以及禁用/启用表单控件
 
   - use [template reference variables](./template-syntax.html#ref-vars) for sharing information among HTML elements
-  
-  - 通过模板引用变量，在控件之间共享信息
 
-  <live-example>在线例子</live-example>
+  - 通过模板引用变量，在控件之间共享信息
+  
+  Run the <live-example></live-example>.
+  
+  运行<live-example>在线例子</live-example>
 
 .l-main-section
 :marked
@@ -213,8 +215,8 @@ include ../_quickstart_repo
   
   我们可以像这样创建一个新英雄：
 code-example(format="").
-  let myHero =  new Hero(42, 'SkyDog', 
-                         'Fetch any object at any distance', 
+  let myHero =  new Hero(42, 'SkyDog',
+                         'Fetch any object at any distance',
                          'Leslie Rollover');
   console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
 :marked
@@ -295,7 +297,7 @@ code-example(format="").
   而且没有几个编辑器能对混写的HTML和代码提供足够的帮助。
   我们还是喜欢写成像这个一样清晰明确的短文件。
 
-  We made a good choice to put the HTML template elsewhere. 
+  We made a good choice to put the HTML template elsewhere.
   We'll write that template in a moment. Before we do, we'll take a step back
   and revise the `app.module.ts` and `app.component.ts` to make use of our new `HeroFormComponent`.
   
@@ -347,7 +349,7 @@ code-example(format="").
 
 .alert.is-important
   :marked
-    If a component, directive, or pipe belongs to a module in the `imports` array, ​_DON'T_​ declare it in the `declarations` array. 
+    If a component, directive, or pipe belongs to a module in the `imports` array, ​_DON'T_​ declare it in the `declarations` array.
     If you wrote it and it should belong to this module, ​_DO_​ declare it in the `declarations` array.
     
     如果一个组件、指令或管道出现在模块的`imports`数组中，就说明它是外来模块，_不要_再到`declarations`数组中声明它们。
@@ -412,7 +414,7 @@ code-example(format="").
   
   **我们还没有用到Angular**。没有绑定。没有额外的指令。只做了个布局。
 
-  The `container`, `form-group`, `form-control`, and `btn` classes 
+  The `container`, `form-group`, `form-control`, and `btn` classes
   come from [Twitter Bootstrap](http://getbootstrap.com/css/). Purely cosmetic.
   We're using Bootstrap to gussy up our form.
   Hey, what's a form without a little style!
@@ -556,7 +558,7 @@ figure.image-display
   
   诊断信息是一个证据，用来表明数据从输入框流动到模型，再反向流动回来的过程。**这就是双向数据绑定！** 
 
-  Notice that we also added a `name` attribute to our `<input>` tag and set it to "name" 
+  Notice that we also added a `name` attribute to our `<input>` tag and set it to "name"
   which makes sense for the hero's name. Any unique value will do, but using a descriptive name is helpful.
   Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form.
   
@@ -565,7 +567,7 @@ figure.image-display
 
 .l-sub-section
   :marked
-    Internally Angular creates `FormControls` and registers them with an `NgForm` directive that Angular 
+    Internally Angular creates `FormControls` and registers them with an `NgForm` directive that Angular
     attached to the `<form>` tag. Each `FormControl` is registered under the name we assigned to the `name` attribute.
     We'll talk about `NgForm` [later in this chapter](#ngForm).
 
@@ -895,7 +897,7 @@ figure.image-display
   
 .l-sub-section
   :marked
-    Why "ngModel"? 
+    Why "ngModel"?
     A directive's [exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs-anchor) property
     tells Angular how to link the reference variable to the directive.
     We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
@@ -919,7 +921,7 @@ figure.image-display
   
   This user experience is the developer's choice. Some folks want to see the message at all times.
   If we ignore the `pristine` state, we would hide the message only when the value is valid.
-  If we arrive in this component with a new (blank) hero or an invalid hero, 
+  If we arrive in this component with a new (blank) hero or an invalid hero,
   we'll see the error message immediately, before we've done anything.
   
   这种用户体验取决于开发人员的选择。有些人会希望任何时候都显示这条消息。
@@ -947,7 +949,7 @@ figure.image-display
   但是这没有那么迫切，因为这个选择框已经足够把“超能力”约束成有效值了。
   
 <a id="new-hero"></a>
-<a id="reset"></a>  
+<a id="reset"></a>
 .l-main-section
 :marked
   ## Add a hero and reset the form
@@ -970,7 +972,7 @@ figure.image-display
 :marked
   Run the application again, click the *New Hero* button, and the form clears.
   The *required* bars to the left of the input box are red, indicating invalid `name` and `power` properties.
-  That's understandable as these are required fields. 
+  That's understandable as these are required fields.
   The error messages are hidden because the form is pristine; we haven't changed anything yet.
   
   再次运行应用，点击*新增英雄*按钮，表单被清空了。
@@ -1000,7 +1002,7 @@ figure.image-display
     Angular不能作出假设，因此只好让控件保留当前状态 —— 脏状态。
     
 :marked
-  We'll have to reset the form controls manually with a small trick. 
+  We'll have to reset the form controls manually with a small trick.
   We add an `active` flag to the component, initialized to `true`. When we add a new hero,
   we toggle `active` false and then immediately back to true with a quick `setTimeout`.
   
@@ -1020,7 +1022,7 @@ figure.image-display
   'form-active', 
   'app/hero-form.component.html (Form标签)')
 :marked
-  With `NgIf` bound to the `active` flag, 
+  With `NgIf` bound to the `active` flag,
   clicking "New Hero" removes the form from the DOM and recreates it in a blink of an eye.
   The re-created form is in a pristine state. The error message is hidden.
   
@@ -1033,7 +1035,7 @@ figure.image-display
     
     这只是一个临时的变通方案，将来我们还会有一个更合适的方案来重置表单。
 :marked
-  
+
 .l-main-section
 :marked
   ## Submit the form with **ngSubmit**
@@ -1267,7 +1269,7 @@ figure.image-display
       .file hero-form.component.ts
       .file main.ts
     .file node_modules ...
-    .file typings ...      
+    .file typings ...
     .file index.html
     .file package.json
     .file tsconfig.json
@@ -1283,12 +1285,12 @@ figure.image-display
    forms/ts/app/hero.ts,
    forms/ts/app/app.module.ts,
    forms/ts/app/app.component.ts,
-   forms/ts/app/main.ts,   
+   forms/ts/app/main.ts,
    forms/ts/index.html,
    forms/ts/forms.css`,
   'final, final,,,,,',
   `hero-form.component.ts,
-   hero-form.component.html,   
+   hero-form.component.html,
    hero.ts,
    app.module.ts,
    app.component.ts,
diff --git a/public/docs/ts/latest/guide/glossary.jade b/public/docs/ts/latest/guide/glossary.jade
index ca1429104e..76fb55a9ed 100644
--- a/public/docs/ts/latest/guide/glossary.jade
+++ b/public/docs/ts/latest/guide/glossary.jade
@@ -1 +1,5 @@
-include ../glossary
+extends ../glossary
+
+block includes
+  include ../_util-fns
+
diff --git a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
index a3e382d208..26a16a4e27 100644
--- a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
+++ b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
@@ -10,7 +10,7 @@ block includes
   Angular has a Hierarchical Dependency Injection system.
   There is actually a tree of injectors
   that parallel an application's component tree.
-  We can re-configure the injectors at any level of that component tree with
+  We can reconfigure the injectors at any level of that component tree with
   interesting and useful results.
   
   Angular有一个多级依赖注入系统。
@@ -110,16 +110,16 @@ figure.image-display
     我们先保留这个问题，等改天再讨论这个选项。
 :marked
   Such a proliferation of injectors makes little sense until we consider the possibility that injectors at different levels can be
-  configured with different providers. We don't *have* to re-configure providers at every level. But we *can*.
+  configured with different providers. We don't *have* to reconfigure providers at every level. But we *can*.
   
   除非注入器能在各个不同层次上使用不同的提供商进行配置，否则没必要让注入器分裂成这么多。
   虽然我们并不是*必须*在每一层都重新配置提供商，但我们*可以*这样做。
 
-  If we don't re-configure, the tree of injectors appears to be flat. All requests bubble up to the root NgModule injector that we
-  configured with the `bootstrapModule` method.
+  If we don't reconfigure, the tree of injectors appears to be flat. All requests bubble up to the root 
+  <span if-docs="ts">NgModule</span> injector that we configured with the `!{_bootstrapModule}` method.
+  
+  如果我们完全没有进行过重新配置，注入器的树看起来将是“平面”的。所有的申请都会被冒泡到根<span if-docs="ts">NgModule</span>注入器进行处理，也就是我们在`!{_bootstrapModule}`方法中配置的那个。
   
-  如果我们完全没有进行过重新配置，注入器的树看起来将是“平面”的。所有的申请都会被冒泡到“根NgModule注入器”进行处理，也就是我们在`bootstrapModule`方法中配置的那个。
-
   The ability to configure one or more providers at different levels opens up interesting and useful possibilities.
   
   在不同层次上重新配置一个或多个提供商的能力，开启了一些既有趣又有用的可能性。
@@ -238,14 +238,17 @@ figure.image-display
   凑近我们的`HeroEditComponent`的元数据看看。注意看它的`providers`属性。
 
 +makeExample('hierarchical-dependency-injection/ts/app/hero-editor.component.ts', 'providers')
+
+- var _root_NgModule = _docsFor == 'dart' ? '<code>bootstrap</code> arguments' : 'root <code>NgModule</code>'
 :marked
   This adds a `RestoreService` provider to the injector of the `HeroEditComponent`.
-  Couldn’t we simply alter our root NgModule to include this provider?
+  Couldn’t we simply alter our !{_root_NgModule} to include this provider?
   
   它往`HeroEditComponent`的注入器中添加了一个`RestoreService`提供商。
-  不能简化点儿，直接在我们的根NgModule后面包含这个提供商吗？
+  不能简化点儿，直接在我们的!{_root_NgModule}后面包含这个提供商吗？
+
++makeExcerpt(_appModuleTsVsMainTs, 'bad-alternative')
 
-+makeExample('hierarchical-dependency-injection/ts/app/app.module.ts', 'bad-alternative')
 :marked
   Technically we could, but our component wouldn’t quite behave the way it is supposed to. Remember that each injector treats the services that it provides as singletons. However, in order to be able to have multiple instances of `HeroEditComponent` edit multiple heroes at the same time we need to have multiple instances of the `RestoreService`. More specifically, each instance of `HeroEditComponent` needs to be bound to its own instance of the `RestoreService`.
   
@@ -273,7 +276,7 @@ figure.image-display
   如果我们只在根组件上定义了一个`RestoreService`提供商，我们就确实只有该服务的一个实例了，它会在整个应用程序中被共享。
 
   That’s clearly not what we want in this scenario. We want each component to have its own instance of the `RestoreService`.
-  Defining (or re-defining) a provider at the component level creates a new instance of the service for each new instance
+  Defining (or redefining) a provider at the component level creates a new instance of the service for each new instance
   of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`,
   scoped to that component instance and its child components.
   
@@ -281,16 +284,10 @@ figure.image-display
   在组件级别上定义(或重定义)一个提供商，将会为该组件创建一个新的服务实例。
   我们已经为`HeroEditComponent`制造了一种“私有”`RestoreService`单例，它的作用域被局限在了该组件的实例及其子组件中。
 
-  <!--
-    ## Advanced Dependency Injection in Angular 2
-
-    Restrict Dependency Lookups
-    [TODO] (@Host) This has been postponed for now until we come up with a decent use case
-
-
-    .l-main-section
-    :marked
-      ## Dependency Visibility
-
-    [TODO] (providers vs viewProviders) This has been postponed for now until come up with a decent use case
-    -->
+//- ## Advanced Dependency Injection in Angular 2
+//- Restrict Dependency Lookups
+//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
+//- .l-main-section
+//-   :marked
+//-     ## Dependency Visibility
+//- [TODO] (providers vs viewProviders) This has been postponed for now until come up with a decent use case
diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade
index 79a7f456da..0f40d35576 100644
--- a/public/docs/ts/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade
@@ -95,7 +95,8 @@ a#hooks-overview
   Angular only calls a directive/component hook method *if it is defined*.
   
   没有指令或者组件会实现所有这些接口，并且有些钩子只对组件有意义。只有在指令/组件中*定义过的*那些钩子方法才会被Angular调用。
-block optional-interfaces
+
++ifDocsFor('ts|js')
   .l-sub-section
     :marked
       ### Interface optional?
@@ -103,7 +104,7 @@ block optional-interfaces
       ### 接口是可选的？
       
       The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
-      The JavaScript language doesn't have interfaces. 
+      The JavaScript language doesn't have interfaces.
       Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
       
       从纯技术的角度讲，接口对JavaScript和TypeScript的开发者都是可选的。JavaScript语言本身没有接口。
@@ -136,7 +137,7 @@ block optional-interfaces
 
 table(width="100%")
   col(width="20%")
-  col(width="80%") 
+  col(width="80%")
   tr
     th 
       p Hook
@@ -155,7 +156,7 @@ table(width="100%")
     td ngOnChanges
     td
       :marked
-        Respond after Angular sets a data-bound input property. 
+        Respond after Angular sets a data-bound input property.
         The method receives a `changes` object of current and previous values.
         
         当Angular设置了一个被绑定的输入属性后触发。该回调方法会收到一个包含当前值和原值的`changes`对象。
@@ -163,7 +164,7 @@ table(width="100%")
     td ngDoCheck
     td
       :marked
-        Detect and act upon changes that Angular can or won't
+        Detect and act upon changes that Angular can't or won't
         detect on its own. Called every change detection run.
         
         用来监测所有变化(无论是Angular本身能检测的还是无法检测的)，并作出相应行动。在每次执行“变更检测”时被调用。
@@ -171,7 +172,7 @@ table(width="100%")
     td ngOnDestroy
     td
       :marked
-        Cleanup just before Angular destroys the directive/component. 
+        Cleanup just before Angular destroys the directive/component.
         Unsubscribe observables and detach event handlers to avoid memory leaks.
         
         在Angular销毁指令或组件之前做一些清理工作，比如退订可观察对象和移除事件处理器，以免导致内存泄露。
@@ -183,7 +184,7 @@ table(width="100%")
 
 table(width="100%")
   col(width="20%")
-  col(width="80%") 
+  col(width="80%")
   tr
     th 
       p Hook
@@ -237,7 +238,7 @@ a(id="hook-sequence")
   当Angular使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：  
 table(width="100%")
   col(width="20%")
-  col(width="80%") 
+  col(width="80%")
   tr
     th 
       p Hook
@@ -311,17 +312,13 @@ a(id="other-lifecycles")
   ## 其他生命周期钩子
   
   Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed. 
-  The router, for instance, also has it's own [router lifecycle hooks](router.html#router-lifecycle-hooks)
-  that allow us to tap into specific moments in route navigation.
-  
-  Angular的其它子系统除了有我们已经列出来的这些组件钩子外，还可能有它们自己的生命周期钩子。比如路由器，它就有自己的[路由器生命周期钩子](router.html#router-lifecycle-hooks)，
-  为我们提供了在路由导航中的特定时机进行介入的能力。
-  
-  A parallel can be drawn between `ngOnInit` and `routerOnActivate`. 
-  Both are prefixed so as to avoid collision, and both run right when a component is 'booting' up.
-  
-  `ngOnInit`和`routerOnActivate`是并行执行的。它们都用前缀来防止冲突，而且都是在一个组件刚刚“启动”时被调用的。
+    
+  Angular的其它子系统除了有我们已经列出来的这些组件钩子外，还可能有它们自己的生命周期钩子。
   
+block other-angular-subsystems
+    //- N/A for TS.
+      
+:marked
   3rd party libraries might implement their hooks as well in order to give us, the developers, more
   control over how these libraries are used.
   
@@ -340,7 +337,7 @@ a(id="other-lifecycles")
   <live-example></live-example>通过在受控于根组件`AppComponent`的一些组件上进行的一系列练习，演示了生命周期钩子的运作方式。
   
 
-  They follow a common pattern:  a *parent* component serves as a test rig for 
+  They follow a common pattern:  a *parent* component serves as a test rig for
   a *child* component that illustrates one or more of the lifecycle hook methods.
   
   它们遵循了一个常用的模式：用*子组件*演示一个或多个生命周期钩子方法，而*父组件*被当作该*子组件*的测试台。
@@ -351,7 +348,7 @@ a(id="other-lifecycles")
 
 table(width="100%")
   col(width="20%")
-  col(width="80%") 
+  col(width="80%")
   tr
     th 
       p Component 
@@ -372,7 +369,7 @@ table(width="100%")
     td
       :marked
         Directives have lifecycle hooks too.
-        We create a `SpyDirective` that logs when the element it spies upon is 
+        We create a `SpyDirective` that logs when the element it spies upon is
         created or destroyed using the `ngOnInit` and `ngOnDestroy` hooks.
         
         指令也同样有生命周期钩子。我们新建了一个`SpyDirective`，利用`ngOnInit`和`ngOnDestroy`钩子，在它所监视的每个元素被创建或销毁时输出日志。
@@ -392,7 +389,7 @@ table(width="100%")
         这里将会看到：每当组件的输入属性发生变化时，Angular会如何以`changes`对象作为参数去调用`ngOnChanges`钩子。
         展示了该如何理解和使用`changes`对象。
   tr(style=top)
-    td <a href="#docheck">DoCheck</a> 
+    td <a href="#docheck">DoCheck</a>
     td
       :marked
         Implements an `ngDoCheck` method with custom change detection.
@@ -425,7 +422,7 @@ table(width="100%")
       p 计数器
     td
       :marked
-        Demonstrates a combination of a component and a directive 
+        Demonstrates a combination of a component and a directive
         each with its own hooks.
         
         演示了组件和指令的组合，它们各自有自己的钩子。
@@ -464,8 +461,8 @@ a(id="peek-a-boo")
 figure.image-display
   img(src="/resources/images/devguide/lifecycle-hooks/peek-a-boo.png" alt="Peek-a-boo")
 :marked
-  The sequence of log messages follows the prescribed hook calling order: 
-  `OnChanges`, `OnInit`, `DoCheck`&nbsp;(3x), `AfterContentInit`, `AfterContentChecked`&nbsp;(3x), 
+  The sequence of log messages follows the prescribed hook calling order:
+  `OnChanges`, `OnInit`, `DoCheck`&nbsp;(3x), `AfterContentInit`, `AfterContentChecked`&nbsp;(3x),
   `AfterViewInit`, `AfterViewChecked`&nbsp;(3x), and `OnDestroy`.
   
   日志信息的日志和所规定的钩子调用顺序是一致的：
@@ -479,9 +476,9 @@ figure.image-display
     构造函数本质上不应该算作Angular的钩子。
     我们把它记录在这里只是为了确认在创建期间那些输入属性(这里是`name`属性)没有被赋值。
 :marked
-  Had we clicked the *Update Hero* button, we'd have seen another `OnChanges` and two more triplets of 
+  Had we clicked the *Update Hero* button, we'd have seen another `OnChanges` and two more triplets of
   `DoCheck`, `AfterContentChecked` and `AfterViewChecked`.
-  Clearly these three hooks fire a *lot* and we must keep the logic we put in these hooks 
+  Clearly these three hooks fire a *lot* and we must keep the logic we put in these hooks
   as lean as possible!
   
   如果我们点击*Update Hero*按钮，就会看到另一个`OnChanges`和至少两组`DoCheck`、`AfterContentChecked`和`AfterViewChecked`钩子。
@@ -518,7 +515,7 @@ figure.image-display
     1. 就像对组件一样，Angular也会对*指令*调用这些钩子方法。
     
     2. A spy directive can gives us insight into a DOM object that we cannot change directly.
-    Obviously we can't change the implementation of a native `div`. 
+    Obviously we can't change the implementation of a native `div`.
     We can't modify a third party component either.
     But we can watch both with a directive.
     
@@ -528,7 +525,7 @@ figure.image-display
     但我们用一个指令就能监视它们了。
   
 :marked
-  Our sneaky spy directive is simple,  consisting almost entirely of `ngOnInit` and `ngOnDestroy` hooks 
+  Our sneaky spy directive is simple,  consisting almost entirely of `ngOnInit` and `ngOnDestroy` hooks
   that log messages to the parent via an injected `LoggerService`.
   
   我们这个鬼鬼祟祟的侦探指令很简单，几乎完全由`ngOnInit`和`ngOnDestroy`钩子组成，它通过一个注入进来的`LoggerService`来把消息记录到父组件中去。
@@ -537,7 +534,7 @@ figure.image-display
 
 :marked
   We can apply the spy to any native or component element and it'll be initialized and destroyed
-  at the same time as that element. 
+  at the same time as that element.
   Here we attach it to the repeated hero `<div>`
   
   我们可以把这个侦探指令写到任何原生元素或组件元素上，它将与所在的组件同时初始化和销毁。
@@ -545,7 +542,7 @@ figure.image-display
 +makeExample('lifecycle-hooks/ts/app/spy.component.html', 'template')(format=".")
 
 :marked
-  Each spy's birth and death marks the birth and death of the attached hero `<div>` 
+  Each spy's birth and death marks the birth and death of the attached hero `<div>`
   with an entry in the *Hook Log* as we see here:
   
   每个“侦探”的出生和死亡也同时标记出了存放英雄的那个`<div>`的出生和死亡。*钩子记录*中的结构看起来是这样的：
@@ -575,7 +572,7 @@ figure.image-display
   来看看我们为什么需要它们。
     
   ### OnInit
-  
+
   We turn to `ngOnInit` for two main reasons:
   
   我们会因为两个主要理由而求助于`ngOnInit`：
@@ -590,7 +587,7 @@ figure.image-display
   `ngOnInit`通常用来为组件获取数据，就像在[教程](../tutorial/toh-pt4.html#oninit)和[HTTP](server-communication.html#oninit)中所展示的那样。
   
   We don't fetch data in a component constructor. Why?
-  Because experienced developers agree that components should be cheap and safe to construct. 
+  Because experienced developers agree that components should be cheap and safe to construct.
   We shouldn't worry that a new component will try to contact a remote server when
   created under test or before we decide to display it.
   Constructors should do no more than set the initial local variables to simple values.
@@ -624,7 +621,7 @@ figure.image-display
     但是在那之后，Angular还会调用`ngOnChanges`很多次。而`ngOnInit`只会被调用一次。
 :marked
   ### OnDestroy
-  
+
   Put cleanup logic in `ngOnDestroy`, the logic that *must* run before Angular destroys the directive.
   
   一些清理逻辑*必须*在Angular销毁指令之前运行，把它们放在`ngOnDestroy`中。
@@ -645,8 +642,8 @@ figure.image-display
 .l-main-section
 :marked
   ## OnChanges
-  
-  We monitor the `OnChanges` hook in this example. 
+
+  We monitor the `OnChanges` hook in this example.
   Angular calls its `ngOnChanges` method whenever it detects changes to ***input properties*** of the component (or directive).
   
   在这个例子中，我们监听了`OnChanges`钩子。
@@ -657,7 +654,7 @@ figure.image-display
   这里是我们对此钩子的实现。
 +makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'ng-on-changes', 'OnChangesComponent (ngOnChanges)')(format=".")
 :marked
-  The `ngOnChanges` method takes an object that maps each changed property name to a 
+  The `ngOnChanges` method takes an object that maps each changed property name to a
   [SimpleChange](../api/core/index/SimpleChange-class.html) object with the current and previous property values.
   We iterate over the changed properties and log them.
   
@@ -681,7 +678,7 @@ figure.image-display
 
 figure.image-display
   img(src='/resources/images/devguide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges")
-  
+
 :marked
   We see log entries as the string value of the *power* property changes. But the `ngOnChanges` did not catch changes to `hero.name`
   That's surprising at first. 
@@ -691,7 +688,7 @@ figure.image-display
   
   Angular only calls the hook when the value of the input property changes. 
   The value of the `hero` property is the *reference to the hero object*.
-  Angular doesn't care that the hero's own `name` property changed. 
+  Angular doesn't care that the hero's own `name` property changed.
   The hero object *reference* didn't change so, from Angular's perspective, there is no change to report!
   
   Angular只会在输入属性的值变化时调用这个钩子。
@@ -707,7 +704,7 @@ figure.image-display
   我们可以使用`DoCheck`钩子来检测那些Angular自身无法捕获的变更并采取行动。
 .l-sub-section
   :marked
-    With this method we can detect a change that Angular overlooked. 
+    With this method we can detect a change that Angular overlooked.
     What we do with that information to refresh the display is a separate matter.
     
     用这个方法我们可以检测到那些被Angular忽略的更改。
@@ -719,7 +716,7 @@ figure.image-display
 +makeExample('lifecycle-hooks/ts/app/do-check.component.ts', 'ng-do-check', 'DoCheckComponent (ngDoCheck)')(format=".")
 :marked
   We manually check everything that we care about, capturing and comparing against previous values.
-  We write a special message to the log when there are no substantive changes 
+  We write a special message to the log when there are no substantive changes
   to the hero or the power so we can keep an eye on the method's performance characteristics.
   
   我们手动检测了自己关心的一切，捕获当前值并与以前的值进行比较。
@@ -754,7 +751,7 @@ figure.image-display
 
 .l-sub-section
   :marked
-    We also see that the `ngOnChanges` method is called in contradiction of the 
+    We also see that the `ngOnChanges` method is called in contradiction of the
     [incorrect API documentation](../api/core/index/DoCheck-class.html).
 
     我们还看到，`ngOnChanges`方法的调用方式与[API文档](../api/core/index/DoCheck-interface.html)中是不一样的，这是因为API文档过时了。
@@ -777,8 +774,8 @@ figure.image-display
   `AfterViewComponent`把这个子视图显示*在它的模板中*：
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'template', 'AfterViewComponent (template)')(format=".")
 :marked
-  The following hooks take action based on changing values *within the child view* 
-  which we can only reach by querying for the child view via the property decorated with 
+  The following hooks take action based on changing values *within the child view*
+  which we can only reach by querying for the child view via the property decorated with
   [@ViewChild](../api/core/index/ViewChild-var.html).
   
   下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](../api/core/index/ViewChild-var.html)装饰器的属性来访问子视图。
@@ -849,7 +846,7 @@ figure.image-display
     Angular 1的开发者大概知道一项叫做*transclusion*的技术，对，这就是它的马甲。
   
 :marked
-  We'll illustrate with a variation on the [previous](#afterview) example 
+  We'll illustrate with a variation on the [previous](#afterview) example
   whose behavior and output is almost the same.
   
   在[前一个](#afterview)例子中，我们解说过此功能的一个变体，它的行为和输出与这个例子完全相同。
@@ -872,7 +869,7 @@ figure.image-display
   现在来看下`<after-content>`组件的模板：
 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'template', 'AfterContentComponent (template)')(format=".")
 :marked
-  The `<ng-content>` tag is a *placeholder* for the external content. 
+  The `<ng-content>` tag is a *placeholder* for the external content.
   They tell Angular where to insert that content.
   In this case, the projected content is the `<my-child>` from the parent.
   
@@ -907,7 +904,7 @@ figure.image-display
   * *AfterContent*钩子所关心的是`ContentChildren`，这些子组件被Angular投影进该组件中。
   
   The following *AfterContent* hooks take action based on changing values in a  *content child*
-  which we can only reach by querying for it via the property decorated with 
+  which we can only reach by querying for it via the property decorated with
   [@ContentChild](../api/core/index/ContentChild-var.html).
   
   下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](../api/core/index/ContentChild-var.html)装饰器的属性来查询到“子级内容”。
diff --git a/public/docs/ts/latest/guide/ngmodule.jade b/public/docs/ts/latest/guide/ngmodule.jade
index bf5bff7af0..64e414c72d 100644
--- a/public/docs/ts/latest/guide/ngmodule.jade
+++ b/public/docs/ts/latest/guide/ngmodule.jade
@@ -137,7 +137,7 @@ a#root_module
 +makeExample('ngmodule/ts/app/app.module.0.ts', '', 'app/app.module.ts (minimal)')(format=".")
 
 :marked
-  The `@NgModel` decorator defines the metadata for the module. 
+  The `@NgModule` decorator defines the metadata for the module. 
   We'll take an intuitive approach to understanding the metadata and fill in details as we go.
   
   `@NgModel`装饰器用来为模块定义元数据。
@@ -713,7 +713,7 @@ a#feature-modules
     The `ContactModule` must import `FormsModule` explicitly so that
     `ContactComponent` can data bind with `ngModel`.
 :marked
-  We also swapped `CommonModule` for `BrowserModule` for reasons we explain [soon](#root-vs-feature-module).
+  We also replaced `BrowserModule` by `CommonModule` for reasons we explain [soon](#root-vs-feature-module).
 
   We _declare_ the contact component, directive, and pipe in the module `declarations`.
 
@@ -927,7 +927,7 @@ a#hero-module
 +makeExample('ngmodule/ts/app/hero/hero.module.3.ts', 'class', 'app/hero/hero.module.ts (class)')(format='.')
 :marked
   It imports the `FormsModule` because the `HeroDetailComponent` template binds with `[(ngModel)]`. 
-  It imports a `routing` object from `hero.routing.ts` just as `ContractModule` and `CrisisModule` do.
+  It imports a `routing` object from `hero.routing.ts` just as `ContactModule` and `CrisisModule` do.
 
   The `CrisisModule` is much the same. There's nothing more to say that's new. 
 
@@ -950,7 +950,7 @@ a#shared-module
   * move the `UserService` and `TitleComponent` from `app/` to `app/shared`
   * delete the `HighlightDirective` classes from `app/` and `app/hero`
   * create a `SharedModule` class to own the shared material
-  * updata all other modules to  import `SharedModule`
+  * update all other modules to  import `SharedModule`
 
   Most of this is familiar blocking and tackling. 
 .l-sub-section
@@ -1557,7 +1557,7 @@ a#q-root-component-or-module
   ### Should I add providers to the root _AppModule_ or the root _AppComponent_?
 
   Most apps launch with an initial set of service providers. 
-  Should we register those providers on the root `AppModule` (`@NgModel.providers`) or
+  Should we register those providers on the root `AppModule` (`@NgModule.providers`) or
   the root `AppComponent` (`@Component.providers`)?
 
   **_List such providers in the root_ `AppModule` _unless you have a compelling reason to do otherwise_**.
@@ -1655,7 +1655,7 @@ a#q-entry-component-defined
   We must tell it about them ... by adding them to the `entryComponents` list.
   
   Angular automatically adds two kinds of components to the module's `entryComponents`:
-  1. the component in the `@NgModel.bootstrap` list
+  1. the component in the `@NgModule.bootstrap` list
   1. components referenced in router configuration
 
   We don't have to mention these components explicitly although it does not harm to do so.
@@ -1669,9 +1669,9 @@ a#q-bootstrap_vs_entry_component
 
   A bootstrapped component _is_ an [entry component](#entry-component-defined).
   It's an entry component that Angular loads into the DOM during the bootstrap (application launch) process.
-  Other entry components are loaded by dynamically by other means such as with the router.
+  Other entry components are loaded dynamically by other means such as with the router.
 
-  The `@NgModule.bootstrap` property tells the compiler _both_ that this is an entry_component _and_
+  The `@NgModule.bootstrap` property tells the compiler _both_ that this is an entry component _and_
   that it should generate code to bootstrap the application with this component.
 
   There is no need to list a component in both the `bootstrap` and `entryComponent` lists 
@@ -1684,7 +1684,7 @@ a#q-when-entry-components
 :marked
   ### When do I add components to _entryComponents_?
   
-  Most application developers won't need to add components to the `_entryComponents_`.
+  Most application developers won't need to add components to the `entryComponents`.
 
   Angular adds certain components to _entry components_ automatically.
   Components listed in `@NgModule.bootstrap` are added automatically.
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 080bebef33..b5b4568b56 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -1170,23 +1170,36 @@ a#in-mem-web-api
   确保`HeroService`的端点指向了这个Web API：
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'endpoint')(format=".")
 :marked
-  Finally, we need to redirect client HTTP requests to the in-memory web API.
+  Finally, redirect client HTTP requests to the in-memory web API.
   
-  最后，我们需要把来自HTTP客户端的请求重定向到这个内存Web API。
+  最后，把来自HTTP客户端的请求重定向到这个内存Web API。
 block redirect-to-web-api
   :marked
-    This redirection is easy to configure because Angular's `http` service delegates the client/server communication tasks
+    This redirection is easy to configure with the in-memory web API service module.
+    by adding the `InMemoryWebApiModule` to the `AppModule.imports` list.
+    At the same time, we calling its `forRoot` configuration method with the `HeroData` class.
+  +makeExample('server-communication/ts/app/app.module.ts', 'in-mem-web-api')(format=".")
+  :marked
+    ### How it works
+
+    Angular's `http` service delegates the client/server communication tasks
     to a helper service called the `XHRBackend`. 
     
     这次重定向非常容易配置，这是因为Angular的`http`服务把客户端/服务器通讯的工作委托给了一个叫做`XHRBackend`的辅助服务。
-
-    To enable our server simulation, we replace the default `XHRBackend` service with 
-    the in-memory web API service using standard Angular provider registration techniques. 
-    We initialize the in-memory web API with *seed data* from the mock hero dataset at the same time.
-    
-    要想启用我们的服务模拟器，我们通过Angular标准的“提供商注册”技术，把默认的`XHRBackend`服务替换为了这个内存Web API服务。
-    同时，我们使用来自模拟的英雄数据集的*种子数据*初始化了这个内存Web API。
+  
+    Using standard Angular provider registration techniques, the `InMemoryWebApiModule` 
+    replaces the default `XHRBackend` service with its own in-memory alternative. 
+    The `forRoot` method initialize the in-memory web API with *seed data* from the mock hero dataset at the same time.
     
+    使用标准Angular提供商注册方法，`InMemoryWebApiModule`替代默认的`XHRBackend`服务并使用它自己的内存存储服务。
+    `forRoot`方法来自模拟的英雄数据集的*种子数据*初始化了这个内存Web API
+  .l-sub-section
+    :marked
+      The `forRoot` method name is a strong reminder that you should only call the `InMemoryWebApiModule` _once_
+      while setting the metadata for the root `AppModule`. Don't call it again!.
+      
+      `forRoot`方法的名字告诉我们，应该只在设置根模块`AppModule`时调用`InMemoryWebApiModule`*一次*。不要再次调用它。
+      
 :marked
   Here is the revised (and final) version of <span ngio-ex>app/app.module.ts></span> demonstrating these steps.
   
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index d51f832350..80689df140 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -1439,33 +1439,29 @@ block style-property-name-dart-diff
     要记住“方括号中的圆括号”这种语法，就把它想象成 *盒子里的香蕉* 吧，是不是很形象？
     (译注：中国读者记起来更简单，方括号又叫中括号，圆括号又叫小括号，显然应该中的在外，小的在内)
 
-.callout.is-important
-  header FormsModule is Required to use ngModel
-  :marked
-    Before we can use `ngModel` two-way data binding, we need to import the `FormsModule`
-    package in our Angular module. We add it to the `NgModule` decorator's `imports` array. This array contains the list
-    of external modules used by our application.
-    <br>Learn more about the `FormsModule` and `ngModel` in the
-    [Forms](../guide/forms.html#ngModel) chapter.
-    
-    要使用`ngModel`做双向数据绑定，得先把`FormsModule`导入我们的模块。只要把它加入`NgModule`装饰器的`imports`数组就可以了。
-    该数组是本应用中用到的外部模块列表。
-    要学习关于`FormsModule`和`ngModel`的更多知识，参见[表单](../guide/forms.html#ngModel)一章。
++ifDocsFor('ts|js')
+  .callout.is-important
+    header FormsModule is Required to use ngModel
+    :marked
+      Before we can use the `ngModel` directive in a two-way data binding,
+      we must import the `FormsModule` and add it to the Angular module's `imports` list.
+      Learn more about the `FormsModule` and `ngModel` in the
+      [Forms](../guide/forms.html#ngModel) chapter.
+      
+      要使用`ngModel`做双向数据绑定，得先把`FormsModule`导入我们的模块并把它加入`NgModule`装饰器的`imports`数组。      
+      要学习关于`FormsModule`和`ngModel`的更多知识，参见[表单](../guide/forms.html#ngModel)一章。
 
-+makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
+  +makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
 
-:marked
-  Alternatively to using `[(ngModel)]`, we can use the canonical prefix form:
-
-  除了用`[(ngModel)]`，我们也可以使用规范前缀形式：
-+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-2')(format=".")
 :marked
   There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
 
   在这个结构背后还有一个故事，一个关于如何构建我们以前学过的属性绑定和事件绑定技术的故事。
 
-  ### Inside [(ngModel)]
-  ### [(ngModel)]内幕
+  ### Inside `[(ngModel)]`
+  
+  ### `[(ngModel)]`内幕
+  
   We could have achieved the same result with separate bindings to
   the `<input>` element's  `value` property and `input` event.
 
diff --git a/public/docs/ts/latest/guide/user-input.jade b/public/docs/ts/latest/guide/user-input.jade
index 0d51df1e5d..e5af6d78e9 100644
--- a/public/docs/ts/latest/guide/user-input.jade
+++ b/public/docs/ts/latest/guide/user-input.jade
@@ -9,9 +9,10 @@ include ../_util-fns
   当用户点击链接、按下按钮或者输入文字时，我们得知道发生了什么。这些用户动作都会产生DOM事件。
   本章中，我们将学习如何使用Angular事件绑定语法来绑定这些事件。
 
-  <live-example>Run the live example</live-example>
+  Run the <live-example></live-example>.
+  
+  运行<live-example>在线例子</live-example>
   
-  <live-example>运行在线例子</live-example>
 
 :marked
   ## Binding to user input events
diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade
index 8a7d47028c..cd00d8849a 100644
--- a/public/docs/ts/latest/guide/webpack.jade
+++ b/public/docs/ts/latest/guide/webpack.jade
@@ -596,12 +596,12 @@ a(id="test-configuration")
 
   We don't need much configuration to run unit tests.
   We don't need the loaders and plugins that we declared for our development and production builds.
-  We probably don't need to load and process `css` files for unit tests and doing so would slow us down;
-  we'll use the `null` loader for all CSS.
+  We probably don't need to load and process the application-wide styles files for unit tests and doing so would slow us down;
+  we'll use the `null` loader for those CSS.
 
   我们并不需要使用很多配置项来运行单元测试。
   也不需要在开发环境和产品环境下引入的那些加载器和插件。
-  如果有可能拖慢执行速度，甚至都不需要在单元测试中加载和处理`css`文件，所以我们用一个`null`加载器来处理所有CSS。
+  如果有可能拖慢执行速度，甚至都不需要在单元测试中加载和处理应用全局样式文件，所以我们用一个`null`加载器来处理所有CSS。
 
   We could merge our test configuration into the `webpack.common` configuration and override the parts we don't want or need.
   But it might be simpler to start over with a completely fresh configuration.
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 0203fa1524..eac45f9e62 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -5,6 +5,11 @@ block includes
   - var _prereq = 'Node.js'
   - var _angular_browser_uri = '@angular/platform-browser-dynamic'
   - var _angular_core_uri = '@angular/core'
+  - var _stepInit = 4 // Step # after NgModule step
+  - var _quickstartSrcURL='https://github.com/angular/quickstart/blob/master/README.md'
+
+//- TS/Dart shared step counter
+- var step = _stepInit
 
 :marked
   Our QuickStart goal is to build and run a super-simple
@@ -58,20 +63,21 @@ figure.image-display
   - [步骤1](#create-and-configure)：创建本应用的项目文件夹，并且定义包的依赖以及特别的项目设置。
   - [Step 2](#root-component): Create the app’s Angular root component
   - [步骤2](#root-component): 创建本应用的Angular根组件
-  - [Step 3](#ngmodule): Create an Angular Module
-  - [步骤3](#ngmodule): 创建一个Angular模块
-  - [Step 4](#main): Add <span ngio-ex>main.ts</span>, identifying the root component to Angular
-  - [步骤4](#main): 添加<span ngio-ex>main.ts</span>，用来告诉Angular哪个是根组件
-  - [Step 5](#index): Add `index.html`, the web page that hosts the application
-  - [步骤5](#index): 添加`index.html`，本应用的宿主页面
-  - [Step 6](#build-and-run): Build and run the app
-  - [步骤6](#build-and-run): 构建并运行本应用
+  <li if-docs="ts">[Step 3](#ngmodule): Create an Angular Module</li>
+  <li if-docs="ts">[步骤3](#ngmodule): 创建一个Angular模块</li>
+  - [Step !{step++}](#main): Add <span ngio-ex>main.ts</span>, identifying the root component to Angular
+  - [步骤!{step++}](#main): 添加<span ngio-ex>main.ts</span>，用来告诉Angular哪个是根组件
+  - [Step !{step++}](#index): Add `index.html`, the web page that hosts the application
+  - [步骤!{step++}](#index): 添加`index.html`，本应用的宿主页面
+  - [Step !{step++}](#build-and-run): Build and run the app
+  - [步骤!{step++}](#build-and-run): 构建并运行本应用
   - [Make some changes to the app](#make-some-changes)
   - [对本应用做一些修改](#make-some-changes)
   - [Wrap up](#wrap-up)
   - [收工](#wrap-up)
 
-.l-main-section
+- var step = _stepInit // reinitialize step counter for headers to come
+.l-main-section#prereq
 h2#prereq Prerequisite: #{_prereq}
 h2#prereq 环境准备：#{_prereq}
 
@@ -90,18 +96,16 @@ block setup-tooling
       **在终端窗口运行`node -v`和`npm -v`，来确认你的node版本为`v5.x.x`，npm版本为`3.x.x`**。
       老版本会出错。
 
+.l-main-section
+.callout.is-helpful
+  header Download the source
+  header 下载源码
+  :marked
+    Instead of following each step of these instructions, we can
+    [download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
+    from github and follow its brief instructions.
 
-block download-source
-  .l-main-section
-  .callout.is-helpful
-    header Download the source
-    header 下载源码
-    :marked
-      Instead of following each step of these instructions, we can
-      [download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
-      from github and follow its brief instructions.
-
-      如果不想跟着这里的操作指南来一步步地做，可以从github[下载“快速起步”的源码](https://github.com/angular/quickstart/blob/master/README.md)，这样只要注意那些操作要点就行了。
+    如果不想跟着这里的操作指南来一步步地做，可以从github[下载“快速起步”的源码](https://github.com/angular/quickstart/blob/master/README.md)，这样只要注意那些操作要点就行了。
 
 .l-main-section
 button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)").
@@ -139,7 +143,10 @@ h2#create-and-configure 步骤1：创建并配置项目
 - var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'package definition and configuration files'
 - var _package_and_config_filesCn = _docsFor == 'dart' ? 'pubspec.yaml' : '包定义与配置文件'
 
+.l-main-section#create-and-configure
 :marked
+  ## Step 1: Create and configure the project
+
   In this step we:
 
   在这一步，我们将：
@@ -150,9 +157,9 @@ h2#create-and-configure 步骤1：创建并配置项目
   * [(c) #{_Install} packages](#install-packages)
   * [(c) #{_InstallCn}依赖包](#install-packages)
 
-h3 (a) Create the project folder
-h3 (a) 创建项目文件夹
-
+  ### (a) Create the project folder
+  ### (a) 创建项目文件夹
+  
 - var _ = _docsFor == 'dart' ? '_' : '-';
 code-example(language="sh").
   mkdir angular2!{_}quickstart
@@ -322,10 +329,10 @@ block install-packages
 
   **全部设置完了。** 来写点代码吧。
 
-.l-main-section
-h2#root-component Step 2: Our first Angular component
-h2#root-component 步骤2：我们的第一个Angular组件
-:marked
+.l-main-section#root-component  
+:marked  
+  ## Step 2: Our first Angular component
+
   Let's create a folder to hold our application and add a super-simple Angular component.
 
   创建一个文件夹，用于保存应用程序，并且添加一个超级简单的Angular组件。
@@ -472,96 +479,96 @@ p.
       as we'll see when we create `app.module.ts`.
 
       **导出**`AppComponent`，以便在应用的其它地方**导入**它 —— 比如创建`main.ts`时。
-.l-main-section
-h2#ngmodule Step 3: Our own #[code #[+adjExPath('app.module.ts')]]
-
-h2#ngmodule 步骤3: 我们自己的#[code #[+adjExPath('app.module.ts')]]
-
-block create-ngmodule
+      
++ifDocsFor('ts')
+  .l-main-section#ngmodule
   :marked
+    ## Step 3: Our own `app.module.ts`
+    ## 第三步：创建`app.module.ts`
+
     We compose Angular apps into closely related blocks of functionality with [Angular Modules](guide/ngmodule.html).
     Every app requires at least one module, the _root module_, that we call `AppModule` by convention.
     
     我们把Angular应用通过[Angular模块](guide/ngmodule.html)组织成了一些功能紧密相关的代码块。
     每个应用都至少需要一个模块（_根模块_），习惯上我们把它叫做`AppModule`。
     
-  p.  
-    Create the file #[code #[+adjExPath('app/app.module.ts')]] with the following content:
+  
+    Create the file `app/app.module.ts`  with the following content:
+    
+    用下列内容创建`app/app.module.ts` 文件：
 
-  p.  
-    用下列内容创建#[code #[+adjExPath('app/app.module.ts')]]文件：
-
-+makeExample('app/app.module.ts')(format='.')
-
-.l-verbose-section
-  :marked
-    We're passing metadata to the `NgModule` decorator function:
-    
-    我们要把元数据传给`NgModule`装饰器函数：
-
-    1. `imports` - the _other_ modules that export material we need in _this_ module. 
-    Almost every application's _root module_ should import the `BrowserModule`.
-    
-    1. `imports` - _其它_模块，用来导出当前模块所需的“素材”。
-    几乎每个应用的_根模块_都要导入`BrowserModule`模块。
-
-    1. `declarations` - components and directives that belong to _this_ module.
-    
-    1. `declarations` - 从属于_当前_模块的组件和指令。
-
-    1. `bootstrap` - identifies the _root component_ that Angular should _bootstrap_ when it starts the application. 
-    
-    1. `bootstrap` - 标记出_根组件_，在启动应用时，Angular应该通过它来进行_引导_。 
-
-    We import our lone `app.component.ts` and add it to both the `declarations` and `bootstrap` arrays.
-    
-    我们单独导入了`app.component.ts`并把它添加到`declarations`和`bootstrap`数组中。
-
-    ### Angular Modules import other modules
-    
-    ### Angular模块导入其它模块
-    
-    Notice that we also add the `BrowserModule` from `@angular/platform-browser` to the `imports` array. 
-    This is the Angular Module that contains all the needed Angular bits and pieces to run our app in the browser.
-    
-    注意，我们还把来自`@angular/platform-browser`的`BrowserModule`添加到了`imports`数组中。
-    该模块包含了要在浏览器中运行我们的应用时所需的一切。
-
-    Angular itself is split into separate Angular Modules so we only need to import the ones we really use.
-    
-    Angular本身被拆分成了一组独立的模块，所以我们只要导入我们真正用到的那些就可以了。
-    
-    One of the most common ones is `FormsModule`, and soon we'll also see `RouterModule` and `HttpModule`. 
-    
-    最常用的模块之一是`FormsModule`以及我们即将看到的`RouterModule`和`HttpModule`。
+  +makeExample('app/app.module.ts')(format='.')
+  
+  .l-verbose-section
+    :marked
+      We're passing metadata to the `NgModule` decorator function:
+      
+      我们要把元数据传给`NgModule`装饰器函数：
+  
+      1. `imports` - the _other_ modules that export material we need in _this_ module. 
+      Almost every application's _root module_ should import the `BrowserModule`.
+      
+      1. `imports` - _其它_模块，用来导出当前模块所需的“素材”。
+      几乎每个应用的_根模块_都要导入`BrowserModule`模块。
+  
+      1. `declarations` - components and directives that belong to _this_ module.
+      
+      1. `declarations` - 从属于_当前_模块的组件和指令。
+  
+      1. `bootstrap` - identifies the _root component_ that Angular should _bootstrap_ when it starts the application. 
+      
+      1. `bootstrap` - 标记出_根组件_，在启动应用时，Angular应该通过它来进行_引导_。 
+  
+      We import our lone `app.component.ts` and add it to both the `declarations` and `bootstrap` arrays.
+      
+      我们单独导入了`app.component.ts`并把它添加到`declarations`和`bootstrap`数组中。
+  
+      ### Angular Modules import other modules
+      
+      ### Angular模块导入其它模块
+      
+      Notice that we also add the `BrowserModule` from `@angular/platform-browser` to the `imports` array. 
+      This is the Angular Module that contains all the needed Angular bits and pieces to run our app in the browser.
+      
+      注意，我们还把来自`@angular/platform-browser`的`BrowserModule`添加到了`imports`数组中。
+      该模块包含了要在浏览器中运行我们的应用时所需的一切。
+  
+      Angular itself is split into separate Angular Modules so we only need to import the ones we really use.
+      
+      Angular本身被拆分成了一组独立的模块，所以我们只要导入我们真正用到的那些就可以了。
+      
+      One of the most common ones is `FormsModule`, and soon we'll also see `RouterModule` and `HttpModule`. 
+      
+      最常用的模块之一是`FormsModule`以及我们即将看到的`RouterModule`和`HttpModule`。
 
 .l-main-section
-h2#main Step 4: Add #[code #[+adjExPath('main.ts')]]
+h2#main Step !{step++}: Add #[code #[+adjExPath('main.ts')]]
 
 h2#main 步骤4: 添加#[code #[+adjExPath('main.ts')]]
 
 block create-main
-  p.
+  :marked
     Now we need something to tell Angular to load the app module.
-    Create the file #[code #[+adjExPath('app/main.ts')]] with the following content:
-  p.
+    Create the file `app/main.ts` with the following content:
+  
     现在，我们还需要做点什么来让Angular加载这个根组件。
     添加一个新文件#[code #[+adjExPath('app/main.ts')]]，内容如下：
 
 +makeExample('app/main.ts')
 
+- var _pBD_bootstrapModule = _docsFor == 'dart' ? _bootstrapModule : 'platformBrowserDynamic().bootstrapModule'
 .l-verbose-section
   :marked
     We import the two things we need to launch the application:
 
     我们引入了两样东西来启动本应用：
 
-    1. Angular's browser `platformBrowserDynamic` function
-    1. Angular的浏览器`platformBrowserDynamic`函数
-    1. The application module, `AppModule`.
-    1. 应用模块：`AppModule`。
+    1. Angular's browser `!{_platformBrowserDynamicVsBootStrap}` function
+    1. Angular的浏览器`!{_platformBrowserDynamicVsBootStrap}`函数
+    1. The application !{_moduleVsRootComp}, `!{_AppModuleVsAppComp}`.
+    1. 应用!{_moduleVsRootComp}, `!{_AppModuleVsAppComp}`。
 
-    Then we call `platformBrowserDynamic().bootstrapModule` with `AppComponent`.
+    Then we call `!{_pBD_bootstrapModule}` with `AppComponent`.
 
     然后，调用`bootstrap`函数，并且把`AppComponent`传进去。
 
@@ -569,44 +576,46 @@ block create-main
     
     ### “启动”是平台相关的
     
-    Notice that we import the `platformBrowserDynamic` function from `#{_angular_browser_uri}`,
+    Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function from `#{_angular_browser_uri}`,
     not `#{_angular_core_uri}`.
     Bootstrapping isn't core because there isn't a single way to bootstrap the app.
     True, most applications that run in a browser call the bootstrap function from
     this library.
 
-    注意，我们是从`#{_angular_browser_uri}`中引入的`platformBrowserDynamic`函数，而不是从`#{_angular_core_uri}`中。
+    注意，我们是从`#{_angular_browser_uri}`中引入的`!{_platformBrowserDynamicVsBootStrap}`函数，而不是从`#{_angular_core_uri}`中。
     “引导”不是核心的一部分，因为没有单一的途径来启动应用。诚然，大部分应用都是在浏览器中调用`bootstrap`函数的。
 
-    But it is possible to load a module in a different environment.
+    But it is possible to load a !{_moduleVsComp} in a different environment.
     We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/).
     We might wish to render the first page of our application on the server
     to improve launch performance or facilitate
     [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf).
     These targets require a different kind of bootstrap function that we'd import from a different library.
 
-    但从其它环境中加载模块也是可能的。
+    但从其它环境中加载!{_moduleVsComp}也是可能的。
     可能需要通过[Apache Cordova](https://cordova.apache.org/) 或 [NativeScript](https://www.nativescript.org/) 在移动设备中加载它。
     可能希望在服务器中渲染第一个页面来提高启动效率或
     让[SEO](http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf)更加容易。
     要达成这些目标，我们需要从其它库中引入一个不同类型的`bootstrap`函数。
 
-    ### Why create separate *<span ngio-ex>main.ts</span>*, app module and app component files?
+    ### Why create separate *<span ngio-ex>main.ts</span>*<span if-docs="ts">, app module</span> and app component files?
     
-    ### 为什么要创建独立的*<span ngio-ex>main.ts</span>*文件、应用模块和应用组件文件？
+    ### 为什么要创建独立的*<span ngio-ex>main.ts</span>*文件<span if-docs="ts">、应用模块</span>和应用组件文件？
 
-    Both <span ngio-ex>main.ts</span>, app module and the app component files are tiny.
+    Then <span ngio-ex>main.ts</span><span if-docs="ts">, app module</span>
+    and the app component files are tiny.
     This is just a QuickStart.
-    We could have merged these three files into one and spared ourselves some complexity.
+    We could have merged these files into one and spared ourselves some complexity.
 
     无论是<span ngio-ex>main.ts</span>还是组件的文件都非常小。
     它只是一个“快速起步”而已。
     我们本可以把这两个文件装进`app.component`文件来减少一点复杂度。
 
     We'd rather demonstrate the proper way to structure an Angular application.
-    App bootstrapping is a separate concern from creating a module or presenting a view.
+    App bootstrapping is a separate concern from<span if-docs="ts"> creating a module or</span>
+    presenting a view.
     Mixing concerns creates difficulties down the road.
-    We might launch the `AppModule` in multiple environments with different bootstrappers.
+    We might launch the `!{_AppModuleVsAppComp}` in multiple environments with different bootstrappers.
     Testing the component is much easier if it doesn't also try to run the entire application.
     Let's make the small extra effort to do it *the right way*.
 
@@ -618,8 +627,8 @@ block create-main
     让我们多花一点精力来用*“正确的方式”*实现它。
 
 .l-main-section
-h2#index Step 5: Add #[code index.html]
-h2#index 步骤5：添加#[code index.html]
+h2#index Step !{step++}: Add #[code index.html]
+h2#index 步骤!{step++}：添加#[code index.html]
 :marked
   In the *#{_indexHtmlDir}* folder
   create an `index.html` file and paste the following lines into it:
@@ -634,7 +643,7 @@ h2#index 步骤5：添加#[code index.html]
 
     `index.html`是存放本应用的宿主页面。
 
-  block index-html-commentary-for-ts
+  +ifDocsFor('ts')
     :marked
       The noteworthy sections of HTML are:
 
@@ -799,10 +808,11 @@ h2#index 步骤5：添加#[code index.html]
 
       ### *&lt;my-app&gt;*
 
-  a(id="my-app")
+  a#my-app
   :marked
-    When Angular calls the `bootstrapModule` function in <span ngio-ex>main.ts</span>, 
-    it reads the `AppModule` metadata, sees that `AppComponent` is the bootstrap component, 
+    When Angular calls the `!{_bootstrapModule}` function in <span ngio-ex>main.ts</span>,
+    it reads the `!{_AppModuleVsAppComp}` metadata<span if-docs="ts">, sees that 
+    `AppComponent` is the bootstrap component</span>,
     finds the `my-app` selector, locates an element tag named `my-app`,
     and renders our application's view between those tags.
 
@@ -817,17 +827,23 @@ h2#index 步骤5：添加#[code index.html]
   样式不是必备的，但是它让应用更漂亮。`index.html`假设有一个名叫`styles.css`的样式表。
 
   Create a `styles.css` file in the *#{_indexHtmlDir}* folder and start styling, perhaps with the minimal
-  styles shown below. For the full set of master styles used by the documentation samples,
-  see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
-
+  styles shown below.
+  
   在*#{_indexHtmlDirCn}*目录下创建一个`styles.css`文件来加上样式，可能是像下面这样的最小化版本。
-  要查看本文档中所用到的主样式表的完整集合，参见
-  [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css)
-+makeExcerpt('styles.1.css')
+  
++makeExcerpt('styles.css (excerpt)', 'quickstart')
 
-.l-main-section
-h2#build-and-run Step 6: Build and run the app!
-h2#build-and-run 步骤6：构建并运行本应用！
+.callout.is-helpful
+  :marked
+    For the full set of master styles used by the documentation samples,
+    see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
+  
+    要查看本文档中所用到的主样式表的完整集合，参见
+    [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css)
+
+.l-main-section#build-and-run
+h2#build-and-run Step !{step++}: Build and run the app!
+h2#build-and-run 步骤!{step++}：构建并运行本应用！
 block run-app
   :marked
     Open a terminal window and enter this command:
@@ -922,10 +938,10 @@ block project-files
       quickstart/ts/package.1.json,
       quickstart/ts/tsconfig.1.json,
       quickstart/ts/typings.1.json,
-      quickstart/ts/styles.1.css,
+      quickstart/ts/styles.css,
       quickstart/ts/systemjs.config.1.js`
     ,
-    ',,,,,,,,',
+    ',,,,,,, quickstart,',
     `app/app.component.ts,
     app/app.module.ts,
     app/main.ts,
@@ -933,7 +949,7 @@ block project-files
     package.json,
     tsconfig.json,
     typings.json,
-    styles.css,
+    styles.css (excerpt),
     systemjs.config.js`)
 
 .l-main-section
@@ -955,7 +971,8 @@ block project-files
   **We have greater ambitions!**
 
   **我们还有更宏伟的目标！**
-block what-next-ts-overhead
+  
++ifDocsFor('ts')
   :marked
     The good news is that the overhead of setup is (mostly) behind us.
     We'll probably only touch the `package.json` to update libraries.
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index 504baef93d..99128a4795 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -77,9 +77,9 @@ code-example(language="bash").
   
   ### 创建英雄
   
-  Let’s create an array of ten heroes at the bottom of `app.component.ts`.
+  Let’s create an array of ten heroes.
   
-  我们先在`app.component.ts`的底部创建一个由十位英雄组成的数组。
+  我们先创建一个由十位英雄组成的数组。
 
 +makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (hero array)')
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
index 813d1ed1ea..969b7f6fe4 100644
--- a/public/docs/ts/latest/tutorial/toh-pt3.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -375,7 +375,7 @@ code-example(format=".").
   toh-3/ts/app/hero-detail.component.ts,
   toh-3/ts/app/app.component.ts,
   toh-3/ts/app/hero.ts,
-  toh-3/ts/app/app.module.ts,
+  toh-3/ts/app/app.module.ts
   `,'',`
   app/hero-detail.component.ts,
   app/app.component.ts,
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index 804f0ab1f3..584b3e5953 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -233,8 +233,7 @@ code-example(language="bash").
   回到`HeroService`，我们导入`HEROES`常量，并在`getHeroes`方法中返回它。
   我们的`HeroService`服务现在看起来是这样：
   
-+makeExample('toh-4/ts/app/hero.service.1.ts', null, 'app/hero.service.ts')(format=".")
-
++makeExample('toh-4/ts/app/hero.service.1.ts', 'full', 'app/hero.service.ts')(format=".")
 :marked
   ### Use the Hero Service
   
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 963b19d86b..942cabf04f 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -1,4 +1,12 @@
-include ../_util-fns
+- var _example = 'toh-5';
+
+block includes
+  include ../_util-fns
+  - var _appRoutingTsVsAppComp = 'app.routing.ts'
+  - var _declsVsDirectives = 'declarations'
+  - var _RoutesVsAtRouteConfig = 'Routes'
+  - var _RouterModuleVsRouterDirectives = 'RouterModule'
+  - var _redirectTo = 'redirectTo'
 
 :marked
   # Routing Around the App
@@ -38,8 +46,8 @@ figure.image-display
 
 .l-sub-section
   :marked
-    The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
-    than we will in this tutorial.
+    The [Routing and Navigation](../guide/router.html) chapter covers the router
+    in more detail than we will in this tutorial.
 
     [路由和导航](../guide/router.html)章节介绍了更多关于路由的细节。
 
@@ -48,13 +56,14 @@ figure.image-display
   
   运行这部分的<live-example></live-example>。
 
-.l-sub-section
-  img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="弹出窗口" align="right" style="margin-right:-20px")
-  :marked
-    To see the URL changes in the browser address bar,
-    pop out the preview window by clicking the blue 'X' button in the upper right corner:
-
-    注意看浏览器地址栏中的URL变化，点击右上角的蓝色'X'按钮，弹出预览窗口。
++ifDocsFor('ts|js')
+  .l-sub-section
+    img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="弹出窗口" align="right" style="margin-right:-20px")
+    :marked
+      To see the URL changes in the browser address bar,
+      pop out the preview window by clicking the blue 'X' button in the upper right corner:
+  
+      注意看浏览器地址栏中的URL变化，点击右上角的蓝色'X'按钮，弹出预览窗口。
 
 .l-main-section
 :marked
@@ -67,35 +76,38 @@ figure.image-display
 
   在继续《英雄指南》之前，先来检查一下，在添加了英雄服务和英雄详情组件之后，你是否已经有了如下目录结构。如果没有，你得先回上一章，再照做一遍。
 
-.filetree
-  .file angular2-tour-of-heroes
-  .children
-    .file app
+block intro-file-tree
+  .filetree
+    .file angular2-tour-of-heroes
     .children
-      .file app.component.ts
-      .file app.module.ts
-      .file hero.ts
-      .file hero-detail.component.ts
-      .file hero.service.ts
-      .file main.ts
-      .file mock-heroes.ts
-    .file node_modules ...
-    .file typings ...
-    .file index.html
-    .file package.json
-    .file styles.css
-    .file systemjs.config.js
-    .file tsconfig.json
-    .file typings.json
-:marked
-  ### Keep the app transpiling and running
+      .file app
+      .children
+        .file app.component.ts
+        .file app.module.ts
+        .file hero.service.ts
+        .file hero.ts
+        .file hero-detail.component.ts
+        .file main.ts
+        .file mock-heroes.ts
+      .file node_modules ...
+      .file typings ...
+      .file index.html
+      .file package.json
+      .file styles.css
+      .file systemjs.config.js
+      .file tsconfig.json
+      .file typings.json
 
-  ### 让应用代码保持转译和运行
+block keep-app-running
+  :marked
+    ### Keep the app transpiling and running
 
-  Open a terminal/console window and enter the following command to
-  start the TypeScript compiler, start the server, and watch for changes:
-
-  打开terminal/console窗口，运行下列命令启动TypeScript编译器，它会监视文件变更，并启动开发服务器：
+    ### 让应用代码保持转译和运行
+  
+    Open a terminal/console window and enter the following command to
+    start the TypeScript compiler, start the server, and watch for changes:
+     
+    打开terminal/console窗口，运行下列命令启动TypeScript编译器，它会监视文件变更，并启动开发服务器：
 
 code-example(language="bash").
   npm start
@@ -172,9 +184,9 @@ code-example(language="bash").
 
   改名的步骤如下：
 
-  * `app.component.ts` file to `heroes.component.ts`
+  * <span ngio-ex>app.component.ts</span> file to <span ngio-ex>heroes.component.ts</span>
 
-  * 把`app.component.ts`文件改名为`heroes.component.ts`
+  * 把<span ngio-ex>app.component.ts</span>文件改名为<span ngio-ex>heroes.component.ts</span>
 
   * `AppComponent` class to `HeroesComponent`
 
@@ -184,8 +196,7 @@ code-example(language="bash").
 
   * 把`my-app`选择器改名为`my-heroes`
 
-:marked
-+makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (showing renamings only)')(format=".")
++makeExcerpt('app/heroes.component.ts (showing renamings only)', 'renaming')
 
 :marked
   ## Create *AppComponent*
@@ -202,56 +213,66 @@ code-example(language="bash").
 
   这些起始步骤是：
 
-  * create a new file named `app.component.ts`.
-
-  * 创建一个名叫`app.component.ts`的新文件。
-
-  * define an `AppComponent` class.
-
-  * 定义一个`AppComponent`类。
-
-  * `export` it so we can reference it during bootstrapping in `app.module.ts`.
-
-  * `export`它，以便我们能在`app.module.ts`的启动期间引用它。
-
-  * expose an application `title` property.
-
-  * 暴露应用的`title`属性。
-
-  * add the `@Component` metadata decorator above the class with a `my-app` selector.
-
-  * 在类的上方添加`@Component`元数据装饰器，装饰器中带有`my-app`选择器。
-
-  * add a template with `<h1>` tags surrounding a binding to the `title` property.
-
-  * 在模板中添加一个`<h1>`标签，包裹着到`title`属性的绑定。
-
-  * add the `<my-heroes>` tags to the template so we still see the heroes.
-
-  * 在模板中添加`<my-heroes>`标签，以便我们仍能看到英雄列表。
-
-  * add the `HeroesComponent` to the root NgModule's `declarations` array so Angular recognizes the `<my-heroes>` tags.
-
-  * 添加`HeroesComponent`组件到根模块的`declarations`数组中，以便Angular能认识`<my-heroes>`标签。
-
-  * add the `HeroService` to the root NgModule's `providers` array because we'll need it in every other view.
-
-  * 添加`HeroService`到根模块的`providers`数组中，因为我们的每一个视图都需要它。
 
   * add the supporting `import` statements.
-
+  
   * 添加支持性的`import`语句。
+  
+  * Create the file <span ngio-ex>app/app.component.ts</span>.
+  
+  * 创建一个名叫<span ngio-ex>app.component.ts</span>的新文件。
+  
+  * Define an <span if-docs="ts">exported</span> `AppComponent` class.
+  
+  * 定义一个<span if-docs="ts">导出的</span> ``AppComponent`类。     
+     
+  * Add an `@Component` !{_decorator} above the class with a `my-app` selector.
+  
+  * 在类的上方添加`@Component`元数据装饰器，装饰器中带有`my-app`选择器。         
+       
+  * Move the following from `HeroesComponent` to `AppComponent`:
+  
+  * 将下面的项目从`HeroesComponent`移到`AppComponent`：
+    * `title` class property
+    
+    * `title`类属性
+    
+    * `@Component` template `<h1>` element, which contains a binding to  `title`
+    
+    * 在模板中添加一个`<h1>`标签，包裹着到`title`属性的绑定。
+    
+  * Add a `<my-heroes>` element to the app template just below the heading so we still see the heroes.
+  * 
+  在模板中添加`<my-heroes>`标签，以便我们仍能看到英雄列表。  
+  
+  * Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `<my-heroes>` tags.
+  
+  * 添加`HeroesComponent`组件到根模块的`declarations`数组中，以便Angular能认识`<my-heroes>`标签。
+  
+  * Add `HeroService` to the  `providers` !{_array} of `!{_AppModuleVsAppComp}` because we'll need it in every other view.
+  
+  * 添加`HeroService`到根模块的`providers`数组中，因为我们的每一个视图都需要它。
+  
+  * Remove `HeroService` from the `HeroesComponent` `providers` !{_array} since it has been promoted.
+  
+  * 从`HerosComponent`的`providers`数组中移除HeroService`，因为它被提到模块了。
+  
+  * Add the supporting `import` statements for `AppComponent`.
+  
+  * 导入`AppComponent`。 
+   
 
   Our first draft looks like this:
   
   我们的第一个草稿版就像这样：
 
-+makeTabs(
-  `toh-5/ts/app/app.component.1.ts,
-  toh-5/ts/app/app.module.1.ts`,
-  ',',
-  `app/app.component.ts (v1),
-  app/app.module.ts (v1)`)
+block app-comp-v1
+  +makeTabs(
+    `toh-5/ts/app/app.component.1.ts,
+    toh-5/ts/app/app.module.1.ts`,
+    ',',
+    `app/app.component.ts (v1),
+    app/app.module.ts (v1)`)
 
 :marked
 .callout.is-critical
@@ -291,70 +312,81 @@ code-example(language="bash").
   We'll need the Angular *Component Router*.
 
   我们需要Angular的*组件路由器*。
-
+  
+block angular-router
+  :marked
+    The Angular router is an external, optional Angular NgModule called `RouterModule`.
+    The router is a combination of multiple provided services (`RouterModule`),
+    multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`),
+    and a configuration (`Routes`). We'll configure our routes first.
+    
+    Angular路由器是一个可选的外部Angular NgModule，名叫`RouterModule`。
+    路由器包含了多种服务(`RouterModule`)、多种指令(`RouterOutlet, RouterLink, RouterLinkActive`)、
+    和一套配置(`Routes`)。我们将先配置路由。
+    
+:marked
   ### Set the base tag
-
+  
   ### 设置base标签
-
+  
   Open the `index.html` and add `<base href="/">` at the top of the `<head>` section.
-
+  
   打开`index.html`并且在`<head>`区的顶部添加`<base href="/">`语句。
 
-+makeExample('toh-5/ts/index.html', 'base-href', 'index.html (base href)')(format=".")
++makeExcerpt('index.html', 'base-href')
 
 .callout.is-important
-
   header base href is essential
-
   header base href是不可或缺的
-
   :marked
     See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters.
 
     查看[路由器](../guide/router-deprecated.html#!#base-href)一章的*base href*部分，了解为何如此。
+a#configure-routes
+block router-config-intro
+  :marked
+    ### Configure routes
+  
+    ### 配置路由  
+  
+    Our application doesn't have any routes yet.
+    We'll start by creating a configuration file for the application routes.
+    
+    本应用还没有路由。我们来为应用的路由新建一个配置文件。
 
 :marked
-  The Angular router is a combination of multiple provided services (`RouterModule`), multiple directives (`RouterOutlet,
-  RouterLink, RouterLinkActive`), and a configuration (`Routes`). We'll configure our routes first:
-
-  Angular路由器是由多个服务(`ROUTER_PROVIDERS`)和多个指令(`ROUTER_DIRECTIVES`)以及一个配置装饰器(`RouteConfig`)组成的。我们一次性导入它们。
-
-  ### Configure the routes
-
-  ### 配置路由
-
-  The *Component Router* is an external, optional Angular NgModule called `RouterModule`.
-  
-  *组件路由器*是一个外部的、可选的模块（NgModule），名叫`RouterModule`。
-
-  Our application doesn't have any routes yet.
-  Start by creating a configuration file for the application routes.
   *Routes* tell the router which views to display when a user clicks a link or
-  pastes a URL into the browser address bar.
+  pastes a URL into the browser address bar.  
   
-  我们的应用还没有任何路由，就先从为路由创建配置文件开始吧。
   *路由*告诉路由器，当用户点击链接或者把URL粘贴到浏览器地址栏时，应该显示哪个视图。
 
-  Our first route goes to the `HeroesComponent`.
+  Let's define our first route as a route to the heroes component:
   
   我们的第一个路由是指向`HeroesComponent`的。
   
-+makeExample('toh-5/ts/app/app.routing.1.ts', 'routing-config', 'app/app.routing.ts (heroes route)')(format=".")
-:marked
-  The `Routes` are an array of *route definitions*.
-  We have only one route definition at the moment but rest assured, we'll add more.
+- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.routing.ts'
++makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
 
+- var _are = _docsFor == 'dart' ? 'takes' : 'are'
+- var _routePathPrefix = _docsFor == 'dart' ? '/' : ''
+:marked
+  The `!{_RoutesVsAtRouteConfig}` !{_are} !{_an} !{_array} of *route definitions*.
+  We have only one route definition at the moment but rest assured, we'll add more.
 
   这个`RouteConfig`是一个*路由定义*的数组。
   此刻我们只有一个路由定义，但别急，后面还会添加更多。
 
-  This *route definition* has two parts:
+  This *route definition* has the following parts:
   
-  “路由定义”包括两个部分：
+  “路由定义”包括几个部分：
   
-  * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`).
+  * **path**: the router matches this route's path to the URL in the browser address bar (`!{_routePathPrefix}/heroes`).
+  <li if-docs="dart"> **name**: the official name of the route;
+     it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`).</li>
 
-  * **path**: 路由器会用它来匹配路由中指定的路径和浏览器地址栏中的当前路径，如`/heroes`。
+  * **path**: 路由器会用它来匹配路由中指定的路径和浏览器地址栏中的当前路径，如`!{_routePathPrefix}/heroes`。
+  <li if-docs="dart"> **name**: the official name of the route;
+     it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`).</li>
 
   * **component**: the component that the router should create when navigating to this route (`HeroesComponent`).
 
@@ -362,49 +394,50 @@ code-example(language="bash").
 
 .l-sub-section
   :marked
-    Learn more about defining routes with Routes in the [Routing](../guide/router.html) chapter.
+    Learn more about defining routes with `!{_RoutesVsAtRouteConfig}` in the [Routing](../guide/router.html) chapter.
 
     到[路由](../guide/router.html)章节学习更多关于使用路由库来定义路由的知识。
-
-:marked
-  We'll export the `routing` constant using the **RouterModule.forRoot** method with our array of routes.
-  This returns a configured router module we'll add to our root NgModule, `AppModule`.
-
-  使用**RouterModule.forRoot**方法，导出包含了路由数组的`routing`常量。它返回一个配置好的路由模块，它将被加入到根NgModule - `AppModule`中。
-
-+makeExample('toh-5/ts/app/app.routing.1.ts', 'routing-export', 'app/app.routing.ts (routing export)')(format=".")
-.l-sub-section
+    
++ifDocsFor('ts|js')
   :marked
-    We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
-    The `forRoot` method gives us the Router service providers and directives needed for routing.
-
-    要学习更多使用`RouterConfig`定义路由的知识，请参见[路由](../guide/router.html)一章。
-:marked
-  ### Make the router available.
+    We'll export the `routing` constant using the **RouterModule.forRoot** method with our array of routes.
+    This returns a configured router module we'll add to our root NgModule, `AppModule`.
   
-  ### 让路由器生效
-  
-  We've setup our initial routes in our `app.routing.ts` file. Now we'll add it to our root NgModule.
-  
-  我们已经在`app.routing.ts`文件中设置好了初始路由，接着把它加到根模块（NgModule）中。
+    使用**RouterModule.forRoot**方法，导出包含了路由数组的`routing`常量。它返回一个配置好的路由模块，它将被加入到根NgModule - `AppModule`中。
 
-  We'll import our `routing` constant from our `app.routing.ts` file and add it root NgModule's `imports` array.
++makeExcerpt('app/app.routing.1.ts (excerpt)', 'routing-export')
+
+  .l-sub-section
+    :marked
+      We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
+      The `forRoot` method gives us the Router service providers and directives needed for routing.
+    
+      调用`forRoot`方法是因为要在应用程序根部提供配置好的路由。
+      `forRoot`方法为我们提供了路由需要的服务提供商和指令。 
+    
+  :marked
+    ### Make the router available.
+    
+    ### 让路由器生效
+    
+    We've setup our initial routes in our `app.routing.ts` file. Now we'll add it to our root NgModule.
+    
+    我们已经在`app.routing.ts`文件中设置好了初始路由，接着把它加到根模块（NgModule）中。
   
-  我们要从`app.routing.ts`中导入`routing`常量，并把它加入根模块的`imports`数组中。
-
-  We'll also import our `HeroesComponent` and add it to our `declarations` array.
+    Import the `routing` constant from `app.routing.ts` and add it the `imports` !{_array} of `AppModule`.
+    
+    我们要从`app.routing.ts`中导入`routing`常量，并把它加入根模块的`imports`数组中。
   
-  我们还要导入`HeroesComponent`，并把它加入`declarations`数组中。
-
-+makeExample('toh-5/ts/app/app.module.2.ts', '', 'app/app.module.ts')(format=".")
+  +makeExcerpt('app/app.module.ts', 'routing')
 
+- var _heroesRoute = _docsFor == 'dart' ? "'Heroes'" : 'heroes'
 :marked
   ### Router Outlet
 
   ### 路由插座(Outlet)
 
   If we paste the path, `/heroes`, into the browser address bar,
-  the router should match it to the `heroes` route and display the `HeroesComponent`.
+  the router should match it to the `!{_heroesRoute}` route and display the `HeroesComponent`.
   But where?
 
   如果我们把路径`/heroes`粘贴到浏览器的地址栏，路由器会匹配到`'Heroes'`路由，并显示`HeroesComponent`组件。
@@ -468,7 +501,7 @@ code-example(language="bash").
     接下来，我们就修复这个问题。
 
 :marked
-  We click the "Heroes" navigation link, the browser bar updates to `/heroes`,
+  We click the *Heroes* navigation link, the browser bar updates to `/heroes`,
   and now we see the list of heroes. We are navigating at last!
 
   我们点击“英雄列表(Heroes)”导航链接，浏览器地址栏更新为`/heroes`，并且看到了英雄列表。我们终于导航过去了！
@@ -528,7 +561,7 @@ code-example(language="bash").
   
   我们还得把`DashboardComponent`添加到根模块的`declarations`数组中。
 
-+makeExample('toh-5/ts/app/app.module.3.ts','dashboard-declaration', 'app/app.module.ts (Dashboard declaration)')(format=".")
+  +makeExcerpt('app/app.module.ts', 'dashboard')
 
 .l-sub-section
   :marked
@@ -536,10 +569,9 @@ code-example(language="bash").
     
     **重定向**
 
-    We want the app to show the dashboard when it starts and
-    we want to see a nice URL in the browser address bar that says `/dashboard`.
-    Remember that the browser launches with `/` in the address bar.
-    We can use a redirect route to make this happen.
+  We want the app to show the dashboard when it starts and
+  we want to see a nice URL in the browser address bar that says `/dashboard`.
+  Remember that the browser launches with `/` in the address bar.
 
     我们希望在应用启动的时候就显示仪表盘，而且我们希望在浏览器的地址栏看到一个好看的URL，比如`/dashboard`。
     记住，浏览器启动时，在地址栏中使用的路径是`/`。
@@ -547,13 +579,15 @@ code-example(language="bash").
 
 +makeExample('toh-5/ts/app/app.routing.2.ts','redirect-route', 'app/app.routing.ts (Redirect route)')(format=".")
 
-.l-sub-section
-  :marked
-    Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter.
+  .l-sub-section
+    :marked
+      Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter.
 
     要学习关于*重定向*的更多知识，参见[路由与导航](../guide/router.html#!#redirect)一章。
 
 :marked
+  #### Add navigation to the template
+
   Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
 
   最后，在模板上添加一个到仪表盘的导航链接，就放在*英雄(Heroes)*链接的上方。
@@ -568,8 +602,8 @@ code-example(language="bash").
     它们现在还没有作用，但稍后，当我们对这些链接添加样式时，会显得比较方便。
 
 :marked
-  Refresh the browser. The app displays the dashboard and
-  we can navigate between the dashboard and the heroes.
+  To see these changes in your browser, go to the application root (`/`) and reload.
+  The app displays the dashboard and we can navigate between the dashboard and the heroes.
 
   刷新浏览器。应用显示出了仪表盘，并可以在仪表盘和英雄列表之间导航了。
   ## Dashboard Top Heroes
@@ -729,6 +763,7 @@ code-example(language="bash").
 
 code-example(format='').
   &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
+
 :marked
   That clearly won't work in any of our routing scenarios.
   Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
@@ -821,7 +856,8 @@ code-example(format='').
 +makeExample('toh-4/ts/app/hero-detail.component.ts', null, 'app/hero-detail.component.ts (current)')
 
 :marked
-  The template won't change. We'll display a hero the same way. The big changes are driven by how we get the hero.
+  The template won't change. We'll display a hero the same way.
+  The big changes are driven by how we get the hero.
 
   模板不用修改，我们会用原来的方式显示英雄。导致这次大修的原因是如何获得这个英雄的数据。
 
@@ -886,7 +922,7 @@ code-example(format='').
 
 :marked
   The hero `id` is a number. Route parameters are *always strings*.
-  So we convert the route parameter value to a number with the JavaScript (+) operator.
+  So we convert the route parameter value to a number with the !{_str2int}.
 
   英雄的`id`是数字，而路由参数的值*总是字符串*。
   所以我们需要通过JavaScript的(+)操作符把路由参数的值转成数字。
@@ -907,7 +943,7 @@ code-example(format='').
 +makeExample('toh-5/ts/app/hero.service.ts', 'get-hero', 'app/hero.service.ts (getHero)')(format=".")
 
 :marked
-  Return to the `HeroDetailComponent` to clean up loose ends.
+  Let's return to the `HeroDetailComponent` to clean up loose ends.
 
   回到`HeroDetailComponent`来完成收尾工作。
 
@@ -922,7 +958,7 @@ code-example(format='').
   但当我们完工时，我们该导航到那里呢？
 
   The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
-  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
+  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack.
 
   现在用户可以点击`AppComponent`中的两个链接，或点击浏览器的“后退”按钮。
   我们来添加第三个选项：一个`goBack`方法，来根据浏览器的历史堆栈，后退一步。
@@ -1096,7 +1132,7 @@ code-example(format='').
 figure.image-display
   img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini版英雄详情" height="70")
 :marked
-  ### Format with the *UpperCasePipe*
+  ### Format with the *uppercase* pipe
 
   ### 使用*UpperCasePipe*格式化
 
@@ -1168,7 +1204,8 @@ figure.image-display
   1. 把`router`注入到构造函数中(就像`HeroService`那样)
 
   1. Implement the `gotoDetail` method by calling the `router.navigate` method
-  with a two-part `HeroDetail` *link parameters array*.
+
+  with a two-part hero-detail link parameters !{_array}.
 
   1. 实现`gotoDetail`方法：以`HeroDetail`和*链接参数数组*为参数调用`router.navigate`方法。
 
@@ -1282,8 +1319,9 @@ figure.image-display
 +makeExample('toh-5/ts/app/app.component.css', '', 'app/app.component.css (navigation styles)')
 
 .l-sub-section
-  :marked
-    **The *routerLinkActive* directive**
+  block router-link-active
+    :marked
+      **The *routerLinkActive* directive**
 
     ***routerLinkActive*指令**
 
@@ -1323,7 +1361,7 @@ figure.image-display
   These correspond to the full set of master styles that we
   introduced earlier (see
   [QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
-  Here is an excerpt.
+  Here is an excerpt:
 
   我们的设计师提供了一组基础样式，这些样式应用到的元素横跨整个应用。
   这些和我们前面引入的主样式全集是一样的(参见
@@ -1335,7 +1373,7 @@ figure.image-display
 - var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
 
 :marked
-  Add a new file named `styles.css` in the root folder, if there isn't one already.
+  Create the file <span ngio-ex>styles.css</span>, if it doesn't exist already.
   Ensure that it contains the [master styles given here](!{styles_css}).
 
   如果在根目录下没有一个名叫`styles.css`的文件，就添加它。
@@ -1348,7 +1386,7 @@ figure.image-display
 +makeExample('toh-5/ts/index.html','css', 'index.html (link ref)')(format=".")
 
 :marked
- Look at the app now. Our dashboard, heroes, and navigation links are styling!
+  Look at the app now. Our dashboard, heroes, and navigation links are styling!
 
  看看现在的应用！我们的仪表盘、英雄列表和导航链接都漂亮多了！
 
@@ -1367,36 +1405,37 @@ figure.image-display
   在<live-example></live-example>中回顾本章的范例代码。
   验证我们是否已经得到了如下结构：
 
-.filetree
-  .file angular2-tour-of-heroes
-  .children
-    .file app
+block file-tree-end
+  .filetree
+    .file angular2-tour-of-heroes
     .children
-      .file app.component.ts
-      .file app.component.css
-      .file app.module.ts
-      .file app.routing.ts
-      .file dashboard.component.css
-      .file dashboard.component.html
-      .file dashboard.component.ts
-      .file hero.ts
-      .file hero-detail.component.css
-      .file hero-detail.component.html
-      .file hero-detail.component.ts
-      .file hero.service.ts
-      .file heroes.component.css
-      .file heroes.component.html
-      .file heroes.component.ts
-      .file main.ts
-      .file mock-heroes.ts
-    .file node_modules ...
-    .file typings ...
-    .file index.html
-    .file package.json
-    .file styles.css
-    .file systemjs.config.json
-    .file tsconfig.json
-    .file typings.json
+      .file app
+      .children
+        .file app.component.css
+        .file app.component.ts
+        .file app.module.ts
+        .file app.routing.ts
+        .file dashboard.component.css
+        .file dashboard.component.html
+        .file dashboard.component.ts
+        .file hero.service.ts
+        .file hero.ts
+        .file hero-detail.component.css
+        .file hero-detail.component.html
+        .file hero-detail.component.ts
+        .file heroes.component.css
+        .file heroes.component.html
+        .file heroes.component.ts
+        .file main.ts
+        .file mock-heroes.ts
+      .file node_modules ...
+      .file typings ...
+      .file index.html
+      .file package.json
+      .file styles.css
+      .file systemjs.config.js
+      .file tsconfig.json
+      .file typings.json
 
 .l-main-section
 :marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index ea600482d3..6e739a6768 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -5,7 +5,6 @@ block includes
   - var _Http = 'Http'; // Angular `Http` library name.
   - var _Angular_Http = 'Angular <code>Http</code>'
   - var _Angular_http_library = 'Angular HTTP library'
-  - var _HTTP_PROVIDERS = 'HTTP_PROVIDERS'
   - var _HttpModule = 'HttpModule'
   - var _JSON_stringify = 'JSON.stringify'
 
@@ -85,20 +84,20 @@ block http-library
 block http-providers
   :marked
     Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
-    The `HttpModule` from `@angular/http` library holds providers for the complete set of http services.
+    The `HttpModule` from `@angular/http` library holds providers for the complete set of `http` services.
     
     我们的应用将会依赖于Angular的`http`服务，它本身又依赖于其它支持类服务。
-    来自`@angular/http`库中的`HttpModule`保存着这些http相关服务提供商的全集。
+    来自`@angular/http`库中的`HttpModule`保存着这些`http`相关服务提供商的全集。
 
 :marked
-  We should be able to access `!{_Http}` services from anywhere in the application.
-  So we register them in the `imports` array of <span ngio-ex>app.module.ts</span> where we
-  launch the application and its root `AppComponent`.
+  We should be able to access `http` services from anywhere in the application.
+  So we register them in the `imports` array of `app.module.ts` where we
+  bootstrap the application and its root `AppComponent`.
   
-  我们要能从本应用的任何地方访问这些服务，所以，就要在<span ngio-ex>app.module.ts</span>中的`imports`数组中注册它们。
+  我们要能从本应用的任何地方访问`http`服务，所以，就要在`app.module.ts`中的`imports`数组中注册它们。
   这里同时也是我们引导应用及其根组件`AppComponent`的地方。
 
-+makeExample('app/app.module.2.ts','', 'app.module.ts (v.1)')
+  +makeExample('app/app.module.ts', 'v1','app/app.module.ts (v1)')
 
 :marked
   Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
@@ -111,9 +110,12 @@ block http-providers
   
   ## 模拟web API
 
-  We recommend registering application-wide services in the root `NgModule` *providers*.
+  We recommend registering application-wide services in the root 
+  `!{_AppModuleVsAppComp}` *providers*.  <span if-docs="dart">Here we're
+  registering in `main` for a special reason.</span>
   
-  我们建议在根模块（`NgModule`）的`providers`数组中注册全应用级的服务。
+  我们建议在根模块`!{_AppModuleVsAppComp}`的`providers`数组中注册全应用级的服务。
+  <span if-docs="dart">Here we're registering in `main` for a special reason.</span>
 
   Our application is in the early stages of development and far from ready for production.
   We don't even have a web server that can handle requests for heroes.
@@ -124,23 +126,37 @@ block http-providers
 
   We're going to *trick* the HTTP client into fetching and saving data from
   a mock service, the *in-memory web API*.
+  <span if-docs="dart"> The application itself doesn't need to know and
+  shouldn't know about this.  So we'll slip the in-memory web API into the
+  configuration *above* the `AppComponent`.</span>
   
   我们要*耍点小花招*，让http客户端从一个Mock服务（*内存(in-memory)Web API*）中获取和保存数据。
+  <span if-docs="dart"> The application itself doesn't need to know and
+  shouldn't know about this.  So we'll slip the in-memory web API into the
+  configuration *above* the `AppComponent`.</span>
 
-  Here is a version of `app.module.ts` that performs this trick
+  Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick
   
-  这个版本的`app.module.ts`就是用来实现这个小花招的：
+  这个版本的<span ngio-ex>!{_appModuleTsVsMainTs}</span>就是用来实现这个小花招的：
   
-+makeExample('app/app.module.1.ts', '', 'app.module.ts (final)')
++makeExcerpt(_appModuleTsVsMainTs, 'v2')
 
 block backend
   :marked
-    We're replacing the default `XHRBackend`, the service that talks to the remote server,
-    with the in-memory web API service after priming it as follows:
+    We're importing the  `InMemoryWebApiModule` and adding it to the module `imports`.
+    The  `InMemoryWebApiModule` replaces the default `Http` client backend &mdash;
+    the supporting service that talks to the remote server &mdash;
+    with an  _in-memory web API alternative service_.
     
-    我们把默认的`XHRBackend`服务（该服务负责与远端服务器对话）替换成了*内存Web API*服务：
+    导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。
+    将`InMemoryWebApiModule`将默认的负责与远程服务器交流的辅助`Http`服务替换成了*内存Web API*服务：
+    
+  +makeExcerpt(_appModuleTsVsMainTs, 'in-mem-web-api', '')
+  :marked
+    The `forRoot` configuration method takes an `InMemoryDataService` class 
+    that will prime the in-memory database as follows:
 
-+makeExample('app/in-memory-data.service.ts', 'init')
++makeExample('app/in-memory-data.service.ts', 'init')(format='.')
 
 p This file replaces the #[code #[+adjExPath('mock-heroes.ts')]] which is now safe to delete.
 
@@ -838,14 +854,14 @@ block observable-transformers
     在这个例子中，我们使用一些不同的方法。
     我们把整个应用中要用的那些RxJS `Observable`扩展组合在一起，放在一个单独的RxJS导入文件中。
 
-  +makeExample('app/rxjs-extensions.ts')
+  +makeExample('app/rxjs-extensions.ts')(format='.')
 
   :marked
     We load them all at once by importing `rxjs-extensions` in `AppComponent`.
     
     我们在`AppComponent`中导入`rxjs-extensions`就可以一次性加载它们。
 
-  +makeExcerpt('app/app.component.ts', 'rxjs-extensions')
+  +makeExcerpt('app/app.component.ts', 'rxjs-extensions')(format='.')
 
 :marked
   ### Add the search component to the dashboard
@@ -856,15 +872,17 @@ block observable-transformers
   
   将表示“英雄搜索”组件的HTML元素添加到`DashboardComponent`模版的最后面。
 
-+makeExample('app/dashboard.component.html')
++makeExample('app/dashboard.component.html')(format='.')
 
+- var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
+- var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
 :marked
-  And finally, we import the `HeroSearchComponent` and add it to the `declarations` !{_array} in
-  `app.module.ts`.
+  And finally, we import the `HeroSearchComponent` from `'./hero-search.component.ts'` 
+  and add it to the `!{_declarations}` !{_array}:
   
-  最后，导入`HeroSearchComponent`并将其添加到`app.module.ts`的`declarations`数组中。
-
-+makeExcerpt('app/app.module.2.ts', 'hero-search-declaration')
+  最后，从`'./hero-search.component.ts'` 导入`HeroSearchComponent`并将其添加到`declarations`数组中。
+  
++makeExcerpt(declFile, 'search')
 
 :marked
   Run the app again, go to the *Dashboard*, and enter some text in the search box below the hero tiles.
@@ -909,7 +927,7 @@ block filetree
         .file hero-search.component.css (new)
         .file hero-search.component.ts (new)
         .file hero-search.service.ts (new)
-        .file rxjs-operators.ts
+        .file rxjs-extensions.ts
         .file hero.service.ts
         .file heroes.component.css
         .file heroes.component.html
@@ -921,7 +939,7 @@ block filetree
       .file index.html
       .file package.json
       .file styles.css
-      .file systemjs.config.json
+      .file systemjs.config.js
       .file tsconfig.json
       .file typings.json
 
@@ -991,12 +1009,11 @@ block file-summary
     toh-6/ts/app/hero-search.component.ts,
     toh-6/ts/app/hero-search.component.html,
     toh-6/ts/app/hero-search.component.css,
-    toh-6/ts/app/rxjs-operators.ts`,
+    toh-6/ts/app/rxjs-extensions.ts`,
     null,
     `hero-search.service.ts,
     hero-search.component.ts,
-    hero-search.service.html,
+    hero-search.component.html,
     hero-search.component.css,
-    hero-search.component.css,
-    rxjs-operators.ts`
+    rxjs-extensions.ts`
   )
diff --git a/pubspec.yaml b/pubspec.yaml
index ce4dd88f48..624e03aed8 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -4,7 +4,7 @@ version: 0.0.1
 environment:
   sdk: '>=1.13.0 <2.0.0'
 dependencies:
-  angular2: 2.0.0-beta.18
+  angular2: 2.0.0-beta.20
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
 transformers:
diff --git a/scripts/before-install.sh b/scripts/before-install.sh
index b99455e910..84b7ff8035 100755
--- a/scripts/before-install.sh
+++ b/scripts/before-install.sh
@@ -2,13 +2,11 @@
 
 set -e -o pipefail
 
-./scripts/env-info-and-check.sh
+[[ -z "$NGIO_ENV_DEFS" ]] && . ./scripts/env-set.sh
+[[ -n "$TRAVIS" ]] && . ./scripts/env-info-and-check.sh
 
-if [[ 0 ]]; then
-    # Doesn't seem to be necessary. Disabling.
-    travis_fold start install.globals
+if [ -z "$TRAVIS" ]; then
     set -x
     npm install -g gulp --no-optional
     set +x
-    travis_fold end install.globals
 fi
diff --git a/scripts/cache.sh b/scripts/cache.sh
new file mode 100755
index 0000000000..ec52334567
--- /dev/null
+++ b/scripts/cache.sh
@@ -0,0 +1,76 @@
+#!/usr/bin/env bash
+
+set -e -o pipefail
+
+BASE="public/docs/ts"
+LATEST="$BASE/latest"
+CACHE="$BASE/_cache"
+
+FILES="
+guide/architecture.jade
+guide/attribute-directives.jade
+guide/component-styles.jade
+guide/dependency-injection.jade
+guide/displaying-data.jade
+guide/hierarchical-dependency-injection.jade
+guide/lifecycle-hooks.jade
+guide/pipes.jade
+guide/security.jade
+guide/server-communication.jade
+guide/structural-directives.jade
+guide/template-syntax.jade
+glossary.jade
+quickstart.jade
+tutorial/toh-pt5.jade
+tutorial/toh-pt6.jade"
+
+function cacheRefresh() {
+    local FILE_PATTERN="*"
+    if [[ -n "$1" ]]; then
+        FILE_PATTERN="$1"
+    else
+        echo "Argument missing: specify shell file glob pattern of files to be refreshed."
+        exit 1;
+    fi
+
+    local allFound=true;
+    
+    for f in $FILES; do
+        local srcPath="$LATEST/$f";
+        local destPath="$CACHE/$f";
+        local destDir=`dirname $destPath`;
+        if [[ -e $srcPath ]]; then
+            [[ -d "$destDir" ]] || (set -x; mkdir $destDir);
+            case "$f" in
+                ($FILE_PATTERN)
+                    (set -x; cp $srcPath $destPath);;
+                (*)
+                    echo "SKIPPED $f";;
+            esac
+        else
+            echo Cannot find $srcPath
+            allFound=false;
+        fi
+    done
+
+    [[ $allFound ]] || exit 1;
+}
+
+function cacheDiff() {
+    diff -qr -x "_*.*" "$CACHE/" "$LATEST/" | \
+        grep -v "^Only in"
+}
+
+function usage() {
+    echo "Usage: cache.sh [-d | -l | -r pattern]"
+    echo "  -d      diff cache and latest subdirectories"
+    echo "  -l      list files subject to caching"
+    echo "  -r pat  refresh files in cache matching pattern"
+}
+
+case "$1" in
+    (-r)    shift; cacheRefresh $@;;
+    (-d)    shift; cacheDiff $@;;
+    (-l)    shift; printf "$FILES\n\n";;
+    (*)     usage;
+esac
diff --git a/scripts/env-info-and-check.sh b/scripts/env-info-and-check.sh
index c919602f10..3442dc80e1 100755
--- a/scripts/env-info-and-check.sh
+++ b/scripts/env-info-and-check.sh
@@ -2,6 +2,8 @@
 
 set -e -o pipefail
 
+[[ -z "$NGIO_ENV_DEFS" ]] && . ./scripts/env-set.sh
+
 travis_fold start env_info
 echo ENVIRONMENT INFO
 travis_fold start env_info.path
@@ -11,7 +13,7 @@ echo
 travis_fold end env_info.path
 travis_fold start env_info.home
 echo Home: $HOME
-ls ~ -la
+ls -la ~
 echo 
 travis_fold end env_info.home
 travis_fold start env_info.pwd
diff --git a/scripts/env-set.sh b/scripts/env-set.sh
index 8341107a8c..89a3e5392e 100644
--- a/scripts/env-set.sh
+++ b/scripts/env-set.sh
@@ -3,7 +3,7 @@
 if [[ -z "$NGIO_ENV_DEFS" ]]; then
     export ANSI_YELLOW="\033[33;1m"
     export ANSI_RESET="\033[0m"
-    echo -e "${ANSI_YELLOW}Setting environment variables from scripts/env.sh${ANSI_RESET}"
+    echo -e "${ANSI_YELLOW}Setting environment variables from scripts/env-set.sh${ANSI_RESET} "
 
     export NGIO_ENV_DEFS=1
 
@@ -12,7 +12,7 @@ if [[ -z "$NGIO_ENV_DEFS" ]]; then
 
     if [ ! $(type -t travis_fold) ]; then
         # In case this is being run locally. Turn travis_fold into a noop.
-        travis_fold () { return; }
+        travis_fold () { true; }
         # Alternative definition:
         # travis_fold () { echo -en "travis_fold:${1}:${2}"; }
     fi
diff --git a/scripts/refresh-cache.sh b/scripts/refresh-cache.sh
deleted file mode 100755
index dccd79016f..0000000000
--- a/scripts/refresh-cache.sh
+++ /dev/null
@@ -1,44 +0,0 @@
-#!/usr/bin/env bash
-
-set -e -o pipefail
-
-BASE="public/docs/ts"
-LATEST="$BASE/latest"
-CACHE="$BASE/_cache"
-
-FILES="
-guide/architecture.jade
-guide/attribute-directives.jade
-guide/component-styles.jade
-guide/dependency-injection.jade
-guide/displaying-data.jade
-guide/hierarchical-dependency-injection.jade
-guide/lifecycle-hooks.jade
-guide/pipes.jade
-guide/security.jade
-guide/server-communication.jade
-guide/structural-directives.jade
-guide/template-syntax.jade
-quickstart.jade
-tutorial/toh-pt6.jade"
-
-function main() {
-    local allFound=true;
-    
-    for f in $FILES; do
-        local srcPath="$LATEST/$f";
-        local destPath="$CACHE/$f";
-        local destDir=`dirname $destPath`;
-        if [[ -e $srcPath ]]; then
-            [[ -d "$destDir" ]] || (set -x; mkdir $destDir);
-            (set -x; cp $srcPath $destPath)
-        else
-            echo Cannot find $srcPath
-            allFound=false;
-        fi
-    done
-
-    [[ $allFound ]] || exit 1;
-}
-    
-main;
diff --git a/tools/api-builder/dart-package/test.js b/tools/api-builder/dart-package/test.js
index 22ffb7f73d..bba07a62b9 100644
--- a/tools/api-builder/dart-package/test.js
+++ b/tools/api-builder/dart-package/test.js
@@ -14,7 +14,7 @@ const apiDocPath = path.join(DOCS_PATH, 'dart/latest/api');
 
 dartPkg.config(function (dartPkgConfigInfo) {
     dartPkgConfigInfo.ngIoDartApiDocPath = apiDocPath;
-    dartPkgConfigInfo.ngDartDocPath = path.join(ANGULAR_IO_PROJECT_PATH, '../ngdart/doc/api');
+    dartPkgConfigInfo.ngDartDocPath = path.join(ANGULAR_IO_PROJECT_PATH, '../angular-dart/docs/api');
 });
 
 const dgeni = new Dgeni([dartPkg]);
diff --git a/tools/dart-api-builder/dab.js b/tools/dart-api-builder/dab.js
index b314719f02..ea1c5b946d 100644
--- a/tools/dart-api-builder/dab.js
+++ b/tools/dart-api-builder/dab.js
@@ -46,25 +46,53 @@ module.exports = function dabFactory(ngIoProjPath) {
         log.info(containerName, 'wrote', Object.keys(dataMap).length, 'entries to', dataFilePath);
     }
 
+    function _adjustDocsRelativeLinks($, div) {
+        // Omit leading https://angular.io so links work for local test sites.
+        const urlToDocs = '/docs/dart/latest/';
+        const urlToExamples = 'http://angular-examples.github.io/';
+        const docsLinkList = div.find('a[href^="docs/"],a[href^="examples/"]');
+        docsLinkList.each((i, elt) => {
+            const href = $(elt).attr('href');
+            const matches = href.match(/(\w+)\/(.*)$/);
+            // TODO: support links to chapters of other languages, e.g., 'docs/ts/latest/...'.
+            const urlStart = matches[1] === 'docs' ? urlToDocs : urlToExamples;
+            const absHref = urlStart + matches[2];
+            log.info(`Found angular.io relative link: ${href} --> ${absHref}`);
+            $(elt).attr('href', absHref);
+        });
+    }
+
     function _insertExampleFragments(enclosedByName, eltId, $, div) {
-        const fragDir = path.join(dartPkgConfigInfo.ngIoDartApiDocPath, '../../../_fragments/_api');
+        const fragDirBase = path.join(dartPkgConfigInfo.ngIoDartApiDocPath, '../../../_fragments/');
         const exList = div.find('p:contains("{@example")');
         exList.each((i, elt) => {
             const text = $(elt).text();
             log.debug(`Found example: ${enclosedByName} ${eltId}`, text);
-            const matches = text.match(/{@example\s+([^\s]+)(\s+region=[\'\"]?(\w+)[\'\"]?)?\s*}/);
+            const matches = text.match(/^\s*{@example\s+([^\s]+)(\s+region=[\'\"]?([-\w]+)[\'\"]?)?\s*}([\s\S]*)$/);
             if (!matches) {
                 log.warn(enclosedByName, eltId, 'has an invalidly formed @example tag:', text);
                 return true;
             }
+            // const [, exRelPath, /*regionTagAndValue*/, region, rest] = matches;
+            const rest = matches[4].trim();
+            if (rest) log.warn(enclosedByName, eltId, '@example must be the only element in a paragraph, but found:', text);                
             const exRelPath = matches[1];
             const region = matches[3];
 
-            const dir = path.dirname(exRelPath)
+            let exRelPathParts = path.dirname(exRelPath).split(path.sep);
+            let fragDir;
+            if (exRelPathParts[0] === 'docs') {
+                // Path is to a docs example, not an API example.
+                const exampleName = exRelPathParts[1];
+                fragDir = path.join(fragDirBase, exampleName, 'dart');
+                exRelPathParts = exRelPathParts.slice(2);
+            } else {
+                fragDir = path.join(fragDirBase, '_api');
+            }
             const extn = path.extname(exRelPath);
             const baseName = path.basename(exRelPath, extn);
             const fileNameNoExt = baseName + (region ? `-${region}` : '')
-            const exFragPath = path.resolve(fragDir, dir, `${fileNameNoExt}${extn}.md`);
+            const exFragPath = path.resolve(fragDir, ...exRelPathParts, `${fileNameNoExt}${extn}.md`);
             if (!fs.existsSync(exFragPath)) {
                 log.warn('Fragment not found:', exFragPath);
                 return true;
@@ -80,7 +108,8 @@ module.exports = function dabFactory(ngIoProjPath) {
     function _extractAndWrapInCodeTags(md) {
         const lines = md.split('\n');
         // Drop first and last lines that are the code markdown tripple ticks (and last \n):
-        lines.shift(); lines.pop(); lines.pop();
+        lines.shift();
+        while (lines && lines.pop().trim() !== '```') {}
         const code = lines.map((line) => encoder.htmlEncode(line)).join('\n');
         // TS uses format="linenums"; removing that for now. 
         return `<code-example language="dart">${code}\n</code-example>`;
@@ -98,6 +127,7 @@ module.exports = function dabFactory(ngIoProjPath) {
         const div = $('div.body.container');
         $('div.sidebar-offcanvas-left').remove();
         const baseNameNoExtn = path.basename(e.path, '.html');
+        _adjustDocsRelativeLinks($, div);
         _insertExampleFragments(e.enclosedByQualifiedName, baseNameNoExtn, $, div);
 
         const outFileNoExtn = path.join(destDirPath, baseNameNoExtn);
diff --git a/tools/dart-api-builder/index.js b/tools/dart-api-builder/index.js
index 4d2a0618ef..0806209fa5 100644
--- a/tools/dart-api-builder/index.js
+++ b/tools/dart-api-builder/index.js
@@ -9,7 +9,8 @@ var PROJECT_PATH = path.resolve(__dirname, "../..");
 var PUBLIC_PATH = path.resolve(PROJECT_PATH, 'public');
 var DOCS_PATH = path.resolve(PUBLIC_PATH, 'docs');
 var ANGULAR_REPO_PATH = path.resolve(__dirname, '../../../angular-dart');
-var ANGULAR2_DOCS_PATH = path.resolve(ANGULAR_REPO_PATH, 'docs');
+// The 'docs' folder is actually named 'doc' for angular2 Dart.
+var ANGULAR2_DOCS_PATH = path.resolve(ANGULAR_REPO_PATH, 'doc');
 var NG_IO_PKG_PATH = path.resolve(__dirname, "../api-builder/angular.io-package");
 
 function requireNgIoPkg(_path) { return require(path.resolve(NG_IO_PKG_PATH, _path)); }