From ab5390a51ec15769a70211c99434db2cff95956c Mon Sep 17 00:00:00 2001
From: John Papa <john@johnpapa.net>
Date: Sun, 15 Nov 2015 18:04:43 -0800
Subject: [PATCH] docs(tutorial): combines all 4 sections + revisions/updates
 to a.53, hides 3&4 closes #488

ToH History (oldest-to-latest):
----------------------------
created code example/snippets files for use with +makeExample, replace usage of  "pre.prettyprint.lang-bash" with this:  code-example(format="." language="bash").
fixed spelling errors in examples file path used by +makeExample
changed usage of "code-example" to "+makeExample"
adding code example/snippets files used in toh 1
fixed example file paths, replaced "pre.prettyprint.lang-bash" with "code-example. "
(docs) toh-pt3 initial state
created code examples for display in jade, starting conversion of Google doc and trying +makeExample rendering
all text copied from doc to jade, still some styling and formatting to perform
completed conversion and styling, moved toh3 example files to "tutorial" folder under _examples
created specific code example files for chapter toh 3 and re-pathed references in +makeExample
minor edit
docs) toh combined - initial combined commit
updated ToH for a.52
tons of changes, including de-kebab-ing, removed src folder, updated tsconfig too
fixing snippets using incorrect ending input tag
using inline html and css for the app.component.
ToH Part 1 Code: updated the imports, removed obsolete directive delcarations
ToH Code Part 1: updated to use imports, interface. will hit others soon
toh part 1: ngModel fix
toh part1: removed obsolete story that referred to how we used to have to import and declare all directives we used. yay!
ToH Part 1: updated to use `boot.ts` and `app.component.ts`. this affected the partials, snippets, and the story.
toh part 1: using `npm run go`
toh parts 1 -4: modified all places to use `npm run go`
toh part 1: refactor for jade
toh part 1: fixing the code samples
toh part 2: seeping through the story
toh part 2: fixing snippets.
toh part 2: replaced ngClass with class.selected
toh part 2: removed whitespace
toh part 2: added final state to the code
toh: fixing paths
toh part 4: fixing src/app path to app
toh part 3: fixing folder path
toh part 2: fixed typo
toh part 2: typo on ngModel
toh part 2: added ngif
toh part 2: removed old hero property. moved the details lower, where we need it
toh index: updated hero list image to show consistent styling as the other images here
QS spelling error (targes -> targets)
tweeks: space and ngIF
---
 public/docs/_examples/.gitignore              |   3 +-
 public/docs/_examples/jsconfig.json           |   2 +-
 public/docs/_examples/protractor-conf.js      |   2 +-
 .../ts/app/app.component.snippets.pt1.ts      |  53 ++
 .../_examples/toh-1/ts/app/app.component.ts   |  29 +
 public/docs/_examples/toh-1/ts/app/boot.ts    |   6 +
 .../ts/app/app.component.snippets.pt2.ts      |  99 +++
 .../_examples/toh-2/ts/app/app.component.ts   |  74 +++
 public/docs/_examples/toh-2/ts/app/boot.ts    |   6 +
 .../ts/app/hero-detail.component.pt3.html     |  14 +
 .../toh-3/ts/app/hero-detail.snippets.pt3.ts  |  34 +
 .../_examples/toh-3/ts/app/mock-heroes.ts     |  15 +
 .../toh-4/ts/app/app.component.pt4.ts         | 111 ++++
 .../_examples/toh-4/ts/app/bootstrap.pt4.ts   |  13 +
 .../toh-4/ts/app/hero.service.pt4.ts          |   8 +
 .../_examples/toh-4/ts/app/index.pt4.html     | 186 ++++++
 .../toh-4/ts/app/route.config.pt4.ts          |  50 ++
 public/docs/_examples/tsd.json                |  24 -
 public/docs/_examples/tutorial/ts/.gitignore  |   6 +
 .../tutorial/ts/app/app.component.ts          |  31 +
 public/docs/_examples/tutorial/ts/app/boot.ts |   9 +
 .../tutorial/ts/app/dashboard.component.css   |  37 ++
 .../tutorial/ts/app/dashboard.component.html  |   8 +
 .../tutorial/ts/app/dashboard.component.ts    |  23 +
 .../ts/app/hero-detail.component.html         |  10 +
 .../tutorial/ts/app/hero-detail.component.ts  |  28 +
 .../_examples/tutorial/ts/app/hero.service.ts |  14 +
 public/docs/_examples/tutorial/ts/app/hero.ts |   4 +
 .../tutorial/ts/app/heroes.component.css      |  17 +
 .../tutorial/ts/app/heroes.component.html     |  14 +
 .../tutorial/ts/app/heroes.component.ts       |  37 ++
 .../_examples/tutorial/ts/app/mock-heroes.ts  |  14 +
 .../_examples/tutorial/ts/example-config.json |   0
 public/docs/_examples/tutorial/ts/index.html  |  22 +
 public/docs/_examples/tutorial/ts/plnkr.json  |   8 +
 public/docs/_examples/tutorial/ts/styles.css  |   4 +
 public/docs/ts/latest/quickstart.jade         |   5 +-
 .../tutorial/dependency-injection.1.jade      | 623 ++++++++++++++++++
 .../latest/tutorial/dependency-injection.jade | 623 ++++++++++++++++++
 public/docs/ts/latest/tutorial/index.jade     |   6 +-
 public/docs/ts/latest/tutorial/toh-pt1.jade   | 313 +++------
 public/docs/ts/latest/tutorial/toh-pt2.jade   | 438 +++++-------
 public/docs/ts/latest/tutorial/toh-pt3.jade   | 363 ++++++++++
 public/docs/ts/latest/tutorial/toh-pt4.jade   | 473 +++++++++++++
 .../devguide/toh/dashboard-top-heroes.png     | Bin 0 -> 17689 bytes
 .../images/devguide/toh/heroes-list-3.png     | Bin 0 -> 28710 bytes
 46 files changed, 3314 insertions(+), 545 deletions(-)
 create mode 100644 public/docs/_examples/toh-1/ts/app/app.component.snippets.pt1.ts
 create mode 100644 public/docs/_examples/toh-1/ts/app/app.component.ts
 create mode 100644 public/docs/_examples/toh-1/ts/app/boot.ts
 create mode 100644 public/docs/_examples/toh-2/ts/app/app.component.snippets.pt2.ts
 create mode 100644 public/docs/_examples/toh-2/ts/app/app.component.ts
 create mode 100644 public/docs/_examples/toh-2/ts/app/boot.ts
 create mode 100644 public/docs/_examples/toh-3/ts/app/hero-detail.component.pt3.html
 create mode 100644 public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts
 create mode 100644 public/docs/_examples/toh-3/ts/app/mock-heroes.ts
 create mode 100644 public/docs/_examples/toh-4/ts/app/app.component.pt4.ts
 create mode 100644 public/docs/_examples/toh-4/ts/app/bootstrap.pt4.ts
 create mode 100644 public/docs/_examples/toh-4/ts/app/hero.service.pt4.ts
 create mode 100644 public/docs/_examples/toh-4/ts/app/index.pt4.html
 create mode 100644 public/docs/_examples/toh-4/ts/app/route.config.pt4.ts
 delete mode 100644 public/docs/_examples/tsd.json
 create mode 100644 public/docs/_examples/tutorial/ts/.gitignore
 create mode 100644 public/docs/_examples/tutorial/ts/app/app.component.ts
 create mode 100644 public/docs/_examples/tutorial/ts/app/boot.ts
 create mode 100644 public/docs/_examples/tutorial/ts/app/dashboard.component.css
 create mode 100644 public/docs/_examples/tutorial/ts/app/dashboard.component.html
 create mode 100644 public/docs/_examples/tutorial/ts/app/dashboard.component.ts
 create mode 100644 public/docs/_examples/tutorial/ts/app/hero-detail.component.html
 create mode 100644 public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
 create mode 100644 public/docs/_examples/tutorial/ts/app/hero.service.ts
 create mode 100644 public/docs/_examples/tutorial/ts/app/hero.ts
 create mode 100644 public/docs/_examples/tutorial/ts/app/heroes.component.css
 create mode 100644 public/docs/_examples/tutorial/ts/app/heroes.component.html
 create mode 100644 public/docs/_examples/tutorial/ts/app/heroes.component.ts
 create mode 100644 public/docs/_examples/tutorial/ts/app/mock-heroes.ts
 create mode 100644 public/docs/_examples/tutorial/ts/example-config.json
 create mode 100644 public/docs/_examples/tutorial/ts/index.html
 create mode 100644 public/docs/_examples/tutorial/ts/plnkr.json
 create mode 100644 public/docs/_examples/tutorial/ts/styles.css
 create mode 100644 public/docs/ts/latest/tutorial/dependency-injection.1.jade
 create mode 100644 public/docs/ts/latest/tutorial/dependency-injection.jade
 create mode 100644 public/docs/ts/latest/tutorial/toh-pt3.jade
 create mode 100644 public/docs/ts/latest/tutorial/toh-pt4.jade
 create mode 100644 public/resources/images/devguide/toh/dashboard-top-heroes.png
 create mode 100644 public/resources/images/devguide/toh/heroes-list-3.png

diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index 8cf3677823..02d898bf04 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -3,4 +3,5 @@ typings
 package.json
 karma.conf.js
 karma-test-shim.js
