diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade
index 1786e7fd8a..550330210c 100644
--- a/public/_includes/_util-fns.jade
+++ b/public/_includes/_util-fns.jade
@@ -2,7 +2,7 @@
 
 //- _docsFor: used to identify the language this version of the docs if for;
 //- Should be one of: 'ts', 'dart' or 'js'. Set in lang specific _util-fns file.
-- var _docsFor = ''; 
+- var _docsFor = '';
 
 //- Should match `_docsFor`, but in this case provides the full capitalized
 //- name of the language.
@@ -29,6 +29,10 @@
 - var _Promise = 'Promise';
 - var _Observable = 'Observable';
 
+//- Location of sample code
+- var _liveLink = 'live link';
+
+
 //- Used to prefix identifiers that are private. In Dart this will be '_'.
 - var _priv = '';
 
@@ -46,7 +50,7 @@ mixin adjExPath(path)
     | #{adjustExamplePath(path)}
   else
     | #{path}
-  
+
 mixin includeShared(filePath, region)
   - var newPath = translatePath(filePath, region);
   !=partial(newPath)
@@ -68,13 +72,43 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
       .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     != styleString(frag, stylePatterns)
-    
-//- Like makeExample, but doesn't show line numbers and
-//- title is appened with `(excerpt)` if it doesn't already
-//- end with a parenthetical remark.
-mixin makeExcerpt(_filePath, region, _title, stylePatterns)
-  - if (_title && !_title.match(/\([\w ]+\)$/)) _title = _title + ' (excerpt)';
-  +makeExample(_filePath, region, _title, stylePatterns)(format='.')
+
+//- Like makeExample, but the first argument is a path that is
+//- relative to the project root. Unless title is defined,
+//- the project relative path will be used.
+mixin makeProjExample(projRootRelativePath, region, title, stylePatterns)
+  - var relPath = projRootRelativePath.trim();
+  - var filePath = getExampleName() + '/ts/' + relPath;
+  - if (!title) {
+  -   // Is path like styles.1.css? Then drop the '.1' qualifier:
+  -   var matches = relPath.match(/^(.*)\.\d(\.\w+)$/);
+  -   title = matches ? matches[1] + matches[2] : relPath;
+  - }
+  +makeExample(filePath, region, title, stylePatterns)
+
+//- Like makeExample, but doesn't show line numbers, and the first
+//- argument is a path that is relative to the example project root.
+//- Unless title is defined, the project relative path will be used.
+//- Title will always end with a phrase in parentheses; if no such
+//- ending is given, then the title will be suffixed with
+//- either "(excerpt)", or "(#{region})" when region is defined.
+mixin makeExcerpt(projRootRelativePath, region, title, stylePatterns)
+  - var relPath = projRootRelativePath.trim();
+  - var filePath = getExampleName() + '/ts/' + relPath;
+  - if (!title) {
+  -   // Is path like styles.1.css? Then drop the '.1' qualifier:
+  -   var matches = relPath.match(/^(.*)\.\d(\.\w+)$/);
+  -   title = matches ? matches[1] + matches[2] : relPath;
+  - }
+  - var excerpt = region || 'excerpt';
+  - if (title && !title.match(/\([\w ]+\)$/)) title = title + ' (' + excerpt + ')';
+  +makeExample(filePath, region, title, stylePatterns)(format='.')
+
+//- Extract the doc example name from `current`.
+- var getExampleName = function() {
+-   var dir = current.path[current.path.length - 1];
+-   return dir == 'latest' ? current.source : dir;
+- };
 
 mixin makeTabs(filePaths, regions, tabNames, stylePatterns)
   - filePaths = strSplit(filePaths);
@@ -134,7 +168,7 @@ script.
     el.style.display = isVerbose ? 'block' : 'none';
     var el = document.querySelector('button.verbose.on');
     el.style.display = isVerbose ? 'none' : 'block';
-    
+
     CCSStylesheetRuleStyle('main','.l-verbose-section', 'display',
       isVerbose ? 'block' : 'none');
   }
diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html
index e9026e0ffc..e365c39f02 100644
--- a/public/docs/_examples/architecture/ts/index.html
+++ b/public/docs/_examples/architecture/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/attribute-directives/ts/index.html b/public/docs/_examples/attribute-directives/ts/index.html
index 6988ae496a..197f1a8280 100644
--- a/public/docs/_examples/attribute-directives/ts/index.html
+++ b/public/docs/_examples/attribute-directives/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
index f6c564313f..ee2eb6fdec 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
@@ -10,7 +10,7 @@
     <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/tutorial/e2e-spec.js b/public/docs/_examples/cb-barrels/e2e-spec.js
similarity index 99%
rename from public/docs/_examples/tutorial/e2e-spec.js
rename to public/docs/_examples/cb-barrels/e2e-spec.js
index f35fcd1287..a109efb5a8 100644
--- a/public/docs/_examples/tutorial/e2e-spec.js
+++ b/public/docs/_examples/cb-barrels/e2e-spec.js
@@ -4,7 +4,6 @@ describe('Tutorial', function () {
     browser.get('');
   });
 
-
   function getPageStruct() {
     hrefEles = element.all(by.css('my-app a'));
 
diff --git a/public/docs/_examples/tutorial/ts/app/app.component.css b/public/docs/_examples/cb-barrels/ts/app/app.component.css
similarity index 100%
rename from public/docs/_examples/tutorial/ts/app/app.component.css
rename to public/docs/_examples/cb-barrels/ts/app/app.component.css
diff --git a/public/docs/_examples/tutorial/ts/app/app.component.ts b/public/docs/_examples/cb-barrels/ts/app/app.component.ts
similarity index 81%
rename from public/docs/_examples/tutorial/ts/app/app.component.ts
rename to public/docs/_examples/cb-barrels/ts/app/app.component.ts
index 8b0e0ad8da..926eafc1c9 100644
--- a/public/docs/_examples/tutorial/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-barrels/ts/app/app.component.ts
@@ -1,12 +1,11 @@
+// #docregion imports
 import { Component } from '@angular/core';
 import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
-
-import { HeroesComponent } from './heroes.component';
-import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesComponent, HeroDetailComponent, HeroService } from './heroes';
 import { DashboardComponent } from './dashboard.component';