-tsconfig.json
\ No newline at end of file
+tsconfig.json
+npm-debug*.log
diff --git a/public/docs/_examples/jsconfig.json b/public/docs/_examples/jsconfig.json
index b3a1252357..82750484d1 100644
--- a/public/docs/_examples/jsconfig.json
+++ b/public/docs/_examples/jsconfig.json
@@ -3,4 +3,4 @@
         "target": "ES5",
         "module": "commonjs"
     }
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/protractor-conf.js b/public/docs/_examples/protractor-conf.js
index 6a183ce67b..12dd89ab9f 100644
--- a/public/docs/_examples/protractor-conf.js
+++ b/public/docs/_examples/protractor-conf.js
@@ -21,4 +21,4 @@ function patchProtractorWait(browser) {
     browser.sleep(sleepInterval);
     return result;
   }
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/toh-1/ts/app/app.component.snippets.pt1.ts b/public/docs/_examples/toh-1/ts/app/app.component.snippets.pt1.ts
new file mode 100644
index 0000000000..9d7d15f08e
--- /dev/null
+++ b/public/docs/_examples/toh-1/ts/app/app.component.snippets.pt1.ts
@@ -0,0 +1,53 @@
+// #docregion show-hero
+template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
+// #enddocregion show-hero
+
+// #docregion show-hero-2
+template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
+// #enddocregion show-hero-2
+
+// #docregion show-hero-properties
+template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
+// #enddocregion show-hero-properties
+
+// #docregion multi-line-strings
+template:`
+  <h1>{{title}}</h1>
+  <h2>{{hero.name}} details!</h2>
+  <div><label>id: </label>{{hero.id}}</div>
+  <div><label>name: </label>{{hero.name}}</div>
+  `
+// #enddocregion multi-line-strings
+
+// #docregion editing-Hero
+template:`
+  <h1>{{title}}</h1>
+  <h2>{{hero.name}} details!</h2>
+  <div><label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <div><input value="{{hero.name}}" placeholder="name"></div>
+  </div>
+  `
+// #enddocregion editing-Hero
+
+// #docregion app-component-1
+  export class AppComponent {
+    public title = 'Tour of Heroes';
+    public hero = 'Windstorm';
+  }
+// #enddocregion app-component-1
+
+// #docregion hero-interface-1
+  interface Hero {
+    id: number;
+    name: string;
+  }
+// #enddocregion hero-interface-1
+
+// #docregion hero-property-1
+  public hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
+// #enddocregion hero-property-1
diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts
new file mode 100644
index 0000000000..bd98c90b1e
--- /dev/null
+++ b/public/docs/_examples/toh-1/ts/app/app.component.ts
@@ -0,0 +1,29 @@
+// #docregion pt1
+import {Component} from 'angular2/core';
+
+interface Hero {
+  id: number;
+  name: string;
+}
+
+@Component({
+  selector: 'my-app',
+  template:`
+    <h1>{{title}}</h1>
+    <h2>{{hero.name}} details!</h2>
+    <div><label>id: </label>{{hero.id}}</div>
+    <div>
+      <label>name: </label>
+      <div><input [(ngModel)]="hero.name" placeholder="name"></div>
+    </div>
+    `
+})
+export class AppComponent {
+  public title = 'Tour of Heroes';
+  public hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
+}
+
+// #enddocregion pt1
diff --git a/public/docs/_examples/toh-1/ts/app/boot.ts b/public/docs/_examples/toh-1/ts/app/boot.ts
new file mode 100644
index 0000000000..a5cf62c0fd
--- /dev/null
+++ b/public/docs/_examples/toh-1/ts/app/boot.ts
@@ -0,0 +1,6 @@
+// #docregion pt1
+import {bootstrap} from 'angular2/platform/browser';
+import {AppComponent} from './app.component';
+
+bootstrap(AppComponent);
+// #enddocregion pt1
\ No newline at end of file
diff --git a/public/docs/_examples/toh-2/ts/app/app.component.snippets.pt2.ts b/public/docs/_examples/toh-2/ts/app/app.component.snippets.pt2.ts
new file mode 100644
index 0000000000..cb4c3335a1
--- /dev/null
+++ b/public/docs/_examples/toh-2/ts/app/app.component.snippets.pt2.ts
@@ -0,0 +1,99 @@
+// #docregion ng-for
+<li *ngFor="#hero of heroes">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion ng-for
+
+// #docregion heroes-styled
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="#hero of heroes">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+// #enddocregion heroes-styled
+
+// #docregion selectedHero-click
+<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion selectedHero-click
+
+// #docregion selectedHero-details
+<h2>{{selectedHero.name}} details!</h2>
+<div><label>id: </label>{{selectedHero.id}}</div>
+<div>
+    <label>name: </label>
+    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+</div>
+// #enddocregion selectedHero-details
+
+// #docregion ng-if
+<div *ngIf="selectedHero">
+  <h2>{{selectedHero.name}} details!</h2>
+  <div><label>id: </label>{{selectedHero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+  </div>
+</div>
+// #enddocregion ng-if
+
+// #docregion hero-array-1
+public heroes = HEROES;
+// #enddocregion hero-array-1
+
+// #docregion heroes-template-1
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li>
+    <!-- each hero goes here -->
+  </li>
+</ul>
+// #enddocregion heroes-template-1
+
+// #docregion heroes-ngfor-1
+<li *ngFor="#hero of heroes">
+// #enddocregion heroes-ngfor-1
+
+// #docregion styles-1
+styles:[`
+  .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
+  
+  .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
+  
+  .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
+  
+  .heroes .badge {
+    font-size: small;
+    color: white;
+    padding: 0.1em 0.7em;
+    background-color: #369;
+    line-height: 1em;
+    position: relative;
+    left: -1px;
+    top: -1px;
+  }
+  .selected { background-color: #EEE; color: #369; }
+`]
+// #enddocregion styles-1
+
+// #docregion selected-hero-1
+public selectedHero: Hero;
+// #enddocregion selected-hero-1
+
+// #docregion on-select-1
+onSelect(hero: Hero) { this.selectedHero = hero; }
+// #enddocregion on-select-1
+
+// #docregion class-selected-1
+[class.selected]="hero === selectedHero"
+// #enddocregion class-selected-1
+
+// #docregion class-selected-2
+<li *ngFor="#hero of heroes"
+  [class.selected]="hero === selectedHero"
+  (click)="onSelect(hero)">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion class-selected-2
diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts
new file mode 100644
index 0000000000..7c3daf0b2b
--- /dev/null
+++ b/public/docs/_examples/toh-2/ts/app/app.component.ts
@@ -0,0 +1,74 @@
+// #docregion pt2
+import {Component} from 'angular2/core';
+
+interface Hero {
+  id: number;
+  name: string;
+}
+
+@Component({
+  selector: 'my-app',
+  template:`
+    <h1>{{title}}</h1>
+    <h2>My Heroes</h2>
+    <ul class="heroes">
+      <li *ngFor="#hero of heroes"
+        [class.selected]="hero === selectedHero"
+        (click)="onSelect(hero)">
+        <span class="badge">{{hero.id}}</span> {{hero.name}}
+      </li>
+    </ul>
+    <div *ngIf="selectedHero">
+      <h2>{{selectedHero.name}} details!</h2>
+      <div><label>id: </label>{{selectedHero.id}}</div>
+      <div>
+        <label>name: </label>
+        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+      </div>
+    </div>
+  `,
+  styles:[`
+    .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
+    
+    .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
+    
+    .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
+    
+    .heroes .badge {
+      font-size: small;
+      color: white;
+      padding: 0.1em 0.7em;
+      background-color: #369;
+      line-height: 1em;
+      position: relative;
+      left: -1px;
+      top: -1px;
+    }
+    .selected { background-color: #EEE; color: #369; }
+  `]  
+})
+export class AppComponent {
+  public title = 'Tour of Heroes';
+  public heroes = HEROES;
+  public selectedHero: Hero;
+  
+  onSelect(hero: Hero) { this.selectedHero = hero; }
+}
+// #enddocregion pt2
+
+// #docregion hero-array
+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" }
+];
+// #enddocregion hero-array
+
+// #enddocregion pt2
diff --git a/public/docs/_examples/toh-2/ts/app/boot.ts b/public/docs/_examples/toh-2/ts/app/boot.ts
new file mode 100644
index 0000000000..a5cf62c0fd
--- /dev/null
+++ b/public/docs/_examples/toh-2/ts/app/boot.ts
@@ -0,0 +1,6 @@
+// #docregion pt1
+import {bootstrap} from 'angular2/platform/browser';
+import {AppComponent} from './app.component';
+
+bootstrap(AppComponent);
+// #enddocregion pt1
\ No newline at end of file
diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.pt3.html b/public/docs/_examples/toh-3/ts/app/hero-detail.component.pt3.html
new file mode 100644
index 0000000000..0c8cf753b5
--- /dev/null
+++ b/public/docs/_examples/toh-3/ts/app/hero-detail.component.pt3.html
@@ -0,0 +1,14 @@
+<!-- #docregion -->
+ template: `
+    <h1>{{title}}</h1>
+
+    <h2>My Heroes</h2>
+    <ul class="heroes">
+      <li *ng-for="#hero of heroes"
+        [ng-class]="getSelectedClass(hero)"
+        (click)="onSelect(hero)">
+        <span class="badge">{{hero.id}}</span> {{hero.name}}</a>
+      </li>
+    </ul>
+    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+  `,
diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts
new file mode 100644
index 0000000000..0b6c6601cc
--- /dev/null
+++ b/public/docs/_examples/toh-3/ts/app/hero-detail.snippets.pt3.ts
@@ -0,0 +1,34 @@
+// #docregion template
+@Component({
+    selector: 'my-hero-detail',
+    template: `
+      <div *ng-if="hero">
+        <h2>{{selected.name}} details!</h2>
+        <div><label>id: </label>{{hero.id}}</div>
+        <div>
+          <label>name: </label>
+          <input [(ng-model)]="hero.name" placeholder="name"/>
+        </div>
+      </div>
+    `,
+    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
+  })
+// #enddocregion template
+
+// #docregion inputs
+@Component({
+    selector: 'my-hero-detail',
+    template: `
+      <div *ng-if="hero">
+        <h2>{{hero.name}} details!</h2>
+          <div><label>id: </label>{{hero.id}}</div>
+            <div>
+              <label>name: </label>
+              <input [(ng-model)]="hero.name" placeholder="name"/>
+            </div>
+          </div>
+    `,
+    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
+    inputs: ['hero']
+  })
+  // #enddocregion inputs
\ No newline at end of file
diff --git a/public/docs/_examples/toh-3/ts/app/mock-heroes.ts b/public/docs/_examples/toh-3/ts/app/mock-heroes.ts
new file mode 100644
index 0000000000..2d8668e008
--- /dev/null
+++ b/public/docs/_examples/toh-3/ts/app/mock-heroes.ts
@@ -0,0 +1,15 @@
+import { Hero } from './hero';
+// #docregion mocking-heroes
+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"}
+];
+// #enddocregion mocking-heroes
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.pt4.ts b/public/docs/_examples/toh-4/ts/app/app.component.pt4.ts
new file mode 100644
index 0000000000..aed30ab470
--- /dev/null
+++ b/public/docs/_examples/toh-4/ts/app/app.component.pt4.ts
@@ -0,0 +1,111 @@
+// #docregion
+import {Component} from 'angular2/angular2';
+
+@Component({selector: 'my-app'})
+export class AppComponent { }
+// #enddocregion
+
+// #docregion initialize-routes-property
+export class AppComponent {
+  public title = 'Tour of Heroes';
+  public routes = Routes;
+}
+// #enddocregion initialize-routes-property
+
+// #docregion oninit
+onInit() {
+  this.heroes = this.getHeroes();
+}
+
+getHeroes() {
+  this.heroes = [];
+
+  this._heroService.getHeroes()
+    .then((heroes: Hero[]) => this.heroes = heroes);
+
+  return this.heroes;
+}
+// #enddocregion oninit
+
+// #docregion styles
+styles: [`
+  .router-link {padding: 5px;text-decoration: none;}
+  .router-link:visited, .router-link:link {color: #444;}
+  .router-link:hover {color: white; background-color: #1171a3; text-decoration: none;}
+  .router-link.router-link-active {color: white; background-color: #52b9e9; text-decoration: none;}
+`],
+// #enddocregion styles
+
+// #docregion import-params
+import {RouteParams} from 'angular2/router';
+// #enddocregion import-params
+// #docregion inject-routeparams
+constructor(private _routeParams: RouteParams) {}
+// #enddocregion inject-routeparams
+// #docregion access-params
+export class HeroDetailComponent implements OnInit {
+  
+onInit() { }
+// #enddocregion access-params
+// #docregion import-onit
+import {Component, FORM_DIRECTIVES, OnInit} from 'angular2/angular2';
+// #enddocregion import-onit
+// #docregion onit-id-param
+onInit() { let id = +this._routeParams.get('id'); // TODO: get the hero using it’s id }
+// #enddocregion onit-id-param
+
+// #docregion onit-hero-id
+onInit() {
+  if (!this.hero) {
+    let id = +this._routeParams.get('id');
+          // TODO: get the hero using it’s id
+  }
+}
+// #docregion onit-hero-id
+
+// #docregion inject-hero-service
+constructor(
+  private _heroService: HeroService,
+  private _routeParams: RouteParams) {
+}
+// #docregion inject-hero-service
+
+// #docregion onit-hero-method
+  onInit() {
+    if (!this.hero) {
+      let id = +this._routeParams.get('id');
+      this._heroService.getHero(id).then((hero: Hero) => this.hero = hero);
+    }
+  }
+// #docregion onit-hero-method
+
+// #docregion select-hero
+import {Router} from 'angular2/router';
+import {Routes} from './route.config';
+
+constructor(private _heroService: HeroService, private _router: Router) { }
+
+gotoDetail() {
+  this._router.navigate([`/${Routes.detail.as}`, { id: this.selectedHero.id }]);
+}
+// #enddocregion select-hero
+
+// #docregion reference-heroes-component
+@Component({
+  selector: 'my-heroes',
+  templateUrl: 'app/heroes.component.html',
+  styleUrls: ['app/heroes.component.css'],
+  directives: [FORM_DIRECTIVES, HeroDetailComponent]
+})
+export class HeroesComponent {
+// #docregion reference-heroes-component
+
+// #docregion reference-hero-detail-component
+@Component({
+  selector: 'my-hero-detail',
+  templateUrl: 'app/hero-detail.component.html',
+  directives: [FORM_DIRECTIVES],
+  inputs: ['hero']
+})
+export class HeroDetailComponent {
+// #enddocregion reference-hero-detail-component
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/bootstrap.pt4.ts b/public/docs/_examples/toh-4/ts/app/bootstrap.pt4.ts
new file mode 100644
index 0000000000..f7ba365121
--- /dev/null
+++ b/public/docs/_examples/toh-4/ts/app/bootstrap.pt4.ts
@@ -0,0 +1,13 @@
+// #docregion
+import {bootstrap} from 'angular2/angular2';
+import {AppComponent} from './app.component';
+// #docregion import-hero-service
+import {HeroService} from './hero.service';
+// #enddocregion import-hero-service
+bootstrap(AppComponent, [HeroService]);
+// #enddocregion
+
+// #docregion import-router
+import {Router} from 'angular2/router';
+import {Routes} from './route.config';
+// #enddocregion import-router
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/hero.service.pt4.ts b/public/docs/_examples/toh-4/ts/app/hero.service.pt4.ts
new file mode 100644
index 0000000000..a30e6632e6
--- /dev/null
+++ b/public/docs/_examples/toh-4/ts/app/hero.service.pt4.ts
@@ -0,0 +1,8 @@
+// #docregion get-hero-method
+  getHero(id: number) {
+    return Promise.resolve(HEROES)
+      .then((heroes: Hero[]) => { return heroes.filter((h) => {
+        return h.id === id;
+      })[0]});
+    }
+// #docregion get-hero-method
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/index.pt4.html b/public/docs/_examples/toh-4/ts/app/index.pt4.html
new file mode 100644
index 0000000000..dd397ddbc8
--- /dev/null
+++ b/public/docs/_examples/toh-4/ts/app/index.pt4.html
@@ -0,0 +1,186 @@
+<!-- #docregion head -->
+<head>
+  <base href="/src/" />
+<!-- #docregion stylesheet -->
+  <link rel="stylesheet" href="styles.css">
+<!-- #enddocregion stylesheet -->
+  <script src="../node_modules/systemjs/dist/system.src.js"></script>
+  <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="../node_modules/angular2/bundles/router.dev.js"></script>
+</head>
+<!-- #enddocregion head -->
+<!-- #docregion bootstrap -->
+System.import('app/bootstrap');
+<!-- #enddocregion bootstrap -->
+<!-- #docregion title -->
+import {Component} from 'angular2/angular2';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>{{title}}</h1>
+  `
+})
+export class AppComponent {
+  public title = 'Tour of Heroes';
+}
+<!-- #enddocregion title -->
+
+<!-- #docregion routes-title -->
+  import {Component} from 'angular2/angular2';
+  import {RouteConfig} from 'angular2/router';
+<!-- #docregion import-app-routes -->
+  import {APP_ROUTES} from './route.config';
+<!-- #enddocregion import-app-routes -->
+
+  @Component({
+    selector: 'my-app',
+    template: `
+      <h1>{{title}}</h1>
+    `
+  })
+  @RouteConfig(APP_ROUTES)
+  export class AppComponent {
+    public title = 'Tour of Heroes';
+  }
+  <!-- #enddocregion routes-title -->
+  
+<!-- #docregion router-outlet -->
+  template: `
+  <h1>{{title}}</h1>
+  <router-outlet></router-outlet>
+`
+<!-- #enddocregion router-outlet -->
+
+<!-- #docregion simple-dashboard-component -->
+import {Component} from 'angular2/angular2';
+
+@Component({
+  selector: 'my-dashboard',
+  template: `
+    <h1>Dashboard Goes Here</h1>
+  `
+})
+export class DashboardComponent {}
+<!-- #enddocregion simple-dashboard-component -->
+
+<!-- #docregion router-link -->
+template: `
+  <h1>{{title}}</h1>
+  <a [router-link]="/Dashboard">Dashboard</a>
+  <a [router-link]="/Heroes">Heroes</a>
+  <router-outlet></router-outlet>
+`,
+<!-- #enddocregion router-link -->
+
+<!-- #docregion ng-for -->
+template: `
+  <h3>Top Heroes</h3>
+  <div>
+    <div *ng-for="#hero of heroes">
+    <div>
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
+`
+<!-- #enddocregion ng-for -->
+
+<!-- #docregion css -->
+[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 10em; }
+.col-1-4 { width: 25%; }
+.module {
+  padding: 20px; text-align: center;
+  color: #eee; max-height: 120px; min-width: 120px;
+  background-color: #1171a3;
+}
+.module:hover { background-color: #52b9e9; cursor: pointer; }
+.grid-pad { padding: 20px 0 20px 20px; }
+.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; }
+}
+<!-- #enddocregion css -->
+
+<!-- #docregion template-styled -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <div *ng-for="#hero of heroes | slice:0:4" class="col-1-4">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
+<!-- #enddocregion template-styled -->
+
+<!-- #docregion styled-nav-links -->
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>{{title}}</h1>
+    <a [router-link]="['/' + routes.dashboard.as]" 
+        class="router-link">Dashboard</a>
+    <a [router-link]="['/' + routes.heroes.as]" 
+        class="router-link">Heroes</a>
+    <router-outlet></router-outlet>
+  `,
+  styles: [`
+    .router-link {padding: 5px;text-decoration: none;}
+    .router-link:visited, .router-link:link {color: #444;}
+    .router-link:hover {color: white; background-color: #1171a3;
+        text-decoration: none;}
+    .router-link.router-link-active {color: white; 
+        background-color: #52b9e9; text-decoration: none;}
+  `],
+  directives: [ROUTER_DIRECTIVES]
+})
+<!-- #docregion styled-nav-links -->
+
+<!-- #docregion select-hero-click-event -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <div *ng-for="#hero of heroes | slice:0:4" class="col-1-4" 
+    (click)="gotoDetail(hero)">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
+<!-- #docregion select-hero-click-event -->
+
+<!-- #docregion display-hero-name -->
+<div>
+  <h2>My Heroes</h2>
+  <ul class="heroes">
+    <li *ng-for="#hero of heroes"
+      [ng-class]="getSelectedClass(hero)"
+      (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}</a>
+    </li>
+  </ul>
+  <div *ng-if="selectedHero">
+    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+		<button (click)="gotoDetail()">View Details</button>
+  </div>
+</div>
+<!-- #enddocregion display-hero-name -->
+
+<!-- #docregion basic-styles -->
+h2 { color: #444; font-weight: lighter; }
+body { margin: 2em; }
+body, input[text], button { color: #888; font-family: Cambria, Georgia; }
+button {padding: 0.2em; font-size: 14px}
+<!-- #enddocregion basic-styles -->
\ No newline at end of file
diff --git a/public/docs/_examples/toh-4/ts/app/route.config.pt4.ts b/public/docs/_examples/toh-4/ts/app/route.config.pt4.ts
new file mode 100644
index 0000000000..8ba6169c5c
--- /dev/null
+++ b/public/docs/_examples/toh-4/ts/app/route.config.pt4.ts
@@ -0,0 +1,50 @@
+// #docregion first-route
+import {HeroesComponent} from './heroes.component';
+
+export var Routes = {
+  heroes: {
+    path: '/,
+    as: 'Heroes',
+    component: HeroesComponent
+  }
+};
+
+export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);
+// #enddocregion first-route
+
+// #docregion dashboard-route
+import {HeroesComponent} from './heroes.component';
+import {DashboardComponent} from './dashboard.component';
+
+export var Routes = {
+  dashboard: {
+    path: '/', 
+    as: 'Dashboard',
+    component: DashboardComponent
+  },
+  heroes: {
+    path: '/heroes',
+    as: 'Heroes',
+    component: HeroesComponent
+  }
+};
+
+export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);
+// #enddocregion dashboard-route
+
+// #docregion route-parameter-import
+import {HeroDetailComponent} from './hero-detail.component';
+// #enddocregion route-parameter-import
+// #docregion route-parameter-detail
+detail: {
+  path: '/detail/:id',
+  as: 'Detail',
+  component: HeroDetailComponent
+}
+// #docregion route-parameter-detail
+
+// #docregion router-navigate-method
+gotoDetail(hero: Hero) {
+  this._router.navigate([`/${Routes.detail.as}`, { id: hero.id }]);
+}
+// #docregion router-navigate-method
\ No newline at end of file
diff --git a/public/docs/_examples/tsd.json b/public/docs/_examples/tsd.json
deleted file mode 100644
index 0bed83f7e6..0000000000
--- a/public/docs/_examples/tsd.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "version": "v4",
-  "repo": "borisyankov/DefinitelyTyped",
-  "ref": "master",
-  "path": "typings",
-  "bundle": "typings/tsd.d.ts",
-  "installed": {
-    "angular2/angular2.d.ts": {
-      "commit": "cd2e71bb1f0459197e733be66fdeafaec600514d"
-    },
-    "es6-promise/es6-promise.d.ts": {
-      "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
-    },   
-    "jasmine/jasmine.d.ts": {
-      "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
-    },
-    "rx/rx.d.ts": {
-      "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
-    },
-    "rx/rx-lite.d.ts": {
-      "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
-    }
-  }
-}
diff --git a/public/docs/_examples/tutorial/ts/.gitignore b/public/docs/_examples/tutorial/ts/.gitignore
new file mode 100644
index 0000000000..1855c2ea24
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/.gitignore
@@ -0,0 +1,6 @@
+typings
+**/*.js
+**/*.map
+node_modules
+jspm_packages
+bower_components
\ No newline at end of file
diff --git a/public/docs/_examples/tutorial/ts/app/app.component.ts b/public/docs/_examples/tutorial/ts/app/app.component.ts
new file mode 100644
index 0000000000..d881c50343
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/app.component.ts
@@ -0,0 +1,31 @@
+import {Component} from 'angular2/core';
+import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {HeroesComponent} from './heroes.component';
+import {HeroDetailComponent} from './hero-detail.component';
+import {DashboardComponent} from './dashboard.component';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>{{title}}</h1>
+    <a [routerLink]="['Dashboard']">Dashboard</a>
+    <a [routerLink]="['Heroes']">Heroes</a>
+    <router-outlet></router-outlet>
+  `,
+  styles: [`
+    a {padding: 5px;text-decoration: none;}
+    a:visited, a:link {color: #444;}
+    a:hover {color: white; background-color: #1171a3;}
+    a.router-link-active {color: white; background-color: #52b9e9;}
+  `],
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  // {path: '/', redirectTo: ['Dashboard'] },
+  {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
+  {path: '/heroes', name: 'Heroes', component: HeroesComponent},
+  {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
+])
+export class AppComponent {
+  public title = 'Tour of Heroes';
+}
diff --git a/public/docs/_examples/tutorial/ts/app/boot.ts b/public/docs/_examples/tutorial/ts/app/boot.ts
new file mode 100644
index 0000000000..c8f833639e
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/boot.ts
@@ -0,0 +1,9 @@
+import {bootstrap} from 'angular2/platform/browser';
+import {ROUTER_PROVIDERS} from 'angular2/router';
+import {HeroService} from './hero.service';
+import {AppComponent} from './app.component';
+
+bootstrap(AppComponent, [
+  ROUTER_PROVIDERS,
+  HeroService
+]);
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.css b/public/docs/_examples/tutorial/ts/app/dashboard.component.css
new file mode 100644
index 0000000000..26a8f3008d
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.css
@@ -0,0 +1,37 @@
+[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 10em; }
+.col-1-4 { width: 25%; }
+.module {
+	padding: 20px;
+	text-align: center;
+	color: #eee;
+	max-height: 120px;
+	min-width: 120px;
+	background-color: #1171a3;
+}
+
+.module:hover { background-color: #52b9e9; cursor: pointer; }
+
+.grid-pad { padding: 20px 0 20px 20px; }
+.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/tutorial/ts/app/dashboard.component.html
new file mode 100644
index 0000000000..226b5c5445
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.html
@@ -0,0 +1,8 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+	<div *ngFor="#hero of heroes | slice:0:4" class="col-1-4" (click)="gotoDetail(hero)">
+		<div class="module hero">
+			<h4>{{hero.name}}</h4>
+		</div>
+	</div>
+</div>
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
new file mode 100644
index 0000000000..2710a655cd
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
@@ -0,0 +1,23 @@
+import {Component, OnInit} from 'angular2/core';
+import {Router} from 'angular2/router';
+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 {
+  public heroes: Hero[] = [];
+
+  constructor(private _heroService: HeroService, private _router: Router) { }
+
+  ngOnInit() {
+    this._heroService.getHeroes().then(heroes => this.heroes = heroes);
+  }
+
+  gotoDetail(hero: Hero) {
+    this._router.navigate(['HeroDetail', { id: hero.id }]);
+  }
+}
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.html b/public/docs/_examples/tutorial/ts/app/hero-detail.component.html
new file mode 100644
index 0000000000..af9039dc9f
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/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>
\ No newline at end of file
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
new file mode 100644
index 0000000000..3ac2ecca31
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
@@ -0,0 +1,28 @@
+import {Component, OnInit} from 'angular2/core';
+import {RouteParams} from 'angular2/router';
+import {Hero} from './hero';
+import {HeroService} from './hero.service';
+
+@Component({
+  selector: 'my-hero-detail',
+  templateUrl: 'app/hero-detail.component.html',
+  inputs: ['hero']
+})
+export class HeroDetailComponent implements OnInit {
+  public hero: Hero;
+
+  constructor(private _heroService: HeroService,
+    private _routeParams: RouteParams) {
+  }
+
+  ngOnInit() {
+    if (!this.hero) {
+      let id = +this._routeParams.get('id');
+      this._heroService.getHero(id).then(hero => this.hero = hero);
+    }
+  }
+
+  goBack() {
+    window.history.back();
+  }
+}
diff --git a/public/docs/_examples/tutorial/ts/app/hero.service.ts b/public/docs/_examples/tutorial/ts/app/hero.service.ts
new file mode 100644
index 0000000000..45b4e25adf
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/hero.service.ts
@@ -0,0 +1,14 @@
+import {Injectable} from 'angular2/core';
+import {HEROES} from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+	getHeroes() {
+		return Promise.resolve(HEROES);
+	}
+
+	getHero(id: number) {
+    return Promise.resolve(HEROES)
+      .then(heroes => heroes.filter(h => h.id === id)[0]);
+	}
+}
diff --git a/public/docs/_examples/tutorial/ts/app/hero.ts b/public/docs/_examples/tutorial/ts/app/hero.ts
new file mode 100644
index 0000000000..34f6058c2f
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/hero.ts
@@ -0,0 +1,4 @@
+export interface Hero {
+	id: number;
+	name: string;
+}
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.css b/public/docs/_examples/tutorial/ts/app/heroes.component.css
new file mode 100644
index 0000000000..febf0e1e21
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/heroes.component.css
@@ -0,0 +1,17 @@
+.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
+
+.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
+
+.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
+
+.heroes .badge {
+	font-size: small;
+	color: white;
+	padding: 0.1em 0.7em;
+	background-color: #369;
+	line-height: 1em;
+	position: relative;
+	left: -1px;
+	top: -1px;
+}
+.selected { background-color: #EEE; color: #369; }
\ No newline at end of file
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.html b/public/docs/_examples/tutorial/ts/app/heroes.component.html
new file mode 100644
index 0000000000..c54fdc17aa
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/heroes.component.html
@@ -0,0 +1,14 @@
+<div>
+  <h2>My Heroes</h2>
+  <ul class="heroes">
+    <li *ngFor="#hero of heroes"
+      [class.selected]="hero === selectedHero"
+      (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </li>
+  </ul>
+  <div *ngIf="selectedHero">
+    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+    <button (click)="gotoDetail()">View Details</button>
+  </div>
+</div>
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.ts b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
new file mode 100644
index 0000000000..22a3e82a4a
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
@@ -0,0 +1,37 @@
+import {Component, OnInit} from 'angular2/core';
+import {Router} from 'angular2/router';
+import {HeroService} from './hero.service';
+import {HeroDetailComponent} from './hero-detail.component';
+import {Hero} from './hero';
+
+@Component({
+  selector: 'my-heroes',
+  templateUrl: 'app/heroes.component.html',
+  styleUrls: ['app/heroes.component.css'],
+  directives: [HeroDetailComponent]
+})
+export class HeroesComponent implements OnInit {
+  public heroes: Hero[];
+  public selectedHero: Hero;
+
+  constructor(private _heroService: HeroService, private _router: Router) { }
+
+  getHeroes() {
+    this.selectedHero = undefined;
+    this.heroes = [];
+
+    this._heroService.getHeroes().then(heroes => this.heroes = heroes);
+
+    return this.heroes;
+  }
+
+  gotoDetail() {
+    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+  }
+
+  ngOnInit() {
+    this.heroes = this.getHeroes();
+  }
+
+  onSelect(hero: Hero) { this.selectedHero = hero; }
+}
diff --git a/public/docs/_examples/tutorial/ts/app/mock-heroes.ts b/public/docs/_examples/tutorial/ts/app/mock-heroes.ts
new file mode 100644
index 0000000000..406e5eb7f8
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/app/mock-heroes.ts
@@ -0,0 +1,14 @@
+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/example-config.json b/public/docs/_examples/tutorial/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/tutorial/ts/index.html
new file mode 100644
index 0000000000..2f7e00b2f3
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <base href="/"/>
+  <link rel="stylesheet" href="styles.css">
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="node_modules/angular2/bundles/router.dev.js"></script>
+  <script>
+    System.config({
+      packages: {'app': {defaultExtension: 'js'}}
+    });
+    System.import('app/boot').catch(console.log.bind(console));
+  </script>
+</head>
+
+<body>
+  <my-app>Loading...</my-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/docs/_examples/tutorial/ts/plnkr.json b/public/docs/_examples/tutorial/ts/plnkr.json
new file mode 100644
index 0000000000..fc4ea3e22c
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "Tour of Heroes",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["tutorial", "tour", "heroes"]
+}
diff --git a/public/docs/_examples/tutorial/ts/styles.css b/public/docs/_examples/tutorial/ts/styles.css
new file mode 100644
index 0000000000..8fa646e1c7
--- /dev/null
+++ b/public/docs/_examples/tutorial/ts/styles.css
@@ -0,0 +1,4 @@
+h2 { color: #444; font-weight: lighter; }
+body { margin: 2em; }
+body, input[text], button { color: #888; font-family: Cambria, Georgia; }
+button {padding: 0.2em; font-size: 14px}
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 8a5deab6da..e3fc4ba048 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -522,10 +522,9 @@ code-example(format="").
     We might wish to render the first page of our application on the server 
     to improve launch performance or facilitate 
     [SEO](http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf).
-    
-    These targes require a different kind of bootstrap function that we'd import from a different library.
 
-    
+    These targets require a different kind of bootstrap function that we'd import from a different library.
+ 
   #### Why do we create a separate ***boot.ts*** file?
   
   The *boot.ts* file is tiny. This is just a QuickStart.
diff --git a/public/docs/ts/latest/tutorial/dependency-injection.1.jade b/public/docs/ts/latest/tutorial/dependency-injection.1.jade
new file mode 100644
index 0000000000..c8fab3f81f
--- /dev/null
+++ b/public/docs/ts/latest/tutorial/dependency-injection.1.jade
@@ -0,0 +1,623 @@
+include ../../../../_includes/_util-fns
+:markdown
+  Dependency Injection is an important application design pattern.
+  Angular has its own Dependency Injection framework and 
+  we really can't build an Angular application without it.
+
+  In this chapter we'll learn what Dependency Injection is, why we want it, and how to use it.
+  <a name="why-di"></a>
+.l-main-section
+:markdown
+  ## Why Dependency Injection?
+  
+  Let's start with the following code. 
+  
+  ```
+  class Engine {}
+  
+  class Tires {}
+  
+  class Car {
+    private engine: Engine;
+    private tires: Tires;
+  
+    constructor() {
+      this.engine = new Engine();
+      this.tires = new Tires();
+    }
+    // Method using the engine and tires
+    drive() {}
+  }
+  ```
+  
+  Our `Car` creates everything it needs inside its constructor. 
+  What's the problem? 
+  
+  The problem is that our `Car` class is brittle, inflexible, and hard to test.
+  
+  Our `Car` needs an engine and tires. Instead of asking for them,
+  the `Car` constructor creates its own copies by "new-ing" them from
+  the very specific classes, `Engine` and `Tires`.
+  
+  What if the `Engine` class evolves and its constructor requires a parameter?
+  Our `Car` is broken and stays broken until we rewrite it along the lines of 
+  `this.engine = new Engine(theNewParameter)`. 
+  We didn't care about `Engine` constructor parameters when we first wrote `Car`.
+  We don't really care about them now. 
+  But we'll *have* to start caring because 
+  when the definion of `Engine` changes, our `Car` class must change.
+  That makes `Car` brittle.
+  
+  What if we want to put a different brand of tires on our `Car`. Too bad. 
+  We're locked into whatever brand the `Tires` class creates. That makes our `Car` inflexible.
+  
+  Right now each new car gets its own engine. It can't share an engine with other cars. 
+  While that makes sense for an automobile engine, 
+  we can think of other dependencies that should be shared ... like the onboard
+  wireless connection to the manufacturer's service center. Our `Car` lacks the flexibility
+  to share services that have been created previously for other consumers.
+  
+  When we write tests for our `Car` we're at the mercy of its hidden dependencies.
+  Is it even possible to create a new `Engine` in a test environment? 
+  What does `Engine`itself depend upon? What does that dependency depend on?
+  Will a new instance of `Engine` make an asynchronous call to the server? 
+  We certainly don't want that going on during our tests.
+  
+  What if our `Car` should flash a warning signal when tire pressure is low.
+  How do we confirm that if actually does flash a warning
+  if we can't swap in low-pressure tires during the test?
+  
+  We have no control over the car's hidden dependencies. 
+  When we can't control the dependencies, a class become difficult to test.
+  
+  How can we make `Car` more robust, more flexible, and more testable? 
+  
+  That's super easy. We probably already know what to do. We change our `Car` constructor to this:
+  <a name="ctor-injection"></a>
+  ```
+  constructor(engine: Engine, tires: Tires) {
+    this.engine = engine;
+    this.tires = tires;
+  }
+  ```
+  See what happened? We moved the definition of the dependencies to the constructor. 
+  Our `Car` class no longer creates an engine or tires.
+  It just consumes them.
+  
+  Now we create a car by passing the engine and tires to the constructor. 
+  ```
+  var car = new Car(new Engine(), new Tires());
+  ```
+  How cool is that? 
+  The definition of the engine and tire dependencies are decoupled from the `Car` class itself.
+  We can pass in any kind of engine or tires we like, as long as they
+  conform to the general API requirements of an engine or tires.
+  
+  If someone extends the `Engine` class, that is not `Car`'s problem.
+.l-sub-section
+  :markdown
+    The consumer of `Car` has the problem. The consumer must update the car creation code to
+    something like:
+    ```
+    var car = new Car(new Engine(theNewParameter), new Tires());
+    ```
+    The critical point is this: `Car` itself did not have to change. 
+    We'll take care of the consumer's problem soon enough.
+  
+:markdown
+  The `Car` class is much easier to test because we are in complete control 
+  of its dependencies.
+  We can pass mocks to the constructor that do exactly what we want them to do
+  during each test:
+  ```
+  var car = new Car(new MockEngine(), new MockLowPressureTires());
+  ```
+  
+  **We just learned what Dependency Injection is**. 
+  
+  It's a coding pattern in which a class receives its dependencies from external
+  sources rather than creating them itself.
+  
+  Cool! But what about that poor consumer?
+  Anyone who wants a `Car` must now
+  create all three parts: the `Car`, `Engine`, and `Tires`.
+  The `Car` class shed its problems at the consumer's expense.
+  We need something that takes care of assembling these parts for us.
+  
+  We could write a giant class to do that:
+  ```
+  class SuperFactory {
+    createEngine = () => new Engine();
+    createTires =  () => new Tires();
+    createCar = () => new Car(this.createEngine(), this.createTires());
+  }
+  ```
+  It's not so bad now with only three creation methods.
+  But maintaining it will be hairy as the application grows.
+  This `SuperFactory` is going to become a huge spider web of
+  interdependent factory methods!
+  
+  Wouldn't it be nice if we could simply list the things we want to build without 
+  having to define which dependency gets injected into what?
+  
+  This is where the Dependency Injection Framework comes into play.
+  Imagine the framework had something called an `Injector`. 
+  We register some classes with this `Injector` and it figures out how to create them.
+  
+  When we need a `Car`, we simply ask the `Injector` to get it for us and we're good to go.
+  ```
+  function main() {
+    var injector = new Injector([Car, Engine, Tires, Logger]);
+    var car = injector.get(Car);
+    car.drive();
+  }
+  ```
+  Everyone wins. The `Car` knows nothing about creating an `Engine` or `Tires`.
+  The consumer knows nothing about creating a `Car`. 
+  We don't have a gigantic factory class to maintain.
+  Both `Car` and consumer simply ask for what they need and the `Injector` delivers.
+
+  This is what a **Dependency InjectionFramework** is all about. 
+
+  Now that we know what Dependency Injection is and appreciate its benefits, 
+  let's see how it is implemented in Angular.
+
+.l-main-section
+:markdown
+  ## Angular Dependency Injection
+  
+  Angular ships with its own Dependency Injection framework. This framework can also be used
+  as a standalone module by other applications and frameworks. 
+  
+  That sounds nice. What does it do for us when building components in Angular?
+  Let's see, one step at a time. 
+  
+  We'll begin with a simplified version of the `HeroesComponent` 
+  that we built in the [The Tour of Heroes](../tutorial/).
+  ```
+  import {Component} from 'angular2/angular2';
+  import {Hero} from './hero';
+  import {HEROES} from './mock-heroes';
+  
+  @Component({
+    selector: 'my-heroes'
+    templateUrl: 'app/heroes.component.html'
+  })
+  export class HeroesComponent {
+  
+    heroes: Hero[] = HEROES;
+  
+  }
+  ```
+  It assigns a list of mocked heroes to its `heroes` property for binding within the template.
+  Pretty straight forward. 
+  
+  Those heroes are currently a fixed, in-memory collection, defined in another file and imported by the component. 
+  That works in the early stages of development but it's far from ideal.
+  As soon as we try to test this component or want to get our heroes data from a remote server, 
+  we'll have to change this component's implementation of `heroes` and 
+  fix every other use of the `HEROES` mock data.
+   
+  Let's make a service that hides how we get Hero data.
+.l-sub-section
+  :markdown
+    Write this service in its own file. See [this note](#forward-ref) to understand why.
+:markdown
+  ```
+  import {Hero} from './hero';
+  import {HEROES} from './mock-heroes';
+  
+  class HeroService {
+  
+    heroes: Hero[];
+  
+    constructor() {
+      this.heroes = HEROES;
+    }
+  
+    getHeroes() {
+      return this.heroes;
+    }
+  }
+  ```
+  Our `HeroService` exposes a `getHeroes()` method that returns 
+  the same mock data as before but none of its consumers need to know that. 
+    
+  A service is nothing more than a class in Angular 2. 
+  It remains nothing more than a class until we register it with
+  the Angular injector.
+  
+  ### Configuring the Injector
+  
+  We don't have to create the injector.
+  <a name="bootstrap"></a>
+  Angular creates an application-wide injector for us during the bootstrap process.
+  ```
+  bootstrap(HeroesComponent);
+  ``` 
+  
+  Let’s configure the injector at the same time that we bootstrap by adding 
+  our `HeroService` to an array in the second argument. 
+  We'll explain that array when we talk about [providers](#providers) later in this chapter.
+  ```
+  bootstrap(AppComponent, [HeroService]);
+  ```  
+  That’s it! The injector now knows about the `HeroService` which is available for injection across our entire application.
+    
+  ### Preparing the `HeroesComponent` for injection
+    
+  The `HeroesComponent` should get its heroes from this service.
+  Per the dependency injection pattern, the component must "ask for" the service in its constructor [as we explained
+  earlier](#ctor-injection)".
+  
+  ```
+  constructor(heroService: HeroService) {
+    this.heroes = heroService.getHeroes();
+  }
+  ```
+  <a name="di-metadata"></a>
+.l-sub-section
+  :markdown
+    Adding a parameter to the constructor isn't all that's happening here.
+    
+    We are writing the app in TypeScript and have followed the parameter name with a type notation, `:HeroService`.
+    The class is also decorated with the `@Component` decorator (scroll up to confirm that fact).
+    
+    When the TypeScript compiler evaluates this class, it sees the decorator and adds class metadata
+    into the generated JavaScript code. Within that metadata lurks the information that
+    associates the `heroService` parameter with the `HeroService` class. 
+    
+    That's how the Angular injector will know to inject an instance of the `HeroService` when it
+    creates a new `HeroesComponent`.
+:markdown
+  ### Creating the `HeroesComponent` with the injector (implicitly)
+  When we introduced the idea of an injector above, we showed how to create
+  a new `Car` with that injector.
+  ```
+  var car = injector.get(Car);
+  ```
+  Search the entire Tour of Heroes source. We won't find a single line like
+  ```
+  var hc = injector.get(HeroesComponent);
+  ```
+  We *could* write code like that if we wanted to. We just don't have to.
+  Angular does that for us when it renders a `HeroesComponent` 
+  whether we ask for it in an HTML template ...
+  ```
+  <my-heroes></heroes>
+  ```
+  ... or navigate to a `HeroesComponent` view with the [router](./router.html).
+  
+  ### Singleton services  
+  We might wonder what happens when we inject the `HeroService` into other components. 
+  Do we get the same instance every time?
+   
+  Yes we do. Dependencies are singletons. 
+  We’ll discuss that later in our chapter about 
+  [Hierarchical Injectors](./hierarchical-dependency-injection.html).
+
+  ### Testing the component
+  We emphasized earlier that designing a class for dependency injection makes it easier to test.
+  
+  Mission accomplished!  We don't even need the Angular Dependency Injection system to test the `HeroesComponent`.
+  We simply create a bew `HeroesComponent` with a mock service and poke at it:
+  ```
+  it("should have heroes when created", () => {
+    let hc = new HeroesComponent(mockService);
+    expect(hc.heroes.length).toEqual(mockService.getHeroes().length);
+  })
+  ```
+  ### When the service needs a service 
+  Our `HeroService` is very simple. It doesn't have any dependencies of its own. 
+  
+  
+  What if it had a dependency? What if it reported its activities through a logging service?
+  We'd apply the same "constructor injection" pattern. 
+  
+  Here's a rewrite of `HeroService` with a new constructor that takes a `logger` parameter.
+  ```
+  import {Hero} from './hero';
+  import {HEROES} from './mock-heroes';
+  import {Logger} from './logger';
+  
+  @Injectable()
+  class HeroService {
+  
+    heroes: Hero[];
+  
+    constructor(private logger: Logger) {
+      this.heroes = HEROES;
+    }
+  
+    getHeroes() {
+      this.logger.log('Getting heroes ...')
+      return this.heroes;
+    }
+  }
+  ```
+  The constructor now asks for an injected instance of a `Logger` and stores it in a private property called `logger`.
+  We call that property within our `getHeroes()` method when anyone asks for heroes.
+  
+  **The `@Injectable()` decoration catches our eye!**
+  
+.alert.is-critical
+  :markdown
+    **Always include the parentheses!** Always call `@Injectable()`. It's easy to forget the parentheses. 
+    Our application will fail mysteriously if we do. It bears repeating: **always include the parentheses.**
+:markdown
+  We haven't seen `@Injectable()` before. 
+  As it happens, we could have added it to `HeroService`. We didn't bother because we didn't need it then.
+  
+  We need it now ... now that our service has an injected dependency. 
+  We need it because Angular requires constructor parameter metadata in order to inject a `Logger`. 
+  As [we mentioned earlier](#di-metadata), TypeScript *only generates metadata for classes that have a decorator*. .
+  
+  The `HeroesComponent` has an injected dependency too. Why don't we add `@Injectable()` to the `HeroesComponent`? 
+  We *can* add it if we really want to. It isn't necessary because the `HeroesComponent` is already decorated with `@Component`.
+  TypeScript generates metadata for *any* class with a decorator and *any* decorator will do.
+ 
+.l-main-section
+:markdown
+  <a name="providers"></a>
+  ## Injector Providers
+  
+  Remember when we added the `HeroService` to an array in the [bootstrap](#bootstrap) process? 
+  ```
+  bootstrap(AppComponent, [HeroService]);
+  ```
+  That list of classes is actually a list of **providers**.  
+  
+  "Providers" create the instances of the things that we ask the injector to inject.
+  There are many ways ways to "provide" a thing that has the necessary shape and behavior to serve as a `HeroService`.
+  A class is a natural provider - it's meant to be created. But it's not the only way
+  to produce something injectable. We could hand the injector an object to return. We could give it a factory function to call. 
+  Any of these approaches might be a good choice under the right circumstances. 
+  
+  What matters is that the injector knows what to do when something asks for a `HeroService`.
+
+  ### Provider mappings
+  When we registered the `HeroService` with the injector, we were actually registering
+  a mapping between the `HeroService` *token* and a provider that can create a `HeroService`.
+  
+  When we wrote ...
+  ```
+  import {bootstrap} from 'angular2/angular2';
+  
+  bootstrap(AppComponent, [HeroService]);
+  ```
+  ... Angular translated that statement into a mapping instruction involving the Angular `provide` method
+  ```
+  import {bootstrap, provide} from 'angular2/angular2';
+  
+  bootstrap(AppComponent, [
+    provide(HeroService, {useClass:HeroService})
+  ]); 
+  ```
+  Of course we prefer the shorthand syntax - `[HeroService]` - when the provider and the token are the same class.
+  
+  Isn't that always the case? Not always. 
+  
+  ### Alternative Class Providers
+
+  Occasionally we'll ask a different class to  provide the service.
+  
+  We do that regularly when testing a component that we're creating with dependency injection.
+  In this example, we tell the injector
+  to return a `MockHeroService` when something asks for the `HeroService`.
+  ```
+  beforeEachProviders(() => [
+    provide(HeroService, {useClass: MockHeroService});
+  ]);
+  ```
+  ### Value Providers
+  
+  Sometimes it's easier to provide a ready-made object rather than ask the injector to create it from a class.
+  
+  We do that a lot when we write tests. We might write the following test setup
+  for  tests that explore how the `HeroComponent` behaves when the `HeroService` 
+  returns an empty hero list.
+  ```
+  beforeEachProviders(() => {
+    
+    let emptyHeroService = { getHeroes: () => [] };
+    
+    return [ provide(HeroService, {useValue: emptyHeroService}) ];
+  });
+  ```
+  Notice that we mapped with `useValue` instead of `useClass`.
+ 
+  ### Factory Providers
+  
+  Sometimes the best choice for a provider is neither a class nor a value.
+  
+  Suppose our HeroService has some cool new feature that we're only offering to "special" users.
+  The HeroService shouldn't know about users and 
+  we won't know if the current user is special until runtime anyway.
+  We decide to extend our `HeroService` constructor to accept a `useCoolFeature` flag 
+  that toggles the feature on or off.
+  We rewrite the `HeroService` again as follows.
+  ```
+  @Injectable()
+  class HeroService {
+  
+    heroes: Hero[];
+  
+    constructor(private logger: Logger, private useCoolFeature: boolean) {
+      this.heroes = HEROES;
+    }
+  
+    getHeroes() {
+      let msg = this.useCoolFeature ? 'the cool new way' : 'the old way';
+      this.logger.log('Getting heroes ...' + msg)
+      return this.heroes;
+    }
+  }
+  ```
+  The feature flag is a simple boolean value. We'd like to inject the flag but it seems silly to write an entire class for a 
+  simple flag.
+  
+  We can replace the `HeroService` provider with a factory function that creates a properly configured `HeroService` for the current user.
+  We'll' build up to that result, beginning with our definition of the factory function:
+  ```
+  let heroServiceFactory = (logger: Logger, userService: UserService) => {
+    return new HeroService(logger, userService.user.isSpecial);
+  }
+  ```
+.l-sub-section
+  :markdown
+    The factory takes two parameters: the logger service and a user service. 
+    The logger we pass straight to the constructor as we did before.
+    
+    We'll know to use the cool new feature if the `userService.user.isSpecial` flag is true, 
+    a fact we can't know until runtime.
+:markdown
+  We use dependency injection everywhere so of course the factory function depends on 
+  two injected services: `Logger` and `UserService`.  
+  We declare those requirements in our provider definition object:
+  ```
+  let heroServiceDefinition = {
+     useFactory: heroServiceFactory, 
+     deps: [Logger, UserService]
+  };
+  ```
+.l-sub-section
+  :markdown
+    The `useFactory` field tells Angular that the provider is a factory function and that its implementation is the `heroServiceFactory`.
+    
+    The `deps` property is an array of provider mapping tokens. 
+    The `Logger` and `UserService` classes serve as tokens for their own class provider mappings.
+:markdown
+  Finally, we create the mapping and adjust the bootstrapping to include that mapping in its provider configuration.
+  ```
+  let heroServiceMapping = provide(HeroService, heroServiceDefinition);
+  
+  bootstrap(AppComponent, [heroServiceMapping, Logger, UserService]);
+  ```
+  ### String tokens
+  
+  Sometimes we have an object dependency rather than a class dependency.
+  
+  Applications often define configuration objects with lots of small facts like the title of the application or the address of a web api endpoint.
+  These configuration objects aren't always instances of a class. They're just objects ... like this one:
+  ```
+  let config = {
+    apiEndpoint: 'api.heroes.com',
+    title: 'The Hero Employment Agency'
+  }; 
+  ```
+  We'd like to make this `config` object available for injection. 
+  We know we can register an object with a "Value Provider". But what do we use for the token?
+  
+  Until now, we've always had a class to use as the token for mapping. 
+  The `HeroService` class was our token, whether we mapped it to another class, a value, or a factory provider.
+  This time we don't have a class. There is no `Config` class.
+  
+  Fortunately, a token can be either a JavaScript type (e.g. the class function) **or a string**. We'll map our configuration object
+  to a string!
+  ```
+  bootstrap(AppComponent, [
+    // other mappings //
+    provide('App.config', {useValue:config})
+  ]);
+  ```
+  Now let's update the `HeroesComponent` constructor so it can display the configured title.  
+  Right now the constructor signature is
+  ```
+  constructor(heroService: HeroService)
+  ```
+  We might think we can write:
+  ```
+  // FAIL!
+  constructor(heroService: HeroService, config: config)
+  ```
+  That's not going to work. There is no type called `config` and we didn't register the `config` object under that name anyway.
+  We'll need a little help from another Angular decorator called `@Inject`.
+  ```
+  import {Inject} from 'angular2/angulare2'
+  
+  constructor(heroService: HeroService, @Inject('app.config') config)
+  
+  ```
+
+.l-main-section
+:markdown
+  # Next Steps
+  We learned the basics of Angular Dependency Injection in this chapter.
+  
+  The Angular Dependency Injection is more capable than we've described. 
+  We can learn more about its advanced features, beginning with its support for
+  a hierarchy of nested injectors in the next 
+  [Dependency Injection chapter](./hierarchical-dependency-injection.html)
+  
+.l-main-section
+<a name="forward-ref"></a>
+:markdown
+  ### Appendix: Why we recommend one class per file
+  Developers expect one class per file. Multiple classes per file is confusing and is best avoided. 
+  If we define every class in its own file, there is nothing in this note to worry about.
+  Move along!
+  
+  If we scorn this advice
+  and we add our `HeroService` class to the `HeroesComponent` file anyway, 
+  **define the `HeroesComponent` last!** 
+  If we put it define component before the service,
+  we'll get a runtime null reference error.
+
+  To understand why, paste the following incorrect, ultra-simplified rendition of these two
+  classes into the [TypeScript playground](http://www.typescriptlang.org/Playground).
+ 
+  ```
+  class HeroesComponent {
+    static $providers=[HeroService]
+  }
+
+  class HeroService { }
+
+  alert(HeroesComponent.$providers)
+  ```
+.l-sub-section
+  :markdown
+    The `HeroService` is incorrectly defined below the `HeroComponent`.
+    
+    The `$providers` static property represents the metadata about the injected `HeroService`
+    that TypeScript compiler would add to the component class.
+    
+    The `alert` simulates the action of the Dependency Injector at runtime 
+    when it attempts to create a `HeroesComponent`.
+:markdown
+  Run it. The alert appears but displays nothing. 
+  This is the equivalent of the null reference error thrown at runtime.
+  
+  We understand why when we review the generated JavaScript which looks like this:
+  ```
+  var HeroesComponent = (function () {
+      function HeroesComponent() {
+      }
+      HeroesComponent.$providers = [HeroService];
+      return HeroesComponent;
+  })();
+  
+  var HeroService = (function () {
+      function HeroService() {
+      }
+      return HeroService;
+  })();
+  
+  alert(HeroesComponent.$providers);
+  ```
+
+  Notice that the TypeScript compiler turns classes into function expressions 
+  assigned to variables. The value of the captured `HeroService` variable is undefined
+  when the `$providers` array is assigned. The `HeroService` variable gets its value too late
+  to be captured.
+  
+  Reverse the order of class definition so that the  `HeroService`
+  appears before the `HeroesComponent` that requires it.
+  Run again. This time the alert displays the `HeroService` function definition.
+
+  If we insist on defining the `HeroService` in the same file and insist on
+  defining the component first, Angular offers a way to make that work.
+  The `forwardRef()` method let's us reference a class 
+  before it has been defined. 
+  Learn more about this problem and the `forwardRef()`
+  in this [blog post](http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html).
diff --git a/public/docs/ts/latest/tutorial/dependency-injection.jade b/public/docs/ts/latest/tutorial/dependency-injection.jade
new file mode 100644
index 0000000000..c8fab3f81f
--- /dev/null
+++ b/public/docs/ts/latest/tutorial/dependency-injection.jade
@@ -0,0 +1,623 @@
+include ../../../../_includes/_util-fns
+:markdown
+  Dependency Injection is an important application design pattern.
+  Angular has its own Dependency Injection framework and 
+  we really can't build an Angular application without it.
+
+  In this chapter we'll learn what Dependency Injection is, why we want it, and how to use it.
+  <a name="why-di"></a>
+.l-main-section
+:markdown
+  ## Why Dependency Injection?
+  
+  Let's start with the following code. 
+  
+  ```
+  class Engine {}
+  
+  class Tires {}
+  
+  class Car {
+    private engine: Engine;
+    private tires: Tires;
+  
+    constructor() {
+      this.engine = new Engine();
+      this.tires = new Tires();
+    }
+    // Method using the engine and tires
+    drive() {}
+  }
+  ```
+  
+  Our `Car` creates everything it needs inside its constructor. 
+  What's the problem? 
+  
+  The problem is that our `Car` class is brittle, inflexible, and hard to test.
+  
+  Our `Car` needs an engine and tires. Instead of asking for them,
+  the `Car` constructor creates its own copies by "new-ing" them from
+  the very specific classes, `Engine` and `Tires`.
+  
+  What if the `Engine` class evolves and its constructor requires a parameter?
+  Our `Car` is broken and stays broken until we rewrite it along the lines of 
+  `this.engine = new Engine(theNewParameter)`. 
+  We didn't care about `Engine` constructor parameters when we first wrote `Car`.
+  We don't really care about them now. 
+  But we'll *have* to start caring because 
+  when the definion of `Engine` changes, our `Car` class must change.
+  That makes `Car` brittle.
+  
+  What if we want to put a different brand of tires on our `Car`. Too bad. 
+  We're locked into whatever brand the `Tires` class creates. That makes our `Car` inflexible.
+  
+  Right now each new car gets its own engine. It can't share an engine with other cars. 
+  While that makes sense for an automobile engine, 
+  we can think of other dependencies that should be shared ... like the onboard
+  wireless connection to the manufacturer's service center. Our `Car` lacks the flexibility
+  to share services that have been created previously for other consumers.
+  
+  When we write tests for our `Car` we're at the mercy of its hidden dependencies.
+  Is it even possible to create a new `Engine` in a test environment? 
+  What does `Engine`itself depend upon? What does that dependency depend on?
+  Will a new instance of `Engine` make an asynchronous call to the server? 
+  We certainly don't want that going on during our tests.
+  
+  What if our `Car` should flash a warning signal when tire pressure is low.
+  How do we confirm that if actually does flash a warning
+  if we can't swap in low-pressure tires during the test?
+  
+  We have no control over the car's hidden dependencies. 
+  When we can't control the dependencies, a class become difficult to test.
+  
+  How can we make `Car` more robust, more flexible, and more testable? 
+  
+  That's super easy. We probably already know what to do. We change our `Car` constructor to this:
+  <a name="ctor-injection"></a>
+  ```
+  constructor(engine: Engine, tires: Tires) {
+    this.engine = engine;
+    this.tires = tires;
+  }
+  ```
+  See what happened? We moved the definition of the dependencies to the constructor. 
+  Our `Car` class no longer creates an engine or tires.
+  It just consumes them.
+  
+  Now we create a car by passing the engine and tires to the constructor. 
+  ```
+  var car = new Car(new Engine(), new Tires());
+  ```
+  How cool is that? 
+  The definition of the engine and tire dependencies are decoupled from the `Car` class itself.
+  We can pass in any kind of engine or tires we like, as long as they
+  conform to the general API requirements of an engine or tires.
+  
+  If someone extends the `Engine` class, that is not `Car`'s problem.
+.l-sub-section
+  :markdown
+    The consumer of `Car` has the problem. The consumer must update the car creation code to
+    something like:
+    ```
+    var car = new Car(new Engine(theNewParameter), new Tires());
+    ```
+    The critical point is this: `Car` itself did not have to change. 
+    We'll take care of the consumer's problem soon enough.
+  
+:markdown
+  The `Car` class is much easier to test because we are in complete control 
+  of its dependencies.
+  We can pass mocks to the constructor that do exactly what we want them to do
+  during each test:
+  ```
+  var car = new Car(new MockEngine(), new MockLowPressureTires());
+  ```
+  
+  **We just learned what Dependency Injection is**. 
+  
+  It's a coding pattern in which a class receives its dependencies from external
+  sources rather than creating them itself.
+  
+  Cool! But what about that poor consumer?
+  Anyone who wants a `Car` must now
+  create all three parts: the `Car`, `Engine`, and `Tires`.
+  The `Car` class shed its problems at the consumer's expense.
+  We need something that takes care of assembling these parts for us.
+  
+  We could write a giant class to do that:
+  ```
+  class SuperFactory {
+    createEngine = () => new Engine();
+    createTires =  () => new Tires();
+    createCar = () => new Car(this.createEngine(), this.createTires());
+  }
+  ```
+  It's not so bad now with only three creation methods.
+  But maintaining it will be hairy as the application grows.
+  This `SuperFactory` is going to become a huge spider web of
+  interdependent factory methods!
+  
+  Wouldn't it be nice if we could simply list the things we want to build without 
+  having to define which dependency gets injected into what?
+  
+  This is where the Dependency Injection Framework comes into play.
+  Imagine the framework had something called an `Injector`. 
+  We register some classes with this `Injector` and it figures out how to create them.
+  
+  When we need a `Car`, we simply ask the `Injector` to get it for us and we're good to go.
+  ```
+  function main() {
+    var injector = new Injector([Car, Engine, Tires, Logger]);
+    var car = injector.get(Car);
+    car.drive();
+  }
+  ```
+  Everyone wins. The `Car` knows nothing about creating an `Engine` or `Tires`.
+  The consumer knows nothing about creating a `Car`. 
+  We don't have a gigantic factory class to maintain.
+  Both `Car` and consumer simply ask for what they need and the `Injector` delivers.
+
+  This is what a **Dependency InjectionFramework** is all about. 
+
+  Now that we know what Dependency Injection is and appreciate its benefits, 
+  let's see how it is implemented in Angular.
+
+.l-main-section
+:markdown
+  ## Angular Dependency Injection
+  
+  Angular ships with its own Dependency Injection framework. This framework can also be used
+  as a standalone module by other applications and frameworks. 
+  
+  That sounds nice. What does it do for us when building components in Angular?
+  Let's see, one step at a time. 
+  
+  We'll begin with a simplified version of the `HeroesComponent` 
+  that we built in the [The Tour of Heroes](../tutorial/).
+  ```
+  import {Component} from 'angular2/angular2';
+  import {Hero} from './hero';
+  import {HEROES} from './mock-heroes';
+  
+  @Component({
+    selector: 'my-heroes'
+    templateUrl: 'app/heroes.component.html'
+  })
+  export class HeroesComponent {
+  
+    heroes: Hero[] = HEROES;
+  
+  }
+  ```
+  It assigns a list of mocked heroes to its `heroes` property for binding within the template.
+  Pretty straight forward. 
+  
+  Those heroes are currently a fixed, in-memory collection, defined in another file and imported by the component. 
+  That works in the early stages of development but it's far from ideal.
+  As soon as we try to test this component or want to get our heroes data from a remote server, 
+  we'll have to change this component's implementation of `heroes` and 
+  fix every other use of the `HEROES` mock data.
+   
+  Let's make a service that hides how we get Hero data.
+.l-sub-section
+  :markdown
+    Write this service in its own file. See [this note](#forward-ref) to understand why.
+:markdown
+  ```
+  import {Hero} from './hero';
+  import {HEROES} from './mock-heroes';
+  
+  class HeroService {
+  
+    heroes: Hero[];
+  
+    constructor() {
+      this.heroes = HEROES;
+    }
+  
+    getHeroes() {
+      return this.heroes;
+    }
+  }
+  ```
+  Our `HeroService` exposes a `getHeroes()` method that returns 
+  the same mock data as before but none of its consumers need to know that. 
+    
+  A service is nothing more than a class in Angular 2. 
+  It remains nothing more than a class until we register it with
+  the Angular injector.
+  
+  ### Configuring the Injector
+  
+  We don't have to create the injector.
+  <a name="bootstrap"></a>
+  Angular creates an application-wide injector for us during the bootstrap process.
+  ```
+  bootstrap(HeroesComponent);
+  ``` 
+  
+  Let’s configure the injector at the same time that we bootstrap by adding 
+  our `HeroService` to an array in the second argument. 
+  We'll explain that array when we talk about [providers](#providers) later in this chapter.
+  ```
+  bootstrap(AppComponent, [HeroService]);
+  ```  
+  That’s it! The injector now knows about the `HeroService` which is available for injection across our entire application.
+    
+  ### Preparing the `HeroesComponent` for injection
+    
+  The `HeroesComponent` should get its heroes from this service.
+  Per the dependency injection pattern, the component must "ask for" the service in its constructor [as we explained
+  earlier](#ctor-injection)".
+  
+  ```
+  constructor(heroService: HeroService) {
+    this.heroes = heroService.getHeroes();
+  }
+  ```
+  <a name="di-metadata"></a>
+.l-sub-section
+  :markdown
+    Adding a parameter to the constructor isn't all that's happening here.
+    
+    We are writing the app in TypeScript and have followed the parameter name with a type notation, `:HeroService`.
+    The class is also decorated with the `@Component` decorator (scroll up to confirm that fact).
+    
+    When the TypeScript compiler evaluates this class, it sees the decorator and adds class metadata
+    into the generated JavaScript code. Within that metadata lurks the information that
+    associates the `heroService` parameter with the `HeroService` class. 
+    
+    That's how the Angular injector will know to inject an instance of the `HeroService` when it
+    creates a new `HeroesComponent`.
+:markdown
+  ### Creating the `HeroesComponent` with the injector (implicitly)
+  When we introduced the idea of an injector above, we showed how to create
+  a new `Car` with that injector.
+  ```
+  var car = injector.get(Car);
+  ```
+  Search the entire Tour of Heroes source. We won't find a single line like
+  ```
+  var hc = injector.get(HeroesComponent);
+  ```
+  We *could* write code like that if we wanted to. We just don't have to.
+  Angular does that for us when it renders a `HeroesComponent` 
+  whether we ask for it in an HTML template ...
+  ```
+  <my-heroes></heroes>
+  ```
+  ... or navigate to a `HeroesComponent` view with the [router](./router.html).
+  
+  ### Singleton services  
+  We might wonder what happens when we inject the `HeroService` into other components. 
+  Do we get the same instance every time?
+   
+  Yes we do. Dependencies are singletons. 
+  We’ll discuss that later in our chapter about 
+  [Hierarchical Injectors](./hierarchical-dependency-injection.html).
+
+  ### Testing the component
+  We emphasized earlier that designing a class for dependency injection makes it easier to test.
+  
+  Mission accomplished!  We don't even need the Angular Dependency Injection system to test the `HeroesComponent`.
+  We simply create a bew `HeroesComponent` with a mock service and poke at it:
+  ```
+  it("should have heroes when created", () => {
+    let hc = new HeroesComponent(mockService);
+    expect(hc.heroes.length).toEqual(mockService.getHeroes().length);
+  })
+  ```
+  ### When the service needs a service 
+  Our `HeroService` is very simple. It doesn't have any dependencies of its own. 
+  
+  
+  What if it had a dependency? What if it reported its activities through a logging service?
+  We'd apply the same "constructor injection" pattern. 
+  
+  Here's a rewrite of `HeroService` with a new constructor that takes a `logger` parameter.
+  ```
+  import {Hero} from './hero';
+  import {HEROES} from './mock-heroes';
+  import {Logger} from './logger';
+  
+  @Injectable()
+  class HeroService {
+  
+    heroes: Hero[];
+  
+    constructor(private logger: Logger) {
+      this.heroes = HEROES;
+    }
+  
+    getHeroes() {
+      this.logger.log('Getting heroes ...')
+      return this.heroes;
+    }
+  }
+  ```
+  The constructor now asks for an injected instance of a `Logger` and stores it in a private property called `logger`.
+  We call that property within our `getHeroes()` method when anyone asks for heroes.
+  
+  **The `@Injectable()` decoration catches our eye!**
+  
+.alert.is-critical
+  :markdown
+    **Always include the parentheses!** Always call `@Injectable()`. It's easy to forget the parentheses. 
+    Our application will fail mysteriously if we do. It bears repeating: **always include the parentheses.**
+:markdown
+  We haven't seen `@Injectable()` before. 
+  As it happens, we could have added it to `HeroService`. We didn't bother because we didn't need it then.
+  
+  We need it now ... now that our service has an injected dependency. 
+  We need it because Angular requires constructor parameter metadata in order to inject a `Logger`. 
+  As [we mentioned earlier](#di-metadata), TypeScript *only generates metadata for classes that have a decorator*. .
+  
+  The `HeroesComponent` has an injected dependency too. Why don't we add `@Injectable()` to the `HeroesComponent`? 
+  We *can* add it if we really want to. It isn't necessary because the `HeroesComponent` is already decorated with `@Component`.
+  TypeScript generates metadata for *any* class with a decorator and *any* decorator will do.
+ 
+.l-main-section
+:markdown
+  <a name="providers"></a>
+  ## Injector Providers
+  
+  Remember when we added the `HeroService` to an array in the [bootstrap](#bootstrap) process? 
+  ```
+  bootstrap(AppComponent, [HeroService]);
+  ```
+  That list of classes is actually a list of **providers**.  
+  
+  "Providers" create the instances of the things that we ask the injector to inject.
+  There are many ways ways to "provide" a thing that has the necessary shape and behavior to serve as a `HeroService`.
+  A class is a natural provider - it's meant to be created. But it's not the only way
+  to produce something injectable. We could hand the injector an object to return. We could give it a factory function to call. 
+  Any of these approaches might be a good choice under the right circumstances. 
+  
+  What matters is that the injector knows what to do when something asks for a `HeroService`.
+
+  ### Provider mappings
+  When we registered the `HeroService` with the injector, we were actually registering
+  a mapping between the `HeroService` *token* and a provider that can create a `HeroService`.
+  
+  When we wrote ...
+  ```
+  import {bootstrap} from 'angular2/angular2';
+  
+  bootstrap(AppComponent, [HeroService]);
+  ```
+  ... Angular translated that statement into a mapping instruction involving the Angular `provide` method
+  ```
+  import {bootstrap, provide} from 'angular2/angular2';
+  
+  bootstrap(AppComponent, [
+    provide(HeroService, {useClass:HeroService})
+  ]); 
+  ```
+  Of course we prefer the shorthand syntax - `[HeroService]` - when the provider and the token are the same class.
+  
+  Isn't that always the case? Not always. 
+  
+  ### Alternative Class Providers
+
+  Occasionally we'll ask a different class to  provide the service.
+  
+  We do that regularly when testing a component that we're creating with dependency injection.
+  In this example, we tell the injector
+  to return a `MockHeroService` when something asks for the `HeroService`.
+  ```
+  beforeEachProviders(() => [
+    provide(HeroService, {useClass: MockHeroService});
+  ]);
+  ```
+  ### Value Providers
+  
+  Sometimes it's easier to provide a ready-made object rather than ask the injector to create it from a class.
+  
+  We do that a lot when we write tests. We might write the following test setup
+  for  tests that explore how the `HeroComponent` behaves when the `HeroService` 
+  returns an empty hero list.
+  ```
+  beforeEachProviders(() => {
+    
+    let emptyHeroService = { getHeroes: () => [] };
+    
+    return [ provide(HeroService, {useValue: emptyHeroService}) ];
+  });
+  ```
+  Notice that we mapped with `useValue` instead of `useClass`.
+ 
+  ### Factory Providers
+  
+  Sometimes the best choice for a provider is neither a class nor a value.
+  
+  Suppose our HeroService has some cool new feature that we're only offering to "special" users.
+  The HeroService shouldn't know about users and 
+  we won't know if the current user is special until runtime anyway.
+  We decide to extend our `HeroService` constructor to accept a `useCoolFeature` flag 
+  that toggles the feature on or off.
+  We rewrite the `HeroService` again as follows.
+  ```
+  @Injectable()
+  class HeroService {
+  
+    heroes: Hero[];
+  
+    constructor(private logger: Logger, private useCoolFeature: boolean) {
+      this.heroes = HEROES;
+    }
+  
+    getHeroes() {
+      let msg = this.useCoolFeature ? 'the cool new way' : 'the old way';
+      this.logger.log('Getting heroes ...' + msg)
+      return this.heroes;
+    }
+  }
+  ```
+  The feature flag is a simple boolean value. We'd like to inject the flag but it seems silly to write an entire class for a 
+  simple flag.
+  
+  We can replace the `HeroService` provider with a factory function that creates a properly configured `HeroService` for the current user.
+  We'll' build up to that result, beginning with our definition of the factory function:
+  ```
+  let heroServiceFactory = (logger: Logger, userService: UserService) => {
+    return new HeroService(logger, userService.user.isSpecial);
+  }
+  ```
+.l-sub-section
+  :markdown
+    The factory takes two parameters: the logger service and a user service. 
+    The logger we pass straight to the constructor as we did before.
+    
+    We'll know to use the cool new feature if the `userService.user.isSpecial` flag is true, 
+    a fact we can't know until runtime.
+:markdown
+  We use dependency injection everywhere so of course the factory function depends on 
+  two injected services: `Logger` and `UserService`.  
+  We declare those requirements in our provider definition object:
+  ```
+  let heroServiceDefinition = {
+     useFactory: heroServiceFactory, 
+     deps: [Logger, UserService]
+  };
+  ```
+.l-sub-section
+  :markdown
+    The `useFactory` field tells Angular that the provider is a factory function and that its implementation is the `heroServiceFactory`.
+    
+    The `deps` property is an array of provider mapping tokens. 
+    The `Logger` and `UserService` classes serve as tokens for their own class provider mappings.
+:markdown
+  Finally, we create the mapping and adjust the bootstrapping to include that mapping in its provider configuration.
+  ```
+  let heroServiceMapping = provide(HeroService, heroServiceDefinition);
+  
+  bootstrap(AppComponent, [heroServiceMapping, Logger, UserService]);
+  ```
+  ### String tokens
+  
+  Sometimes we have an object dependency rather than a class dependency.
+  
+  Applications often define configuration objects with lots of small facts like the title of the application or the address of a web api endpoint.
+  These configuration objects aren't always instances of a class. They're just objects ... like this one:
+  ```
+  let config = {
+    apiEndpoint: 'api.heroes.com',
+    title: 'The Hero Employment Agency'
+  }; 
+  ```
+  We'd like to make this `config` object available for injection. 
+  We know we can register an object with a "Value Provider". But what do we use for the token?
+  
+  Until now, we've always had a class to use as the token for mapping. 
+  The `HeroService` class was our token, whether we mapped it to another class, a value, or a factory provider.
+  This time we don't have a class. There is no `Config` class.
+  
+  Fortunately, a token can be either a JavaScript type (e.g. the class function) **or a string**. We'll map our configuration object
+  to a string!
+  ```
+  bootstrap(AppComponent, [
+    // other mappings //
+    provide('App.config', {useValue:config})
+  ]);
+  ```
+  Now let's update the `HeroesComponent` constructor so it can display the configured title.  
+  Right now the constructor signature is
+  ```
+  constructor(heroService: HeroService)
+  ```
+  We might think we can write:
+  ```
+  // FAIL!
+  constructor(heroService: HeroService, config: config)
+  ```
+  That's not going to work. There is no type called `config` and we didn't register the `config` object under that name anyway.
+  We'll need a little help from another Angular decorator called `@Inject`.
+  ```
+  import {Inject} from 'angular2/angulare2'
+  
+  constructor(heroService: HeroService, @Inject('app.config') config)
+  
+  ```
+
+.l-main-section
+:markdown
+  # Next Steps
+  We learned the basics of Angular Dependency Injection in this chapter.
+  
+  The Angular Dependency Injection is more capable than we've described. 
+  We can learn more about its advanced features, beginning with its support for
+  a hierarchy of nested injectors in the next 
+  [Dependency Injection chapter](./hierarchical-dependency-injection.html)
+  
+.l-main-section
+<a name="forward-ref"></a>
+:markdown
+  ### Appendix: Why we recommend one class per file
+  Developers expect one class per file. Multiple classes per file is confusing and is best avoided. 
+  If we define every class in its own file, there is nothing in this note to worry about.
+  Move along!
+  
+  If we scorn this advice
+  and we add our `HeroService` class to the `HeroesComponent` file anyway, 
+  **define the `HeroesComponent` last!** 
+  If we put it define component before the service,
+  we'll get a runtime null reference error.
+
+  To understand why, paste the following incorrect, ultra-simplified rendition of these two
+  classes into the [TypeScript playground](http://www.typescriptlang.org/Playground).
+ 
+  ```
+  class HeroesComponent {
+    static $providers=[HeroService]
+  }
+
+  class HeroService { }
+
+  alert(HeroesComponent.$providers)
+  ```
+.l-sub-section
+  :markdown
+    The `HeroService` is incorrectly defined below the `HeroComponent`.
+    
+    The `$providers` static property represents the metadata about the injected `HeroService`
+    that TypeScript compiler would add to the component class.
+    
+    The `alert` simulates the action of the Dependency Injector at runtime 
+    when it attempts to create a `HeroesComponent`.
+:markdown
+  Run it. The alert appears but displays nothing. 
+  This is the equivalent of the null reference error thrown at runtime.
+  
+  We understand why when we review the generated JavaScript which looks like this:
+  ```
+  var HeroesComponent = (function () {
+      function HeroesComponent() {
+      }
+      HeroesComponent.$providers = [HeroService];
+      return HeroesComponent;
+  })();
+  
+  var HeroService = (function () {
+      function HeroService() {
+      }
+      return HeroService;
+  })();
+  
+  alert(HeroesComponent.$providers);
+  ```
+
+  Notice that the TypeScript compiler turns classes into function expressions 
+  assigned to variables. The value of the captured `HeroService` variable is undefined
+  when the `$providers` array is assigned. The `HeroService` variable gets its value too late
+  to be captured.
+  
+  Reverse the order of class definition so that the  `HeroService`
+  appears before the `HeroesComponent` that requires it.
+  Run again. This time the alert displays the `HeroService` function definition.
+
+  If we insist on defining the `HeroService` in the same file and insist on
+  defining the component first, Angular offers a way to make that work.
+  The `forwardRef()` method let's us reference a class 
+  before it has been defined. 
+  Learn more about this problem and the `forwardRef()`
+  in this [blog post](http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html).
diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade
index 7d914c70fe..d08c6605fd 100644
--- a/public/docs/ts/latest/tutorial/index.jade
+++ b/public/docs/ts/latest/tutorial/index.jade
@@ -23,6 +23,8 @@ include ../../../../_includes/_util-fns
   Angular can do whatever we need it to do.
   We'll be covering a lot of ground at an introductory level but we’ll find plenty of links
   to chapters with greater depth.
+  
+  [Run the live example](/resources/live-examples/tutorial/ts/plnkr.html).
 
 .l-main-section
 :marked
@@ -50,7 +52,7 @@ figure.image-display
   "Magneta" as the selected hero.
 
 figure.image-display
-  img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")
+  img(src='/resources/images/devguide/toh/heroes-list-3.png' alt="Output of heroes list app")
 
 :marked
   We click a different hero and the readonly mini-detail beneath the list reflects our new choice.
@@ -74,7 +76,7 @@ figure.image-display
   ## How We Roll
 
   We’ll build this Tour of Heroes together, step by step.
-  We'll motiviate each step with a requirement that we've
+  We'll motivate each step with a requirement that we've
   met in countless applications. Everything has a reason.
 
   And we’ll meet many of the core fundamentals of Angular along the way.
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index d357cb23b2..e0dd49cc1a 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -1,51 +1,43 @@
 include ../../../../_includes/_util-fns
 
-.l-main-section
+:marked
+  # Once Upon a Time
+
+  Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
+
+  Follow the "QuickStart" steps. They provide the prerequisites, the folder structure,
+  and the core files for our Tour of Heroes.
+
+  Copy the "QuickStart" code to a new folder and rename the folder `angular2-tour-of-heroes`.
+  We should have the following structure:
+
+code-example(format="").
+    angular2-tour-of-heroes
+      ├── node_modules
+      ├── app
+      |    ├── app.component.ts
+      |    └── boot.ts
+      ├── index.html
+      ├── tsconfig.json
+      └── package.json
+
+:marked
+  ## Keep the app transpiling and running
+  We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
+
+code-example(format="" language="bash").
+  npm run go
+
+:marked
+  This command starts the server, launches the app in a browser,
+  and keeps the app running while we continue to build the Tour of Heroes.
+
+.l-sub-section
   :marked
-    # Once Upon a Time
-
-    Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
-
-    Follow the "QuickStart" steps. They provide the prerequisites, the folder structure,
-    and the core files for our Tour of Heroes.
-
-    Copy the "QuickStart" code to a new folder and rename the folder `angular2-tour-of-heroes`.
-    We should have the following structure:
-
-  code-example.
-      angular2-tour-of-heroes
-        ├── node_modules
-        ├── src
-        |    ├── app
-        |    |    └── app.ts
-        |    ├── index.html
-        |    └── tsconfig.json
-        └── package.json
-
-  :marked
-    ### Keep the app running
-    Start the TypeScript compiler and have it watch for changes in one terminal window by typing
-
-  pre.prettyprint.lang-bash
-    code npm run tsc
-
-  :marked
-    Now open another terminal window and start the server by typing
-
-  pre.prettyprint.lang-bash
-    code npm start
-
-  :marked
-    This command starts the server, launches the app in a browser,
-    and keeps the app running while we continue to build the Tour of Heroes.
-
-  .l-sub-section
-    :marked
-      These two steps watch all project files. They recompile TypeScript files and re-run
-      the app when any file changes.
-      If the watchers fail to detect renamed or new files,
-      stop these commands in each terminal by typing `CTRL+C` and then re-run them.
-
+    These two steps watch all project files. They recompile TypeScript files and re-run
+    the app when any file changes.
+    If the watchers fail to detect renamed or new files,
+    stop these commands in each terminal by typing `CTRL+C` and then re-run them.
 .l-main-section
   :marked
     ## Show our Hero
@@ -54,87 +46,70 @@ include ../../../../_includes/_util-fns
     Let's add two properties to our `AppComponent`, a `title` property for the application name and a `hero` property
     for a hero named "Windstorm".
 
-    ```
-    class AppComponent {
-      public title = 'Tour of Heroes';
-      public hero = 'Windstorm';
-    }
-    ```
+  +makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".")
 
   :marked
     Now we update the template in the `@Component` decoration with data bindings to these new properties.
 
-  code-example(format="").
-    template: '&lt;h1>{{title}}&lt/h1>&lth2>{{hero}} details!&lt/h2>'
+  +makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'show-hero')
+  
   :marked
     The browser should refresh and display our title and hero.
 
     The double curly braces tell our app to read the `title` and `hero` properties from the component and render them.
     This is the "interpolation" form of one-way data binding.
-  .l-sub-section
-    :marked
-      Learn more about interpolation in the [Displaying Data chapter](../guide/displaying-data.html).
+.l-sub-section
   :marked
-    ### Hero object
+    Learn more about interpolation in the [Displaying Data chapter](../guide/displaying-data.html).
+:marked
+  ### Hero object
 
-    At the moment, our hero is just a name.  Our hero needs more properties.
-    Let's convert the `hero` from a literal string to a class.
+  At the moment, our hero is just a name.  Our hero needs more properties.
+  Let's convert the `hero` from a literal string to an interface.
 
-    Create a `Hero` class with `id` and `name` properties.
-    Keep this near the top of the `app.ts` file for now.
+  Create a `Hero` interface with `id` and `name` properties.
+  Keep this near the top of the `app.component.ts` file for now.
 
-    ```
-    class Hero {
-      id: number;
-      name: string;
-    }
-    ```
++makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'hero-interface-1', 'app.component.ts (Hero interface)')(format=".")
 
-    Now that we have a `Hero` class, let’s refactor our component’s `hero` property to be of type `Hero`.
-    Then initialize it with an id of `1` and the name, "Windstorm".
-
-    ```
-    public hero: Hero = {
-      id: 1,
-      name: 'Windstorm'
-    };
-    ```
-
-    Because we changed the hero from a string to an object,
-    we update the binding in the template to refer to the hero’s `name` property.
-
-  code-example(format="").
-    template: '&lt;h1>{{title}}&lt/h1>&lth2>{{hero.name}} details!&lt/h2>'
+.l-sub-section
   :marked
-    The browser refreshes and continues to display our hero’s name.
+    Why an interface and not a class? The net result is that either option will allow us to check the types. The answer here lies in how we intend to use the Hero. We want something to check the types, so either option will suffice. If we wanted to create an instance of a Hero, a class may be more appropriate since we could add logic to a Hero constructor. But our scenario is for type checking, so the interface is adequate. The driving reason however, that leads us to a Hero interface is that the interface when transpiled from TypeScript to JavaScript produces no ES5 code. None at all. While a TypeScript class does generate ES5 code. For these reasons we choose an interface here.
 
-    ### Adding more HTML
-    Displaying a name is good, but we want to see all of our hero’s properties.
-    We’ll add a `<div>` for our hero’s `id` property and another `<div>` for our hero’s `name`.
+:marked
+  Now that we have a `Hero` interface, let’s refactor our component’s `hero` property to be of type `Hero`.
+  Then initialize it with an id of `1` and the name, "Windstorm".
 
-  code-example(format="linenums").
-    template: '&lt;h1>{{title}}&lt/h1>&lth2>{{hero.name}} details!&lt/h2>&ltdiv>&ltlabel>id: &lt/label>{{hero.id}}&lt/div>&ltdiv>&ltlabel>name: &lt/label>{{hero.name}}&lt/div>'
-  :marked
-    Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template.
++makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'hero-property-1', 'app.component.ts (Hero property)')(format=".")
 
-    ### Multi-line template strings
+:marked
+  Because we changed the hero from a string to an object,
+  we update the binding in the template to refer to the hero’s `name` property.
 
-    We could make a more readable template with string concatenation
-    but that gets ugly fast, it is harder to read, and
-    it is easy to make a spelling error. Instead,
-    let’s take advantage of the template strings feature
-    in ES2015 and TypeScript to maintain our sanity.
++makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'show-hero-2')
+:marked
+  The browser refreshes and continues to display our hero’s name.
 
-    Change the quotes around the template to back-ticks and
-    put the `<h1>`, `<h2>` and `<div>` elements on their own lines.
+  ### Adding more HTML
+  Displaying a name is good, but we want to see all of our hero’s properties.
+  We’ll add a `<div>` for our hero’s `id` property and another `<div>` for our hero’s `name`.
 
-  code-example(format="linenums").
-    template:`
-      &lt;h1>{{title}}&lt/h1>
-      &lth2>{{hero.name}} details!&lt/h2>
-      &ltdiv>&ltlabel>id: &lt/label>{{hero.id}}&lt/div>
-      &ltdiv>&ltlabel>name: &lt/label>{{hero.name}}&lt/div>
-      `
++makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'show-hero-properties')
+:marked
+  Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template.
+
+  ### Multi-line template strings
+
+  We could make a more readable template with string concatenation
+  but that gets ugly fast, it is harder to read, and
+  it is easy to make a spelling error. Instead,
+  let’s take advantage of the template strings feature
+  in ES2015 and TypeScript to maintain our sanity.
+
+  Change the quotes around the template to back-ticks and
+  put the `<h1>`, `<h2>` and `<div>` elements on their own lines.
+
++makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)')
 
   .callout.is-important
     header A back-tick is not a single quote
@@ -153,16 +128,8 @@ include ../../../../_includes/_util-fns
     We want to be able to edit the hero name in a textbox.
 
     Refactor the hero name `<label>` with `<label>` and `<input>` elements as shown below:
-  code-example(format="linenums").
-    template:`
-      &lt;h1>{{title}}&lt/h1>
-      &lth2>{{hero.name}} details!&lt/h2>
-      &ltdiv>&ltlabel>id: &lt/label>{{hero.id}}&lt/div>
-      &ltdiv>
-        &ltlabel>name: &lt/label>
-        &ltdiv>&ltinput value="{{hero.name}}" placeholder="name">&lt/div>
-      &lt/div>
-      `
+
+  +makeExample('toh-1/ts/app/app.component.snippets.pt1.ts', 'editing-Hero', 'app.component.ts (input element)')
   :marked
     We see in the browser that the hero’s name does appear in the `<input>` textbox.
     But something doesn’t feel right.
@@ -176,88 +143,21 @@ include ../../../../_includes/_util-fns
     and see those changes wherever we bind to the hero’s name.
     In short, we want two-way data binding.
 
-    Let’s update the template to use the  **`ng-model`** built-in directive for two-way binding.
+    Let’s update the template to use the  **`ngModel`** built-in directive for two-way binding.
 
   .l-sub-section
     :marked
-      Learn more about `ng-model` in the [Template Syntax chapter](../guide/template-syntax.html#ng-model)
+      Learn more about `ngModel` in the [Template Syntax chapter](../guide/template-syntax.html#ng-model)
   :marked
     Replace the `<input>` with the following HTML
 
   code-example(language="html").
-     &lt;input [(ng-model)]="hero.name" placeholder="name">
+     &lt;input [(ngModel)]="hero.name" placeholder="name">
 
   :marked
-    Unfortunately, that change broke our application and we're no longer displaying the hero in the browser.
-    Let’s fix that next.
-
-.l-main-section
-  :marked
-    ## Declaring Template Directives
-
-    We added the `ng-model` directive but we didn't tell Angular about it.
-    A component must disclose every directive that appears in its template.
-
-    Let’s first gain access to the `NgModel` directive class by importing it from Angular as shown below:
-
-    ````
-    import {bootstrap, Component, NgModel} from 'angular2/angular2';
-    ```
-
-    Now tell the component that we will use the  `ng-model` directive in the template
-    by adding the `directives` property to the `@Component` decoration
-    immediately below the `template` string:
-
-    ```
-    directives: [NgModel]
-    ```
-
-    The `directives` property is an array holding all directive classes that
-    are used by the component’s template.
-
-    Unfortunately when we view the app in the browser we still have an error:
-
-  code-example(language="html").
-    EXCEPTION: No value accessor for ' ' in [null]
-
-  :marked
-    Apparently declaring the `NgModel` is not quite enough.
-
-    ## Declare Multiple Form Directives
-
-    We learned from our latest error message that we can’t import the `NgModel` alone.
-    We need additional directives to enable two-way data binding with `NgModel`.
-
-    We could hunt them down and add each of them to the `directives` array one by one.
-    That's painful. No one wants to remember all of the necessary directives and
-    type them correctly. Fortunately, there is a shortcut.
-
-    The `ng-model` directive is one of many Forms directives which happen to be
-    bundled in a convenient array called `FORM_DIRECTIVES`.
-  .l-sub-section
-    :marked
-      Learn more about Angular Forms in the [Forms chapter](../guide/forms.html)
-  :marked
-    Let’s forget about importing `NgModel` and import the `FORM_DIRECTIVES` array instead:
-    ```
-    import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';
-    ```
-    Now we tell the component that our template can use `FORM_DIRECTIVES`
-    by updating the `directives` property of the `@Component` decorator.
-    ```
-    directives: [FORM_DIRECTIVES]
-    ```
     The browser refreshes. We see our hero again. We can edit the hero’s name and
     see the changes reflected immediately in the `<h2>`.
-
-    ### Bundled directives
-    Angular bundled the Form-related directives together in a convenient `FORM_DIRECTIVES` array.
-    That's all we need to remember to light up our template.
-
-    We may wish to use this trick ourselves someday.
-    We too can bundle a collection of directives in an array, give it a catchy name,
-    and plug that array into the `directives` property.
-
+    
 .l-main-section
   :marked
     ## The Road We’ve Travelled
@@ -267,43 +167,12 @@ include ../../../../_includes/_util-fns
     to display the application title and properties of a `Hero` object.
     * We wrote a multi-line template using ES2015’s template strings to make our template readable.
     * We can both display and change the hero’s name after adding a two-way data binding to the `<input>` element
-    using the built-in `ng-model` directive.
-    * The `ng-model` directive also propagates changes to every other binding of the `hero.name`.
-    * We declared our use of `NgModel` and other Form directives
-    by setting the component's `directives` metadata property to the `FORMS_DIRECTIVES` array.
+    using the built-in `ngModel` directive.
+    * The `ngModel` directive also propagates changes to every other binding of the `hero.name`.
 
-    Here's the complete `app.ts` as it stands now:
+    Here's the complete `app.component.ts` as it stands now:
 
-  code-example(format="linenums").
-    import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';
-
-    class Hero {
-      id: number;
-      name: string;
-    }
-
-    @Component({
-      selector: 'my-app',
-      template:`
-        &lt;h1>{{title}}&lt/h1>
-        &lth2>{{hero.name}} details!&lt/h2>
-        &ltdiv>&ltlabel>id: &lt/label>{{hero.id}}&lt/div>
-        &ltdiv>
-          &ltlabel>name: &lt/label>
-          &ltdiv>&ltinput [(ng-model)]="hero.name" placeholder="name">&lt/div>
-        &lt/div>
-        `,
-      directives: [FORM_DIRECTIVES]
-    })
-    class AppComponent {
-      public title = 'Tour of Heroes';
-      public hero: Hero = {
-        id: 1,
-        name: 'Windstorm'
-      };
-    }
-
-    bootstrap(AppComponent);
+  +makeExample('toh-1/ts/app/app.component.ts', 'pt1', 'app.component.ts')
 
 .l-main-section
   :marked
@@ -312,4 +181,4 @@ include ../../../../_includes/_util-fns
     We also want to allow the user to select a hero and display their details.
     We’ll learn more about how to retrieve lists, bind them to the
     template, and allow a user to select it in the
-    [next tutorial chapter](./toh-pt2.html).
+    [next tutorial chapter](./toh-pt2.html).
\ No newline at end of file
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index 44fc1e909d..261f25b639 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -1,210 +1,144 @@
 include ../../../../_includes/_util-fns
 
-.l-main-section
-  :marked
-    # It Takes Many Heroes
-    Our story needs more heroes.
-    We’ll expand our Tour of Heroes app to display a list of heroes,
-    allow the user to select a hero, and display the hero’s details.
+:marked
+  # It Takes Many Heroes
+  Our story needs more heroes.
+  We’ll expand our Tour of Heroes app to display a list of heroes,
+  allow the user to select a hero, and display the hero’s details.
 
-    Let’s take stock of what we’ll need to display a list of heroes.
-    First, we need a list of heroes. We want to display those heroes in the view’s template,
-    so we’ll need a way to do that.
+  Let’s take stock of what we’ll need to display a list of heroes.
+  First, we need a list of heroes. We want to display those heroes in the view’s template,
+  so we’ll need a way to do that.
 
 .l-main-section
-  :marked
-    ## Where We Left Off
-    Before we continue with Part 2 of the Tour of Heroes,
-    let’s verify we have the following structure after [Part 1](./toh-pt1.html).
-    If not, we’ll need to go back to Part 1 and figure out what we missed.
+:marked
+  ## Where We Left Off
+  Before we continue with Part 2 of the Tour of Heroes,
+  let’s verify we have the following structure after [Part 1](./toh-pt1.html).
+  If not, we’ll need to go back to Part 1 and figure out what we missed.
 
-  code-example.
-      angular2-tour-of-heroes
-        ├── node_modules
-        ├── src
-        |    ├── app
-        |    |    └── app.ts
-        |    ├── index.html
-        |    └── tsconfig.json
-        └── package.json
-  :marked
-    ### Keep the app running
-    Start the TypeScript compiler and have it watch for changes in one terminal window by typing
+code-example(format="").
+    angular2-tour-of-heroes
+      ├── node_modules
+      ├── app
+      |    ├── app.component.ts
+      |    └── boot.ts
+      ├── index.html
+      ├── tsconfig.json
+      └── package.json
 
-  pre.prettyprint.lang-bash
-    code npm run tsc
+:marked
+  ### Keep the app transpiling and running
+  We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
 
-  :marked
-    Now open another terminal window and start the server by typing
+code-example(format="." language="bash").
+  npm run go
 
-  pre.prettyprint.lang-bash
-    code npm start
-
-  :marked
-    This will keep the application running while we continue to build the Tour of Heroes.
+:marked
+  This will keep the application running while we continue to build the Tour of Heroes.
 
 .l-main-section
+:marked
+  ## Displaying Our Heroes
+  ### Creating heroes
+  Let’s create an array of ten heroes at the bottom of `app.component.ts`.
+
++makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (Hero array)')
+
+:marked
+  The `HEROES` array is of type `Hero`.
+  We are taking advantage of the `Hero` class we coded previously to create an array of our heroes.
+  We aspire to get this list of heroes from a web service, but let’s take small steps
+  on this road and start by displaying these mock heroes in the browser.
+
+  ### Exposing heroes
+  Let’s create a public property in `AppComponent` that exposes the heroes for binding.
+
++makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (Hero array property)')
+
+:marked
+  We did not have to define the `heroes` type.  TypeScript can infer it from the `HEROES` array.
+.l-sub-section
   :marked
-    ## Displaying Our Heroes
-    ### Creating heroes
-    Let’s create an array of ten heroes at the bottom of `app.ts`.
-    ```
-    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" }
-    ];
-    ```
-    The `HEROES` array is of type `Hero`.
-    We are taking advantage of the `Hero` class we coded previously to create an array of our heroes.
-    We aspire to get this list of heroes from a web service, but let’s take small steps
-    on this road and start by displaying these mock heroes in the browser.
+    We could have defined the heroes list here in this component class.
+    But we know that we’ll get the heroes from a data service.
+    Because we know where we are heading, it makes sense to separate the hero data
+    from the class implementation from the start.
+:marked
+  ### Displaying heroes in a template
+  Our component has `heroes`. Let’s create an unordered list in our template to display them.
+  We’ll insert the following chunk of HTML below the title and above the hero details.
+  
++makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (Heroes template)')
 
-    ### Exposing heroes
-    Let’s create a public property in `AppComponent` that exposes the heroes for binding.
-    ```
-    public heroes = HEROES;
-    ```
-    We did not have to define the `heroes` type.  TypeScript can infer it from the `HEROES` array.
-  .l-sub-section
-    :marked
-      We could have defined the heroes list here in this component class.
-      But we know that we’ll get the heroes from a data service.
-      Because we know where we are heading, it makes sense to separate the hero data
-      from the class implementation from the start.
+:marked
+  Now we have a template that we can fill with our heroes.
+
+  ### Listing heroes with ngFor
+
+  We want to bind the array of `heroes` in our component to our template, iterate over them,
+  and display them individually.
+  We’ll need some help from Angular to do this. Let’s do this step by step.
+
+  First modify the `<li>` tag by adding the built-in directive `*ngFor`.
+
++makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
+
+.alert.is-critical
   :marked
-    ### Displaying heroes in a template
-    Our component has`heroes`. Let’s create an unordered list in our template to display them.
-    We’ll insert the following chunk of HTML below the title and above the hero details.
-     ```
-    <h2>My Heroes</h2>
-    <ul class="heroes">
-      <li>
-        <!-- each hero goes here -->
-      </li>
-    </ul>
-    ```
-    Now we have a template that we can fill with our heroes.
-
-    ### Listing heroes with ng-for
-
-    We want to bind the array of `heroes` in our component to our template, iterate over them,
-    and display them individually.
-    We’ll need some help from Angular to do this. Let’s do this step by step.
-
-    First modify the `<li>` tag by adding the built-in directive `*ng-for`.
-    ```
-    <li *ng-for="#hero of heroes">
-    ```
-  .alert.is-critical
-    :marked
-      The leading asterisk (`*`) in front of `ng-for` is a critical part of this syntax.
-
-  .l-sub-section
-    :marked
-      The (`*`) prefix to `ng-for` indicates that the `<li>` element and its children
-      constitute a master template.
-
-      The `ng-for` directive iterates over the `heroes` array returned by the `AppComponent.heroes` property
-      and stamps out instances of this template.
-
-      The quoted text assigned to `ng-for` means
-      “*take each hero in the `heroes` array, store it in the local `hero` variable,
-      and make it available to the corresponding template instance*”.
-
-      The `#` prefix before "hero" identifies the `hero` as a local template variable.
-      We can reference this variable within the template to access a hero’s properties.
-
-      Learn more about `ng-for` and local template variables in the
-      [Template Syntax chapter](../guide/template-syntax.html#ng-for).
+    The leading asterisk (`*`) in front of `ngFor` is a critical part of this syntax.
 
+.l-sub-section
   :marked
-    With this background in mind, we now insert some content between the `<li>` tags
-    that uses the `hero` template variable to display the hero’s properties.
+    The (`*`) prefix to `ngFor` indicates that the `<li>` element and its children
+    constitute a master template.
 
-  code-example(format="linenums" language="html").
-    &lt;li *ng-for="#hero of heroes">
-      &lt;span class="badge">{{hero.id}}&lt;/span> {{hero.name}}
-    &lt;/li>
+    The `ngFor` directive iterates over the `heroes` array returned by the `AppComponent.heroes` property
+    and stamps out instances of this template.
 
-  :marked
-    ### Declaring ng-for
-    When we view the running app in the browser we see nothing … no heroes.
-    We open the developer tools and see an error in the console.
+    The quoted text assigned to `ngFor` means
+    “*take each hero in the `heroes` array, store it in the local `hero` variable,
+    and make it available to the corresponding template instance*”.
 
-  code-example(language="html" ).
-    EXCEPTION:
-    Can't bind to 'ngForOf' since it isn't a known property of the '&lt;template>' element and
-    there are no matching directives with a corresponding property
+    The `#` prefix before "hero" identifies the `hero` as a local template variable.
+    We can reference this variable within the template to access a hero’s properties.
 
-  :marked
-    Thankfully we have a clear error message that indicates where we went wrong.
-    We used `ng-for` in the template but we didn’t tell the component about it.
-    From Angular's perspective, `ng-for` is a meaningless attribute.
-    When it tries to render the view, it doesn’t recognize `ng-for` and gives up.
+    Learn more about `ngFor` and local template variables in the
+    [Template Syntax chapter](../guide/template-syntax.html#ng-for).
 
-    We need to say “*hey component, I’m going to use this NgFor directive. OK?*”
+:marked
+  With this background in mind, we now insert some content between the `<li>` tags
+  that uses the `hero` template variable to display the hero’s properties.
 
-    To that end, we first import  the `NgFor` symbol
-    ```
-    import {bootstrap, Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';
-    ```
-    and then declare `NgFor` to be one of the view’s directives in the `@Component` decorator.
-    ```
-    directives: [FORM_DIRECTIVES, NgFor]
-    ```
-    After the browser refreshes, we see a list of heroes!
++makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
 
-    ### Styling our heroes
-    Our list of heroes looks pretty bland.
-    We want to make it visually obvious to a user which hero we are hovering over and which hero is selected.
+:marked
+  When the browser refreshes, we see a list of heroes!
 
-    Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
-    to the following CSS classes:
-    ```
-    styles:[`
-      .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
-      .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
-      .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
-      .heroes .badge {
-        font-size: small;
-        color: white;
-        padding: 0.1em 0.7em;
-        background-color: #369;
-        line-height: 1em;
-        position: relative;
-        left: -1px;
-        top: -1px;
-      }
-      .selected { background-color: #EEE; color: #369; }
-      `],
-    ```
-    Notice that we again use the back-tick notation for multi-line strings.
+  ### Styling our heroes
+  Our list of heroes looks pretty bland.
+  We want to make it visually obvious to a user which hero we are hovering over and which hero is selected.
 
-    When we assign styles to a component they are scoped to that specific component.
-    Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
+  Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
+  to the following CSS classes:
 
-    Our template for displaying the heroes should now look like this:
++makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'styles-1', 'app.component.ts (Styling)')
 
-  code-example(format="linenums").
-    &lt;h2>My Heroes&lt;/h2>
-    &lt;ul class="heroes">
-      &lt;li *ng-for="#hero of heroes">
-        &lt;span class="badge">{{hero.id}}&lt;/span> {{hero.name}}
-      &lt;/li>
-    &lt;/ul>
-  :marked
-    Our styled list of heroes should look like this:
+:marked
+  Notice that we again use the back-tick notation for multi-line strings.
 
-  figure.image-display
-    img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app (no selection color)")
+  When we assign styles to a component they are scoped to that specific component.
+  Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
+
+  Our template for displaying the heroes should now look like this:
+
++makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (Styled heroes)')
+
+:marked
+  Our styled list of heroes should look like this:
+
+figure.image-display
+  img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app (no selection color)")
 
 .l-main-section
   :marked
@@ -212,7 +146,7 @@ include ../../../../_includes/_util-fns
     We have a list of heroes and we have a single hero displayed in our app.
     The list and the single hero are not connected in any way.
     We want the user to select a hero from our list, and have the selected hero appear in the details view.
-    This UI pattern is widely known as “master-detail”.
+    This UI pattern is widely known as "master-detail".
     In our case, the master is the heroes list and the detail is the selected hero.
 
     Let’s connect the master to the detail through a `selectedHero` component property bound to a click event.
@@ -220,19 +154,17 @@ include ../../../../_includes/_util-fns
     ### Click event
     We modify the `<li>` by inserting an Angular event binding to its click event.
 
-  code-example(format="linenums").
-    &lt;li *ng-for="#hero of heroes" (click)="onSelect(hero)">
-      &lt;span class="badge">{{hero.id}}&lt;/span> {{hero.name}}
-    &lt;/li>
+  +makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (Capturing the click event)')
+  
   :marked
     Focus on the event binding
-  pre.prettyprint.lang-bash
-    code (click)="onSelect(hero)">
+  code-example(format="." language="bash").
+    (click)="onSelect(hero)"
   :marked
     The parenthesis identify the `<li>` element’s  `click` event as the target.
     The expression to the right of the equal sign calls the  `AppComponent` method, `onSelect()`,
     passing the local template variable `hero` as an argument.
-    That’s the same `hero` variable we defined previously in the `ng-for`.
+    That’s the same `hero` variable we defined previously in the `ngFor`.
   .l-sub-section
     :marked
       Learn more about Event Binding in the [Templating Syntax chapter](../guide/template-syntax.html#event-binding).
@@ -248,31 +180,24 @@ include ../../../../_includes/_util-fns
     ### Expose the selected hero
     We no longer need the static `hero` property of the `AppComponent`.
     **Replace** it with this simple `selectedHero` property:
-    ```
-    public selectedHero: Hero;
-    ```
+
+  +makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'selected-hero-1', 'app.component.ts (selectedHero)')
+
+  :marked
     We’ve decided that none of the heroes should be selected before the user picks a hero so
     we won’t initialize the `selectedHero` as we were doing with `hero`.
 
     Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
-    ```
-    onSelect(hero: Hero) { this.selectedHero = hero; }
-    ```
+  +makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'on-select-1', 'app.component.ts (onSelect)')
 
+  :marked
     We will be showing the selected hero's details in our template.
     At the moment, it is still referring to the old `hero` property.
     Let’s fix the template to bind to the new `selectedHero` property.
 
-  code-example(format="linenums").
-    &lt;h2>{{selectedHero.name}} details!&lt;/h2>
-    &lt;div>&lt;label>id: &lt;/label>{{selectedHero.id}}&lt;/div>
-    &lt;div>
-        &lt;label>name: &lt;/label>
-        &lt;input [(ng-model)]="selectedHero.name" placeholder="name">&lt;/input>
-    &lt;/div>
-
+  +makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.compontent.ts (Binding to the selectedHero\'s name)')
   :marked
-    ### Hide the empty detail with ng-if
+    ### Hide the empty detail with ngIf
 
     When our app loads we see a list of heroes, but a hero is not selected.
     The `selectedHero` is `undefined`.
@@ -283,57 +208,37 @@ include ../../../../_includes/_util-fns
 
   :marked
     Remember that we are displaying `selectedHero.name` in the template.
-    This name property does not exist because `selectedHero`itself is undefined.
+    This name property does not exist because `selectedHero` itself is undefined.
 
     We'll address this problem by keeping the hero detail out of the DOM until there is a selected hero.
 
     We wrap the HTML hero detail content of our template with a `<div>`.
-    Then we add the `ng-if` built-in directive and set it to the `selectedHero` property of our component.
+    Then we add the `ngIf` built-in directive and set it to the `selectedHero` property of our component.
 
-  code-example(format="linenums").
-      &lt;div *ng-if="selectedHero">
-        &lt;h2>{{selectedHero.name}} details!&lt;/h2>
-        &lt;div>&lt;label>id: &lt;/label>{{selectedHero.id}}&lt;/div>
-        &lt;div>
-          &lt;label>name: &lt;/label>
-          &lt;input [(ng-model)]="selectedHero.name" placeholder="name">&lt;/input>
-        &lt;/div>
-      &lt;/div>
+  +makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'ng-if', 'app.component.ts (ngIf)')
+  
   .alert.is-critical
     :marked
-      Remember that the leading asterisk (`*`) in front of `ng-if` is
+      Remember that the leading asterisk (`*`) in front of `ngIf` is
       a critical part of this syntax.
   :marked
-    When there is no `selectedHero`, the `ng-if` directive removes the hero detail HTML from the DOM.
+    When there is no `selectedHero`, the `ngIf` directive removes the hero detail HTML from the DOM.
     There will be no hero detail elements and no bindings to worry about.
 
     When the user picks a hero, `selectedHero` becomes "truthy" and
-    `ng-if` puts the hero detail content into the DOM and evaluates the nested bindings.
+    `ngIf` puts the hero detail content into the DOM and evaluates the nested bindings.
   .l-sub-section
     :marked
-      `ng-if` and `ng-for` are called “structural directives” because they can change the
+      `ngIf` and `ngFor` are called “structural directives” because they can change the
       structure of portions of the DOM.
       In other words, they give structure to the way Angular displays content in the DOM.
 
-      Learn more about `ng-if`, `ng-for` and other structural directives in the
+      Learn more about `ngIf`, `ngFor` and other structural directives in the
       [Template Syntax chapter](../guide/template-syntax.html#directives).
 
   :marked
-    We learned previously with `NgFor` that we must declare every directive we use in the component’s `@Component` decorator.
-    Let’s do that again for `NgIf`.
-
-    Add the `NgIf` symbol to our imports at the top of our `app.ts` file, keeping them sorted
-    alphabetically to make them easier to find:
-    ```
-    import {bootstrap, Component, FORM_DIRECTIVES, NgFor, NgIf} from 'angular2/angular2';
-    ```
-  :marked
-    Now add `NgIf` to the directives array in the `@Component` decorator:
-    ```
-    directives: [FORM_DIRECTIVES, NgFor, NgIf]
-    ```
     The browser refreshes and we see the list of heroes but not the selected hero detail.
-    The `ng-if` keeps it out of the DOM as long as the `selectedHero` is undefined.
+    The `ngIf` keeps it out of the DOM as long as the `selectedHero` is undefined.
     When we click on a hero in the list, the selected hero displays in the hero details.
     Everything is working as we expect.
 
@@ -347,51 +252,23 @@ include ../../../../_includes/_util-fns
   figure.image-display
     img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="Selected hero")
   :marked
-    First we’ll add a `getSelectedClass` method to the component that compares the current `selectedHero` to a hero parameter
-    and returns an object with a single key/value pair.
+    We’ll add a property binding on `class` for the `selected` class to the template. We'll set this to an expression that compares the current `selectedHero` to the `hero`.
 
     The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
     We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
-    Here is that method.
-    ```
-    getSelectedClass(hero: Hero) {
-      return { 'selected': hero === this.selectedHero };
-    }
-    ```
-    What do we do with this method and its peculiar result?
-
-    ### ng-class
-    We’ll add the `ng-class`built-in directive to the `<li>` element in our template and bind it to `getSelectedClass`.
-    It’s no coincidence that the value returned by `getSelectedClass` is exactly what the `ng-class` requires
-    to add or remove the `selected` class to each hero’s display.
-  code-example(format="linenums").
-      &lt;li *ng-for="#hero of heroes"
-        [ng-class]="getSelectedClass(hero)"
-        (click)="onSelect(hero)">
-        &lt;span class="badge">{{hero.id}}&lt;/span> {{hero.name}}
-      &lt;/li>
-
+  +makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (Setting the CSS class)')(format=".")  
   :marked
-    Notice in the template that the `ng-class` name is surrounded in square brackets (`[]`).
+    Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
     This is the syntax for a Property Binding, a binding in which data flows one way
-    from the data source (the `getSelectedClass`) to a property of the `ng-class` directive.
+    from the data source (the expression `hero === selectedHero`) to a property of `class`.
+  +makeExample('toh-2/ts/app/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (Styling each hero)')(format=".")  
 
   .l-sub-section
     :marked
-      Learn more about [ng-class](../guide/template-syntax.html#ng-class)
-      and [Property Binding](../guide/template-syntax.html#property-binding)
+      Learn more about [Property Binding](../guide/template-syntax.html#property-binding)
       in the Template Syntax chapter.
-  :marked
-    We've added yet another new directive to our template that we have to import and declare
-    in the component’s `directives` array as we’ve done twice before.
-    ```
-    import {bootstrap, Component,
-            FORM_DIRECTIVES, NgClass, NgFor, NgIf} from 'angular2/angular2';
-    ```
 
-    ```
-    directives: [FORM_DIRECTIVES, NgClass, NgFor, NgIf]
-    ```
+  :marked
     The browser reloads our app.
     We select a hero and the selection is clearly identified by the background color.
 
@@ -401,30 +278,9 @@ include ../../../../_includes/_util-fns
   :marked
     We select a different hero and the tell-tale color switches to that hero.
 
-    ## Declaring Built-In Directives
+    Here's the complete `app.component.ts` as it stands now:
 
-    Every time we used a directive, we imported it and declared it in the component.
-    We only used three directives but we can easily envision a component that uses many more.
-    The `directives` array grows quickly and the process of importing the directive and adding it to the array is tedious.
-    We can make this easier.
-
-    Remember how we imported the `FORM_DIRECTIVES` array to help us apply `ng-model`to our template in the previous chapter?
-    The `FORM_DIRECTIVES` array held all the directives we needed for `ng-model` (and a few more).
-    We didn’t have to list them. We simply added the `FORM_DIRECTIVES` array to the component’s `directives` array.
-
-    The `NgClass`, `NgFor`, and `NgIf` are extremely common directives used by many components in many applications.
-    Fortunately they are all exported from Angular as part of the `CORE_DIRECTIVES` array.
-
-    Let’s replace all of those separate import variables with `CORE_DIRECTIVES`:
-    ```
-    import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
-    ```
-    Then replace `NgClass`, `NgFor`, and `NgIf` in the `directives` array with `CORE_DIRECTIVES`:
-    ```
-    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
-    ```
-    Everything still works and we have a convenient way to import and declare the most commonly used directives.
-    Cleaner code for the win!
+  +makeExample('toh-2/ts/app/app.component.ts', 'pt2', 'app.component.ts')
 
 .l-main-section
   :marked
@@ -433,7 +289,7 @@ include ../../../../_includes/_util-fns
 
     * Our Tour of Heroes now displays a list of selectable heroes
     * We added the ability to select a hero and show the hero’s details
-    * We learned how to use the built-in directives `ng-if`, `ng-for` and `ng-class` in a component’s template
+    * We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
 
     ### The Road Ahead
     Our Tour of Heroes has grown, but it’s far from complete.
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
new file mode 100644
index 0000000000..4fa011dfd6
--- /dev/null
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -0,0 +1,363 @@
+include ../../../../_includes/_util-fns
+
+  :marked
+    # Shared Components and Services
+    Our app is growing. 
+    Use cases are flowing in for reusing components, passing data to components, sharing the hero data, and preparing to retrieve the data asynchronously via a promise.
+  
+.l-main-section
+  :marked
+    ## Reviewing Where We Left Off
+    Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters.
+  
+  code-example.
+      angular2-tour-of-heroes
+        ├── node_modules
+        ├── app
+        |    ├── app.component.ts
+        |    └── boot.ts
+        ├── index.html
+        ├── tsconfig.json
+        └── package.json 
+
+  :marked
+    ### Keep the app transpiling and running
+    We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
+
+  code-example(format="." language="bash").
+    npm run go
+  
+  :marked
+    This will keep the application running while we continue to build the Tour of Heroes.
+
+    ## Making a Hero Detail Component
+    Our heroes list and our hero details are all in the same component. What if we want to reuse the hero details somewhere else in our app? This would be difficult since it is intermixed with the heroes list. Let’s make this easier and separate the hero details into its own component to make this more reusable.
+    
+    ### Separating the Hero Detail Component
+    We’ll need a new file and a new component to host our hero details. Let’s create a new file named `hero-detail.component.ts` with a component named `HeroDetailComponent`.
+    ```
+    @Component({
+      selector: 'my-hero-detail'
+    })
+    export class HeroDetailComponent { }
+    ```
+    We want to use `HeroDetailComponent` from our original `AppComponent`.  We’ll need the selector name when we refer to it in `AppComponent`’s template. We export the `HeroDetailComponent` here so we can later import it into our `AppComponent`, which we’ll do after we finish creating our `HeroDetailComponent`. 
+    
+    We anticipate our template will contain multiple lines. So let’s initialize the `template` property to an empty string between back-ticks.
+    ```
+    @Component({
+      selector: 'my-hero-detail',
+      template: ``
+    })
+    export class HeroDetailComponent { }
+    ```
+    Remember, we want to refer to our `HeroDetailComponent` in the `AppComponent`. This is why we export the `HeroDetailComponent` class.
+    
+    #### Hero Detail Template
+    Our heroes and hero details are combined in one template in `AppComponent` so we need to separate them. Let’s move the appropriate template content from `AppComponent` and paste it in the template property of  `HeroDetailComponent`. 
+    
+    Let’s also change the name of the property in the template from `selectedHero` to `hero`, as it is more appropriate for a reusable component.
+    
+  +makeExample('toh-3/ts/app/hero-detail.snippets.pt3.ts', 'template')
+  
+  :marked
+    Our `HeroDetailComponent` uses `ng-model` (which is in the `FORM_DIRECTIVES` array) and `ng-if` (which is in the `CORE_DIRECTIVES` array).  We have to tell our component about these directives, so we declare them in the `directives` property of the `@Component` decorator.
+  
+    Now our hero detail template exists only in our `HeroDetailComponent`.
+    
+    #### Importing
+    Now that we have the foundation for the component, we need to make sure that we import everything we are using in the component. Let’s add the following import statement to the top of our `hero-detail.component.ts` file to get the exports from Angular that we are using.
+    ```
+    import {Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
+    ```
+    #### Declaring our Hero  
+    Our `HeroDetailComponent`’s template refers to a hero, so let’s add a property on the component to hold the hero.
+    ```
+    export class HeroDetailComponent {
+      public hero: Hero;
+    }
+    ```
+    Uh oh. We declare the `hero` property as being of type `Hero` but our `Hero` class is over in the `app.ts` file. We now have two components, each in their own file, that need to reference the `Hero` class. Let’s solve this problem by removing the `Hero` class from `app.ts` and moving it to its own file named `hero.ts`.
+    ```
+    export class Hero {
+      id: number;
+      name: string;
+    }
+    ```
+    We export the `Hero` class from `hero.ts` because we will need to import it in both of our component files. Let’s add the following import statement to the top of both `app.ts` and `hero.-detail.component.ts`.
+    ```
+    import {Hero} from './hero';
+    ```
+    Now we can also use the `Hero` class from other files by importing it.
+    
+    #### Defining the Input for HeroDetailComponent
+    Our `HeroDetailComponent` needs to be told what hero to use. We have a `hero` property, but we need a way for the `AppComponent` to tell the `HeroDetailComponent`  the  hero it should use. 
+    
+    Let’s declare the inputs for our component in the `@Component` decorator’s `inputs` property. We will set the input to the `hero` property so it matches the `hero` property on the `HeroDetailComponent`.
+    
+  +makeExample('toh-3/ts/app/hero-detail.snippets.pt3.ts', 'inputs')
+  
+  :marked
+    Now our `AppComponent`, or any component that refers to `HeroDetailComponent`, can tell the `HeroDetailComponent` which hero to use.
+    
+    ### Making AppComponent Refer to the HeroDetailComponent
+    Our `HeroDetailComponent` is ready, but we need to go back to the `AppComponent` and clean up some loose ends.
+    
+    First we need to tell our `AppComponent` about our new component. Let’s add an import statement so we can refer to the `HeroDetailComponent`.
+    ```
+    import {HeroDetailComponent} from './hero-detail.component';
+    ```
+    Let’s find the location of the template content we removed from `AppComponent` and refer to our new component. 
+    ```
+    <my-hero-detail></my-hero-detail>
+    ```
+    This would be good enough if the component did not have any inputs. But we do, so we want to pass the selected hero to the `hero` input of the `HeroDetailComponent`, as shown below:
+    ```
+    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+    ```
+    Our `AppComponent`’s template should now look like this
+    
+  +makeExample('toh-3/ts/app/hero-detail.component.pt3.html')
+  
+  :marked
+    #### Naming Convention 
+    We want to identify which files are components. Our `AppComponent` is named `app.ts` while our `HeroDetailComponent` is `hero-detail.component.ts`. That’s not very consistent and we can make it easier to know what is in each file by following a naming convention where we identify which files contain a component. 
+    
+    Let’s rename `app.ts` to `app.component.ts`. 
+    
+    <!-- TODO
+    .l-sub-section
+      :marked
+        Learn more about naming conventions in the chapter [Naming Conventions]
+    :marked
+    -->
+    
+    Remember that our application kicks off by entering our starting point, which is `app.component.ts`. We just renamed this file, but we also have to change every place we import this module. Our entry point is in our `index.html` file. Let’s change the following statement to import `app.component`.
+    ```
+    System.import('app/app.component');
+    ```
+    
+    ### Checking Our Work
+    When we view our app in the browser we see the list of heroes. When we select a hero we can see the selected hero’s details. If we want to show hero details somewhere else in our app we can use the `HeroDetailComponent` and pass in a hero. 
+    
+    We’ve created our first reusable component!
+    
+    <!-- TODO
+    .l-sub-section
+      :marked
+        Learn more about reusable components in the chapter [Reusable Components] 
+    :marked -->
+    
+    ## Creating a Hero Service
+    Our stakeholders have shared their larger vision for our app. They tell us they want to show the heroes in various ways in different pages. We have a way to select a hero from a list, but we will also need a dashboard with the top heroes and a separate view for editing hero details. 
+    
+    All of these views need hero data. Our `AppComponent` defines and uses a list of heroes, but it is not ideal to create our AppComponent when just the heroes data elsewhere. Fortunately we can create a shared service that will provide the heroes. 
+    
+    ### Creating the HeroService
+    Were going to create a service that can be used by any component that wants hero data. Let’s start by creating a file and naming it `hero.service.ts`. We name the class `HeroService` and export it, so our components can import it.
+    ```
+    export class HeroService { }
+    ```
+    #### The getHeroes Method
+    We create a method named `getHeroes` in our `HeroService`. It will return an array of `Hero` objects, so let’s import the `Hero` class and define our method.
+    ```
+    import { Hero } from './hero';
+  
+    export class HeroService {
+      getHeroes() : Hero[] {
+      }
+    }
+    ```
+    #### Mocking the Heroes
+    Our `HeroService` shouldn’t be defining the hero data. Instead, the service should handle retrieving the data from another source. That source could be a mock data, a web service, or even local storage. We will design our `HeroService` to get the data from any of these sources and not affect the calling component. This will make it more reusable and more testable.
+    
+    Once.
+    
+    We have a list of heroes in `AppComponent`. We will move it to a new file named `mock-heroes.ts` and export the list.
+
+  +makeExample('toh-3/ts/app/mock-heroes.ts', 'mocking-heroes')
+  
+  :marked
+    ### Returning the Mocked Heroes
+    Our `HeroService` needs to get the list of heroes, so let’s import the mocked heroes module. Then we’ll return the HEROES array.
+    ```
+    import {Hero} from './hero';
+    import {HEROES} from './mock-heroes';
+  
+    export class HeroService {
+      getHeroes() {
+        return HEROES;
+      }
+    }
+    ```
+    TypeScript can implicitly determine that that return type is `Hero[]` since the return value is of that same type. This allows use to remove the explicit return type from the `getHeroes` method. 
+    
+    ### Injecting the Hero Service
+    We’ve set ourselves up so we can use the `HeroService` from other components. Let’s import the `HeroService` in our `AppComponent`.
+    ```
+    import {HeroService} from './hero.service';
+    ```
+    Importing the service allows us to reference it, but we need to make sure the `HeroService` dependency is instantiated when our component needs it. We inject the `HeroService` into our `AppComponent`’s constructor.
+    ```
+    constructor(private _heroService: HeroService) { }
+    ```
+    We just injected our dependency into the component, thus we performed Dependency Injection.
+    
+  .l-sub-section
+    :marked
+      Learn more about Dependency Injection in chapter [Dependency Injection](dependency-injection.html)
+
+  :marked
+    We made our instance of the injected `HeroService` be a private property on our `AppComponent` class. As a convention we prefixed the private property with an underscore. 
+    
+    Since we are not defining the heroes in the `AppComponent` any longer, let’s refactor the `hero` property declaration to be an uninitialized array of `Hero`.
+    ```
+    public heroes: Hero[];
+    ```
+    
+    ### The OnInit Lifecycle Hook
+    When our `AppComponent` is created we want it to get the list of heroes. We need to know when the component is initialized and activated, so we’ll use the `OnInit` lifecycle event to tell us this.
+    
+    Let’s import Angular’s `OnInit` interface, implement it on our `AppComponent` and define its required `onInit` method. First we add the `OnInit` interface to the import statement.
+    ```
+    import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES, OnInit} from 'angular2/angular2';
+    ```
+    Now we implement the interface.
+    ```
+    class AppComponent implements OnInit {
+    ```
+    Then we define the `onInit` method and get our heroes from our `HeroService`.
+    ```
+    onInit() {
+      this.heroes = this._heroService.getHeroes();
+    }
+    ```
+    <!-- TODO 
+    .l-sub-section
+      :marked 
+        Learn more about lifecycle hooks in chapter [Lifecycle Hooks]
+    :marked
+    -->
+
+    Why not use the constructor to get the heroes? When we test our application we want an opportunity to create the class without any state being set. This will make it easier to test and reduce external factors, such as calling a service in the constructor.  Therefore the constructor is best suited to help us inject dependencies and initialize variables. We need a place to get our heroes right after our class is constructed but before the view is rendered. The OnInit lifecycle hook gives us this opportunity. 
+    <!-- TODO 
+    .l-sub-section
+      :marked
+        Learn more about testing components in chapter [Testing Components]
+    :marked
+    -->
+    ### Binding the Hero Service
+    When we view our app in the browser we see we have an error displayed in the developer console
+  
+  code-example(format="." language="html").
+     EXCEPTION: No provider for HeroService! (AppComponent -> HeroService)
+    
+  :marked
+    We used Dependency Injection to tell our `AppComponent` that it should inject the `HeroService`. However we need to tell our app about the `HeroService` so it can provide it when needed. The way we do this is by declaring the `HeroService` as a binding when we bootstrap our app. 
+    Let’s pass a second argument to the `bootstrap` method to declare the `HeroService` as an application binding.
+    ```
+    bootstrap(AppComponent, [HeroService]);
+    ```
+    We can add other bindings here, as needed.
+    
+    When we view our app in the browser the error is gone and our application runs as expected showing our list of heroes.
+    
+    ## Promises
+    Our `HeroService` synchronously returns a list of heroes. It operates synchronously because the list of heroes is mocked. What happens when we want to switch that to get the heroes from a web service? The web service call over http would happen  asynchronously. 
+    
+    We don’t yet call http, but we aspire to in later chapters.  So how do we write our `HeroService` so that it won’t require refactoring the consumers of `HeroService` later? We make our `HeroService`’s `getHeroes` method return a promise to provide the heroes.
+    
+    The key is that our components won’t know how the data is being retrieved. We can return mock heroes or heroes from http, and the component will call the service’s method the same way.
+    
+    ### Returning a Promise  
+    Let’s refactor the `getHeroes` method in `HeroService` to return the heroes in a promise. 
+    ```
+    import { Hero } from './hero';
+    import { HEROES } from './mock-heroes';
+  
+    export class HeroService {
+      getHeroes() {
+        return Promise.resolve(HEROES);
+      }
+    }
+    ```
+    The `Promise` is immediately resolving and passing the the hero data back in the promise.
+    
+    ### Acting on a Promise  
+    Let’s refactor the `getHeroes` method in `HeroService` to return the heroes in a promise. First, we create a new method in the `AppComponent` to get the heroes and named it `getHeroes`.
+    
+    When we call our heroes we start by resetting  the `selectedHero` and `heroes` properties.  
+    ```
+      getHeroes() {
+        this.selectedHero = undefined;
+        this.heroes = [];
+      }
+    ```
+    The `getHeroes` method in `HeroService` returns a promise. So we cannot simply set the return value to `this.heroes`. The method returns a promise and the `heroes` property expects an array of `Hero`. What do we do?
+    
+    We define a `then` to handle the response from the promise when it resolves. We will set the heroes inside of the `then`.
+    ```
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes);
+    ```
+    The `then` accepts a function, in this case a lambda that passes in the heroes and sets them to the `heroes` property on `AppComponent`. 
+    
+    We need to return a value for the heroes from the method so a caller can get the heroes when they are ready. Let’s return our component’s `heroes` property, which we first reset to an empty array. 
+    ```
+    return this.heroes;
+    ```
+    When we put this all together we see we are setting our heroes to an empty array. Then we call the service and get a promise. Finally we return the reference to our `heroes` property, which has the empty array. 
+    ```
+    getHeroes() {
+      this.selectedHero = undefined;
+      this.heroes = [];
+  
+      this._heroService.getHeroes()
+        .then(heroes => this.heroes = heroes);
+  
+      return this.heroes;
+    }
+    ```
+    So how do the heroes get populated?  When the promise resolves, the `heroes` are updated to include the response from the promise.
+    
+    Finally we call the method we just created in our `onInit` method. 
+    ```
+    onInit() {
+      this.heroes = this.getHeroes();
+    }
+    ```
+    When we view our app in the browser we can see the heroes are displayed.
+    
+    We are using mock data right now, but we aspire to call a web service over http asynchronously in the future. When we do refactor to use http, the beauty of the promise we created here is that our component won’t have to change at all!
+    
+    ### Reviewing the App Structure
+    Let’s verify that we have the following structure after all of our good refactoring in this chapter:
+    
+  code-example.
+      angular2-tour-of-heroes
+        |---- node_modules
+        |---- app
+        |    |---- app.component.ts
+        |    |---- boot.ts
+        |    |---- hero.ts
+        |    |---- hero-detail.component.ts
+        |    |---- hero.service.ts
+        |    |---- mock-heroes.ts
+        |---- index.html
+        |---- tsconfig.json
+        |---- package.json
+  
+  :marked
+    ## Recap
+    ### The Road We’ve Travelled
+    Let’s take stock in what we’ve built.  
+    - We created a reusable component 
+    - We learned how to make a component accept input
+    - We created a service class that can be shared by many components
+    - We created mock hero data and imported them into our service 
+    - We designed our service to return a promise and our component to get our data from the promise
+    
+    ### The Road Ahead
+    . . . We’ll learn more about all of these in the next chapter.
+    
+    Our Tour of Heroes has become more reusable using shared components and services. We want to create a dashboard, add menu links that route between the views, and format data in a template. As our app evolves, we’ll learn how to design it to make it easier to grow and maintain. We’ll learn more about these tasks in the coming chapters.
\ No newline at end of file
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
new file mode 100644
index 0000000000..85bfbad9ba
--- /dev/null
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -0,0 +1,473 @@
+include ../../../../_includes/_util-fns
+
+  :marked
+    # Routing Around the App
+    Our Tour of Heroes is a single view, but we have new requirements to create other views, such as a dashboard,  and navigate between them. We’ll add a dashboard component and use Angular’s router to handle navigation between views. We have another requirement to allow selecting a hero from either the dashboard or the heroes view and route directly to the hero details. We’ll need to learn about and use route parameters to tackle this. 
+  
+    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
+    Finally, we’ll want to filter and format data in our app using Angular’s Pipes.
+    ## Reviewing Where We Left Off
+    Let’s verify that we have the following structure after adding our hero service and hero detail component in the previous chapter:
+  code-example.
+        angular2-tour-of-heroes
+          ├── node_modules
+          ├── app
+          |    ├── app.component.ts
+          |    ├── boot.ts
+          |    ├── hero.ts
+          |    ├── hero-detail.component.ts
+          |    ├── hero.service.ts
+          |    └── mock-heroes.ts
+          ├── index.html
+          ├── tsconfig.json
+          └── package.json
+
+  :marked
+    ### Keep the app transpiling and running
+    We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
+
+  code-example(format="." language="bash").
+    npm run go
+
+  :marked
+    ## Flying Overhead
+    Before we dash into routing for our Tour of Heroes, let’s fly over what we’re going to need to do. Since we’ll want to be routing to entirely different views, we’ll want to separate a few of the components and their template content. We’re also going to be adding two entirely new components. The first for our new requirement, the dashboard. The second component will be to host our menus with routing links and configuration.
+    Here is our checklist of what we’ll need to tackle
+    1. Move the heroes from AppComponent to the more aptly named HeroesComponent
+    1. Create a new AppComponent that will host the menu links and routing
+    1. Create the DashboardComponent to show our top heroes
+    1. Create a class to handle routing configuration
+    We’ll tackle these by separating the components, creating our new components, and adding routing so we can navigate around our Tour of Heroes.
+    
+    ## Separating the Components
+    We’ll want a component to host the menu links for the heroes and the dashboard. This will be the first component that our app loads. But currently our app loads `AppComponent` first, which has our list of heroes. It’s time to separate our components so we have a component that hosts our menu links and a component that lists our heroes. We’ll call these `AppComponent` and `HeroesComponent`.
+    
+    ### Creating the HeroesComponent
+    Since we have an `AppComponent` that lists heroes, let’s start by renaming `app.component.ts` to `hero.component.ts`. Then we’ll rename the component from `AppComponent` to `HeroComponent` and we’ll rename the selector to `my-heroes`.
+  code-example.
+      selector: 'my-heroes',
+  :marked
+    Finally, we’ll export the `HeroesComponent` as we will want to use it from another module when we define our routing.
+  code-example.
+      export class HeroesComponent {
+  :marked
+    ## Creating the New AppComponent
+    Our app needs a menu and a place to show the dashboard and heroes views. This is effectively the shell for our app. 
+
+    We’ll create a new file named `app.component.ts` and create our new `AppComponent` inside of the file. This will be the first component we load in our app. It will host the menu links, when we create them.
+    
+    We assign our `AppComponent` a selector of `my-app`.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts')
+  :marked
+    `AppComponent` is the entry point of our app. This makes it the ideal place to bootstrap our app, which is why we pass in the `AppComponent` and the shared `HeroService` that all many of our components will use.
+    
+    We export our `AppComponent` as we’ll want to refer to it from our bootstrapping process.
+    
+    ## Bootstrapping the Tour of Heroes
+    The start-up of an app is also known as bootstrapping. We are currently bootstrapping in our `HeroesComponent`, which no longer makes sense. So let’s change that and separate this startup logic. 
+
+    Let’s move the bootstrapping logic into a new file. We’ll create a new file named `boot.ts` in the `app` folder. 
+    
+    Let’s add the following lines to `boot.ts`: 
+  +makeExample('toh-4/ts/app/bootstrap.pt4.ts')
+  :marked
+    The bootstrap function accepts as its first parameter, the first component that the app will use.
+    
+    Now let’s do a little cleanup work. Let’s remove the bootstrap logic and remove `bootstrap` from the import statement in the `heroes.component.ts`. 
+    
+    We had already exported our `AppComponent`, which is why we can now import it and bootstrap it here. We pass in the shared `HeroService` that many of our components will use, so it will be ready when we need it.
+    
+    Now let’s tell our module loader to start by loading our `bootstrap` module.  We’ll do this in our`index.html` file
+  +makeExample('toh-4/ts/app/index.pt4.html','bootstrap')
+  :marked
+    ### Viewing our Progress
+    Let’s add a title for our app which we’ll bind to a `title` property on our component. We’ll set the title to “Tour of Heroes”.
+  +makeExample('toh-4/ts/app/index.pt4.html','title')
+  :marked
+    Our title now belongs in the `AppComponent`, but it also still exists in `HeroesComponent`. So let’s tidy up by removing the `title` from the `HeroesComponent` class and template.
+    
+    When we view our app in the browser we should now only see our title of “Tour of Heroes”. 
+    But where is the rest of our app? We haven’t shown it yet!
+    
+    Our app’s entry point is the `bootstrap` module which loads the `AppComponent`. `AppComponent` in turn only shows a title. 
+    
+    Our next step is to configure the menu links and routes that will show our views.
+    
+    ## Adding the Router to our App
+    The Angular router is a separate and distinct module that we can include as needed. Well, our Tour of Heroes app needs routing, so let’s add it!
+    
+    ### Including the Router
+    We add a script tag referencing the router code. We’ll make sure this comes after the angular script reference.
+
+    Then let’s set our base href to `/src/` since that is where our source code is located. Our `index.html`’s head section should nw look like this:
+  +makeExample('toh-4/ts/app/index.pt4.html','head')
+  :marked
+    Now we’ll be loading the Angular router!
+    
+    ### Configuring Routes
+    We want to display a menu that has links to a dashboard and to our list of heroes. Let’s configure the first route to show our `HeroesComponent`.
+
+    Our app will have a few routes and we may want to use them in more than one module. Let’s create a file named `route.config.ts` to host our routes. 
+    
+    #### Defining Routes
+    We want to show our heroes list. So let’s define our first route to show our `HeroesComponent` template. 
+  +makeExample('toh-4/ts/app/route.config.pt4.ts','first-route')
+  :marked
+    Our route needs a path. This is what will show up in the address bar of the browser. Our path for our `HeroesComponent` will be `/`. 
+
+    The `component` property identifies the component we will load when we go to this route. In this case we want to load the `HeroesComponent`. 
+    
+    The `as` property is what the route is known as. In other words, it is the name of the route. 
+    We set these three properties in an object and export that object in an array named `APP_ROUTES`.  Right now we have one route. But as we add more routes, this technique of hosting them in a `route.config.ts` file and exporting an array of them will make it easier to manage our routes. 
+    
+    #### The RouteConfig Decorator
+    Now that we have defined a route, we need to tell Angular where to find it. Let’s go to our `AppComponent` and add the `RouteConfig` decorator the class. We’ll need to import the `RouteConfig` decorator from Angular’s router module, too.
+
+    Now we import the `APP_ROUTES`array of routes that we just created. We’ll pass these into the `RouteConfig` decorator.
+  +makeExample('toh-4/ts/app/index.pt4.html','routes-title')
+  :marked
+    Our app now has its first route, but we need a place to show the heroes view.
+    
+    <!-- Learn more about RouteConfig in the chapter [Router] -->
+    
+    ### Showing the View with the Router-Outlet
+    Angular knows we have a route when we navigate to `/heroes`. But where does the view show in the HTML? We haven’t told our app how to do that yet!
+    
+    Let’s add the `<router-outlet>` directive to the template of `AppComponent`. The `<router-outlet>` is a placeholder that the router uses to place the views. When we go to the `/heroes` route, the router will show the `HeroesComponent` template where we place the `<router-outlet>`.
+  +makeExample('toh-4/ts/app/index.pt4.html','router-outlet')
+  :marked
+    When need to declare to the `AppComponent` that we are using the `router-outlet` directive. To do this we’ll import a special `ROUTER_DIRECTIVES` array of router specific directives. 
+    ```
+    import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+    ```
+    Then we’ll declare them to the component in the `@Component` decorator’s `directives` property.
+    ```
+    directives: [ROUTER_DIRECTIVES]
+    ```
+    Let’s go view our app in the browser and see where we are. Uh oh, we see an error in the developer console.
+  code-example(language="html").
+    EXCEPTION: No provider for Router! (RouterOutlet -> Router)
+  :marked
+    Angular is warning us that we are using the router and the `router-outlet` but we did not inject the router’s provider. We can fix this by injecting this in the bootstrap module. First we’ll import the `ROUTER_PROVIDERS` from the router module.
+    ```
+    import {ROUTER_PROVIDERS} from 'angular2/router';
+    ```
+    Then we’ll pass the `ROUTER_PROVIDERS` to the `bootstrap` method.
+    ```
+    bootstrap(AppComponent, [ROUTER_PROVIDERS, HeroService]);
+    ```
+    Now when we view our app in the browser we see our heroes list!
+    
+    ## Creating Navigation Links
+    Okay, our Tour of Heroes is not quite where we want it yet. We’ve created the `AppComponent` which hosts the routing and we move the heroes list to the `HeroesComponent`. But to fulfill our requirements we need to create a dashboard and add a way to navigate between the different views. Let’s continue by adding the new dashboard component and the navigation links.
+    
+    ### Empty Dashboard
+    Routing makes a lot more sense once we have multiple views. We have a heroes view to show but now we need to create our dashboard view. Let’s create the `DashboardComponent`so we can finish creating the navigation between the components.
+    
+    Let’s create a super simple dashboard component.
+  +makeExample('toh-4/ts/app/index.pt4.html','simple-dashboard-component')
+  :marked
+    We’ll come back to the dashboard once we complete routing. For now this will do nicely to help us make sure we can navigate between the `HeroesComponent` and the `DashboardComponent`.
+    
+    ### Configuring the Dashboard’s Routes
+    Now that we have a component for our dashboard, let’s go configure a route that will take us there.
+    
+    We’ll open `route.config.ts` and add another route for the dashboard. 
+    
+    Our dashboard should be the first thing we see when load our app. So the dashboard route will be the default route of `/` while our heroes will now be accessible via the path `/heroes`.
+    
+    We’ll also import the `DashboarComponent` so we can route to it with the dashboard route. And we’ll add the dashboard route to the `APP_ROUTES` export.
+    
+    Our `route.config.ts` should now look like the following code:
+  +makeExample('toh-4/ts/app/route.config.pt4.ts','dashboard-route')
+  :marked
+    Now we two components we can route between and we have defined the routes for both components. Next up, we’ll add navigation links to route between them.
+    
+    ### Navigation Links
+    Let’s add the navigation links to the`AppComponent`’s template. The Angular router uses a special `router-link` directive to navigate to the routes we defined. We can think of these as links that will navigate to another component using the router.
+    
+    We also add a title for our app which we’ll bind to a `title` property on our component.
+  +makeExample('toh-4/ts/app/index.pt4.html','router-link')
+  :marked
+    The `router-link` is not set to url. We bound the `router-link` to the routes that we specified in the `as` property of our `@RouteConfig`. The `as` is the key that we use to reference the routes.
+    
+    #### Reusable Routing Config
+    We just hard-coded the routes that the `router-link` properties are bound. We can do better. We recall that we previously created route configuration in `route.config.ts`. We import its `Routes`.
+  +makeExample('toh-4/ts/app/index.pt4.html','import-app-routes')
+  :marked
+    And then we use it to initialize a `routes` property on our `AppComponent`.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','initialize-routes-property')
+  :marked
+    Then we can simply reference the routes as shown below using our route configuration variables, such as `routes.heroes.as`.
+  +makeExample('toh-4/ts/app/index.pt4.html','router-link')
+  :marked
+    When we view our app in the browser we are brought directly to our dashboard. We can navigate between the dashboard and the heroes til our hearts are content.
+    
+    ## Adding the Top Heroes to Our Dashboard
+    Our dashboard view is a bit bland as it only contains a title. Let’s spice it up by adding the top 4 heroes at a glance.
+    <!-- Ward sweep section below -->
+    ### Top Heroes Template Content
+    Let’s add the template to our dashboard to show the top four heroes. We’ll use the `ng-for` directive to iterate over a list of heroes (which we have not retrieved yet) and display them. We’ll use `<div>` elements as we’re going to custom style them.
+  +makeExample('toh-4/ts/app/index.pt4.html','ng-for')
+  :marked
+    We’ve been down this road before. We are using the `ng-for` directive, so we have to declare it in the component. Let’s do that now by first importing `CORE_DIRECTIVES`. (Remember that `CORE_DIRECTIVES` is a convenience array containing the most common directives such as `ng-for`.)
+    ```
+    import {Component, CORE_DIRECTIVES} from 'angular2/angular2';
+    ```
+    Then we declare the `CORE_DIRECTIVES` to the component.
+    ```
+    directives: [CORE_DIRECTIVES]
+    ```
+    ### Using the Shared HeroService
+    We just iterated over a list of heroes, but we don’t have any heroes in the `DashboardComponent`. We do have a `HeroService` that provides heroes. In fact, we already used this service in the `HeroComponent`. Let’s re-use this same service for the `DashboardComponent` to get a list of heroes.
+    
+    We’ll create a `heroes` property in our `DashboardComponent`.
+    ```
+    public heroes: Hero[];
+    ```
+    And we import the `Hero` 
+    ```
+    import {Hero} from './hero';
+    ```
+    #### Injecting a Service
+    We’ll be needing the `HeroService`, so let’s import it and inject it into our `DashboardComponent`. Here we import it.
+    ```
+    import {HeroService} from './hero.service';
+    ```
+    And here we inject it into our component’s constructor.
+    ```
+    constructor(private _heroService: HeroService) { }
+    ```
+    #### Getting the Heroes on Initialization
+    We want our heroes to be loaded when the component is initialized, just like we did in the `HeroesComponent`. We’ll tackle this the same way, by using the onInit Lifecycle hook.
+    
+    We can implement the `OnInit` interface and code the `onInit` method.
+    ```
+    export class DashboardComponent implements OnInit {
+    ```
+    Here we implement the `onInit` method to get our heroes, again just like we did for the `HeroesComponent`.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','oninit')
+  :marked
+    Notice we did not have to know how to get the heroes, we just needed to know the method to call from the `HeroService`. This is an advantage of using shared services.
+
+    When we view our app in the browser we see the dashboard light up with all of our heroes. This isn’t exactly what we want so let’s trim that down to the top four heroes.
+    
+    ### Slicing with Pipes
+    Our requirement is to show the top four heroes. If only we had something that would automatically get a subset of the data.  Well, we do! They are called Pipes.
+
+    Angular has various built-in pipes that make formatting and filtering data easy. We’ll take advantage of a pipe named `slice` to get a slice of our heroes array.
+    ```
+    <div *ng-for="#hero of heroes | slice:0:4">
+    ```
+    After the `ng-for` we added a pipe character and then the `slice` pipe. We tell the `slice` pipe to start at the 0th item in the array and get four items.
+  .l-sub-section
+    :marked
+      Learn more about Pipes in the chapter [Pipes](../guide/pipes.html)
+  :marked
+    When we view our app we now see the first four heroes are displayed.
+    
+    ### Heroes with Style
+    Our creative designers have added a requirement that the dashboard should show the heroes in a row of rectangles. We’ve written some CSS to achieve this along with some simple media queries to achieve responsive design. 
+    
+    We could put the CSS in the component, but there are over 30 lines of CSS and it would get crowded fast. Most editors make it easier to code CSS in a *.css file too. Fortunately, we can separate the styles into their own file and reference them. 
+    
+    #### Adding the Dashboard’s CSS File
+    Let’s create a file to hold the `DashboardComponent`’s CSS. We’ll name it `dashboard.component.css` and put it in the `app` folder.
+    
+    Now let’s add the following CSS to the file.
+  +makeExample('toh-4/ts/app/index.pt4.html','css')
+  :marked
+    We need to reference the file from our component so the styles will be applied properly. Let’s add this reference to the component’s `styleUrls` property.
+    ```
+    styleUrls: ['app/dashboard.component.css'],
+    ```
+    The `styleUrls` property is an array, which we might guess suggests that we can add multiple styles from different locations. And we would be right! In this case we have one file, but we could add more for our component if needed.
+    
+    #### Template Urls
+    While we are at it, let’s move our HTML for the `DashboardComponent` to its own file. We’ll create a file named `dashboard.component.html` in the `app` folder and move the HTML there. 
+    We need to reference the the template, so let’s change our component’s `template` property to `templateUrl` and set it to the location of the file.
+    ```
+    template: 'app/dashboard.component.html',
+    ```
+    Notice we are now using single quotes and not the back-ticks since we only have the need for a single line string.
+    
+    #### Applying the Styles to Our Template
+
+    Now that we have some style, let’s take advantage of it by applying it to our template. Our template should now look like this:
+  +makeExample('toh-4/ts/app/index.pt4.html','template-styled')
+  :marked
+    When we view our app in the browser it now shows our dashboard with our four top heroes in a row.
+    
+    ## Styling the Navigation Links
+    Our creative design team requested that the navigation links also be styled. Let’s make the navigation links look more like selectable buttons. 
+    
+    ### Defining Styles for Navigation Links
+    Let’s add the following styles to our `AppComponent`’s `styles` property. We’ll define some classes named `router-link` that style the default, active, visited and hover selectors. The active selector changes the color of the link to make it easy to identify which link is selected.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','styles')
+  :marked
+    This time we define the styles in our component because there are only a few of them.
+
+    ### Applying Styles to the Navigation Links
+    Now that we have styles for our navigation links, let’s apply them in the `AppComponent` template. When we are done, our component will look like the following:
+  +makeExample('toh-4/ts/app/index.pt4.html','styled-nav-links')
+  :marked
+    #### Where Did the Active Route Come From?
+    The Angular Router makes it easy for us to style our active navigation link. The `router-link-active` class is automatically added to the Router’s active route for us. So all we have to do is define the style for it.
+    
+    Sweet! When we view our app in the browser we see the navigation links are now styled, as are our top heroes!
+  figure.image-display
+    img(src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations")
+  :marked
+    ## Add Route to Hero Details
+    We can navigate between the dashboard and the heroes view, but we have a requirement from our users to be able to select a hero from either of those views and go directly to the selected hero’s details. Let’s configure a route to go directly to the `HeroDetailComponent` passing the hero’s id as a parameter.
+    
+    ### Configuring a Route with a Parameter
+    We’ve already added a few routes to the `routes.config.ts` file, so it’s natural that we’d start there to add the route to go to the `HeroDetailComponent`. Let’s start by adding the import statement for the component.
+  +makeExample('toh-4/ts/app/route.config.pt4.ts','route-parameter-import')
+  :marked
+    Now we add a route for the details to the `Routes` object.
+  +makeExample('toh-4/ts/app/route.config.pt4.ts','route-parameter-detail')
+  :marked
+    The route will lead to the `HeroDetailComponent`, passing along the value for the hero’s id. The routing configuration identifies parameters as parts of the path that are prefixed with a `:` such as `:id`. 
+    
+    ### Receiving a Parameter
+    We want to navigate to the `HeroDetailComponent`, so let’s modify it to accept the `id`  parameter. We import the `RouteParams` so we can access the parameter.
+    We assign our `AppComponent` a selector of `my-app`.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','import-params')
+  :marked
+    Now we inject the `RouteParams` into the `HeroDetailComponent` constructor.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','inject-routeparams')
+  :marked
+    We want to immediately access the parameter, so let’s implement the `OnInit` interface and its `onInit` method.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','access-params')
+  :marked
+    And let’s not forget to import `OnInit`.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','import-onit')
+  :marked
+    Using the `onInit`method, we can grab the parameter as soon as the component initializes. We’ll access the parameter by name and later we’ll get the hero by its `id`.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','onit-id-param')
+  :marked
+    Our `HeroDetailComponent` is already used in the `HeroesComponent`. When we select a hero from the list we are passing the hero object from the list to the `HeroDetailComponent`. We want this component to support that functionality or be able to accept the hero’s id. Let’s revise the logic in the `onInit` to handle this.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','onit-hero-id')
+  :marked
+    Our component will first check if it has a hero. If it doesn’t it will then check for the routing parameter so it can get the hero.
+  .l-sub-section
+    :marked
+      Learn more about RouteParams in the chapter [Router](../guide/router.html)
+  :marked
+    Getting the Hero
+    When we pass the id to the `HeroDetailComponent` we need to go get the hero from our `HeroService`. Let’s import the `HeroService` so we can use it to get our hero.
+  +makeExample('toh-4/ts/app/bootstrap.pt4.ts','import-hero-service')
+  :marked
+    And then we inject the `HeroService` into the constructor.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','inject-hero-service')
+  :marked
+    We then stub out the call to the `HeroService` to get the hero by the hero’s id. But wait a second, we don’t have a way to get the hero by id … yet.
+    
+    Our `HeroService` is the right place to get a single hero. We’ll create a method named `getHero` that will accept a parameter, find the hero, and return the hero in a promise.
+    
+    We add this method to the `HeroService`.
+  +makeExample('toh-4/ts/app/hero.service.pt4.ts','get-hero-method')
+  :marked
+    Then we go back to our `HeroDetailComponent` and we can call the `getHero` method.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','onit-hero-method')
+  :marked
+    We grab the hero and set it to the local `hero` property. Now we have everything in place to receive the parameter.
+    
+    ### Select a Hero on the Dashboard
+    When a user selects a hero in the dashboard, we want to route to the details. Let’s open our dashboard’s template and add a click event to each hero in the template.
+  +makeExample('toh-4/ts/app/index.pt4.html','select-hero-click-event')
+  :marked
+    The click event will call the `gotoDetail` method in the `DashboardComponent`. We don’t have that method yet, so let’s create it. We’ll want to use the router to navigate to the details route we created. So we have to import the router, and while we are at it, we’ll import the `Routes` object we created that describe our routes.
+  +makeExample('toh-4/ts/app/bootstrap.pt4.ts','import-router')
+  :marked
+    Now we can write our method to navigate to the route and pass the parameter. We’ll use the router’s `navigate` method and pass an array that has 2 parameters. The first is the name of the route (the `as` property in the `RouteConfig`). The second is an object with the parameters and values.
+  +makeExample('toh-4/ts/app/route.config.pt4.ts','router-navigate-method')
+  :marked
+    Now when we view our app in the browser and select a hero from the dashboard, we go directly to the hero’s details!
+  .l-sub-section
+    :marked
+      Learn more about RouteParams in the chapter [Router](../guide/router.html)
+  :marked
+    ### Select a Hero on the HeroesComponent
+    When a user selects a hero in the dashboard, we go to the details. But we also want this to happen from the `HeroesComponent`. Let’s add the same changes to the `HeroesComponent` that we made to the dashboard.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','select-hero')
+  :marked
+    The requirement here is to show the hero when selected and allow the user to the details via a button. So when a user selects a hero we want to show the hero’s name and provide a button to navigate to the details.
+    
+    Let’s open the `HeroesComponent`, remove the `my-hero-detail` component,  and change the template to display the hero’s name instead.
+  +makeExample('toh-4/ts/app/index.pt4.html','display-hero-name')
+  :marked
+    We also added a button with a click event that will call our `gotoDetail` method in our `HeroesComponent`.
+    
+    Notice we also used the `uppercase` pipe to format the selected hero’s name. Pipes are extremely helpful at formatting and filtering.
+  .l-sub-section
+    :marked
+      Learn more about Pipes in the chapter [Pipes](../guide/pipes.html)
+  :marked
+    When we view the app in our browser we can now navigate from the dashboard or the heroes component directly to the selected hero’s details!
+    
+    ### Cleaning Up Templates and Styles
+    We’ve added a lot of HTML and CSS in our template and styles, respectively, in the `HeroesComponent`. Let’s move each of these to their own files. 
+    
+    We move the HTML for the `HeroesComponent` template to `heroes.component.html`. Then we reference the file in the component’s `templateUrl` property.
+    
+    Now our `HeroesComponent` looks much cleaner and easier to maintain since our template and styles are in another file.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','reference-heroes-component')
+  :marked
+    We’ll also move the HTML out of the `HeroDetailComponent` and into its own file named `hero-detail.component.html`. Then we reference the file from the `templateUrl` property.
+  +makeExample('toh-4/ts/app/app.component.pt4.ts','reference-hero-detail-component')
+  :marked
+    ### Adding Styles to the App
+    When we add styles to a component we are making it easier to package everything a component needs together. The HTML, the CSS, and the code are all together in one convenient place. However we can also add styles at an app level outside of a component.
+    
+    Our designers just gave us a few more basic styles to apply to our entire app. Let’s add some CSS in a file `styles.css` to the `src` folder to style the app’s basic elements.
+  +makeExample('toh-4/ts/app/index.pt4.html','basic-styles')
+  :marked
+    And let’s reference the stylesheet from the `index.html`.
+  +makeExample('toh-4/ts/app/index.pt4.html','stylesheet')
+  :marked
+    When we view our app in the browser we can see everything still works as expected!
+    
+    ### Reviewing the App Structure
+    Let’s verify that we have the following structure after all of our good refactoring in this chapter:
+  code-example.
+    angular2-tour-of-heroes
+      |---- node_modules
+      |---- app
+      |    |---- app.component.ts
+      |    |---- boot.ts
+      |    |---- dashboard.component.css
+      |    |---- dashboard.component.html
+      |    |---- dashboard.component.ts
+      |    |---- hero.ts
+      |    |---- hero-detail.component.html
+      |    |---- hero-detail.component.ts
+      |    |---- hero.service.ts
+      |    |---- heroes.component.css
+      |    |---- heroes.component.html
+      |    |---- heroes.component.ts
+      |    |---- mock-heroes.ts
+      |    |---- route.config.ts
+      |---- index.html
+      |---- styles.css
+      |---- tsconfig.json
+      |---- package.json
+  
+  .l-main-section
+  :marked
+    ## Recap
+    
+    ### The Road We’ve Travelled
+    Let’s take stock in what we’ve built.
+    - We added the router to navigate between different components and their templates
+    - We learned how to create router links to represent navigation menu items
+    - We extended a component to either accept a hero as input or accept a router parameter to get the hero
+    - We extended our shared service by adding a new method to it
+    - We added the `slice` pipe to filter the top heroes, and the `uppercase` pipe to format data
+    
+    ### The Road Ahead
+    Our Tour of Heroes has grown to reuse services, share components, route between components and their templates, and filter and format data with pipes. We have many of the foundations to build an application. In the next chapter we’ll explore how to replace our mock data with real data using http.
\ No newline at end of file
diff --git a/public/resources/images/devguide/toh/dashboard-top-heroes.png b/public/resources/images/devguide/toh/dashboard-top-heroes.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0cc2c9d724e4f772463cbb9c26dcf5736556f6b
GIT binary patch
literal 17689
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
E5A|7RumAu6

literal 0
HcmV?d00001

diff --git a/public/resources/images/devguide/toh/heroes-list-3.png b/public/resources/images/devguide/toh/heroes-list-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..84a0b8190042a5738b2a09e0b62aceb5d1470fa7
GIT binary patch
literal 28710
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
RaPc2VR#NF>`FkV3{{x{k+7|!-

literal 0
HcmV?d00001