-import { HeroService } from './hero.service';
 
 @Component({
+// #enddocregion
   selector: 'my-app',
   template: `
     <h1>{{title}}</h1>
@@ -27,5 +26,5 @@ import { HeroService } from './hero.service';
   {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
 ])
 export class AppComponent {
-  title = 'Tour of Heroes';
+  title = 'Tour of Heroes - Barrels';
 }
diff --git a/public/docs/_examples/cb-barrels/ts/app/dashboard.component.css b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.css
new file mode 100644
index 0000000000..82349dc658
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.css
@@ -0,0 +1,60 @@
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+  padding: 20px;
+  text-align: center;
+  color: #eee;
+  max-height: 120px;
+  min-width: 120px;
+  background-color: #607D8B;
+  border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+  .module {
+    font-size: 10px;
+    max-height: 75px; }
+}
+@media (max-width: 1024px) {
+  .grid {
+    margin: 0;
+  }
+  .module {
+    min-width: 60px;
+  }
+}
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.html b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.html
similarity index 100%
rename from public/docs/_examples/tutorial/ts/app/dashboard.component.html
rename to public/docs/_examples/cb-barrels/ts/app/dashboard.component.html
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts
similarity index 87%
rename from public/docs/_examples/tutorial/ts/app/dashboard.component.ts
rename to public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts
index f08e40a6e1..1239207374 100644
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts
@@ -1,10 +1,10 @@
+// #docregion imports
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { Hero, HeroService } from './heroes';
 
 @Component({
+// #enddocregion
   selector: 'my-dashboard',
   templateUrl: 'app/dashboard.component.html',
   styleUrls: ['app/dashboard.component.css']
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.css b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css
similarity index 100%
rename from public/docs/_examples/tutorial/ts/app/hero-detail.component.css
rename to public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000000..deb47fb3e5
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html
@@ -0,0 +1,10 @@
+<div *ngIf="hero">
+  <h2>{{hero.name}} details!</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="hero.name" placeholder="name"/>
+  </div>
+  <button (click)="goBack()">Back</button>
+</div>
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts
similarity index 69%
rename from public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
rename to public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts
index 0a168944c0..c945a8f6dd 100644
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts
@@ -1,13 +1,13 @@
+// #docregion imports
 import { Component, OnInit } from '@angular/core';
 import { RouteParams } from '@angular/router-deprecated';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { HeroService, Hero } from '../shared';
 
 @Component({
+// #enddocregion
   selector: 'my-hero-detail',
-  templateUrl: 'app/hero-detail.component.html',
-  styleUrls: ['app/hero-detail.component.css']
+  templateUrl: 'app/heroes/hero-detail/hero-detail.component.html',
+  styleUrls: ['app/heroes/hero-detail/hero-detail.component.css']
 })
 export class HeroDetailComponent implements OnInit {
   hero: Hero;
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts
new file mode 100644
index 0000000000..e7552e28b4
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts
@@ -0,0 +1,2 @@
+// #docregion
+export * from './hero-detail.component';
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.css b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css
similarity index 100%
rename from public/docs/_examples/tutorial/ts/app/heroes.component.css
rename to public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.html b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html
similarity index 100%
rename from public/docs/_examples/tutorial/ts/app/heroes.component.html
rename to public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts
similarity index 72%
rename from public/docs/_examples/tutorial/ts/app/heroes.component.ts
rename to public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts
index 1081aab2bd..6e3b2848f2 100644
--- a/public/docs/_examples/tutorial/ts/app/heroes.component.ts
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts
@@ -1,13 +1,14 @@
+// #docregion imports
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
-import { HeroService } from './hero.service';
-import { HeroDetailComponent } from './hero-detail.component';
-import { Hero } from './hero';
+import { HeroService, Hero } from './shared';
+import { HeroDetailComponent } from './hero-detail'
 
 @Component({
+// #enddocregion
   selector: 'my-heroes',
-  templateUrl: 'app/heroes.component.html',
-  styleUrls: ['app/heroes.component.css'],
+  templateUrl: 'app/heroes/heroes.component.html',
+  styleUrls: ['app/heroes/heroes.component.css'],
   directives: [HeroDetailComponent]
 })
 export class HeroesComponent implements OnInit {
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/index.ts
new file mode 100644
index 0000000000..45fa911acd
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/index.ts
@@ -0,0 +1,4 @@
+// #docregion
+export * from './hero-detail';
+export * from './heroes.component';
+export * from './shared';
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..ce714d1c00
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+export class Hero {
+  id: number;
+  name: string;
+}
+
diff --git a/public/docs/_examples/tutorial/ts/app/hero.service.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts
similarity index 89%
rename from public/docs/_examples/tutorial/ts/app/hero.service.ts
rename to public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts
index 7d5c08de07..11d60b97a6 100644
--- a/public/docs/_examples/tutorial/ts/app/hero.service.ts
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts
@@ -1,9 +1,10 @@
+// #docregion imports
 import { Injectable } from '@angular/core';
-
 import { HEROES }     from './mock-heroes';
 
 @Injectable()
 export class HeroService {
+// #enddocregion
   getHeroes() {
     return Promise.resolve(HEROES);
   }
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts
new file mode 100644
index 0000000000..27516fdedd
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './hero.model';
+export * from './hero.service';
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts
new file mode 100644
index 0000000000..80d661a439
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts
@@ -0,0 +1,17 @@
+// #docregion imports
+import { Hero } from './hero.model';
+
+export var HEROES: Hero[] = [
+// #enddocregion
+
+  {"id": 11, "name": "Mr. Nice"},
+  {"id": 12, "name": "Narco"},
+  {"id": 13, "name": "Bombasto"},
+  {"id": 14, "name": "Celeritas"},
+  {"id": 15, "name": "Magneta"},
+  {"id": 16, "name": "RubberMan"},
+  {"id": 17, "name": "Dynama"},
+  {"id": 18, "name": "Dr IQ"},
+  {"id": 19, "name": "Magma"},
+  {"id": 20, "name": "Tornado"}
+];
diff --git a/public/docs/_examples/tutorial/ts/app/main.ts b/public/docs/_examples/cb-barrels/ts/app/main.ts
similarity index 75%
rename from public/docs/_examples/tutorial/ts/app/main.ts
rename to public/docs/_examples/cb-barrels/ts/app/main.ts
index 0e07c5e213..09288fb174 100644
--- a/public/docs/_examples/tutorial/ts/app/main.ts
+++ b/public/docs/_examples/cb-barrels/ts/app/main.ts
@@ -1,10 +1,11 @@
+// #docregion imports
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
-
-import { HeroService } from './hero.service';
+import { HeroService } from './heroes';
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent, [
+// #enddocregion
   ROUTER_PROVIDERS,
   HeroService
 ]);
diff --git a/public/docs/_examples/tutorial/ts/example-config.json b/public/docs/_examples/cb-barrels/ts/example-config.json
similarity index 100%
rename from public/docs/_examples/tutorial/ts/example-config.json
rename to public/docs/_examples/cb-barrels/ts/example-config.json
diff --git a/public/docs/_examples/cb-barrels/ts/index.html b/public/docs/_examples/cb-barrels/ts/index.html
new file mode 100644
index 0000000000..65c9742a23
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular 2 Tour of Heroes - Barrels</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <!--#docregion packages  -->
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.config({
+        packages: {
+          'app/heroes': {main: 'index.js', defaultExtension: 'js'},
+          'app/heroes/hero-detail': {main: 'index.js', defaultExtension: 'js'},
+          'app/heroes/shared': {main: 'index.js', defaultExtension: 'js'}
+        }
+      });
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+    <!--#enddocregion packages  -->
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>
diff --git a/public/docs/_examples/cb-barrels/ts/plnkr.json b/public/docs/_examples/cb-barrels/ts/plnkr.json
new file mode 100644
index 0000000000..5f0eca25e7
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "Cookbook: Barrels",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["cookbook", "barrels"]
+}
diff --git a/public/docs/_examples/cb-component-communication/ts/index.html b/public/docs/_examples/cb-component-communication/ts/index.html
index 20c75e04a5..51adcdaf23 100644
--- a/public/docs/_examples/cb-component-communication/ts/index.html
+++ b/public/docs/_examples/cb-component-communication/ts/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="demo.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-dependency-injection/ts/index.html b/public/docs/_examples/cb-dependency-injection/ts/index.html
index 744fd81a26..ba1d2761e1 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/index.html
+++ b/public/docs/_examples/cb-dependency-injection/ts/index.html
@@ -11,7 +11,7 @@
     <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-dynamic-form/ts/index.html b/public/docs/_examples/cb-dynamic-form/ts/index.html
index 33998c478e..ec3e1cbbb2 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/index.html
+++ b/public/docs/_examples/cb-dynamic-form/ts/index.html
@@ -11,7 +11,7 @@
     <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-set-document-title/ts/index.html b/public/docs/_examples/cb-set-document-title/ts/index.html
index f5289d7eb3..8f1ad96812 100644
--- a/public/docs/_examples/cb-set-document-title/ts/index.html
+++ b/public/docs/_examples/cb-set-document-title/ts/index.html
@@ -15,7 +15,7 @@
   <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
index fb9d760584..b1c1449fb2 100644
--- a/public/docs/_examples/cb-ts-to-js/js/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html
index 80fa73d326..005fe67c31 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/index.html
+++ b/public/docs/_examples/cb-ts-to-js/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/component-styles/ts/index.html b/public/docs/_examples/component-styles/ts/index.html
index 45dd7c73ff..9345f5b221 100644
--- a/public/docs/_examples/component-styles/ts/index.html
+++ b/public/docs/_examples/component-styles/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/dependency-injection/ts/index.html b/public/docs/_examples/dependency-injection/ts/index.html
index 74708a8852..74f8ed8894 100644
--- a/public/docs/_examples/dependency-injection/ts/index.html
+++ b/public/docs/_examples/dependency-injection/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/displaying-data/ts/index.html b/public/docs/_examples/displaying-data/ts/index.html
index 7b96075c09..e74be1c5de 100644
--- a/public/docs/_examples/displaying-data/ts/index.html
+++ b/public/docs/_examples/displaying-data/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/forms/js/index.html b/public/docs/_examples/forms/js/index.html
index e214ee3ac1..55b7d2ba1d 100644
--- a/public/docs/_examples/forms/js/index.html
+++ b/public/docs/_examples/forms/js/index.html
@@ -15,7 +15,7 @@
     <!-- #enddocregion styles -->
 
    <!-- IE required polyfill -->
-   <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+   <script src="node_modules/core-js/client/shim.min.js"></script>
 
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/forms/ts/index.html b/public/docs/_examples/forms/ts/index.html
index ac457e8f82..4df2d32d46 100644
--- a/public/docs/_examples/forms/ts/index.html
+++ b/public/docs/_examples/forms/ts/index.html
@@ -15,7 +15,7 @@
      <!-- #enddocregion styles -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
index a4109a1625..91d2dc8894 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/homepage-hello-world/ts/index.html b/public/docs/_examples/homepage-hello-world/ts/index.html
index 246cecc85d..794935d3bb 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/homepage-tabs/ts/index.html b/public/docs/_examples/homepage-tabs/ts/index.html
index 9abb036d3a..1fe2ebc8ba 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/homepage-todo/ts/index.html b/public/docs/_examples/homepage-todo/ts/index.html
index 738fed01b9..2bddce017c 100644
--- a/public/docs/_examples/homepage-todo/ts/index.html
+++ b/public/docs/_examples/homepage-todo/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/lifecycle-hooks/ts/index.html b/public/docs/_examples/lifecycle-hooks/ts/index.html
index 41ad4848b0..6fa866c6e6 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/index.html
+++ b/public/docs/_examples/lifecycle-hooks/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="sample.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index fa3fa42886..b7b8afc084 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -31,11 +31,13 @@
     "@angular/router": "2.0.0-rc.1",
     "@angular/router-deprecated": "2.0.0-rc.1",
     "@angular/upgrade": "2.0.0-rc.1",
+
     "systemjs": "0.19.27",
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
+
     "angular2-in-memory-web-api": "0.0.7",
     "bootstrap": "^3.3.6"
   },
diff --git a/public/docs/_examples/pipes/ts/index.html b/public/docs/_examples/pipes/ts/index.html
index 445a3d9c1f..0b1a46f328 100644
--- a/public/docs/_examples/pipes/ts/index.html
+++ b/public/docs/_examples/pipes/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html
index 0f9088eaf3..bec42f9dea 100644
--- a/public/docs/_examples/quickstart/js/index.html
+++ b/public/docs/_examples/quickstart/js/index.html
@@ -10,7 +10,7 @@
     <!-- #docregion libraries -->
     <!-- #docregion ie-polyfills -->
     <!-- IE required polyfill -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
     <!-- #enddocregion ie-polyfills -->
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index e5e96f785e..30801c9e48 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -17,6 +17,7 @@
     "@angular/router-deprecated":  "2.0.0-rc.1",
     "@angular/upgrade":  "2.0.0-rc.1",
 
+    "core-js": "^2.4.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12",
diff --git a/public/docs/_examples/quickstart/ts/app/main.ts b/public/docs/_examples/quickstart/ts/app/main.ts
index 433fd05c80..2aede345e9 100644
--- a/public/docs/_examples/quickstart/ts/app/main.ts
+++ b/public/docs/_examples/quickstart/ts/app/main.ts
@@ -1,8 +1,8 @@
 // #docregion
 import { bootstrap }    from '@angular/platform-browser-dynamic';
 
-// #docregion app-component
+// #docregion import
 import { AppComponent } from './app.component';
-// #enddocregion app-component
+// #enddocregion import
 
 bootstrap(AppComponent);
diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html
index b1be60a776..a0a64d1122 100644
--- a/public/docs/_examples/quickstart/ts/index.html
+++ b/public/docs/_examples/quickstart/ts/index.html
@@ -11,7 +11,7 @@
     <!-- #docregion libraries -->
     <!-- #docregion ie-polyfills -->
      <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
     <!-- #enddocregion ie-polyfills -->
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index 8be1e8b8c6..88768b56f2 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -22,7 +22,7 @@
     "@angular/upgrade":  "2.0.0-rc.1",
 
     "systemjs": "0.19.27",
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
index 68881c6a3f..6f23f1dade 100644
--- a/public/docs/_examples/quickstart/ts/systemjs.config.1.js
+++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
@@ -1,12 +1,17 @@
 // #docregion
+/**
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ */
 (function(global) {
 
   // map tells the System loader where to look for things
   var map = {
     'app':                        'app', // 'dist',
-    'rxjs':                       'node_modules/rxjs',
+
+    '@angular':                   'node_modules/@angular',
     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-    '@angular':                   'node_modules/@angular'
+    'rxjs':                       'node_modules/rxjs'
   };
 
   // packages tells the System loader how to load when no filename and/or no extension
@@ -16,22 +21,21 @@
     'angular2-in-memory-web-api': { defaultExtension: 'js' },
   };
 
-  var packageNames = [
-    '@angular/common',
-    '@angular/compiler',
-    '@angular/core',
-    '@angular/http',
-    '@angular/platform-browser',
-    '@angular/platform-browser-dynamic',
-    '@angular/router',
-    '@angular/router-deprecated',
-    '@angular/testing',
-    '@angular/upgrade',
+  var ngPackageNames = [
+    'common',
+    'compiler',
+    'core',
+    'http',
+    'platform-browser',
+    'platform-browser-dynamic',
+    'router',
+    'router-deprecated',
+    'upgrade',
   ];
 
-  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
-  packageNames.forEach(function(pkgName) {
-    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  // Add package entries for angular packages
+  ngPackageNames.forEach(function(pkgName) {
+    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
   });
 
   var config = {
diff --git a/public/docs/_examples/quickstart/ts/typings.1.json b/public/docs/_examples/quickstart/ts/typings.1.json
index b5324f4199..ab3d27d712 100644
--- a/public/docs/_examples/quickstart/ts/typings.1.json
+++ b/public/docs/_examples/quickstart/ts/typings.1.json
@@ -1,6 +1,6 @@
 {
   "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
     "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
diff --git a/public/docs/_examples/router-deprecated/ts/index.1.html b/public/docs/_examples/router-deprecated/ts/index.1.html
index 7a58c4ec50..53a6d4832f 100644
--- a/public/docs/_examples/router-deprecated/ts/index.1.html
+++ b/public/docs/_examples/router-deprecated/ts/index.1.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router-deprecated/ts/index.2.html b/public/docs/_examples/router-deprecated/ts/index.2.html
index 83c06e1af6..d71bd929cb 100644
--- a/public/docs/_examples/router-deprecated/ts/index.2.html
+++ b/public/docs/_examples/router-deprecated/ts/index.2.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router-deprecated/ts/index.3.html b/public/docs/_examples/router-deprecated/ts/index.3.html
index 2a5fc893ae..abbb771beb 100644
--- a/public/docs/_examples/router-deprecated/ts/index.3.html
+++ b/public/docs/_examples/router-deprecated/ts/index.3.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router-deprecated/ts/index.html b/public/docs/_examples/router-deprecated/ts/index.html
index 9ac268d05f..35a6ddfc73 100644
--- a/public/docs/_examples/router-deprecated/ts/index.html
+++ b/public/docs/_examples/router-deprecated/ts/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router/ts/index.1.html b/public/docs/_examples/router/ts/index.1.html
index 6bc706e2e6..c04b769a2c 100644
--- a/public/docs/_examples/router/ts/index.1.html
+++ b/public/docs/_examples/router/ts/index.1.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router/ts/index.2.html b/public/docs/_examples/router/ts/index.2.html
index d5676ff4b5..01e521e896 100644
--- a/public/docs/_examples/router/ts/index.2.html
+++ b/public/docs/_examples/router/ts/index.2.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router/ts/index.3.html b/public/docs/_examples/router/ts/index.3.html
index 1be32f1d0d..f60cdd8163 100644
--- a/public/docs/_examples/router/ts/index.3.html
+++ b/public/docs/_examples/router/ts/index.3.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html
index 22ee1a8172..b7b5ba9f7f 100644
--- a/public/docs/_examples/router/ts/index.html
+++ b/public/docs/_examples/router/ts/index.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/server-communication/dart/example-config.json b/public/docs/_examples/server-communication/dart/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/server-communication/dart/lib/app_component.dart b/public/docs/_examples/server-communication/dart/lib/app_component.dart
new file mode 100644
index 0000000000..55c91e6e4d
--- /dev/null
+++ b/public/docs/_examples/server-communication/dart/lib/app_component.dart
@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+import "package:angular2/core.dart" show Component;
+
+import "toh/hero_list_component.dart" show HeroListComponent;
+import "wiki/wiki_component.dart" show WikiComponent;
+import "wiki/wiki_smart_component.dart" show WikiSmartComponent;
+
+@Component(
+    selector: "my-app",
+    template: '''
+      <hero-list></hero-list>
+      <my-wiki></my-wiki>
+      <my-wiki-smart></my-wiki-smart>
+    ''',
+    // #enddocregion
+    /*
+    // #docregion http-providers
+    providers: const [
+      // in-memory web api provider
+      const Provider(BrowserClient,
+          useFactory: HttpClientBackendServiceFactory, deps: const [])],
+    // #enddocregion http-providers
+    */
+    // #docregion
+    directives: const [
+      HeroListComponent,
+      WikiComponent,
+      WikiSmartComponent
+    ])
+class AppComponent {}
diff --git a/public/docs/_examples/server-communication/dart/lib/hero_data.dart b/public/docs/_examples/server-communication/dart/lib/hero_data.dart
index 50ec0fab1d..ae0480b98d 100644
--- a/public/docs/_examples/server-communication/dart/lib/hero_data.dart
+++ b/public/docs/_examples/server-communication/dart/lib/hero_data.dart
@@ -2,7 +2,7 @@
 import 'package:http/browser_client.dart';
 import 'package:http_in_memory_web_api/http_in_memory_web_api.dart';
 
-CreateDb createDb = () => {
+CreateDb _createDb = () => {
       'heroes': [
         {"id": "1", "name": "Windstorm"},
         {"id": "2", "name": "Bombasto"},
@@ -12,4 +12,4 @@ CreateDb createDb = () => {
     };
 
 BrowserClient HttpClientBackendServiceFactory() =>
-  new HttpClientInMemoryBackendService(createDb);
+  new HttpClientInMemoryBackendService(_createDb);
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
index 58fe0bb40c..23e1d6e9d7 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
+++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
@@ -9,7 +9,7 @@ import 'hero_service.dart';
 @Component(
     selector: 'hero-list',
     templateUrl: 'hero_list_component.html',
-    styles: const ['.error {color:red;}'])
+    providers: const [HeroService])
 // #docregion component
 class HeroListComponent implements OnInit {
   final HeroService _heroService;
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html
index 86e2deedd6..297ffaa6c6 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html
+++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html
@@ -1,4 +1,5 @@
 <!-- #docregion -->
+<h1>Tour of Heroes</h1>
 <h3>Heroes:</h3>
 <ul>
   <li *ngFor="let hero of heroes">
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
index 1daedc2d8c..d8d602d2e7 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
+++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
@@ -15,7 +15,9 @@ class HeroService {
   // #enddocregion endpoint, http-get
   final BrowserClient _http;
 
+  // #docregion ctor
   HeroService(this._http);
+  // #enddocregion ctor
 
   // #docregion methods, error-handling, http-get
   Future<List<Hero>> getHeroes() async {
@@ -57,6 +59,7 @@ class HeroService {
 
   Exception _handleError(dynamic e) {
     // In a real world app, we might use a remote logging infrastructure
+    // We'd also dig deeper into the error to get a better message
     print(e); // log to console instead
     return new Exception('Server error; cause: $e');
   }
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart b/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart
deleted file mode 100644
index 9c752ed730..0000000000
--- a/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart
+++ /dev/null
@@ -1,36 +0,0 @@
-// #docplaster
-// #docregion
-import 'package:angular2/core.dart';
-import 'package:http/browser_client.dart';
-
-import 'hero_list_component.dart';
-import 'hero_service.dart';
-// #enddocregion
-// #docregion in-mem-web-api
-/* ... */
-import 'package:server_communication/hero_data.dart';
-// #docregion
-
-@Component(
-    // #enddocregion in-mem-web-api
-    selector: 'my-toh',
-    // #docregion template
-    template: '''
-      <h1>Tour of Heroes</h1>
-      <hero-list></hero-list>
-    ''',
-    // #enddocregion template
-    directives: const [HeroListComponent],
-    // #enddocregion
-    // #docregion in-mem-web-api
-    /* ... */
-    // #docregion
-    providers: const [
-      HeroService,
-      // #enddocregion
-      // in-memory web api providers
-      const Provider(BrowserClient,
-          useFactory: HttpClientBackendServiceFactory)
-    // #docregion
-    ])
-class TohComponent {}
diff --git a/public/docs/_examples/server-communication/dart/pubspec.yaml b/public/docs/_examples/server-communication/dart/pubspec.yaml
index 7d36077d67..60e431bf51 100644
--- a/public/docs/_examples/server-communication/dart/pubspec.yaml
+++ b/public/docs/_examples/server-communication/dart/pubspec.yaml
@@ -12,11 +12,15 @@ dependencies:
   jsonpadding: ^0.1.0
   stream_transformers: ^0.3.0+3
   http_in_memory_web_api: ^0.0.1
+# #docregion transformers
 transformers:
 - angular2:
-    platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
-    platform_pipes: 'package:angular2/common.dart#COMMON_PIPES'
+    platform_directives:
+    - 'package:angular2/common.dart#CORE_DIRECTIVES'
+    platform_pipes:
+    - 'package:angular2/common.dart#COMMON_PIPES'
     entry_points: 'web/main.dart'
     resolved_identifiers:
         BrowserClient: 'package:http/browser_client.dart'
 - dart_to_js_script_rewriter
+# #enddocregion transformers
diff --git a/public/docs/_examples/server-communication/dart/web/index.html b/public/docs/_examples/server-communication/dart/web/index.html
index ff2918e0bd..fc365968c2 100644
--- a/public/docs/_examples/server-communication/dart/web/index.html
+++ b/public/docs/_examples/server-communication/dart/web/index.html
@@ -6,15 +6,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
 
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>
 
   <body>
-    <my-toh>ToH Loading...</my-toh>
-    <my-wiki>Wiki Loading...</my-wiki>
-    <my-wiki-smart>WikiSmart Loading...</my-wiki-smart>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/server-communication/dart/web/main.dart b/public/docs/_examples/server-communication/dart/web/main.dart
index 1b7933a87d..a66ddb454b 100644
--- a/public/docs/_examples/server-communication/dart/web/main.dart
+++ b/public/docs/_examples/server-communication/dart/web/main.dart
@@ -1,12 +1,34 @@
-// #docregion
-import 'package:angular2/platform/browser.dart';
+// #docplaster
+// #docregion final
+import 'package:angular2/core.dart' show Provider;
+// #docregion v1
+import 'package:angular2/platform/browser.dart' show bootstrap;
+// #docregion http-providers
+import 'package:http/browser_client.dart' show BrowserClient;
+// #enddocregion http-providers
 
-import 'package:server_communication/toh/toh_component.dart';
-import 'package:server_communication/wiki/wiki_component.dart';
-import 'package:server_communication/wiki/wiki_smart_component.dart';
+import 'package:server_communication/app_component.dart';
+// #enddocregion v1
+// #docregion in-mem-web-api-imports
+import "package:server_communication/hero_data.dart";
 
-main() {
-  bootstrap(TohComponent);
-  bootstrap(WikiComponent);
-  bootstrap(WikiSmartComponent);
+// #enddocregion in-mem-web-api-imports
+// #docregion in-mem-web-api-providers
+void main() {
+  bootstrap(AppComponent, const [
+    // in-memory web api provider
+    const Provider(BrowserClient,
+        useFactory: HttpClientBackendServiceFactory, deps: const [])
+    // TODO: drop `deps` once fix lands for 
+    // https://github.com/angular/angular/issues/5266
+  ]);
 }
+// #enddocregion final, in-mem-web-api-providers
+/*
+// #docregion v1
+
+void main() {
+  bootstrap(AppComponent, const [BrowserClient]);
+}
+// #enddocregion v1
+*/
diff --git a/public/docs/_examples/server-communication/dart/web/sample.css b/public/docs/_examples/server-communication/dart/web/sample.css
new file mode 100644
index 0000000000..3bb281e096
--- /dev/null
+++ b/public/docs/_examples/server-communication/dart/web/sample.css
@@ -0,0 +1 @@
+.error {color:red;}
diff --git a/public/docs/_examples/server-communication/e2e-spec.js b/public/docs/_examples/server-communication/e2e-spec.js
index 4525c9514f..98a3f1e03a 100644
--- a/public/docs/_examples/server-communication/e2e-spec.js
+++ b/public/docs/_examples/server-communication/e2e-spec.js
@@ -4,69 +4,62 @@ describe('Server Communication', function () {
     browser.get('');
   });
 
-  describe('Tour of Heroes e2e tests', function () {
-    
-    var _initialHeroCount = 4;
-    var _newHeroName = 'Mr. IQ';
-    var _heroCountAfterAdd = 5;
-    
-    it('should display ' + _initialHeroCount + ' heroes after init', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var heroListComp = myTohComp.element(by.tagName('hero-list'));
+  describe('Tour of Heroes (Observable)', function () {
+
+    var initialHeroCount = 4;
+    var newHeroName = 'Mr. IQ';
+    var heroCountAfterAdd = 5;
+
+    var heroListComp = element(by.tagName('hero-list'));
+    var addButton = heroListComp.element(by.tagName('button'));
+    var heroTags = heroListComp.all(by.tagName('li'));
+    var heroNameInput = heroListComp.element(by.tagName('input'));
+
+    it('should exist', function() {
       expect(heroListComp).toBeDefined('<hero-list> must exist');
-      var heroTags = heroListComp.all(by.tagName('li'));
-      expect(heroTags.count()).toBe(_initialHeroCount);
     });
-    
+
+    it('should display ' + initialHeroCount + ' heroes after init', function () {
+      expect(heroTags.count()).toBe(initialHeroCount);
+    });
+
     it('should not add hero with empty name', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var addButton = myTohComp.element(by.tagName('button'));
       expect(addButton).toBeDefined('"Add Hero" button must be defined');
       addButton.click().then(function() {
-        var heroListComp = myTohComp.element(by.tagName('hero-list'));
-        var heroTags = heroListComp.all(by.tagName('li'));
-        expect(heroTags.count()).toBe(_initialHeroCount, 'No new hero should be added');
+        expect(heroTags.count()).toBe(initialHeroCount, 'No new hero should be added');
       });
     })
 
     it('should add a new hero to the list', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var heroNameInput = myTohComp.element(by.tagName('input'));
       expect(heroNameInput).toBeDefined('<input> for hero name must exist');
-      var addButton = myTohComp.element(by.tagName('button'));
       expect(addButton).toBeDefined('"Add Hero" button must be defined');
-      sendKeys(heroNameInput, _newHeroName);
+      sendKeys(heroNameInput, newHeroName);
       addButton.click().then(function() {
-        var heroListComp = myTohComp.element(by.tagName('hero-list'));
-        var heroTags = heroListComp.all(by.tagName('li'));
-        expect(heroTags.count()).toBe(_heroCountAfterAdd, 'A new hero should be added');
-        var newHeroInList = heroTags.get(_heroCountAfterAdd - 1).getText();
-        expect(newHeroInList).toBe(_newHeroName, 'The hero should be added to the end of the list');
+        expect(heroTags.count()).toBe(heroCountAfterAdd, 'A new hero should be added');
+        var newHeroInList = heroTags.get(heroCountAfterAdd - 1).getText();
+        expect(newHeroInList).toBe(newHeroName, 'The hero should be added to the end of the list');
       });
     })
   });
-  
-  describe('Wikipedia Demo e2e tests', function () {
-    
+
+  describe('Wikipedia Demo', function () {
+
     it('should initialize the demo with empty result list', function () {
       var myWikiComp = element(by.tagName('my-wiki'));
       expect(myWikiComp).toBeDefined('<my-wiki> must exist');
       var resultList = myWikiComp.all(by.tagName('li'));
       expect(resultList.count()).toBe(0, 'result list must be empty');
     });
-    
+
     describe('Fetches after each keystroke', function () {
       it('should fetch results after "B"', function(done) {
         testForRefreshedResult('B', done);
       });
-      
+
       it('should fetch results after "Ba"', function(done) {
         testForRefreshedResult('a', done);
       });
-      
+
       it('should fetch results after "Bas"', function(done) {
         testForRefreshedResult('s', done);
       });
@@ -75,13 +68,13 @@ describe('Server Communication', function () {
         testForRefreshedResult('ic', done);
       });
     });
-    
+
     function testForRefreshedResult(keyPressed, done) {
       testForResult('my-wiki', keyPressed, false, done)
     }
   });
-  
-  describe('Smarter Wikipedia Demo e2e tests', function () {
+
+  describe('Smarter Wikipedia Demo', function () {
 
     it('should initialize the demo with empty result list', function () {
       var myWikiSmartComp = element(by.tagName('my-wiki-smart'));
@@ -93,40 +86,40 @@ describe('Server Communication', function () {
     it('should fetch results after "Java"', function(done) {
       testForNewResult('Java', done);
     });
-    
+
     it('should fetch results after "JavaS"', function(done) {
       testForStaleResult('S', done);
     });
-    
+
     it('should fetch results after "JavaSc"', function(done) {
       testForStaleResult('c', done);
     });
-    
+
     it('should fetch results after "JavaScript"', function(done) {
       testForStaleResult('ript', done);
     });
 
-    
+
     function testForNewResult(keyPressed, done) {
       testForResult('my-wiki-smart', keyPressed, false, done)
     }
 
     function testForStaleResult(keyPressed, done) {
-      testForResult('my-wiki-smart', keyPressed, true, done)      
+      testForResult('my-wiki-smart', keyPressed, true, done)
     }
 
   });
-  
+
   function testForResult(componentTagName, keyPressed, hasListBeforeSearch, done) {
     var searchWait = 1000; // Wait for wikipedia but not so long that tests timeout
     var wikiComponent = element(by.tagName(componentTagName));
     expect(wikiComponent).toBeDefined('<' + componentTagName + '> must exist');
     var searchBox = wikiComponent.element(by.tagName('input'));
     expect(searchBox).toBeDefined('<input> for search must exist');
-    
+
     searchBox.sendKeys(keyPressed).then(function () {
       var resultList = wikiComponent.all(by.tagName('li'));
-      
+
       if (hasListBeforeSearch) {
         expect(resultList.count()).toBeGreaterThan(0, 'result list should not be empty before search');
       }
@@ -137,5 +130,5 @@ describe('Server Communication', function () {
       }, searchWait);
     });
   }
-  
+
 });
diff --git a/public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts b/public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts
deleted file mode 100644
index 1381b30cd9..0000000000
--- a/public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-// import 'rxjs/Rx'; // adds ALL RxJS operators to Observable
-
-// Just the Observable operators we need for THIS app.
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
diff --git a/public/docs/_examples/server-communication/ts/app/app.component.ts b/public/docs/_examples/server-communication/ts/app/app.component.ts
new file mode 100644
index 0000000000..144475d0e4
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/app/app.component.ts
@@ -0,0 +1,37 @@
+// #docplaster
+// #docregion
+import { Component }         from '@angular/core';
+
+// #docregion import-rxjs
+// Add the RxJS Observable operators we need in this app.
+import './rxjs-operators';
+// #enddocregion import-rxjs
+
+import { HeroListComponent }        from './toh/hero-list.component';
+import { HeroListPromiseComponent } from './toh/hero-list.component.promise';
+
+import { WikiComponent }      from './wiki/wiki.component';
+import { WikiSmartComponent } from './wiki/wiki-smart.component';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <hero-list></hero-list>
+    <hero-list-promise></hero-list-promise>
+    <my-wiki></my-wiki>
+    <my-wiki-smart></my-wiki-smart>
+  `,
+// #enddocregion
+/*
+// #docregion http-providers
+  providers: [ HTTP_PROVIDERS ]
+// #enddocregion http-providers
+*/
+// #docregion
+  directives: [
+    HeroListComponent, HeroListPromiseComponent,
+    WikiComponent, WikiSmartComponent
+  ]
+})
+export class AppComponent { }
+// #enddocregion
diff --git a/public/docs/_examples/server-communication/ts/app/main.ts b/public/docs/_examples/server-communication/ts/app/main.ts
index 7fa98321f0..870548bd32 100644
--- a/public/docs/_examples/server-communication/ts/app/main.ts
+++ b/public/docs/_examples/server-communication/ts/app/main.ts
@@ -1,21 +1,30 @@
 // #docplaster
-// #docregion
+// #docregion final
+// Imports for loading & configuring the in-memory web api
+import { provide }    from '@angular/core';
+import { XHRBackend } from '@angular/http';
+
+import { InMemoryBackendService,
+         SEED_DATA }  from 'angular2-in-memory-web-api/core';
+import { HeroData }   from './hero-data';
+
+// The usual bootstrapping imports
+// #docregion v1
 import { bootstrap }      from '@angular/platform-browser-dynamic';
-// #docregion http-providers
 import { HTTP_PROVIDERS } from '@angular/http';
-// #enddocregion http-providers
-
-// #docregion import-rxjs
-// Add the RxJS Observable operators we need in this app.
-import './add-rxjs-operators';
-// #enddocregion import-rxjs
 
-import { TohComponent }       from './toh/toh.component';
-import { WikiComponent }      from './wiki/wiki.component';
-import { WikiSmartComponent } from './wiki/wiki-smart.component';
+import { AppComponent }   from './app.component';
 
-// #docregion http-providers
-bootstrap(TohComponent, [HTTP_PROVIDERS]);
-// #enddocregion http-providers
-bootstrap(WikiComponent);
-bootstrap(WikiSmartComponent);
+// #enddocregion v1, final
+/*
+// #docregion v1
+bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
+// #enddocregion v1
+ */
+// #docregion final
+bootstrap(AppComponent, [
+    HTTP_PROVIDERS,
+    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
+    provide(SEED_DATA,  { useClass: HeroData })                // in-mem server data
+]);
+// #enddocregion final
diff --git a/public/docs/_examples/server-communication/ts/app/rxjs-operators.ts b/public/docs/_examples/server-communication/ts/app/rxjs-operators.ts
new file mode 100644
index 0000000000..6f8d626267
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/app/rxjs-operators.ts
@@ -0,0 +1,16 @@
+// #docregion
+// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable
+
+// See node_module/rxjs/Rxjs.js
+// Import just the rxjs statics and operators we need for THIS app.
+
+// Statics
+import 'rxjs/add/observable/throw';
+
+// Operators
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/toPromise';
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html
index c099d222ef..36666f2ed3 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html
@@ -1,4 +1,5 @@
 <!-- #docregion -->
+<h1>Tour of Heroes ({{mode}})</h1>
 <h3>Heroes:</h3>
 <ul>
   <li *ngFor="let hero of heroes">
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts
similarity index 79%
rename from public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts
rename to public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts
index 3e4c3c6bf2..7df0676a9a 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts
@@ -1,21 +1,22 @@
-// ToH Promise Version
 // #docregion
+// Promise Version
 import { Component, OnInit } from '@angular/core';
 import { Hero }              from './hero';
-import { HeroService }       from './hero.service.1';
+import { HeroService }       from './hero.service.promise';
 
 @Component({
-  selector: 'hero-list',
+  selector: 'hero-list-promise',
   templateUrl: 'app/toh/hero-list.component.html',
-  styles: ['.error {color:red;}']
+  providers: [ HeroService ]
 })
 // #docregion component
-export class HeroListComponent implements OnInit {
+export class HeroListPromiseComponent implements OnInit {
 
   constructor (private heroService: HeroService) {}
 
   errorMessage: string;
   heroes: Hero[];
+  mode = 'Promise';
 
   ngOnInit() { this.getHeroes(); }
 
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
index 2cb1689e01..f582cfcc65 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
@@ -1,13 +1,13 @@
 // #docregion
+// Observable Version
 import { Component, OnInit } from '@angular/core';
-
 import { Hero }              from './hero';
 import { HeroService }       from './hero.service';
 
 @Component({
   selector: 'hero-list',
   templateUrl: 'app/toh/hero-list.component.html',
-  styles: ['.error {color:red;}']
+  providers: [ HeroService ]
 })
 // #docregion component
 export class HeroListComponent implements OnInit {
@@ -15,7 +15,8 @@ export class HeroListComponent implements OnInit {
   constructor (private heroService: HeroService) {}
 
   errorMessage: string;
-  heroes:Hero[];
+  heroes: Hero[];
+  mode = 'Observable';
 
   ngOnInit() { this.getHeroes(); }
 
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts
similarity index 90%
rename from public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts
rename to public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts
index a6da29514a..c3ecd07e49 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts
@@ -1,7 +1,6 @@
-// ToH Promise Version
 // #docplaster
-
 // #docregion
+// Promise Version
 import { Injectable }     from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { Headers, RequestOptions } from '@angular/http';
@@ -41,7 +40,8 @@ export class HeroService {
   private handleError (error: any) {
     // In a real world app, we might use a remote logging infrastructure
     // We'd also dig deeper into the error to get a better message
-    let errMsg = error.message || error.statusText || 'Server error';
+    let errMsg = (error.message) ? error.message :
+      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
     console.error(errMsg); // log to console instead
     return Promise.reject(errMsg);
   }
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
index fcc0348c05..f1f749b507 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+// Observable Version
 // #docregion v1
 import { Injectable }     from '@angular/core';
 import { Http, Response } from '@angular/http';
@@ -14,7 +15,9 @@ import { Observable }     from 'rxjs/Observable';
 
 @Injectable()
 export class HeroService {
+  // #docregion ctor
   constructor (private http: Http) {}
+  // #enddocregion ctor
 
   // #docregion endpoint
   private heroesUrl = 'app/heroes';  // URL to web API
@@ -52,7 +55,8 @@ export class HeroService {
   private handleError (error: any) {
     // In a real world app, we might use a remote logging infrastructure
     // We'd also dig deeper into the error to get a better message
-    let errMsg = error.message || error.statusText || 'Server error';
+    let errMsg = (error.message) ? error.message :
+      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
     console.error(errMsg); // log to console instead
     return Observable.throw(errMsg);
   }
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.ts
index bf664b0eec..09b8d295ce 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero.ts
@@ -1,6 +1,6 @@
 // #docregion
 export class Hero {
   constructor(
-    public id:number,
-    public name:string) { }
+    public id: number,
+    public name: string) { }
 }
diff --git a/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts b/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts
deleted file mode 100644
index 7e0a663918..0000000000
--- a/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docplaster
-// #docregion
-import { Component }         from '@angular/core';
-import { HTTP_PROVIDERS }    from '@angular/http';
-
-import { HeroListComponent } from './hero-list.component';
-import { HeroService }       from './hero.service';
-// #enddocregion
-
-// #docregion in-mem-web-api-imports
-import { provide }           from '@angular/core';
-import { XHRBackend }        from '@angular/http';
-
-// in-memory web api imports
-import { InMemoryBackendService,
-        SEED_DATA }          from 'angular2-in-memory-web-api/core';
-import { HeroData }          from '../hero-data';
-// #enddocregion in-mem-web-api-imports
-// #docregion
-
-@Component({
-  selector: 'my-toh',
-// #docregion template
-  template: `
-  <h1>Tour of Heroes</h1>
-  <hero-list></hero-list>
-  `,
-  // #enddocregion template
-  directives: [HeroListComponent],
-  providers:  [
-    HTTP_PROVIDERS,
-    HeroService,
-// #enddocregion
-// #docregion in-mem-web-api-providers
-    // in-memory web api providers
-    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
-    provide(SEED_DATA,  { useClass: HeroData }) // in-mem server data
-// #enddocregion in-mem-web-api-providers
-// #docregion
-  ]
-})
-export class TohComponent { }
-// #enddocregion
diff --git a/public/docs/_examples/server-communication/ts/index.html b/public/docs/_examples/server-communication/ts/index.html
index 21dc568313..c2d2656c84 100644
--- a/public/docs/_examples/server-communication/ts/index.html
+++ b/public/docs/_examples/server-communication/ts/index.html
@@ -6,9 +6,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
+
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -21,9 +23,7 @@
   </head>
 
   <body>
-    <my-toh>ToH Loading...</my-toh>
-    <my-wiki>Wiki Loading...</my-wiki>
-    <my-wiki-smart>WikiSmart Loading...</my-wiki-smart>
+      <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/server-communication/ts/sample.css b/public/docs/_examples/server-communication/ts/sample.css
new file mode 100644
index 0000000000..3bb281e096
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/sample.css
@@ -0,0 +1 @@
+.error {color:red;}
diff --git a/public/docs/_examples/structural-directives/ts/index.html b/public/docs/_examples/structural-directives/ts/index.html
index 8df7729afe..da815d8e69 100644
--- a/public/docs/_examples/structural-directives/ts/index.html
+++ b/public/docs/_examples/structural-directives/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/style-guide/ts/index.html b/public/docs/_examples/style-guide/ts/index.html
index 9a11de94e3..820bf59a96 100644
--- a/public/docs/_examples/style-guide/ts/index.html
+++ b/public/docs/_examples/style-guide/ts/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/styleguide/ts/index.html b/public/docs/_examples/styleguide/ts/index.html
index b98f73d603..5983457e07 100644
--- a/public/docs/_examples/styleguide/ts/index.html
+++ b/public/docs/_examples/styleguide/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js
index 3bd127415a..dc5c1484b6 100644
--- a/public/docs/_examples/systemjs.config.js
+++ b/public/docs/_examples/systemjs.config.js
@@ -7,9 +7,10 @@
   // map tells the System loader where to look for things
   var map = {
     'app':                        'app', // 'dist',
-    'rxjs':                       'node_modules/rxjs',
+
+    '@angular':                   'node_modules/@angular',
     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-    '@angular':                   'node_modules/@angular'
+    'rxjs':                       'node_modules/rxjs'
   };
 
   // packages tells the System loader how to load when no filename and/or no extension
@@ -19,21 +20,26 @@
     'angular2-in-memory-web-api': { defaultExtension: 'js' },
   };
 
-  var packageNames = [
-    '@angular/common',
-    '@angular/compiler',
-    '@angular/core',
-    '@angular/http',
-    '@angular/platform-browser',
-    '@angular/platform-browser-dynamic',
-    '@angular/router',
-    '@angular/router-deprecated',
-    '@angular/upgrade',
+  var ngPackageNames = [
+    'common',
+    'compiler',
+    'core',
+    'http',
+    'platform-browser',
+    'platform-browser-dynamic',
+    'router',
+    'router-deprecated',
+    'upgrade',
   ];
 
-  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
-  packageNames.forEach(function(pkgName) {
-    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  // Add package entries for angular packages
+  ngPackageNames.forEach(function(pkgName) {
+
+    // Bundled (~40 requests):
+    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
+
+    // Individual files (~300 requests):
+    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
   });
 
   var config = {
diff --git a/public/docs/_examples/template-syntax/ts/index.html b/public/docs/_examples/template-syntax/ts/index.html
index c7eb394e9c..d3a4ec6aa6 100644
--- a/public/docs/_examples/template-syntax/ts/index.html
+++ b/public/docs/_examples/template-syntax/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="template-syntax.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/testing/ts/index.html b/public/docs/_examples/testing/ts/index.html
index 07fca45f52..02b11078c5 100644
--- a/public/docs/_examples/testing/ts/index.html
+++ b/public/docs/_examples/testing/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/testing/ts/unit-tests-bag.html b/public/docs/_examples/testing/ts/unit-tests-bag.html
index b5313257e9..f373c387e8 100644
--- a/public/docs/_examples/testing/ts/unit-tests-bag.html
+++ b/public/docs/_examples/testing/ts/unit-tests-bag.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="node_modules/core-js/client/shim.min.js"></script>
 
 <!-- NOT CONVERTED YET -->
   <script src="node_modules/systemjs/dist/system.src.js"></script>
diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html
index 22cff3f553..f784483eaa 100644
--- a/public/docs/_examples/toh-1/ts/index.html
+++ b/public/docs/_examples/toh-1/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-2/dart/lib/app_component.dart b/public/docs/_examples/toh-2/dart/lib/app_component.dart
index b33aa28b4d..4959afe753 100644
--- a/public/docs/_examples/toh-2/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-2/dart/lib/app_component.dart
@@ -98,16 +98,16 @@ class AppComponent {
 
 // #docregion hero-array
 final List<Hero> mockHeroes = [
-  new Hero(11, "Mr. Nice"),
-  new Hero(12, "Narco"),
-  new Hero(13, "Bombasto"),
-  new Hero(14, "Celeritas"),
-  new Hero(15, "Magneta"),
-  new Hero(16, "RubberMan"),
-  new Hero(17, "Dynama"),
-  new Hero(18, "Dr IQ"),
-  new Hero(19, "Magma"),
-  new Hero(20, "Tornado")
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan'),
+  new Hero(17, 'Dynama'),
+  new Hero(18, 'Dr IQ'),
+  new Hero(19, 'Magma'),
+  new Hero(20, 'Tornado')
 ];
 // #enddocregion hero-array
 
diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html
index 71fc2f4e4a..485409815c 100644
--- a/public/docs/_examples/toh-2/ts/index.html
+++ b/public/docs/_examples/toh-2/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-3/dart/lib/app_component.dart b/public/docs/_examples/toh-3/dart/lib/app_component.dart
index e4296ec7d5..774f8e68f6 100644
--- a/public/docs/_examples/toh-3/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-3/dart/lib/app_component.dart
@@ -89,14 +89,14 @@ class AppComponent {
 }
 
 final List<Hero> mockHeroes = [
-  new Hero(11, "Mr. Nice"),
-  new Hero(12, "Narco"),
-  new Hero(13, "Bombasto"),
-  new Hero(14, "Celeritas"),
-  new Hero(15, "Magneta"),
-  new Hero(16, "RubberMan"),
-  new Hero(17, "Dynama"),
-  new Hero(18, "Dr IQ"),
-  new Hero(19, "Magma"),
-  new Hero(20, "Tornado")
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan'),
+  new Hero(17, 'Dynama'),
+  new Hero(18, 'Dr IQ'),
+  new Hero(19, 'Magma'),
+  new Hero(20, 'Tornado')
 ];
diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html
index 01d42394de..e9c099696b 100644
--- a/public/docs/_examples/toh-3/ts/index.html
+++ b/public/docs/_examples/toh-3/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart
index 14a1382348..8a6144ddfb 100644
--- a/public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart
@@ -1,3 +1,4 @@
+// #docregion
 import 'package:angular2/core.dart';
 
 import 'hero.dart';
diff --git a/public/docs/_examples/toh-4/dart/lib/mock_heroes.dart b/public/docs/_examples/toh-4/dart/lib/mock_heroes.dart
index 55434761a2..645aa56c25 100644
--- a/public/docs/_examples/toh-4/dart/lib/mock_heroes.dart
+++ b/public/docs/_examples/toh-4/dart/lib/mock_heroes.dart
@@ -2,15 +2,15 @@
 import 'hero.dart';
 
 final List<Hero> mockHeroes = [
-	new Hero(11, "Mr. Nice"),
-	new Hero(12, "Narco"),
-	new Hero(13, "Bombasto"),
-	new Hero(14, "Celeritas"),
-	new Hero(15, "Magneta"),
-	new Hero(16, "RubberMan"),
-	new Hero(17, "Dynama"),
-	new Hero(18, "Dr IQ"),
-	new Hero(19, "Magma"),
-	new Hero(20, "Tornado")
+	new Hero(11, 'Mr. Nice'),
+	new Hero(12, 'Narco'),
+	new Hero(13, 'Bombasto'),
+	new Hero(14, 'Celeritas'),
+	new Hero(15, 'Magneta'),
+	new Hero(16, 'RubberMan'),
+	new Hero(17, 'Dynama'),
+	new Hero(18, 'Dr IQ'),
+	new Hero(19, 'Magma'),
+	new Hero(20, 'Tornado')
 ];
-// #enddocregion
\ No newline at end of file
+// #enddocregion
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 9b0de3caeb..7ca63ee237 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -23,8 +23,8 @@ import { HeroService } from './hero.service';
     </ul>
     <my-hero-detail [hero]="selectedHero"></my-hero-detail>
   `,
-  // #enddocregion template  
-  styles:[`
+  // #enddocregion template
+  styles: [`
     .selected {
       background-color: #CFD8DC !important;
       color: white;
diff --git a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
index 35fa5c67a8..ddd36d7868 100644
--- a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
+++ b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
@@ -2,15 +2,15 @@
 import { Hero } from './hero';
 
 export var HEROES: Hero[] = [
-	{"id": 11, "name": "Mr. Nice"},
-	{"id": 12, "name": "Narco"},
-	{"id": 13, "name": "Bombasto"},
-	{"id": 14, "name": "Celeritas"},
-	{"id": 15, "name": "Magneta"},
-	{"id": 16, "name": "RubberMan"},
-	{"id": 17, "name": "Dynama"},
-	{"id": 18, "name": "Dr IQ"},
-	{"id": 19, "name": "Magma"},
-	{"id": 20, "name": "Tornado"}
+  {id: 11, name: 'Mr. Nice'},
+  {id: 12, name: 'Narco'},
+  {id: 13, name: 'Bombasto'},
+  {id: 14, name: 'Celeritas'},
+  {id: 15, name: 'Magneta'},
+  {id: 16, name: 'RubberMan'},
+  {id: 17, name: 'Dynama'},
+  {id: 18, name: 'Dr IQ'},
+  {id: 19, name: 'Magma'},
+  {id: 20, name: 'Tornado'}
 ];
 // #enddocregion
diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html
index 01d42394de..e9c099696b 100644
--- a/public/docs/_examples/toh-4/ts/index.html
+++ b/public/docs/_examples/toh-4/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart b/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart
index ee46fa86fe..b96c17ff61 100644
--- a/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart
+++ b/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart
@@ -1,14 +1,14 @@
 import 'hero.dart';
 
 final List<Hero> HEROES = [
-  new Hero(11, "Mr. Nice"),
-  new Hero(12, "Narco"),
-  new Hero(13, "Bombasto"),
-  new Hero(14, "Celeritas"),
-  new Hero(15, "Magneta"),
-  new Hero(16, "RubberMan"),
-  new Hero(17, "Dynama"),
-  new Hero(18, "Dr IQ"),
-  new Hero(19, "Magma"),
-  new Hero(20, "Tornado")
-];
\ No newline at end of file
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan'),
+  new Hero(17, 'Dynama'),
+  new Hero(18, 'Dr IQ'),
+  new Hero(19, 'Magma'),
+  new Hero(20, 'Tornado')
+];
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 bedaca3e38..8d26ea6d90 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.ts
@@ -3,12 +3,12 @@
 import { Component } from '@angular/core';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
-import { HeroService } from './hero.service';
 import { DashboardComponent } from './dashboard.component';
 import { HeroesComponent } from './heroes.component';
 // #docregion hero-detail-import
 import { HeroDetailComponent } from './hero-detail.component';
 // #enddocregion hero-detail-import
+import { HeroService } from './hero.service';
 
 @Component({
   selector: 'my-app',
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 6567c899d9..300f3065e0 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -4,7 +4,6 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
 
 import { Hero } from './hero';
-import { HeroDetailComponent } from './hero-detail.component';
 import { HeroService } from './hero.service';
 
 // #docregion metadata
@@ -13,8 +12,7 @@ import { HeroService } from './hero.service';
   selector: 'my-heroes',
 // #enddocregion heroes-component-renaming
   templateUrl: 'app/heroes.component.html',
-  styleUrls:  ['app/heroes.component.css'],
-  directives: [HeroDetailComponent]
+  styleUrls:  ['app/heroes.component.css']
 // #docregion heroes-component-renaming
 })
 // #enddocregion heroes-component-renaming
diff --git a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
index cdcba35097..ddd36d7868 100644
--- a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
+++ b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
@@ -2,15 +2,15 @@
 import { Hero } from './hero';
 
 export var HEROES: Hero[] = [
-	{"id": 11, "name": "Mr. Nice"},
-	{"id": 12, "name": "Narco"},
-	{"id": 13, "name": "Bombasto"},
-	{"id": 14, "name": "Celeritas"},
-	{"id": 15, "name": "Magneta"},
-	{"id": 16, "name": "RubberMan"},
-	{"id": 17, "name": "Dynama"},
-	{"id": 18, "name": "Dr IQ"},
-	{"id": 19, "name": "Magma"},
-	{"id": 20, "name": "Tornado"}
+  {id: 11, name: 'Mr. Nice'},
+  {id: 12, name: 'Narco'},
+  {id: 13, name: 'Bombasto'},
+  {id: 14, name: 'Celeritas'},
+  {id: 15, name: 'Magneta'},
+  {id: 16, name: 'RubberMan'},
+  {id: 17, name: 'Dynama'},
+  {id: 18, name: 'Dr IQ'},
+  {id: 19, name: 'Magma'},
+  {id: 20, name: 'Tornado'}
 ];
-// #enddocregion
\ No newline at end of file
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html
index bdb039a0fc..93fa8d4889 100644
--- a/public/docs/_examples/toh-5/ts/index.html
+++ b/public/docs/_examples/toh-5/ts/index.html
@@ -15,7 +15,7 @@
     <!-- #enddocregion css -->
     <!-- #docregion head -->
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-6/e2e-spec.js b/public/docs/_examples/toh-6/e2e-spec.js
new file mode 100644
index 0000000000..d5823b9add
--- /dev/null
+++ b/public/docs/_examples/toh-6/e2e-spec.js
@@ -0,0 +1,223 @@
+describe('TOH Http Chapter', function () {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  function getPageStruct() {
+    hrefEles = 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')),
+
+      myHeroesHref: hrefEles.get(1),
+      myHeroesParent: element(by.css('my-app my-heroes')),
+      allHeroes: element.all(by.css('my-app my-heroes li .hero-element')),
+
+      firstDeleteButton: element.all(by.buttonText('Delete')).get(0),
+
+      addButton: element.all(by.buttonText('Add New Hero')).get(0),
+
+      heroDetail: element(by.css('my-app my-hero-detail'))
+    }
+  }
+
+  it('should be able to add a hero from the "Heroes" view', function(){
+    var page = getPageStruct();
+    var heroCount;
+
+    page.myHeroesHref.click().then(function() {
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(10, 'should show 10');
+    }).then(function() {
+      return page.addButton.click();
+    }).then(function(){
+      return save(page,'','The New Hero');
+    }).then(function(){
+      browser.waitForAngular();
+
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(11, 'should show 11');
+
+      var newHero = element(by.xpath('//span[@class="hero-element" and contains(text(),"The New Hero")]'));
+      expect(newHero).toBeDefined();
+    });
+  });
+
+  it('should be able to delete hero from "Heroes" view', function(){
+    var page = getPageStruct();
+    var heroCount;
+
+    page.myHeroesHref.click().then(function() {
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(10, 'should show 10');
+    }).then(function() {
+      return page.firstDeleteButton.click();
+    }).then(function(){
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(9, 'should show 9');
+    });
+  });
+
+  it('should be able to save details from "Dashboard" view', function () {
+    var page = getPageStruct();
+    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+    var heroEle = page.topHeroes.get(2);
+    var heroDescrEle = heroEle.element(by.css('h4'));
+    var heroDescr;
+
+    return heroDescrEle.getText().then(function(text) {
+      heroDescr = text;
+      return heroEle.click();
+    }).then(function() {
+      return save(page, heroDescr, '-foo');
+    })
+    .then(function(){
+      return page.myDashboardHref.click();
+    })
+    .then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
+      expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
+    });
+  });
+
+  it('should be able to save details from "Heroes" view', function () {
+    var page = getPageStruct();
+
+    var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
+    var heroEle, heroDescr;
+
+    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(0);
+      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 save(page, heroDescr, '-bar');
+    })
+    .then(function(){
+      return page.myHeroesHref.click();
+    })
+    .then(function() {
+      expect(heroEle.getText()).toContain(heroDescr + '-bar');
+    });
+  });
+
+  function save(page, origValue, textToAdd) {
+    var inputEle = page.heroDetail.element(by.css('input'));
+    expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
+    var saveButtonEle = page.heroDetail.element(by.buttonText('Save'));
+    var backButtonEle = page.heroDetail.element(by.buttonText('Back'));
+    expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+    var 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 saveButtonEle.click();
+    });
+  }
+
+  it('should be able to see the start screen', function () {
+    var 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");
+  });
+
+  it('should be able to see dashboard choices', function () {
+    var page = getPageStruct();
+    expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices");
+  });
+
+  it('should be able to toggle the views', function () {
+    var page = getPageStruct();
+
+    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');
+    });
+
+  });
+
+  it('should be able to edit details from "Dashboard" view', function () {
+    var page = getPageStruct();
+    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+    var heroEle = page.topHeroes.get(3);
+    var heroDescrEle = heroEle.element(by.css('h4'));
+    var heroDescr;
+    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');
+    });
+  });
+
+  it('should be able to edit details from "Heroes" view', function () {
+    var page = getPageStruct();
+    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
+    var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
+    var heroEle, heroDescr;
+    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');
+    });
+  });
+
+  function editDetails(page, origValue, textToAdd) {
+    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');
+    var inputEle = page.heroDetail.element(by.css('input'));
+    expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
+    var buttons = page.heroDetail.all(by.css('button'));
+    var backButtonEle = buttons.get(0);
+    var saveButtonEle = buttons.get(1);
+    expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+    expect(saveButtonEle.isDisplayed()).toBe(true, 'should be able to see the save button');
+    var 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 saveButtonEle.click();
+    });
+  }
+
+});
diff --git a/public/docs/_examples/toh-6/ts/.gitignore b/public/docs/_examples/toh-6/ts/.gitignore
new file mode 100644
index 0000000000..2cb7d2a2e9
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/.gitignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.css b/public/docs/_examples/toh-6/ts/app/app.component.css
new file mode 100644
index 0000000000..137e9be7be
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.component.css
@@ -0,0 +1,31 @@
+/* #docplaster */
+/* #docregion css */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.router-link-active {
+  color: #039be5;
+}
+/* #enddocregion css */
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts
new file mode 100644
index 0000000000..22317d4403
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.component.ts
@@ -0,0 +1,36 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
+
+import { DashboardComponent }  from './dashboard.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroService }         from './hero.service';
+
+@Component({
+  selector: 'my-app',
+
+  template: `
+    <h1>{{title}}</h1>
+    <nav>
+      <a [routerLink]="['Dashboard']">Dashboard</a>
+      <a [routerLink]="['Heroes']">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  styleUrls: ['app/app.component.css'],
+  directives: [ROUTER_DIRECTIVES],
+  providers: [
+    ROUTER_PROVIDERS,
+    HeroService,
+  ]
+})
+@RouteConfig([
+  { path: '/dashboard',  name: 'Dashboard',  component: DashboardComponent, useAsDefault: true },
+  { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent },
+  { path: '/heroes',     name: 'Heroes',     component: HeroesComponent }
+])
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.css b/public/docs/_examples/toh-6/ts/app/dashboard.component.css
similarity index 94%
rename from public/docs/_examples/tutorial/ts/app/dashboard.component.css
rename to public/docs/_examples/toh-6/ts/app/dashboard.component.css
index d000c0c77e..ce6e963a5f 100644
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.css
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.css
@@ -1,3 +1,5 @@
+/* #docplaster */
+/* #docregion */
 [class*='col-'] {
   float: left;
 }
@@ -58,3 +60,4 @@ h4 {
 	  min-width: 60px;
 	}
 }
+/* #enddocregion */
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.html b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
new file mode 100644
index 0000000000..028eab6eb3
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+<!-- #docregion click -->
+  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+<!-- #enddocregion click -->
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
new file mode 100644
index 0000000000..6070e76eb6
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Router }           from '@angular/router-deprecated';
+
+import { Hero }        from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'my-dashboard',
+  templateUrl: 'app/dashboard.component.html',
+  styleUrls: ['app/dashboard.component.css']
+})
+export class DashboardComponent implements OnInit {
+
+  heroes: Hero[] = [];
+
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) {
+  }
+
+  ngOnInit() {
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes.slice(1,5));
+  }
+
+  gotoDetail(hero: Hero) {
+    let link = ['HeroDetail', { id: hero.id }];
+    this._router.navigate(link);
+  }
+}
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.css b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
new file mode 100644
index 0000000000..ab2437efd8
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
@@ -0,0 +1,30 @@
+/* #docregion */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer; cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc; 
+  cursor: auto;
+}
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.html b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
new file mode 100644
index 0000000000..f532eb0109
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<div *ngIf="hero">
+  <h2>{{hero.name}} details!</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="hero.name" placeholder="name" />
+   </div>
+  <button (click)="goBack()">Back</button>
+  <button (click)="save()">Save</button>
+</div>
\ No newline at end of file
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
new file mode 100644
index 0000000000..7b2889e592
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -0,0 +1,53 @@
+// #docplaster
+// #docregion
+import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
+import { RouteParams } from '@angular/router-deprecated';
+
+import { Hero }        from './hero';
+import { HeroService } from './hero.service';
+@Component({
+  selector: 'my-hero-detail',
+  templateUrl: 'app/hero-detail.component.html',
+  styleUrls: ['app/hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+  @Input() hero: Hero;
+  @Output() close = new EventEmitter();
+  error: any;
+  navigated = false; // true if navigated here
+
+  constructor(
+    private _heroService: HeroService,
+    private _routeParams: RouteParams) {
+  }
+
+  // #docregion ngOnInit
+  ngOnInit() {
+    if (this._routeParams.get('id') !== null) {
+      let id = +this._routeParams.get('id');
+      this.navigated = true;
+      this._heroService.getHero(id)
+          .then(hero => this.hero = hero);
+    } else {
+      this.navigated = false;
+      this.hero = new Hero();
+    }
+  }
+  // #enddocregion ngOnInit
+  // #docregion save
+  save() {
+    this._heroService
+        .save(this.hero)
+        .then(hero => {
+          this.hero = hero; // saved hero, w/ id if new
+          this.goBack(hero);
+        })
+        .catch(error => this.error = error); // TODO: Display error message
+  }
+  // #enddocregion save
+  goBack(savedHero: Hero = null) {
+    this.close.emit(savedHero);
+    if (this.navigated) { window.history.back(); }
+  }
+}
+
diff --git a/public/docs/_examples/toh-6/ts/app/hero.service.ts b/public/docs/_examples/toh-6/ts/app/hero.service.ts
new file mode 100644
index 0000000000..b4b0854141
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero.service.ts
@@ -0,0 +1,99 @@
+// #docplaster
+// #docregion
+import { Injectable }    from '@angular/core';
+import { Http, Headers } from '@angular/http';
+
+// #docregion rxjs
+import 'rxjs/add/operator/toPromise';
+// #enddocregion rxjs
+
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroService {
+
+  private heroesUrl = 'app/heroes';  // URL to web api
+
+  constructor(private http: Http) { }
+
+  // #docregion get-heroes
+  getHeroes(): Promise<Hero[]> {
+    return this.http.get(this.heroesUrl)
+    // #docregion to-promise
+               .toPromise()
+    // #enddocregion to-promise
+    // #docregion to-data
+               .then(response => response.json().data)
+    // #enddocregion to-data
+    // #docregion catch
+               .catch(this.handleError);
+    // #enddocregion catch
+  }
+  // #enddocregion get-heroes
+
+  getHero(id: number) {
+    return this.getHeroes()
+               .then(heroes => heroes.filter(hero => hero.id === id)[0]);
+  }
+
+  // #docregion save
+  save(hero: Hero): Promise<Hero>  {
+    if (hero.id) {
+      return this.put(hero);
+    }
+    return this.post(hero);
+  }
+  // #enddocregion save
+
+  // #docregion delete-hero
+  delete(hero: Hero) {
+    let headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+
+    let url = `${this.heroesUrl}/${hero.id}`;
+
+    return this.http
+               .delete(url, headers)
+               .toPromise()
+               .catch(this.handleError);
+  }
+  // #enddocregion delete-hero
+
+  // #docregion post-hero
+  // Add new Hero
+  private post(hero: Hero): Promise<Hero> {
+    let headers = new Headers({
+      'Content-Type': 'application/json'});
+
+    return this.http
+               .post(this.heroesUrl, JSON.stringify(hero), {headers: headers})
+               .toPromise()
+               .then(res => res.json().data)
+               .catch(this.handleError);
+  }
+  // #enddocregion post-hero
+
+  // #docregion put-hero
+  // Update existing Hero
+  private put(hero: Hero) {
+    let headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+
+    let url = `${this.heroesUrl}/${hero.id}`;
+
+    return this.http
+               .put(url, JSON.stringify(hero), {headers: headers})
+               .toPromise()
+               .then(() => hero)
+               .catch(this.handleError);
+  }
+  // #enddocregion put-hero
+
+  // #docregion error-handler
+  private handleError(error: any) {
+    console.error('An error occurred', error);
+    return Promise.reject(error.message || error);
+  }
+  // #enddocregion error-handler
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-6/ts/app/hero.ts b/public/docs/_examples/toh-6/ts/app/hero.ts
new file mode 100644
index 0000000000..e3eac516da
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.css b/public/docs/_examples/toh-6/ts/app/heroes.component.css
new file mode 100644
index 0000000000..35e45af98d
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.css
@@ -0,0 +1,59 @@
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.html b/public/docs/_examples/toh-6/ts/app/heroes.component.html
new file mode 100644
index 0000000000..705c67677f
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.html
@@ -0,0 +1,26 @@
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+    <span class="hero-element">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </span>
+<!-- #docregion delete-hero -->
+    <button class="delete-button" (click)="delete(hero, $event)">Delete</button>
+<!-- #enddocregion delete-hero -->
+  </li>
+</ul>
+
+<!-- #docregion add-hero -->
+<button (click)="addHero()">Add New Hero</button>
+<div *ngIf="addingHero">
+  <my-hero-detail (close)="close($event)"></my-hero-detail>
+</div>
+<!-- #enddocregion add-hero -->
+
+<div *ngIf="selectedHero">
+  <h2>
+    {{selectedHero.name | uppercase}} is my hero
+  </h2>
+  <button (click)="gotoDetail()">View Details</button>
+</div>
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
new file mode 100644
index 0000000000..ea3ebf2388
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
@@ -0,0 +1,70 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Router }            from '@angular/router-deprecated';
+
+import { Hero }                from './hero';
+import { HeroService }         from './hero.service';
+// #docregion hero-detail-component
+import { HeroDetailComponent } from './hero-detail.component';
+
+@Component({
+  selector: 'my-heroes',
+  templateUrl: 'app/heroes.component.html',
+  styleUrls:  ['app/heroes.component.css'],
+  directives: [HeroDetailComponent]
+})
+// #enddocregion hero-detail-component
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+  addingHero = false;
+  error: any;
+
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) { }
+
+  getHeroes() {
+    this._heroService
+        .getHeroes()
+        .then(heroes => this.heroes = heroes)
+        .catch(error => this.error = error); // TODO: Display error message
+  }
+
+  // #docregion add
+  addHero() {
+    this.addingHero = true;
+    this.selectedHero = null;
+  }
+
+  close(savedHero: Hero) {
+    this.addingHero = false;
+    if (savedHero) { this.getHeroes(); }
+  }
+  // #enddocregion add
+
+  // #docregion delete
+  delete(hero: Hero, event: any) {
+    event.stopPropagation();
+    this._heroService
+        .delete(hero)
+        .then(res => {
+          this.heroes = this.heroes.filter(h => h.id !== hero.id);
+        })
+        .catch(error => this.error = error); // TODO: Display error message
+  }
+  // #enddocregion delete
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  onSelect(hero: Hero) {
+    this.selectedHero = hero;
+    this.addingHero = false;
+  }
+
+  gotoDetail() {
+    this._router.navigate(['HeroDetail', { id: 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
new file mode 100644
index 0000000000..791b6ae2c5
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts
@@ -0,0 +1,18 @@
+// #docregion
+export class InMemoryDataService {
+  createDb() {
+    let heroes = [
+      {id: 11, name: 'Mr. Nice'},
+      {id: 12, name: 'Narco'},
+      {id: 13, name: 'Bombasto'},
+      {id: 14, name: 'Celeritas'},
+      {id: 15, name: 'Magneta'},
+      {id: 16, name: 'RubberMan'},
+      {id: 17, name: 'Dynama'},
+      {id: 18, name: 'Dr IQ'},
+      {id: 19, name: 'Magma'},
+      {id: 20, name: 'Tornado'}
+    ];
+    return {heroes};
+  }
+}
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
new file mode 100644
index 0000000000..08caa81826
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion final
+// Imports for loading & configuring the in-memory web api
+import { provide }    from '@angular/core';
+import { XHRBackend } from '@angular/http';
+
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api/core';
+import { InMemoryDataService }               from './in-memory-data.service';
+
+// The usual bootstrapping imports
+// #docregion v1
+import { bootstrap }      from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
+
+import { AppComponent }   from './app.component';
+
+// #enddocregion v1, final
+/*
+// #docregion v1
+bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
+// #enddocregion v1
+ */
+// #docregion final
+bootstrap(AppComponent, [
+    HTTP_PROVIDERS,
+    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
+    provide(SEED_DATA,  { useClass: InMemoryDataService })     // in-mem server data
+]);
+// #enddocregion final
diff --git a/public/docs/_examples/toh-6/ts/example-config.json b/public/docs/_examples/toh-6/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/tutorial/ts/index.html b/public/docs/_examples/toh-6/ts/index.html
similarity index 85%
rename from public/docs/_examples/tutorial/ts/index.html
rename to public/docs/_examples/toh-6/ts/index.html
index ede4eb68e5..b84f744a78 100644
--- a/public/docs/_examples/tutorial/ts/index.html
+++ b/public/docs/_examples/toh-6/ts/index.html
@@ -3,12 +3,13 @@
   <head>
     <base href="/">
     <title>Angular 2 Tour of Heroes</title>
-    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-6/ts/plnkr.json b/public/docs/_examples/toh-6/ts/plnkr.json
new file mode 100644
index 0000000000..777d9ad1f1
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 6",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes", "http"]
+}
diff --git a/public/docs/_examples/toh-6/ts/sample.css b/public/docs/_examples/toh-6/ts/sample.css
new file mode 100644
index 0000000000..042f0494f6
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/sample.css
@@ -0,0 +1,8 @@
+button.delete-button{
+  float:right;
+  background-color: gray !important;
+  color:white;
+}
+
+
+
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.html b/public/docs/_examples/tutorial/ts/app/hero-detail.component.html
deleted file mode 100644
index af9039dc9f..0000000000
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div *ngIf="hero">
-	<h2>{{hero.name}} details!</h2>
-	<div>
-		<label>id: </label>{{hero.id}}</div>
-	<div>
-		<label>name: </label>
-		<input [(ngModel)]="hero.name" placeholder="name"/>
-	</div>
-	<button (click)="goBack()">Back</button>
-</div>
\ No newline at end of file
diff --git a/public/docs/_examples/tutorial/ts/app/hero.ts b/public/docs/_examples/tutorial/ts/app/hero.ts
deleted file mode 100644
index e94ec6124a..0000000000
--- a/public/docs/_examples/tutorial/ts/app/hero.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export class Hero {
-	id: number;
-	name: string;
-}
diff --git a/public/docs/_examples/tutorial/ts/app/mock-heroes.ts b/public/docs/_examples/tutorial/ts/app/mock-heroes.ts
deleted file mode 100644
index 406e5eb7f8..0000000000
--- a/public/docs/_examples/tutorial/ts/app/mock-heroes.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Hero } from './hero';
-
-export var HEROES: Hero[] = [
-	{"id": 11, "name": "Mr. Nice"},
-	{"id": 12, "name": "Narco"},
-	{"id": 13, "name": "Bombasto"},
-	{"id": 14, "name": "Celeritas"},
-	{"id": 15, "name": "Magneta"},
-	{"id": 16, "name": "RubberMan"},
-	{"id": 17, "name": "Dynama"},
-	{"id": 18, "name": "Dr IQ"},
-	{"id": 19, "name": "Magma"},
-	{"id": 20, "name": "Tornado"}
-];
diff --git a/public/docs/_examples/tutorial/ts/plnkr.json b/public/docs/_examples/tutorial/ts/plnkr.json
deleted file mode 100644
index fc4ea3e22c..0000000000
--- a/public/docs/_examples/tutorial/ts/plnkr.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "description": "Tour of Heroes",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js"
-  ],
-  "tags": ["tutorial", "tour", "heroes"]
-}
diff --git a/public/docs/_examples/typings.json b/public/docs/_examples/typings.json
index b5324f4199..ab3d27d712 100644
--- a/public/docs/_examples/typings.json
+++ b/public/docs/_examples/typings.json
@@ -1,6 +1,6 @@
 {
   "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
     "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
index b18e37ea87..2e97762347 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
index cfba467544..56854b73ea 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
index a20c4b4829..6023111974 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
index 0b23016ae2..bf21cdfb5a 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
index dbc5086f47..f135dfa0af 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
index 3aca9be8c7..75b5c90870 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
index 0b601e39fa..2a9041d6c1 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
index 87c8fa096c..9da49f5699 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
index 20d18c8034..dd8a9aa57f 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
index 6912de1722..649dba8588 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
index 310d1ab348..34fe7f5f48 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
@@ -12,7 +12,7 @@
   <script src="bower_components/angular-animate/angular-animate.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
-  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../node_modules/core-js/client/shim.min.js"></script>
   <script src="../node_modules/zone.js/dist/zone.js"></script>
   <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
index a1dfd126cf..e556aa9208 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="css/app.css">
   <link rel="stylesheet" href="css/animations.css">
   <!-- #docregion scripts -->
-  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../node_modules/core-js/client/shim.min.js"></script>
   <script src="../node_modules/zone.js/dist/zone.js"></script>
   <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
index 5a79c8007f..772d06f554 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
@@ -14,7 +14,7 @@
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
   <!-- #docregion ng2 -->
-  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../node_modules/core-js/client/shim.min.js"></script>
   <script src="../node_modules/zone.js/dist/zone.js"></script>
   <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <!-- #enddocregion ng2 -->
diff --git a/public/docs/_examples/user-input/ts/index.html b/public/docs/_examples/user-input/ts/index.html
index c20f29af88..f72530d64f 100644
--- a/public/docs/_examples/user-input/ts/index.html
+++ b/public/docs/_examples/user-input/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="user-input-styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
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 7691460bcd..67a2409917 100644
--- a/public/docs/_examples/webpack/ts/config/karma-test-shim.js
+++ b/public/docs/_examples/webpack/ts/config/karma-test-shim.js
@@ -1,7 +1,7 @@
 // #docregion
 Error.stackTraceLimit = Infinity;
 
-require('es6-shim');
+require('core-js/es6');
 require('reflect-metadata');
 
 require('zone.js/dist/zone');
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index 041c0b41e1..618e1867ec 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -17,7 +17,7 @@
     "@angular/platform-browser": "2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/router-deprecated": "2.0.0-rc.1",
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
diff --git a/public/docs/_examples/webpack/ts/src/polyfills.ts b/public/docs/_examples/webpack/ts/src/polyfills.ts
index 617af577cf..5de11fb502 100644
--- a/public/docs/_examples/webpack/ts/src/polyfills.ts
+++ b/public/docs/_examples/webpack/ts/src/polyfills.ts
@@ -1,5 +1,5 @@
 // #docregion
-import 'es6-shim';
+import 'core-js/es6';
 import 'reflect-metadata';
 require('zone.js/dist/zone');
 
diff --git a/public/docs/_examples/webpack/ts/typings.1.json b/public/docs/_examples/webpack/ts/typings.1.json
index b5324f4199..ab3d27d712 100644
--- a/public/docs/_examples/webpack/ts/typings.1.json
+++ b/public/docs/_examples/webpack/ts/typings.1.json
@@ -1,6 +1,6 @@
 {
   "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
     "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
diff --git a/public/docs/dart/latest/_util-fns.jade b/public/docs/dart/latest/_util-fns.jade
index 3f38aa8bea..380b4ac7a1 100644
--- a/public/docs/dart/latest/_util-fns.jade
+++ b/public/docs/dart/latest/_util-fns.jade
@@ -11,13 +11,14 @@ include ../../../_includes/_util-fns
 - var _Lang = 'Dart';
 - var _Promise = 'Future';
 - var _Observable = 'Stream';
+- var _liveLink = 'sample repo';
 
 mixin liveExampleLink(linkText, exampleUrlPartName)
   a(href='https://angular-examples.github.io/#{exampleUrlPartName}' target="_blank")= linkText
 
 mixin liveExampleLink2(linkText, exampleUrlPartName)
   - var liveExampleSourceLinkText = attributes.srcLinkText || 'view source'
-  | #[+liveExampleLink(linkText, exampleUrlPartName)] 
+  | #[+liveExampleLink(linkText, exampleUrlPartName)]
   | (#[a(href='https://github.com/angular-examples/#{exampleUrlPartName}' target="_blank") #{liveExampleSourceLinkText}])
 
 - var adjustExamplePath = function(_path) {
@@ -29,7 +30,7 @@ mixin liveExampleLink2(linkText, exampleUrlPartName)
 -   var baseName = getBaseFileName(path) || path; // TODO: have getBaseFileName() return path
 -   var baseNameNoExt = baseName.substr(0,baseName.length - (extn.length + 1));
 -   var inWebFolder = baseNameNoExt.match(/^(main|index(\.\d)?)$/);
--   // Adjust the folder path, e.g., ts -> dart 
+-   // Adjust the folder path, e.g., ts -> dart
 -   folder = folder.replace(/(^|\/)ts($|\/)/, '$1dart$2').replace(/(^|\/)app($|\/)/, inWebFolder ? '$1web$2' : '$1lib$2');
 -   // Special case not handled above: e.g., index.html -> web/index.html
 -   if(baseNameNoExt.match(/^(index|styles)(\.\d)?$/)) folder = (folder ? folder + '/' : '') + 'web';
diff --git a/public/docs/dart/latest/guide/index.jade b/public/docs/dart/latest/guide/index.jade
index 8ef237ed68..417bf9ea8d 100644
--- a/public/docs/dart/latest/guide/index.jade
+++ b/public/docs/dart/latest/guide/index.jade
@@ -1,93 +1,13 @@
-include ../_util-fns
-
-:marked
-  This Developers Guide is a practical guide to Angular for experienced programmers who
-  are building client applications in HTML and Dart.
-figure
-  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
-:marked
-  We are on a journey together to understand how Angular works and, more importantly,
-  how to make it work for us. We look at our application requirements and we see problems to solve.
-  <br clear="all">
-
-  * How do we get data onto the screen and handle user interactions?
-  * How do we organize our code into manageable, cohesive chunks of functionality that work together?
-  * What are the essential Angular building blocks and how do they help?
-  * How do we minimize routine, mechanical coding in favor of declarative, higher level constructs without losing control?
-
-  This chapter begins the journey.
-
-<a id="how-to-read"></a>
-:marked
-  # How to read this guide
-  Each chapter of this guide targets an Angular feature,
-  showing how to use it to solve a programming problem.
-
-  All the chapters include code snippets ... snippets we can reuse in our own applications.
-  Typically, these snippets are excerpts from a sample application that accompanies the chapter.
-
-  **All the source files** for each sample app are displayed together at the **end of each chapter.**
-
-  <!-- Although a few early chapters are written as tutorials, most later chapters
-  don't explain how to build the accompanying sample.
-  These non-tutorial chapters highlight key points in code but generally don't include the entire source. -->
-
-  <!-- We don't have to read this guide straight through. -->
-  <!-- The "[Cheat Sheet](cheatsheet.html)" is a handy map to Angular overall. -->
-  <!-- A few early chapters are arranged sequentially and best read together to establish a foundation in Angular.
-  But most chapters stand on their own. We can browse to any of them as our interest or some necessity moves us. -->
-
-  Here is a learning path we might follow:
-
-  1. First, be familiar with Dart programming and with web concepts such as
-  the DOM, HTML, and CSS. Dart tutorials such as
-  [Get Started](https://www.dartlang.org/docs/tutorials/get-started/) and
-  [Connect Dart & HTML](https://www.dartlang.org/docs/tutorials/connect-dart-html/)
-  are a great way to start.
-
-  1. Follow the [QuickStart](../quickstart.html), which is the "Hello, World" of Angular 2.
-  It shows how to set up the libraries and tools needed to write *any* Angular app.
-  It ends with a "proof of life", a running Angular app.
-
-  1. Next, read the Developers Guide chapters in order:
-    <!-- TODO: adjust this text once we have non-introductory/tutorial chapters -->
-    1. The rest of this chapter, especially the Architecture overview
-    1. [Displaying Data](displaying-data.html)
-    1. [User Input](user-input.html)
-    1. [Forms](forms.html)
-    <!-- add dependency injection when it exists -->
-    <!-- add text about template syntax, once that exists -->
-
-  1. Consider hopping over to the [TypeScript docs](/docs/ts/latest/)
-     since they're currently ahead of the Dart docs. (We're working on that!)
-     Especially check out the [Tutorial](/docs/ts/latest/tutorial/) and
-     [Cheat Sheet](/docs/ts/latest/guide/cheatsheet.html), and the guide chapters
-     [Dependency Injection](/docs/ts/latest/guide/dependency-injection.html)
-     and [Template Syntax](/docs/ts/latest/guide/template-syntax.html).
-
-  <!-- Follow your own star from there, wherever it leads. -->
-
-  Don't miss the [Cheat Sheet](cheatsheet.html), a handy map to Angular.
-
-<a id="toh"></a>
-.l-main-section
-:marked
-  # Appendix: The Hero Staffing Agency
-
-  There's a backstory to the <!-- the "Tour of Heroes" and --> samples in this guide.
-
-  The world is full of crises large and small.
-  Fortunately, courageous heroes are prepared to take on every challenge.
-  The shadowy Hero Staffing Agency matches crises to heroes.
-
-  We are contract developers, hired by the Agency to build an application to manage their operations.
-  The Agency maintains a stable of heroes with special powers.
-  Ordinary humans submit crises as job requests. The heroes bid to take the job, and the Agency
-  assigns each job accordingly.
-
-  Our application handles every detail of recruiting, tracking, and job assignment.
-  For example, the [Forms](forms.html) chapter features a screen for
-  entering personal information about heroes:
-
-figure.image-display
-  img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")
+extends ../../../ts/latest/guide/index.jade
+
+block includes
+  include ../_util-fns
+
+block example-links
+  :marked
+    Look for a link to that sample near the top of each page.
+    For example, the sample repo https://github.com/angular-examples/architecture
+    contains the code
+    for the [Architecture](architecture.html) chapter's sample.
+    A running version of that sample is at
+    https://angular-examples.github.io/architecture/.
diff --git a/public/docs/dart/latest/guide/server-communication.jade b/public/docs/dart/latest/guide/server-communication.jade
index 9572a51b0f..0195d5cb88 100644
--- a/public/docs/dart/latest/guide/server-communication.jade
+++ b/public/docs/dart/latest/guide/server-communication.jade
@@ -2,10 +2,40 @@ extends ../../../ts/latest/guide/server-communication.jade
 
 block includes
   include ../_util-fns
+  - var _Http = 'BrowserClient';
+  - 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> library</a>'
+
+block demos-list
+  li HTTP client: Tour of Heroes
+  li JSONP client: Wikipedia to fetch data from a service that doesn't support CORS (under development)
+
+block rxjs-import
+  //- N/A
+
+block http-client
+  
+block system-config-of-http
+  //- N/A
 
 block http-providers
-  //- TODO(chalin): mention the Angular transformer resolved_identifiers.
-  //- Maybe not yet at this point in the chapter.
+  :marked
+    Actually, it is unnecessary to include `BrowserClient` in the list of providers.
+    ***But*** as is mentioned in the *Angular 2 Dart Transformer* [wiki page][ng2dtri],
+    the template compiler _generates_ dependency injection code, hence all the
+    identifiers used in DI have to be collected by the Angular 2 transformer
+    so that the libraries containing these identifiers can be transformed.
+
+    Unless special steps are taken, Dart libraries like `http`
+    are not transformed. To ensure that the `BrowserClient` identifier is available
+    for DI, we must add a `resolved_identifiers` parameter to the `angular2`
+    transformer in `pubspec.yaml`:
+
+    [ng2dtri]: https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer#resolved_identifiers
+
+  - var stylePattern = { pnk: /(resolved_identifiers:|Browser.*)/gm, otl: /(- angular2:)|(transformers:)/g };
+  +makeExcerpt('pubspec.yaml', 'transformers', 'pubspec.yaml (transformers)', stylePattern)
 
 block getheroes-and-addhero
   :marked
@@ -20,27 +50,13 @@ block getheroes-and-addhero
     programming in Dart, or the tutorial on 
     [_Asynchronous Programming: Futures_](https://www.dartlang.org/docs/tutorials/futures/).
 
-block http-client-service
-  :marked
-    The imported `BrowserClient` client service gets
-    [injected](dependency-injection.html) into the `HeroService` constructor.
-    Note that `BrowserClient` is not part of the Angular core. 
-    It's an optional service provided by the Dart 
-    [`http` package](https://pub.dartlang.org/packages/http).
-
 block rxjs
   //- N/A
 
-block non-success-status-codes
-  :marked
-    Because a status code outside the 200-299 range _is an error_ from the
-    application point of view, we test for this condition and throw an
-    exception when detected.
-
 block parse-json
   :marked
     The response data are in JSON string form.
-    We must parse that string into JavaScript objects which we do by calling
+    We must parse that string into Objects which we do by calling
     the `JSON.decode()` method from the `dart:convert` library.
 
 block error-handling
@@ -58,14 +74,13 @@ block hero-list-comp-add-hero
     Back in the `HeroListComponent`, we see that *its* `addHero()`
     awaits for the *service's* asynchronous `addHero()` to return, and when it does,
     the new hero is added to the `heroes` list for presentation to the user.
-  +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
 
 block promises
   //- N/A
 
 block wikipedia-jsonp+
   :marked
-    Wikipedia offers both `CORS` and `JSONP` search APIs.
+    Wikipedia offers a modern `CORS` API and a legacy `JSONP` search API.
   .alert.is-important
     :marked
       The remaining content of this section is coming soon.
@@ -77,6 +92,4 @@ block redirect-to-web-api
   :marked
     To achieve this, we have Angular inject an in-memory web API server
     instance as a provider for the `BrowserClient`. This is possible because
-    the in-memory web API server class extends `BrowserClient`. Here are the
-    pertinent details, excerpt from `TohComponent`:
-  +makeExample('server-communication/ts/app/toh/toh.component.ts', 'in-mem-web-api', 'app/toh.component.ts (excerpt)')(format=".")
+    the in-memory web API server class extends `BrowserClient`.
diff --git a/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade b/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade
deleted file mode 100644
index 7c8a0565f7..0000000000
--- a/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade
+++ /dev/null
@@ -1,699 +0,0 @@
-include ../_util-fns
-
-: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 tour.
-:marked
-    [Run the live example](/resources/live-examples/toh-5/ts/plnkr.html).
-.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.
-
-.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
-    ### Run the app
-    Open a terminal/console window and enter the following command to
-    start the server:
-
-code-example(format="." language="bash").
-    pub serve
-
-:marked
-    The application runs by default on `localhost:8080`.
-
-    ## 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:
-    * rename `app_component.dart` file to `heroes_component.dart`.
-    * rename the `AppComponent` class to `HeroesComponent`.
-    * rename the selector `my-app` to `my-heroes`.
-
-:marked
-+makeExample('toh-5/dart/lib/heroes_component.dart', 'heroes-component-renaming', 'lib/heroes_component.dart (renaming)')(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 decorator 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` array so Angular recognizes the `<my-heroes>` tags.
-    * add the `HeroService` to the `providers` array 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
-    :marked
-        Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` array.
-        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.
-
-: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*.
-
-    ### Include the Router Library
-    Not all apps need routing which is why the Angular *Component Router* is in a separate, optional module library.
-
-//    Our Tour of Heroes needs routing,
-//    so we load the library in the `index.html` in a script tag immediately *after* the angular script itself.
-//makeExample('toh-5/dart/web/index.html', 'router', 'index.html (router)')(format=".")
-:marked
-    While we're in `index.html`, we 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.
-    The *Component Router* is a service. Like any service, we have to import it and make it
-    available to the application by adding it to the `providers` array.
-
-    The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`),
-    and a configuration decorator (`RouteConfig`). We'll import them all together:
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'import-router', 'app_component.dart (router imports)')(format=".")
-:marked
-    Next we update the `directives` and `providers` metadata arrays to *include* the router assets.
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'directives-and-providers', 'app_component.dart (directives and providers)')(format=".")
-:marked
-    Notice that we also removed the `HeroesComponent` from the `directives` array.
-    `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` decorator 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', 'app_component.dart (RouteConfig for heroes)')(format=".")
-:marked
-    `@RouteConfig` takes 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 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
-
-    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', 'app_component.dart (template for Heroes)')(format=".")
-:marked
-    Notice the `[routerLink]` binding in the anchor tag.
-    We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array
-    that tells the router where to navigate when the user clicks the link.
-
-    We define a *routing instruction* with a *link parameters array*.
-    The array 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 array* 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
-    :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('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*.
-
-
-: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` array of definitions.
-+makeExample('toh-5/dart/lib/app_component.dart','dashboard-route', 'app_component.dart (Dashboard Route)')(format=".")
-.l-sub-section
-    :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
-        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', 'app_component.dart (template)')(format=".")
-.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
-    Refresh the browser. 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.
-
-+makeExample('toh-5/dart/lib/dashboard_component.dart', 'template-url', 'lib/dashboard_component.dart (templateUrl)')(format=".")
-.l-sub-section
-    :marked
-        We specify the path _all the way back to the application root_. Angular doesn't support module-relative paths.
-:marked
-    Create that file with these contents:
-+makeExample('toh-5/dart/lib/dashboard_component.html', null, '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.
-
-    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 the `HeroesComponent`
-    and added it to the `providers` array of the top level `AppComponent`.
-
-    That move created a singleton `HeroService` instance, available to *all* components of the application.
-    We'll inject and 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.
-    We need the `Hero` and `HeroService` symbols in order to reference those types.
-
-    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` array 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
-    :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`.
-
-    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 remember what it looks like now:
-
-    **[TODO: Add example, once it exists.]**
-
-// 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` from storage.
-
-    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 import the `OnInit` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-oninit')(format=".")
-:marked
-    We inject the 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
-    :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/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=".")
-:marked
-
-
-.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 array*
-    1. pass the array to the router's navigate method.
-
-    We wrote *link parameters arrays* in the `AppComponent` for the navigation links.
-    Those arrays had only one element, the name of the destination route.
-
-    This array 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 array 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.
-
-    **[TODO: Add example, once it exists.]**
-
-// 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
-    :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 `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.
-
-    The revised component data 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 array*.
-
-    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` array 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 an array 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` array 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', 'css', 'lib/app_component.css (Navigation Styles)')
-.l-sub-section
-    :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.
-    Add the following to a new file named `styles.css` in the root folder.
-+makeExample('toh-5/ts/styles.1.css', '', 'styles.css (App Styles)')(format=".")
-
-:marked
-    Reference this stylesheet within the `index.html` in the traditional manner.
-+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 for this chapter](/resources/live-examples/toh-5/ts/plnkr.html).
-    Verify that we have the following structure:
-
-.filetree
-    .file angular2-tour-of-heroes
-    .children
-        .file lib
-        .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
-:marked
-
-.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 a forthcoming tutorial chapter,
-    we’ll replace our mock data with data retrieved from a server using http.
diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade
index 2a7dba70c4..dda232bed8 100644
--- a/public/docs/dart/latest/tutorial/toh-pt5.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt5.jade
@@ -1,14 +1,696 @@
 include ../_util-fns
 
 :marked
-  We're working on the Dart version of this case study.
-  In the meantime, please see these resources:
+    # 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.
 
-  * [Routing](/docs/ts/latest/tutorial/toh-pt5.html):
-    The TypeScript version of this chapter
+    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 tour.
+:marked
+  The complete source code for the example app in this chapter is
+  [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart).
+
+.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
+    .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:
+
+code-example(format="." 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
+    :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:
+    * rename `app_component.dart` file to `heroes_component.dart`.
+    * rename the `AppComponent` class to `HeroesComponent`.
+    * rename the selector `my-app` to `my-heroes`.
+
+:marked
++makeExample('toh-5/dart/lib/heroes_component.dart', 'heroes-component-renaming', 'lib/heroes_component.dart (renaming)')(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
+    :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.
+
+: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*.
+
+    ### Add a base tag
+
+//    Our Tour of Heroes needs routing,
+//    so we load the library in the `index.html` in a script tag immediately *after* the angular script itself.
+//+makeExample('toh-5/dart/web/index.html', 'router', 'index.html (router)')(format=".")
+: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
+
+    Not all apps need routing, which is why the Angular *Component Router* is in a separate, optional module library.
+
+    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', 'app_component.dart (router imports)')(format=".")
+
+: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.
+
+    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', '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', '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
+
+    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', 'app_component.dart (template for Heroes)')(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
+    :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
+    :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('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*.
+
+
+: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', 'app_component.dart (Dashboard Route)')(format=".")
+.l-sub-section
+    :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
+        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', 'app_component.dart (template)')(format=".")
+.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
+    Refresh the browser. 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.
+
++makeExample('toh-5/dart/lib/dashboard_component.dart', 'template-url', 'lib/dashboard_component.dart (templateUrl)')(format=".")
+.l-sub-section
+    :marked
+        We specify the path _all the way back to the application root_. Angular doesn't support module-relative paths.
+:marked
+    Create that file with these contents:
++makeExample('toh-5/dart/lib/dashboard_component.html', null, '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.
+
+    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.
+    We'll inject and 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.
+    We need the `Hero` and `HeroService` symbols in order to reference those types.
+
+    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
+    :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`.
+
+    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 remember 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` from storage.
+
+    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 import the `OnInit` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-oninit')(format=".")
+:marked
+    We inject the 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
+    :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/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=".")
+:marked
+
+
+.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.
+
+    **[TODO: Add example, once it exists.]**
+
+// 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
+    :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 `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.
+
+    The revised component data 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 an 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', 'css', 'lib/app_component.css (Navigation Styles)')
+.l-sub-section
+    :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.
+    Add the following to a new file named `styles.css` in the root folder.
++makeExample('toh-5/ts/styles.1.css', '', 'styles.css (App Styles)')(format=".")
+
+:marked
+    Reference this stylesheet within the `index.html` in the traditional manner.
++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 for this chapter](/resources/live-examples/toh-5/ts/plnkr.html).
+    Verify that we have the following structure:
+
+.filetree
+    .file angular2-tour-of-heroes
+    .children
+        .file lib
+        .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
+:marked
+
+.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
 
-  * [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart):
-    A preliminary Dart version of the Tour of Heroes app,
-    featuring the hero editor, a master/detail page,
-    multiple components, services, and routing
+    ### 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 a forthcoming tutorial chapter,
+    we’ll replace our mock data with data retrieved from a server using http.
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index 211e12bfd4..0f11368d41 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -11,6 +11,11 @@
     "intro": "Learn how Angular 1 concepts and techniques map to Angular 2"
   },
 
+  "barrels": {
+    "title": "Creating Barrels",
+    "intro": "Create and use barrels to simplify module imports"
+  },
+
   "component-communication": {
     "title": "Component Interaction",
     "intro": "Share information between different directives and components"
diff --git a/public/docs/ts/latest/cookbook/barrels.jade b/public/docs/ts/latest/cookbook/barrels.jade
new file mode 100644
index 0000000000..be113555ed
--- /dev/null
+++ b/public/docs/ts/latest/cookbook/barrels.jade
@@ -0,0 +1,106 @@
+include ../_util-fns
+
+<a id="top"></a>
+:marked
+  This cookbook contains recipes for creating barrels to simplify file imports. In Angular 2 apps, we frequently find
+  ouselves importing multiple files together (for example, in the tutorial app, the hero component and the hero service
+  are both frequently imported together into other components). We can create a single export that contains them both
+  so they can be easily imported together. This is called a barrel.
+
+<a id="toc"></a>
+:marked
+  ## Table of contents
+
+  [Creating a barrel](#creating-a-barrel)
+
+  [Importing a barrel](#importing-a-barrel)
+
+:marked
+  **See the [live example](/resources/live-examples/cb-barrels/ts/plnkr.html)**.
+
+.l-main-section
+<a id="creating-a-barrel"></a>
+:marked
+  ## Creating a barrel
+
+  The `Hero` model, `HeroDetailComponent`, `HeroesComponent`, and `HeroService` are all frequently used together.
+  It would make things easier if we could import them all together. To make this possible, each of them
+  is moved into a `heroes` directory and organized into sub-directories with their supporting files:
+
+.filetree
+  .file heroes
+  .children
+    .file heroes.component.css
+    .file heroes.component.html
+    .file heroes.component.ts
+    .file hero-detail
+    .children
+      .file hero-detail.component.css
+      .file hero-detail.component.html
+      .file hero-detail.component.ts
+    .file shared
+    .children
+      .file hero.service.ts
+      .file hero.ts
+      .file mock-heroes.ts
+
+:marked
+  Since there are two exportable items in the shared folder, an `index.ts` file is created in that
+  folder, and then each of the files in that folder are imported and re-exported. This is our first
+  barrel. Since `mock-heroes.ts` is not used outside of the barrel it is not re-exported:
++makeExample('cb-barrels/ts/app/heroes/shared/index.ts', '', 'app/heroes/shared/index.ts')
+
+:marked
+  Even though there is only a single exportable item in the hero-detail folder, a barrel is
+  created in that folder so that all our imports are consistent, rather than some importing
+  barrels like this:
+
+  (`import { ... } from './shared'`)
+
+  and  others importing files like this:
+
+  `import { ... } from './hero-detail/hero-detail.component'`
++makeExample('cb-barrels/ts/app/heroes/hero-detail/index.ts', '', 'app/heroes/hero-detail/index.ts')
+
+:marked
+  Our final barrel is in the heroes folder and it consolidates each of the other barrels into one.
+  An `index.ts` file is created in the heroes folder and then the components and barrels we just
+  created are all imported and re-exported:
++makeExample('cb-barrels/ts/app/heroes/index.ts', '', 'app/heroes/index.ts')
+
+:marked
+  The SystemJs module loader is not yet able to identify our new barrels, so
+  they are added manually as packages in index.html.
++makeExample('cb-barrels/ts/index.html', 'packages', 'index.html')
+
+:marked
+  The files inside the barrels can now be imported through a single import.
+
+<a id="importing-a-barrel"></a>
+:marked
+  ## Importing a barrel
+  The app component imports the `HeroesComponent`, `HeroDetailComponent`, and `HeroService` with a
+  single import:
++makeExample('cb-barrels/ts/app/app.component.ts', 'imports', 'app/app.component.ts')
+
+:marked
+  The dashboard component imports `Hero` and `HeroService` with a single import:
++makeExample('cb-barrels/ts/app/dashboard.component.ts', 'imports', 'app/dashboard.component.ts')
+
+:marked
+  The `main.ts` bootstrap file imports `HeroService`:
++makeExample('cb-barrels/ts/app/main.ts', 'imports', 'app/main.ts')
+
+.alert.is-helpful
+  :marked
+    Do not attempt to reference the barrel index file from within the barrel.
+    These files are still imported individually as shown below.
+
+:marked
+  The `HeroDetailComponent` is updated to import the `HeroService` and `Hero` model from the
+  `shared` barrel.
++makeExample('cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts', 'imports', 'app/heroes/hero-detail/hero-detail.component.ts')
+
+:marked
+  And finally, the `HeroesComponent` imports the the `HeroDetailComponent` from it's barrel:
++makeExample('cb-barrels/ts/app/heroes/heroes.component.ts', 'imports', 'app/heroes/heroes.component.ts')
diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade
index 1e21e9409b..e15af274c9 100644
--- a/public/docs/ts/latest/cookbook/dependency-injection.jade
+++ b/public/docs/ts/latest/cookbook/dependency-injection.jade
@@ -178,7 +178,7 @@ figure.image-display
   
   Accordingly, dependencies provided in the root `AppComponent` can be injected into *any* component *anywhere* in the application.
   
-  That isn't always desireable. 
+  That isn't always desirable. 
   Sometimes we want to restrict service availability to a particular region of the application.
   
   We can limit the scope of an injected service to a *branch* of the application hierarchy
@@ -277,7 +277,7 @@ a(id="qualify-dependency-lookup")
   placing it in the `<ng-content>` slot of the `HeroBioComponent` template:
 +makeExample('cb-dependency-injection/ts/app/hero-bio.component.ts','template','app/hero-bio.component.ts (template)')(format='.')
 :marked
-  It looks like this, with the heroe's telephone number from `HeroContactComponent` projected above the hero description:
+  It looks like this, with the hero's telephone number from `HeroContactComponent` projected above the hero description:
 figure.image-display
   img(src="/resources/images/cookbooks/dependency-injection/hero-bio-and-content.png" alt="bio and contact")    
 :marked
@@ -308,7 +308,7 @@ figure.image-display
 :marked
   If we comment out the `@Host()` decorator, Angular now walks up the injector ancestor tree 
   until it finds the logger at the `AppComponent` level. The logger logic kicks in and the hero display updates
-  with the gratuituous "!!!", indicating that the logger was found.
+  with the gratuitous "!!!", indicating that the logger was found.
 figure.image-display
   img(src="/resources/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png" alt="Without @Host") 
 :marked
@@ -367,7 +367,7 @@ figure.image-display
   
   Where did the injector get that value?
   It may already have that value in its internal container. 
-  It it doesn't, it may be able to make one with the help of a ***provider***.
+  If it doesn't, it may be able to make one with the help of a ***provider***.
   A *provider* is a recipe for delivering a service associated with a *token*.
 .l-sub-section
   :marked
diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade
index a6728b3a79..9fc8f82f68 100644
--- a/public/docs/ts/latest/guide/index.jade
+++ b/public/docs/ts/latest/guide/index.jade
@@ -1,4 +1,5 @@
-include ../_util-fns
+block includes
+  include ../_util-fns
 
 // #docregion intro
 - var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
@@ -17,7 +18,7 @@ figure
 <a id="learning-path"></a>
 :marked
   # Organization
-  
+
   The documentation is divided into major thematic sections, each
   a collection of chapters devoted to that theme.
 // #enddocregion how-to-read-1
@@ -26,14 +27,16 @@ figure
 table(width="100%")
   col(width="15%")
   col
+  tr(style=top)
+    td <b>QuickStart</b>
+    td
+      :marked
+        The foundation for every chapter and sample in this documentation.
   tr(style=top)
     td <b>Tutorial</b>
     td
       :marked
-        A step-by-step, immersive approach to learning Angular. 
-        It begins with the [QuickStart](../quickstart.html), 
-        the foundation for every chapter and sample in this documentation,
-        followed by the [*Tour of Heroes* tutorial](../tutorial) that
+        A step-by-step, immersive approach to learning Angular that
         introduces the major features of Angular in an application context.
   tr(style=top)
     td <b>Basics</b>
@@ -44,86 +47,83 @@ table(width="100%")
     td <b>Developer Guide</b>
     td
       :marked
-        In depth analysis of Angular features and development practices.
+        In-depth analysis of Angular features and development practices.
   tr(style=top)
     td <b>Cookbook</b>
     td
       :marked
         Recipes for specific application challenges, mostly code snippets with a minimum of exposition.
   tr(style=top)
-    td <b>Reference</b>
+    td <b>API Reference</b>
     td
       :marked
-        Angular-specific reference material, most notably the [API Guide](../api)
-        with its authoritative details about each member in the Angular libraries.
-  tr(style=top)
-    td <b>Resources</b>
-    td
-      :marked
-        Other places to go for help and information.
+        Authoritative details about each member of the Angular libraries.
 :marked
-  # Learning Path
-  We don't have to read the guide straight through.  Most chapters stand on their own. 
-   
-  We recommend a learning path for those new to Angular. 
+  # Learning path
+  We don't have to read the guide straight through.  Most chapters stand on their own.
+
+  We recommend a learning path for those new to Angular.
   Most of that path runs through the *Basics* section:
 
-  1. Read the [Architecture Overview](architecture.html) to get the big picture.
-  
-  1. Try the [QuickStart](../quickstart.html). The QuickStart is the "Hello, World" of Angular 2. 
-  It shows us how to setup the libraries and tools we'll need to write *any* Angular app. 
-  
-  1. Take the *Tour of Heroes* [Tutorial](../tutorial) which picks up from where the QuickStart leaves off 
-  and builds a simple data-driven app. 
+  1. Read the [Architecture](architecture.html) overview to get the big picture.
+
+  1. Try the [QuickStart](../quickstart.html). The QuickStart is the "Hello, World" of Angular 2.
+  It shows us how to set up the libraries and tools we'll need to write *any* Angular app.
+
+  1. Take the *Tour of Heroes* [Tutorial](../tutorial), which picks up from where the QuickStart leaves off
+  and builds a simple data-driven app.
   Simple, yes, but with the essential characteristics we'd expect of a professional application:
-  a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access. 
-  
+  a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
+
     Return to the *Basics* section and continue in the suggested order:
-    
+
   1. [Displaying Data](displaying-data.html) explains how to get information on to the screen.
-  
+
   1. [User Input](user-input.html) covers the basics of responding to user behavior.
-  
+
   1. [Forms](forms.html) handle user data entry and validation within the UI.
-  
+
   1. [Dependency Injection](dependency-injection.html) is the way we build large, maintainable applications
-  from small, single purpose parts.
-  
-  1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML. 
+  from small, single-purpose parts.
+
+  1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
 
   With this foundation, we can read and understand any chapter in the guide.
 // #enddocregion how-to-read-2
 // #docregion the-rest
 :marked
-  # Code Samples
-  
-  Every chapter includes code snippets that we can reuse in our own applications. 
+  # Code samples
+
+  Every chapter includes code snippets that we can reuse in our own applications.
   These snippets are excerpts from a sample application that accompanies the chapter.
-  
-  Look for a link to a running version of that sample near the top of each page
-  such as this [live example](/resources/live-examples/architecture/ts/plnkr.html) from the [Architecture](architecture.html) chapter.
-  
-  The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
-  
-  A few early chapters are written as tutorials and are clearly marked as such. 
-  Most chapters are *not* tutorials. 
+
+block example-links
+  :marked
+    Look for a link to a running version of that sample near the top of each page,
+    such as this [live example](/resources/live-examples/architecture/ts/plnkr.html) from the [Architecture](architecture.html) chapter.
+
+    The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
+
+:marked
+  A few early chapters are written as tutorials and are clearly marked as such.
+  Most chapters are *not* tutorials.
   They highlight key points in code rather than explain each step necessary to build the sample.
-  We can always get the full source by way of the live link.
-  
-  ## References
-    
+  We can always get the full source by way of the #{_liveLink}.
+
+  # Reference pages
+
   The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
-    
+
   The [Glossary](glossary.html) defines terms that Angular developers should know.
-  
-  The [API Guide](../api/) is the authority on every public-facing member of the Angular libraries.
- 
+
+  The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
+
   # Feedback
-  
+
   We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner.
-  
-  Post *documentation* issues and pull requests on the 
+
+  Post *documentation* issues and pull requests on the
   [angular.io](https://github.com/angular/angular.io) github repository.
-  
+
   Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
 // #enddocregion the-rest
diff --git a/public/docs/ts/latest/guide/npm-packages.jade b/public/docs/ts/latest/guide/npm-packages.jade
index 2ae1b9fa33..4997eafd28 100644
--- a/public/docs/ts/latest/guide/npm-packages.jade
+++ b/public/docs/ts/latest/guide/npm-packages.jade
@@ -103,7 +103,7 @@ a(id="polyfills")
   :marked
     See "[Why peerDependencies?](#why-peer-dependencies)" below for background on this requirement.
 :marked
-  ***es6-shim*** - monkey patches the global context (window) with essential features of ES2015 (ES6).
+  ***core-js*** - monkey patches the global context (window) with essential features of ES2015 (ES6).
    Developers may substitute an alternative polyfill that provides the same core APIs. 
    This dependency should go away once these APIs are implemented by all supported ever-green browsers.
   
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index f630ac1d07..eea4772a11 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -1,5 +1,9 @@
 block includes
   include ../_util-fns
+  - var _Http = 'Http'; // Angular `Http` library name.
+  - var _Angular_Http = 'Angular <code>Http</code>'
+  - var _Angular_http_library = 'Angular HTTP library'
+
 :marked
   [HTTP](https://tools.ietf.org/html/rfc2616) is the primary protocol for browser/server communication.
 .l-sub-section
@@ -16,7 +20,7 @@ block includes
   as we'll learn in this chapter covering:
 
 ul
-  li #[a(href="#http-client") Http client sample overview]
+  li #[a(href="#http-client") HTTP client sample overview]
   li #[a(href="#fetch-data") Fetch data with http.get]
   +ifDocsFor('ts')
     li #[a(href="#rxjs") RxJS Observable of HTTP Responses]
@@ -35,79 +39,110 @@ ul
 p.  
   We illustrate these topics with code that you can 
   #[+liveExampleLink2('run live in a browser', 'server-communication')].
+  
+.l-main-section
+h1 Demos
+p  This chapter describes server communication with the help of the following demos
+ul
+  block demos-list
+    li HTTP client: Tour of Heroes with Observables
+    li HTTP client: Tour of Heroes with #{_Promise}s
+    li JSONP client: Wikipedia to fetch data from a service that doesn't support CORS
+    li JSONP client: Wikipedia using observable operators to reduce server calls
+:marked
+  These demos are orchestrated by the root `AppComponent`
++makeExample('server-communication/ts/app/app.component.ts', null, 'app/app.component.ts')
+
+block rxjs-import
+  :marked
+    There is nothing remarkable here _except_ for the import of RxJS operators.
+  +makeExample('server-communication/ts/app/app.component.ts', 'import-rxjs')(format='.')
+  :marked
+    We'll talk about that [below](#rxjs) when we're ready to explore observables. 
+:marked
+  First, we have to configure our application to use server communication facilities.
 
 .l-main-section
-a#http-client
+h1#http-providers Providing HTTP Services
 :marked
-  ## The *Http* Client Demo
-  
-  We use the Angular `Http` client to communicate via `XMLHttpRequest (XHR)`.
-  
-  We'll demonstrate with a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
-  This version gets some heroes from the server, displays them in a list, lets us add new heroes, and saves them to the server.
-  
-  It works like this.
-figure.image-display
-  img(src='/resources/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250")
+  We use the !{_Angular_Http} client to communicate with a server using a familiar HTTP request/response protocol.
+  The `!{_Http}` client is one of a family of services in the !{_Angular_http_library}.
+block system-config-of-http
+  .l-sub-section
+    :marked
+      SystemJS knows how to load services from the !{_Angular_http_library} when we import from the `@angular/http` module
+      because we registered that module name in the `system.config` file.
 :marked
-  It's implemented with two components &mdash; a parent `TohComponent` shell and the `HeroListComponent` child.
-  We've seen these kinds of component in many other documentation samples. 
-  Let's see how they change to support communication with a server.
+    Before we can use the `!{_Http}` client , we'll have to register it as a service provider with the Dependency Injection system.
 .l-sub-section
   :marked
-    We're overdoing the "separation of concerns" by creating two components for a tiny demo. 
-    We're making a point about application structure that is easier to justify when the app grows.
-:marked
-  Here is the `TohComponent` shell:
-+makeExample('server-communication/ts/app/toh/toh.component.ts', '', 'app/toh/toh.component.ts')
+    Learn about providers in the [Dependency Injection](dependency-injection.html) chapter.
+
+p In this demo, we register providers in the #[code bootstrap] method of #[code #[+adjExPath('app/main.ts')]].
++makeExample('server-communication/ts/app/main.ts', 'v1', 'app/main.ts (v1)')(format='.')
 
 block http-providers
   :marked
-    As usual, we import the symbols we need. The newcomer is `HTTP_PROVIDERS`, 
-    an array of service providers from the Angular HTTP library.
-    We'll be using that library to access the server.
-    We also import a `HeroService` that we'll look at shortly.
+    We begin by importing the symbols we need, most of them familiar by now. The newcomer is `HTTP_PROVIDERS`, 
+    a collection of service providers from the Angular HTTP library.
+ 
+    We register HTTP providers in the bootstrap method by passing them in an array as the second parameter after the root component.
 
-    The component specifies both the ``HTTP_PROVIDERS` and the `HeroService` in the metadata `providers` array,
-    making them available to the child components of this "Tour of Heroes" application.
+    ### Why register in *bootstrap*?
+    
+    We prefer to register application-wide providers in the metadata `providers` array
+    of the root `AppComponent` like this:
+  +makeExample('server-communication/ts/app/app.component.ts','http-providers')(format='.')
+  :marked
+    Here we register the providers in the `bootstrap` method in the `main.ts` file. Why?
+    
+    This is a *sample application* that doesn't talk to a real server.
+    We're going to reconfigure the (typically-hidden) `XhrBackend` service with a fake provider
+    that fetches and saves sample data from an in-memory data store.
+    This replacement service is called the [*in-memory web api*](#in-mem-web-api).
+    
+    Such sleight-of-hand is something the root application component should *not* know about.
+    For this reason, and this reason *only*, we hide it *above* the `AppComponent` in `main.ts`.
 
-  .l-sub-section
-    :marked
-      Alternatively, we may choose to add the `HTTP_PROVIDERS` while bootstrapping the app:
-    +makeExample('server-communication/ts/app/main.ts','http-providers','app/main.ts')(format='.')
-    :marked
-      Learn about providers in the [Dependency Injection](dependency-injection.html) chapter.
+.l-main-section
+a#http-client
+:marked
+  # The Tour of Heroes *HTTP* Client Demo
   
+  Our first demo is a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
+  This version gets some heroes from the server, displays them in a list, lets us add new heroes, and saves them to the server.
+  We use the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`.
+
+  It works like this.
+figure.image-display
+  img(src='/resources/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250")
 :marked
-  This sample only has one child, the `HeroListComponent`.  Here's its template:
+  This demo has a single component, the `HeroListComponent`.  Here's its template:
 +makeExample('server-communication/ts/app/toh/hero-list.component.html', null, 'app/toh/hero-list.component.html (template)')
 :marked
-  The component template displays a list of heroes with the `ngFor` repeater directive.
-figure.image-display
-  img(src='/resources/images/devguide/server-communication/hero-list.png' alt="Hero List")
-:marked
-  Beneath the heroes is an input box and an *Add Hero* button where we can enter the names of new heroes
+  It presents the list of heroes with an `ngFor`. 
+  Below the list is an input box and an *Add Hero* button where we can enter the names of new heroes
   and add them to the database. 
   We use a [template reference variable](template-syntax.html#ref-vars), `newHeroName`, to access the 
   value of the input box in the `(click)` event binding.
   When the user clicks the button, we pass that value to the component's `addHero` method and then
-  clear it to make ready for a new hero name.
+  clear it to make it ready for a new hero name.
   
   Below the button is an area for an error message.
 
-a(id="oninit")
-a(id="HeroListComponent")
+a#oninit
+a#HeroListComponent
 :marked
-  ### The *HeroListComponent* class
+  ## The *HeroListComponent* class
   Here's the component class:
 +makeExample('server-communication/ts/app/toh/hero-list.component.ts','component', 'app/toh/hero-list.component.ts (class)')  
 :marked
-  We [inject](dependency-injection.html) the `HeroService` into the constructor.
-  That's the instance of the `HeroService` that we provided in the parent shell `TohComponent`.
+  Angular [injects](dependency-injection.html) a `HeroService` into the constructor
+  and the component calls that service to fetch and save data.
 
-  Notice that the component **does not talk to the server directly!** 
+  The component **does not talk directly to the !{_Angular_Http} client**!
   The component doesn't know or care how we get the data. 
-  Those details it delegates to the `heroService` class (which we'll get to in a moment).
+  It delegates to the `HeroService`.
   
   This is a golden rule: **always delegate data access to a supporting service class**.
 
@@ -117,40 +152,39 @@ a(id="HeroListComponent")
   and count on Angular to call `ngOnInit` when it instantiates this component. 
 .l-sub-section
   :marked
-    This is a "best practice". 
+    This is a *best practice*. 
     Components are easier to test and debug when their constructors are simple and all real work 
     (especially calling a remote server) is handled in a separate method.
 block getheroes-and-addhero
   :marked
-    The service's `getHeroes()` and `addHero()` methods return an `Observable` of HTTP hero data.
-    We subscribe to this `Observable`, 
-    specifying the actions to take when the request succeeds or fails. 
-    We'll get to observables and subscription shortly.
+    The service's `getHeroes()` and `addHero()` methods return an `Observable` of hero data that the !{_Angular_Http} client fetched from the server.
+    
+    *Observables* are a big topic, beyond the scope of this chapter. 
+    But we need to know a little about them to appreciate what is going on here.
+    
+    We should think of an `Observable` as a stream of events published by some source.
+    We listen for events in this stream by ***subscribing*** to the `Observable`. 
+    In these subscriptions we specify the actions to take when the web request
+    produces a success event (with the hero data in the event payload) or a fail event (with the error in the payload).
 
 :marked
-  With our basic intuitions about the component squared away, we can turn to development of the backend data source
-  and the client-side `HeroService` that talks to it.
-  
-  ### Fetch data
-  
+  With our basic intuitions about the component squared away, we're ready to look inside the `HeroService`.
+
+.l-main-section
+a#HeroService
+h2#fetch-data Fetch data with the #[b HeroService]
+:marked
   In many of our previous samples we faked the interaction with the server by
   returning mock heroes in a service like this one:
 +makeExample('toh-4/ts/app/hero.service.ts', 'just-get-heroes')(format=".")
 :marked
-  In this chapter, we get the heroes from the server using a (browser-based) HTTP client service.
-  Here's the new `HeroService`: 
-+makeExample('server-communication/ts/app/toh/hero.service.ts', 'v1', 'app/toh/hero.service.ts')
-
-block http-client-service
-  :marked
-    The imported `Http` client service gets
-    [injected](dependency-injection.html) into the `HeroService` constructor.
-  .l-sub-section
-    :marked
-      `Http` is not part of the Angular core. It's an optional service in its own `@angular/http` library
-      that we installed with npm (see the `package.json`) and 
-      registered for module loading by SystemJS (see `systemjs.config.js`)
+  In this chapter, we revise that `HeroService` to get the heroes from the server using the !{_Angular_Http} client service: 
++makeExample('server-communication/ts/app/toh/hero.service.ts', 'v1', 'app/toh/hero.service.ts (revised)')
 
+:marked
+  Notice that the Angular `!{_Http}` client service is
+  [injected](dependency-injection.html) into the `HeroService` constructor.
++makeExample('server-communication/ts/app/toh/hero.service.ts', 'ctor')
 :marked
   Look closely at how we call `#{_priv}http.get`
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts (getHeroes)')(format=".")
@@ -166,7 +200,8 @@ block http-client-service
 block rxjs
   :marked
     <a id="rxjs"></a>
-    The return value may surprise us. Many of us would expect a 
+    The return value may surprise us. 
+    Many of us who are familiar with asynchronous methods in modern JavaScript would expect the `get` method to return a 
     [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
     We'd expect to chain a call to `then()` and extract the heroes.
     Instead we're calling a `map()` method. 
@@ -177,7 +212,7 @@ block rxjs
 
   .l-main-section
   :marked
-    ### RxJS Library
+    # RxJS Library
     [RxJS](https://github.com/ReactiveX/RxJS) ("Reactive Extensions") is a 3rd party library, endorsed by Angular,
     that implements the [*asynchronous observable*](https://www.youtube.com/watch?v=UHI0AzD_WfY "Rob Wormald on observables") pattern.
 
@@ -201,22 +236,25 @@ block rxjs
     While that is the easiest thing to do, we'd pay a penalty in extended launch time and application size
     because the full library is so big. We only use a few operators in our app.
     
-    Instead, we'll import each operator, one-by-one, until we have a custom *Observable* implementation tuned
+    Instead, we'll import each `Observable` operator and static class method, one-by-one, until we have a custom *Observable* implementation tuned
     precisely to our requirements. We'll put the `import` statements in one `app/add-rxjs-operators.ts` file.
-  +makeExample('server-communication/ts/app/add-rxjs-operators.ts', null, 'app/add-rxjs-operators.ts')(format=".")
+  +makeExample('server-communication/ts/app/rxjs-operators.ts', null, 'app/rxjs-operators.ts')(format=".")
   :marked
-    If we forget an operator, the compiler will warn that it's missing and we'll update this file.
+    If we forget an operator, the TypeScript compiler will warn that it's missing and we'll update this file.
   .l-sub-section
     :marked
-      We don't need _all_ of these particular operators in the `HeroService` &mdash; just `map` and `catch`.
-      We'll need the others later, in a *Wiki* example [below](#more-observables).
+      We don't need _all_ of these particular operators in the `HeroService` &mdash; just `map`, `catch` and `throw`.
+      We'll need the other operators later, in a *Wiki* example [below](#more-observables).
   :marked
-    Finally, we import `add-rxjs-operator`_itself_ in our `main.ts`:
-  +makeExample('server-communication/ts/app/main.ts', 'import-rxjs', 'app/main.ts (import rxjs)')(format=".")
-
+    Finally, we import `rxjs-operator`_itself_ in our `app.component.ts`:
+  +makeExample('server-communication/ts/app/app.component.ts', 'import-rxjs', 'app/app.component.ts (import rxjs)')(format=".")
+  :marked
+    Let's return to our study of the `HeroService`.
+    
+l-main-section
 a#extract-data
 :marked
-  ### Process the response object
+  ## Process the response object
   Remember that our `getHeroes()` method mapped the `#{_priv}http.get` response object to heroes with an `#{_priv}extractData` helper method:
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'extract-data', 'app/toh/hero.service.ts (excerpt)')(format=".")
 :marked
@@ -293,8 +331,8 @@ h4 #[b HeroListComponent] error handling
 block hlc-error-handling
   :marked
     Back in the `HeroListComponent`, where we called `#{_priv}heroService.getHeroes()`, 
-    we supply the `subscribe` function with a second function to handle the error message.
-    It sets an `errorMessage` variable which we've bound conditionally in the template.
+    we supply the `subscribe` function with a second function parameter to handle the error message.
+    It sets an `errorMessage` variable which we've bound conditionally in the `HeroListComponent` template.
 
 +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'getHeroes', 'app/toh/hero-list.component.ts (getHeroes)')(format=".")
   
@@ -370,8 +408,8 @@ code-example(format="." language="javascript").
 block hero-list-comp-add-hero
   :marked
     Back in the `HeroListComponent`, we see that *its* `addHero()` method subscribes to the observable returned by the *service's* `addHero()` method.
-    When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user.
-  +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
+    When the data, arrive it pushes the new hero object into its `heroes` array for presentation to the user.
++makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
 
 block promises
   a#promises
@@ -388,9 +426,9 @@ block promises
   :marked
     Let's rewrite the `HeroService` using promises , highlighting just the parts that are different.
   +makeTabs(
-    'server-communication/ts/app/toh/hero.service.1.ts,server-communication/ts/app/toh/hero.service.ts', 
+    'server-communication/ts/app/toh/hero.service.promise.ts,server-communication/ts/app/toh/hero.service.ts', 
     'methods, methods', 
-    'app/toh/hero.service.ts (promise-based), app/toh/hero.service.ts (observable-based)')
+    'app/toh/hero.service.promise.ts (promise-based), app/toh/hero.service.ts (observable-based)')
   :marked
     Converting from an observable to a promise is as simple as calling `toPromise(success, fail)`.
 
@@ -405,9 +443,9 @@ block promises
     We have to adjust the calling component to expect a `Promise` instead of an `Observable`.
 
   +makeTabs(
-    'server-communication/ts/app/toh/hero-list.component.1.ts, server-communication/ts/app/toh/hero-list.component.ts', 
+    'server-communication/ts/app/toh/hero-list.component.promise.ts, server-communication/ts/app/toh/hero-list.component.ts', 
     'methods, methods', 
-    'app/toh/hero-list.component.ts (promise-based), app/toh/hero-list.component.ts (observable-based)')
+    'app/toh/hero-list.component.promise.ts (promise-based), app/toh/hero-list.component.ts (observable-based)')
   :marked
     The only obvious difference is that we call `then` on the returned promise instead of `subscribe`.
     We give both methods the same functional arguments. 
@@ -457,7 +495,7 @@ figure.image-display
 
 block wikipedia-jsonp+
   :marked
-    Wikipedia offers both `CORS` and `JSONP` search APIs, let's use the latter for this example.
+    Wikipedia offers a modern `CORS` API and a legacy `JSONP` search API. Let's use the latter for this example.
     The Angular `Jsonp` service both extends the `Http` service for JSONP and restricts us to `GET` requests. 
     All other HTTP methods throw an error because JSONP is a read-only facility. 
 
@@ -637,7 +675,7 @@ a#in-mem-web-api
   method that returns a map whose keys are collection names and whose values 
   are #{_array}s of objects in those collections.
   
-  Here's the class we created for this sample by copy-and-pasting the JSON data:
+  Here's the class we created for this sample based on the JSON data:
 +makeExample('server-communication/ts/app/hero-data.ts', null, 'app/hero-data.ts')(format=".")
 :marked
   Ensure that the `HeroService` endpoint refers to the web API:
@@ -650,13 +688,10 @@ block redirect-to-web-api
     to a helper service called the `XHRBackend`. 
 
     To enable our server simulation, we replace the default `XHRBackend` service with 
-    the in-memory web API service using standard Angular provider registration
-    in `TohComponent`. We initialize the in-memory web API with mock hero data at the same time.
+    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.
 
-    Here are the pertinent details, excerpt from `TohComponent`, starting with the imports:
-  +makeExample('server-communication/ts/app/toh/toh.component.ts', 'in-mem-web-api-imports', 'toh.component.ts (web API imports)')(format=".")
-  :marked
-    Then we add the following two provider definitions to the `providers` array in component metadata:
-  +makeExample('server-communication/ts/app/toh/toh.component.ts', 'in-mem-web-api-providers', 'toh.component.ts (web API providers)')(format=".")
+p Here is the revised (and final) version of the #[code #[+adjExPath('app/main.ts')]] demonstrating these steps.
++makeExample('server-communication/ts/app/main.ts', 'final', 'app/main.ts (final)')(format=".")
 
 p See the full source code in the #[+liveExampleLink2('live example', 'server-communication')].
diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade
index e931c6b0d7..9231e66b21 100644
--- a/public/docs/ts/latest/guide/webpack.jade
+++ b/public/docs/ts/latest/guide/webpack.jade
@@ -303,7 +303,7 @@ a(id="development-configuration")
   The `HtmlWebpackPlugin` (added in `webpack.common.js`) use the *publicPath* and the *filename* settings to generate 
   appropriate &lt;script&gt; and &lt;link&gt; tags into the `index.html`.
   
-  Our CSS are buried inside our Javascript bundles by deault. The `ExtractTextPlugin` extracts them into
+  Our CSS are buried inside our Javascript bundles by default. The `ExtractTextPlugin` extracts them into
   external `.css` files that the `HtmlWebpackPlugin` inscribes as &lt;link&gt; tags into the `index.html`.
   
   Refer to the Webpack documentation for details on these and other configuation options in this file
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 526986a627..346793f9c3 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -208,7 +208,7 @@ p.
   #[b Create the component file]
   #[code #[+adjExPath('app/app.component.ts')]] (in this newly created directory) with the following content:
 
-+makeExample('quickstart/ts/app/app.component.ts', '', 'app/app.component.ts')(format='.')
++makeProjExample('app/app.component.ts')
 
 .l-verbose-section
   :marked
@@ -241,7 +241,7 @@ p.
     Here we import the Angular 2 core so that our component code can have access to
     the `@Component` #{_decorator}.
 
-  +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (import)')
+  +makeExcerpt('app/app.component.ts', 'import')
 
   h3#component-decorator @Component #{_decorator}
   +ifDocsFor('ts')
@@ -254,7 +254,7 @@ p.
     component class.
     The metadata tells Angular how to create and use this component.
 
-  +makeExcerpt('quickstart/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (metadata)')(format='.')
+  +makeExcerpt('app/app.component.ts', 'metadata')
 
   block annotation-fields
     :marked
@@ -279,7 +279,7 @@ p.
   :marked
     ### Component class
     At the bottom of the file is an empty, do-nothing class named `AppComponent`.
-  +makeExcerpt('quickstart/ts/app/app.component.ts', 'class', 'app/app.component.ts (class)')
+  +makeExcerpt('app/app.component.ts', 'class')
   :marked
     When we're ready to build a substantive application,
     we can expand this class with properties and application logic.
@@ -297,7 +297,7 @@ block create-main
     Now we need something to tell Angular to load the root component.
     Create the file #[code #[+adjExPath('app/main.ts')]] with the following content:
 
-+makeExample('quickstart/ts/app/main.ts', '', 'app/main.ts')(format='.')
++makeProjExample('app/main.ts')
 
 .l-verbose-section
   :marked
@@ -342,7 +342,7 @@ h2#index Step 4: Add #[code index.html]
   In the *#{_indexHtmlDir}* folder
   create an `index.html` file and paste the following lines into it:
 
-+makeExample('quickstart/ts/index.html', '', 'index.html')(format='.')
++makeProjExample('index.html')
 
 .l-verbose-section
   :marked
@@ -360,9 +360,9 @@ h2#index Step 4: Add #[code index.html]
     :marked
       ### Libraries
       We loaded the following scripts
-    +makeExcerpt('quickstart/ts/index.html', 'libraries', 'index.html')
+    +makeExcerpt('index.html', 'libraries')
     :marked
-      We begin with es6-shim which monkey patches the global context (window) with essential features of ES2015 (ES6).
+      We begin with core-js's es6-shim which monkey patches the global context (window) with essential features of ES2015 (ES6).
       Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`.
       Then the [SystemJS](#systemjs) library for module loading.
 
@@ -407,7 +407,7 @@ h2#index Step 4: Add #[code index.html]
 
       Our QuickStart makes such requests when one of its
       application TypeScript files has an import statement like this:
-    +makeExcerpt('quickstart/ts/app/main.ts', 'app-component', 'main.ts (excerpt)')
+    +makeExcerpt('app/main.ts', 'import')
     :marked
       Notice that the module name (after `from`) does not mention a filename extension.
       In the configuration we tell SystemJS to default the extension to `js`, a JavaScript file.
@@ -463,7 +463,7 @@ h2#index Step 4: Add #[code index.html]
   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('quickstart/ts/styles.1.css', '', 'styles.css')
++makeExcerpt('styles.1.css')
 
 .l-main-section
 h2#build-and-run Step 5: Build and run the app!
diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json
index 28d02b2ccb..22b7c4be4e 100644
--- a/public/docs/ts/latest/tutorial/_data.json
+++ b/public/docs/ts/latest/tutorial/_data.json
@@ -29,5 +29,10 @@
     "title": "Routing",
     "intro": "We add the Angular Component Router and learn to navigate among the views",
     "nextable": true
+  },
+  "toh-pt6": {
+    "title": "Http",
+    "intro": "We convert our service and components to use Http",
+    "nextable": true
   }
 }
\ No newline at end of file
diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade
index 8dfe15f0ea..2845fefcc3 100644
--- a/public/docs/ts/latest/tutorial/index.jade
+++ b/public/docs/ts/latest/tutorial/index.jade
@@ -27,7 +27,7 @@ include ../_util-fns
 // #enddocregion intro
 
 :marked
-  [Run the live example](/resources/live-examples/tutorial/ts/plnkr.html)
+  [Run the live example](/resources/live-examples/toh-6/ts/plnkr.html)
 
 // #docregion main
 .l-main-section
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 1244b107ef..2a72f68d22 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -544,7 +544,11 @@ figure.image-display
   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.
   
-  The revised component data looks like this:
+  We no longer display the `HeroDetailComponent` in the `HeroesComponent` template because we're navigating to it.
+  So we can remove it from the metadata `directives` array. The `directives` array is now empty so we delete it.
+  We might as well delete the `HeroDetailComponent` import statement too.
+  
+  The revised component metadata looks like this:
 +makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (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:
@@ -669,6 +673,7 @@ figure.image-display
     .file index.html
     .file package.json
     .file styles.css
+    .file systemjs.config.json
     .file tsconfig.json
     .file typings.json
 :marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
new file mode 100644
index 0000000000..fd994476a1
--- /dev/null
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -0,0 +1,362 @@
+include ../_util-fns
+
+:marked
+  # Getting and Saving Data with HTTP
+  
+  Our stakeholders appreciate our progress. 
+  Now they want to get the hero data from a server, let users add, edit, and delete heroes,
+  and save these changes back to the server.
+  
+  In this chapter we teach our application to make the corresponding http calls to a remote server's web api.
+:marked
+  [Run the live example](/resources/live-examples/toh-6/ts/plnkr.html).   
+  
+.l-main-section
+:marked
+  ## Where We Left Off
+  In the [previous chapter](toh-pt5.html), we learned to navigate between the dashboard and the fixed heroes list, editing a selected hero along the way.
+  That's our starting point for this chapter.
+
+  ### 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(format="." language="bash").
+  npm start
+
+:marked
+  The application runs and updates automatically as we continue to build the Tour of Heroes.
+
+.l-main-section  
+:marked
+ ## Prepare for Http
+  
+  `Http` is ***not*** a core Angular module. 
+  It's Angular's optional approach to web access and it exists as a separate add-on module called `@angular/http`,
+  shipped in a separate script file as part of the Angular npm package. 
+  
+  Fortunately we're ready to import from `@angular/http` because `systemjs.config` configured *SystemJS* to load that library when we need it.
+
+:marked
+  ### Register (provide) *http* services
+  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.
+  
+  We should be able to access these services from anywhere in the application.
+  So we register them in the `bootstrap` method of `main.ts` where we
+  launch the application and its root `AppComponent`.
+  
++makeExample('toh-6/ts/app/main.ts','v1','app/main.ts (v1)')(format='.')
+:marked
+  Notice that we supply the `HTTP_PROVIDERS` in an array as the second parameter to the `bootstrap` method.
+  This has the same effect the `providers` array in `@Component` metadata.
+
+.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.
+  
+  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.
+  Until we do, *we'll have to fake it*.
+  
+  We're going to *trick* the http client into fetching and saving data from
+  a demo/development service, the *in-memory web api*.
+  
+  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 `main` that performs this trick
++makeExample('toh-6/ts/app/main.ts', 'final', 'app/main.ts (final)')(format=".")  
+
+: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 with the following `in-memory-data.service.ts` file:
++makeExample('toh-6/ts/app/in-memory-data.service.ts', null, 'app/in-memory-data.service.ts')(format=".")
+:marked
+  This file replaces the `mock-heroes.ts` which is now safe to delete.
+
+.alert.is-helpful
+  :marked
+    This chaper is an introduction to the Angular http client.
+    Please don't be distracted by the details of this backend substitution. Just follow along with the example. 
+    
+    Learn more later about the *in-memory web api* in the [Http chapter](../guide/server-communication.html#!#in-mem-web-api).
+    Remember, the *in-memory web api* is only useful in the early stages of development and for demonstrations such as this Tour of Heroes. 
+    Skip it when you have a real web api server.
+
+
+.l-main-section
+:marked
+  ## Heroes and Http
+  
+  Look at our current `HeroService` implementation
++makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes', 'app/hero.service.ts (getHeroes - old)')(format=".")
+:marked
+  We returned a promise resolved with mock heroes. 
+  It may have seemed like overkill at the time, but we were anticipating the
+  day when we fetched heroes with an http client and we knew that would have to be an asynchronous operation.
+  
+  That day has arrived! Let's convert `getHeroes()` to use Angular's `Http` client:
+  
++makeExample('toh-6/ts/app/hero.service.ts', 'get-heroes', 'app/hero.service.ts (getHeroes using Http)')(format=".")
+  
+:marked
+  ### Http Promise
+
+  We're still returning a promise but we're creating it differently.
+  
+  The Angular `http.get` returns an RxJS `Observable`.
+  *Observables* are a powerful way to manage asynchronous data flows.
+  We'll learn about `Observables` *later*.
+  
+  For *now* we get back on familiar ground by immediately converting that `Observable` to a `Promise` using the `toPromise` operator.
++makeExample('toh-6/ts/app/hero.service.ts', 'to-promise')(format=".")
+:marked
+  Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ... not out of the box.
+  The Angular `Observable` is a bare-bones implementation. 
+  
+  There are scores of operators like `toPromise` that extend `Observable` with useful capabilities.
+  If we want those capabilities, we have to add the operators ourselves.
+  That's as easy as importing them from the RxJS library like this:
++makeExample('toh-6/ts/app/hero.service.ts', 'rxjs')(format=".")
+
+:marked
+  ### Extracting the data in the *then* callback 
+  In the *promise*'s `then` callback we call the `json` method of the http `Response` to extract the
+  data within the response.
++makeExample('toh-6/ts/app/hero.service.ts', 'to-data')(format=".")
+:marked
+  That object returned by `json` has a single `data` property. 
+  The `data` property holds the array of *heroes* that the caller really wants.
+  So we grab that array and return it as the resolved promise value.
+
+.alert.is-important
+  :marked
+    Pay close attention to the shape of the data returned by the server.
+    This particular *in-memory web api* example happens to return an object with a `data` property.
+    Your api might return something else.
+    
+    Adjust the code to match *your web api*. 
+:marked
+  The caller is unaware of these machinations. It receives a promise of *heroes* just as it did before. 
+  It has no idea that we fetched the heroes from the server.
+  It knows nothing of the twists and turns required to turn the http response into heroes.
+  Such is the beauty and purpose of delegating data access to a service like this `HeroService`.
+:marked
+  ### Error Handling
+  
+  At the end of `getHeroes` we `catch` server failures and pass them to an error handler:
++makeExample('toh-6/ts/app/hero.service.ts', 'catch')(format=".")
+:marked
+  This is a critical step! 
+  We must anticipate http failures as they happen frequently for reasons beyond our control.
+
++makeExample('toh-6/ts/app/hero.service.ts', 'error-handler', 'app/hero.service.ts (Error handler)')(format=".")
+:marked
+  In this demo service we log the error to the console; we should do better in real life.
+
+  We've also decided to return a user friendly form of the error to
+  to the caller in a rejected promise so that the caller can display a proper error message to the user.
+  
+  ### Promises are Promises
+  Although we made significant *internal* changes to `getHeroes()`, the public signature did not change. 
+  We still return a promise. We won't have to update any of the components that call `getHeroes()`.
+
+.l-main-section   
+:marked
+  ## Add, Edit, Delete
+  
+  Our stakeholders are incredibly pleased with the added flexibility from the api integration, but it doesn't stop there. Next we want to add the capability to add, edit and delete heroes.   
+  
+  We'll complete `HeroService` by creating `post`, `put` and `delete` http calls to meet our new requirements. 
+
+:marked
+  ### Post
+  
+  We are using `post` to add new heroes. Post requests require a little bit more setup than Get requests, but the format is as follows:
+  
++makeExample('toh-6/ts/app/hero.service.ts', 'post-hero', 'app/hero.service.ts (post hero)')(format=".")
+
+:marked
+  Now we create a header and set the content type to `application/json`. We'll call `JSON.stringify` before we post to convert the hero object to a string.  
+  
+  ### Put
+  
+  `put` is used to edit a specific hero, but the structure is very similar to a `post` request. The only difference is that we have to change the url slightly by appending the id of the hero we want to edit.
+
++makeExample('toh-6/ts/app/hero.service.ts', 'put-hero', 'app/hero.service.ts (put hero)')(format=".")
+
+:marked
+  ### Delete
+  `delete` is used to delete heroes and the format is identical to `put` except for the function name. 
+
++makeExample('toh-6/ts/app/hero.service.ts', 'delete-hero', 'app/hero.service.ts (delete hero)')(format=".")
+
+:marked
+  We add a `catch` to handle our errors for all three cases.
+  
+:marked
+  ### Save
+
+  We combine the call to the private `_post` and `_put` methods in a single `save` method. This simplifies the public api and makes the integration with `HeroDetailComponent` easier. `HeroService` determines which method to call based on the state of the `hero` object. If the hero already has an id we know it's an edit. Otherwise we know it's an add.
+
++makeExample('toh-6/ts/app/hero.service.ts', 'save', 'app/hero.service.ts (save hero)')(format=".")
+    
+:marked
+  After these additions our `HeroService` looks like this:
+
++makeExample('toh-6/ts/app/hero.service.ts', null, 'app/hero.service.ts')(format=".")
+
+.l-main-section
+:marked
+  ## Updating Components
+  
+  Loading heroes using `Http` required no changes outside of `HeroService`, but we added a few new features as well. 
+  In the following section we will update our components to use our new methods to add, edit and delete heroes.
+  
+  ### Add/Edit in the *HeroDetailComponent*
+  We already have `HeroDetailComponent` for viewing details about a specific hero. Add and Edit are natural extensions of the detail view, so we are able to reuse `DetailHeroComponent` with a few tweaks. The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object.
+  
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")     
+
+:marked
+  In order to differentiate between add and edit we are adding a check to see if an id is passed in the url. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
+
+  The next step is to add a save method to `HeroDetailComponent` and call the corresponding save method in `HeroesService`.
+  
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".")  
+
+:marked
+  The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object.
+  
+  Earlier we used the `save()` method to return a promise, so when the promise resolves, we call `emit` to notify `HeroesComponent` that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.     
+
+.l-sub-section
+  :marked
+    The `emit` "handshake" between `HeroDetailComponent` and `HeroesComponent` is an example of component to component communication. This is a topic for another day, but we have detailed information in our <a href="/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent">Component Interaction Cookbook</a>  
+
+:marked
+  Here is `HeroDetailComponent` with its new save button.
+  
+figure.image-display
+  img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button") 
+
+:marked
+  ### Add/Delete in the *HeroesComponent*
+  
+  The user can *add* a new hero by clicking a button and entering a name.
+
+  When the user clicks the *Add New Hero* button, we display the `HeroDetailComponent`.
+  We aren't navigating to the component so it won't receive a hero `id`;
+  As we noted above, that is the component's cue to create and present an empty hero.
+  
+  Add the following HTML to the `heroes.component.html`, just below the hero list (the `*ngFor`).
++makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".")  
+:marked
+  The user can *delete* an existing hero by clicking a delete button next to the hero's name.
+  
+  Add the following HTML to the `heroes.component.html` right after the name in the repeated `<li>` tag:
++makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".")  
+
+:marked
+  Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions in the template.
+  Let's start with *add*.
+  
+  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.
++makeExample('toh-6/ts/app/heroes.component.ts', 'hero-detail-component', 'app/heroes.component.ts (HeroDetailComponent)')(format=".")  
+.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
+  Next we implement the click handler for the *Add New Hero* button.
+
++makeExample('toh-6/ts/app/heroes.component.ts', 'add', 'app/heroes.component.ts (add)')(format=".")  
+:marked
+  The `HeroDetailComponent` does most of the work. All we do is toggle an `*ngIf` flag that
+  swaps it into the DOM when were add a hero and remove it from the DOM when the user is done.
+  
+  The *delete* logic is a bit trickier.
++makeExample('toh-6/ts/app/heroes.component.ts', 'delete', 'app/heroes.component.ts (delete)')(format=".")
+
+:marked
+  Of course we delegate the persistence of hero deletion to the `HeroService`. 
+  But the component is still responsible for updating the display.
+  So the *delete* method removes the deleted hero from the list.
+
+:marked
+  ### Let's see it
+  Here are the fruits of labor in action:
+figure.image-display
+  img(src='/resources/images/devguide/toh/toh-http.anim.gif' alt="Heroes List Editting w/ HTTP")  
+
+:marked
+  ### Review the App Structure
+  Let’s verify that we have the following structure after all of our good refactoring in this chapter:
+  
+.filetree
+  .file angular2-tour-of-heroes
+  .children
+  .file app
+  .children
+    .file app.component.ts
+    .file app.component.css
+    .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 hero-data.service.ts
+  .file node_modules ...
+  .file typings ...
+  .file index.html
+  .file package.json
+  .file styles.css
+  .file sample.css
+  .file systemjs.config.json
+  .file tsconfig.json
+  .file typings.json
+ 
+.l-main-section    
+:marked
+    ## Home Stretch
+    
+    We are at the end of our journey for now, but we have accomplished a lot.
+    - We added the necessary dependencies to use Http in our application.
+    - We refactored HeroService to load heroes from an api.
+    - We extended HeroService to support post, put and delete calls.
+    - We updated our components to allow adding, editing and deleting of heroes.
+    - We configured an in-memory web api.
+    
+    Below is a summary of the files we changed.
+    
++makeTabs(
+  `toh-6/ts/app/app.component.ts,
+   toh-6/ts/app/heroes.component.ts,
+   toh-6/ts/app/heroes.component.html,
+   toh-6/ts/app/hero-detail.component.ts,
+   toh-6/ts/app/hero-detail.component.html,
+   toh-6/ts/app/hero.service.ts`,
+  null,
+  `app.comp...ts,
+   heroes.comp...ts,
+   heroes.comp...html,
+   hero-detail.comp...ts,
+   hero-detail.comp...html,
+   hero.service.ts`
+) 
+
diff --git a/public/resources/css/module/_resources.scss b/public/resources/css/module/_resources.scss
index ce23ca3d73..f8b9fb3498 100644
--- a/public/resources/css/module/_resources.scss
+++ b/public/resources/css/module/_resources.scss
@@ -1,10 +1,10 @@
 .resources {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
   flex-direction: row-reverse;
 
-  @media(max-width: 400px) {
+  @media(max-width: 768px) {
+    justify-content: center;
     flex-direction: column-reverse;
   }
 
diff --git a/public/resources/images/devguide/toh/hero-details-save-button.png b/public/resources/images/devguide/toh/hero-details-save-button.png
new file mode 100644
index 0000000000..91c201a310
Binary files /dev/null and b/public/resources/images/devguide/toh/hero-details-save-button.png differ
diff --git a/public/resources/images/devguide/toh/heroes-list-delete-button.png b/public/resources/images/devguide/toh/heroes-list-delete-button.png
new file mode 100644
index 0000000000..da87a20e4a
Binary files /dev/null and b/public/resources/images/devguide/toh/heroes-list-delete-button.png differ
diff --git a/public/resources/images/devguide/toh/toh-http.anim.gif b/public/resources/images/devguide/toh/toh-http.anim.gif
new file mode 100644
index 0000000000..a11eb3e5a5
Binary files /dev/null and b/public/resources/images/devguide/toh/toh-http.anim.gif differ
diff --git a/public/resources/index.ejs b/public/resources/index.ejs
index 51adecdc77..bb85fc7ddc 100644
--- a/public/resources/index.ejs
+++ b/public/resources/index.ejs
@@ -5,10 +5,10 @@
         <div>
             <h1 class="capitalize">{{category}}</h1>
             <div ng-repeat="section in categoryContent">
-                <div class="grid-fluid" ng-repeat="(subsectionName, subsectionArray) in section">
+                <div ng-repeat="(subsectionName, subsectionObj) in section">
                     <div>
-                        <h2 class="capitalize">{{ subsectionName }}</h2>
-                        <ul ng-repeat="resource in subsectionArray.resources">
+                        <h2>{{ subsectionObj.title }}</h2>
+                        <ul ng-repeat="resource in subsectionObj.resources">
                             <li ng-if="resource.rev"><a target="_blank" href="{{resource.url}}">{{ resource.title }}</a></li>
                         </ul>
                     </div>
diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js
index add8a222d1..a1194e6d7e 100644
--- a/tools/api-builder/angular.io-package/index.js
+++ b/tools/api-builder/angular.io-package/index.js
@@ -1,3 +1,4 @@
+var fs = require('fs');
 var path = require('canonical-path');
 var Package = require('dgeni').Package;
 var basePackage = require('../docs-package');
@@ -40,6 +41,21 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
 
 .config(function(readTypeScriptModules, writeFilesProcessor, readFilesProcessor) {
 
+  var angular_repo_path =  path.resolve(__dirname, '../../../../angular');
+  // confirm that the angular repo is actually there.
+  if (!fs.existsSync(angular_repo_path)) {
+    throw new Error('build-api-docs task requires the angular2 repo to be at ' + angular_repo_path);
+  }
+  readTypeScriptModules.basePath = path.resolve(angular_repo_path, 'modules');
+  readTypeScriptModules.ignoreExportsMatching = [
+    '___esModule',
+    '___core_private_types__',
+    '___platform_browser_private__',
+    '___compiler_private__',
+    '__core_private__',
+    '___core_private__'
+  ];
+
   readTypeScriptModules.sourceFiles = [
     '@angular/common/index.ts',
     '@angular/common/testing.ts',
@@ -61,6 +77,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
   ];
   readTypeScriptModules.hidePrivateMembers = true;
 
+
   readFilesProcessor.basePath = DOCS_PATH;
   readFilesProcessor.sourceFiles = [{
     basePath: ANGULAR2_DOCS_PATH,
diff --git a/tools/api-builder/angular.io-package/templates/class.template.html b/tools/api-builder/angular.io-package/templates/class.template.html
index 7390604888..016ce47923 100644
--- a/tools/api-builder/angular.io-package/templates/class.template.html
+++ b/tools/api-builder/angular.io-package/templates/class.template.html
@@ -159,7 +159,7 @@
   {% endif %}{% endfor %}
 {% endif %}
 
-.p(class="location-badge")
+p(class="location-badge").
   exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
   defined in {$ githubViewLink(doc) $}
 
diff --git a/tools/api-builder/angular.io-package/templates/lib/githubLinks.html b/tools/api-builder/angular.io-package/templates/lib/githubLinks.html
index 611ebdb13a..4bf27cd15c 100644
--- a/tools/api-builder/angular.io-package/templates/lib/githubLinks.html
+++ b/tools/api-builder/angular.io-package/templates/lib/githubLinks.html
@@ -1,7 +1,7 @@
 {% macro githubHref(doc) -%}
-https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/modules/{$ doc.fileInfo.relativePath $}#L{$ doc.location.start.line+1 $}-L{$ doc.location.end.line+1 $}
+https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/modules/{$ doc.fileInfo.projectRelativePath $}#L{$ doc.location.start.line+1 $}-L{$ doc.location.end.line+1 $}
 {%- endmacro %}
 
 {% macro githubViewLink(doc) -%}
-  <a href="{$ githubHref(doc) $}">{$ doc.fileInfo.relativePath $} (line {$ doc.location.start.line+1 $})</a>
-{%- endmacro -%}
+  <a href="{$ githubHref(doc) $}">{$ doc.fileInfo.projectRelativePath $} (line {$ doc.location.start.line+1 $})</a>
+{%- endmacro %}
\ No newline at end of file
diff --git a/tools/api-builder/docs-package/index.js b/tools/api-builder/docs-package/index.js
index 047ef45ad6..5988639330 100644
--- a/tools/api-builder/docs-package/index.js
+++ b/tools/api-builder/docs-package/index.js
@@ -5,7 +5,6 @@ var typescriptPackage = require('dgeni-packages/typescript');
 var linksPackage = require('../links-package');
 var gitPackage = require('dgeni-packages/git');
 var path = require('canonical-path');
-var fs = require('fs');
 
 // Define the dgeni package for generating the docs
 module.exports = new Package('angular-v2-docs', [jsdocPackage, nunjucksPackage, typescriptPackage, linksPackage, gitPackage])
@@ -36,29 +35,6 @@ module.exports = new Package('angular-v2-docs', [jsdocPackage, nunjucksPackage,
   renderDocsProcessor.extraData.versionInfo = versionInfo;
 })
 
-// Configure file reading
-.config(function(readTypeScriptModules) {
-
-  var angular_repo_path =  path.resolve(__dirname, '../../../../angular');
-  // confirm that the angular repo is actually there.
-  if (!fs.existsSync(angular_repo_path)) {
-    throw new Error('build-api-docs task requires the angular2 repo to be at ' + angular_repo_path);
-  }
-  readTypeScriptModules.sourceFiles = [
-    '*/*.@(js|es6|ts)',
-    '*/src/**/*.@(js|es6|ts)'
-  ];
-  readTypeScriptModules.basePath = path.resolve(angular_repo_path, 'modules');
-  readTypeScriptModules.ignoreExportsMatching = [
-    '___esModule',
-    '___core_private_types__',
-    '___platform_browser_private__',
-    '___compiler_private__',
-    '__core_private__',
-    '___core_private__'
-  ];
-})
-
 
 .config(function(parseTagsProcessor, getInjectables) {
   // We actually don't want to parse param docs in this package as we are getting the data out using TS
diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js
index 05be3a90f2..98e184dada 100644
--- a/tools/plunker-builder/indexHtmlTranslator.js
+++ b/tools/plunker-builder/indexHtmlTranslator.js
@@ -18,6 +18,14 @@ var _rxRules = {
   link: {
     from: '/<link rel="stylesheet" href=".*%tag%".*>/',
     to: '<link rel="stylesheet" href="%tag%">'
+  },
+  system_extra_main: {
+    from: /main:\s*[\'|\"]index.js[\'|\"]/,
+    to: 'main: "index.ts"'
+  },
+  system_extra_defaultExtension: {
+    from: /defaultExtension:\s*[\'|\"]js[\'|\"]/,
+    to: 'defaultExtension: "ts"'
   }
 };
 
@@ -30,6 +38,11 @@ var _rxData = [
     from: 'node_modules/es6-shim/es6-shim.min.js',
     to:   'https://npmcdn.com/es6-shim@0.35.0/es6-shim.min.js'
   },
+  {
+    pattern: 'script',
+    from: 'node_modules/core-js/client/shim.min.js',
+    to:   'https://npmcdn.com/core-js@2.4.0/client/shim.min.js'
+  },
   {
     pattern: 'script',
     from: 'node_modules/zone.js/dist/zone.js',
@@ -62,6 +75,12 @@ var _rxData = [
   },
   {
     pattern: 'angular_pkg',
+  },
+  {
+    pattern: 'system_extra_main'
+  },
+  {
+    pattern: 'system_extra_defaultExtension'
   }
 ];