diff --git a/.travis.yml b/.travis.yml
index 0a4b3fe77a..f5624c7eb9 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,13 +11,19 @@ env:
     - DISPLAY=:99.0
     - CHROME_BIN=chromium-browser
   matrix:
-    - SCRIPT="lint"
+    - SCRIPT=lint
     - SCRIPT="run-e2e-tests --fast"
+    - SCRIPT="run-e2e-tests --fast" PREVIEW=true
+matrix:
+  fast_finish: true
+  allow_failures:
+    - env: "SCRIPT=\"run-e2e-tests --fast\" PREVIEW=true"    
 before_install:
   - npm install -g gulp --no-optional
 before_script:
   - sh -e /etc/init.d/xvfb start
 install:
   - ./script/install.sh
+  - if [[ $PREVIEW == true ]]; then npm install --prefix public/docs/_examples angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,forms,router-deprecated,router,upgrade}-builds; fi
 script:
   - gulp $SCRIPT
diff --git a/harp.json b/harp.json
index 0d9b1cb9f8..870a2a2c00 100644
--- a/harp.json
+++ b/harp.json
@@ -75,6 +75,7 @@
         "name": "Victor Savkin",
         "picture": "/resources/images/bios/victor.jpg",
         "twitter": "victorsavkin",
+        "website": "http://victorsavkin.com/",
         "bio": "Victor works on Angular at Google. He is interested in functional programming and client-side applications. Being a language nerd he spends a lot of his time playing with TypeScript, Dart, Elm, Haskell, and Clojure.",
         "type": "Google"
       },
@@ -101,6 +102,7 @@
         "name": "David East",
         "picture": "/resources/images/bios/david-east.jpg",
         "twitter": "_davideast",
+        "website":"https://github.com/davideast",
         "bio": "David East is a Developer Programs Engineer at Google. He works full-time on the Firebase team and part-time on the Angular core team.",
         "type": "Google"
       },
@@ -217,6 +219,7 @@
         "name": "Lucas Mirelmann",
         "picture": "/resources/images/bios/lucas.jpg",
         "twitter": "lgalfaso",
+        "website": "https://github.com/lgalfaso",
         "bio": "Lucas works as a Software Engineer at Google and is a core Angular contributor.",
         "type": "Google"
       },
@@ -243,6 +246,7 @@
         "name": "Robert Messerle",
         "picture": "/resources/images/bios/rmesserle.jpg",
         "twitter": "Bobbo_O",
+        "website": "https://github.com/robertmesserle",
         "bio": "Robert is a software engineer on the Angular team at Google, working primarily on the Angular Material project.",
         "type": "Google"
       },
@@ -258,6 +262,8 @@
       "scott": {
         "name": "Scott Hyndman",
         "picture": "/resources/images/bios/scott.jpg",
+        "twitter": "scotthyndman",
+        "website": "https://github.com/shyndman",
         "bio": "Scott works for Google on the Material Design team, where he brings designers' dreams to life on the web.",
         "type": "Google"
       },
@@ -266,6 +272,7 @@
         "name": "Kara Erickson",
         "picture": "/resources/images/bios/kara-erickson.jpg",
         "twitter": "karaforthewin",
+        "website": "https://github.com/kara",
         "bio": "Kara is a software engineer on the Angular team at Google and a co-organizer of the Angular-SF Meetup. Prior to Google, she helped build UI components in Angular for guest management systems at OpenTable.  She enjoys snacking indiscriminately and probably other things too.",
         "type": "Google"
       },
@@ -294,6 +301,14 @@
         "bio": "Rob is a Developer Advocate on the Angular team at Google. He's the Angular team's resident reactive programming geek and founded the Reactive Extensions for Angular project, ngrx.",
         "type": "Google"
       },
+      "maxsills": {
+        "name": "Max Sills",
+        "picture": "/resources/images/bios/max-sills.jpg",
+        "twitter": "angularjs",
+        "website": "http://google-opensource.blogspot.com/",
+        "bio": "Max Sills is Angular's Open Source lawyer.",
+        "type": "Google"
+      },
 
       "pawel": {
         "name": "Pawel Kozlowski",
@@ -322,7 +337,7 @@
 	    "elad": {
         "name": "Elad Bezalel",
         "picture": "/resources/images/bios/eladbezalel.jpg",
-		    "website": "https://github.com/EladBezalel",
+        "website": "https://github.com/EladBezalel",
         "bio": "Elad is a fullstack developer with a very strong love for design. Since 8 years old, he's been designing in Photoshop and later on fell in love with programing. This strong bond between design and computer programming gave birth to a new kind of love. And he is currently doing the combination of both, as a core member of the ngMaterial project.",
         "type": "Community"
       },
@@ -447,6 +462,21 @@
         "website": "http://eric.to/",
         "bio": "Eric is a gamer, writer, and programmer.",
         "type": "Community"
+      },
+      "mikeryan": {
+        "name": "Mike Ryan",
+        "picture": "/resources/images/bios/mikeryan.jpg",
+        "twitter": "mikeryan52",
+        "website": "https://medium.com/@MikeRyan52",
+        "bio": "Mike Ryan is a Software Engineer at Synapse Wireless, working on solving challenging problems in the internet-of-things space. He is an advocate of reactive programming and a core contributor to the ngrx project.",
+        "type": "Community"
+        },
+      "rex": {
+        "name": "Rex Ye",
+        "picture": "/resources/images/bios/rex.jpg",
+        "twitter": "rexebin",
+        "bio": "Rex is a full-stack developer. He maintains the Angular.cn website with his old pal Ralph Wang and he plays a key role in bridging between the Chinese Angular community and the world-wide community. He loves playing with flashy new technologies and enjoys the challenge of mastering new skills. His biggest challenge to date is figuring out how to sooth a crying 4-month-old baby.",
+        "type": "Community"
       }
     }
   }
diff --git a/public/docs/_examples/attribute-directives/dart/example-config.json b/public/docs/_examples/attribute-directives/dart/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart
index e6190a443c..d0a2dc8726 100644
--- a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart
+++ b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart
@@ -2,39 +2,41 @@
 // #docregion full
 import 'package:angular2/core.dart';
 
-@Directive(selector: '[myHighlight]', host: const {
-  '(mouseenter)': 'onMouseEnter()',
-  '(mouseleave)': 'onMouseLeave()'
-})
-// #docregion class-1
+@Directive(selector: '[myHighlight]')
+// #docregion class
 class HighlightDirective {
   String _defaultColor = 'red';
   final dynamic _el;
 
   HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
-  // #enddocregion class-1
+  // #enddocregion class
 
   // #docregion defaultColor
-  @Input() set defaultColor(String colorName) {
+  @Input()
+  set defaultColor(String colorName) {
     _defaultColor = (colorName ?? _defaultColor);
   }
   // #enddocregion defaultColor
-  // #docregion class-1
+  // #docregion class
 
   // #docregion color
-  @Input('myHighlight') String highlightColor;
+  @Input('myHighlight')
+  String highlightColor;
   // #enddocregion color
-  
+
   // #docregion mouse-enter
-  void onMouseEnter() { _highlight(highlightColor ?? _defaultColor); }
+  @HostListener('mouseenter')
+  void onMouseEnter() => _highlight(highlightColor ?? _defaultColor);
+
   // #enddocregion mouse-enter
-  void onMouseLeave() { _highlight(); }
+  @HostListener('mouseleave')
+  void onMouseLeave() => _highlight();
 
   void _highlight([String color]) {
-    if(_el != null) _el.style.backgroundColor = color;
+    if (_el != null) _el.style.backgroundColor = color;
   }
 }
-// #enddocregion class-1
+// #enddocregion class
 // #enddocregion full
 /*
 // #docregion highlight
diff --git a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart
index 8546f36279..6745685c09 100644
--- a/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart
+++ b/public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart
@@ -1,14 +1,7 @@
 // #docregion
 import 'package:angular2/core.dart';
 
-@Directive(selector: '[myHighlight]',
-    // #docregion host
-    host: const {
-      '(mouseenter)': 'onMouseEnter()',
-      '(mouseleave)': 'onMouseLeave()'
-    }
-    // #enddocregion host
-)
+@Directive(selector: '[myHighlight]')
 class HighlightDirective {
   // #docregion ctor
   final dynamic _el;
@@ -16,9 +9,21 @@ class HighlightDirective {
   HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
   // #enddocregion ctor
 
-  // #docregion mouse-methods
-  void onMouseEnter() { _highlight("yellow"); }
-  void onMouseLeave() { _highlight(); }
+  // #docregion mouse-methods, host
+  @HostListener('mouseenter')
+  void onMouseEnter() {
+    // #enddocregion host
+    _highlight('yellow');
+    // #docregion host
+  }
+
+  @HostListener('mouseleave')
+  void onMouseLeave() {
+    // #enddocregion host
+    _highlight();
+    // #docregion host
+  }
+  // #enddocregion host
 
   void _highlight([String color]) {
     if (_el != null) _el.style.backgroundColor = color;
diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
index 3baf3449fb..8dec85912e 100644
--- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:no-unused-variable */
-// #docplaster
 // #docregion
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
@@ -8,9 +7,9 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 })
 
 export class HighlightDirective {
-
   // #docregion ctor
   private el: HTMLElement;
+
   constructor(el: ElementRef) { this.el = el.nativeElement; }
   // #enddocregion ctor
 
diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
index cd6c7870a1..2ebcd3a995 100644
--- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts
@@ -5,20 +5,20 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 @Directive({
   selector: '[myHighlight]'
 })
-// #docregion class-1
+// #docregion class
 export class HighlightDirective {
   private _defaultColor = 'red';
   private el: HTMLElement;
 
   constructor(el: ElementRef) { this.el = el.nativeElement; }
-  // #enddocregion class-1
+  // #enddocregion class
 
   // #docregion defaultColor
   @Input() set defaultColor(colorName: string){
     this._defaultColor = colorName || this._defaultColor;
   }
   // #enddocregion defaultColor
-  // #docregion class-1
+  // #docregion class
 
   // #docregion color
   @Input('myHighlight') highlightColor: string;
@@ -37,7 +37,7 @@ export class HighlightDirective {
     this.el.style.backgroundColor = color;
   }
 }
-// #enddocregion class-1
+// #enddocregion class
 // #enddocregion full
 /*
 // #docregion highlight
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html
index 91f7f416cd..9de98806d7 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html
@@ -10,10 +10,10 @@
     <!-- #docregion ngSwitch-->
     <span [ngSwitch]="favoriteHero &&
                    checkMovieHero(favoriteHero)">
-      <p *ngSwitchWhen="true">
+      <p *ngSwitchCase="true">
         Excellent choice!
       </p>
-      <p *ngSwitchWhen="false">
+      <p *ngSwitchCase="false">
         No movie, sorry!
       </p>
       <p *ngSwitchDefault>
diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html
index ceb2f41177..e580ee3027 100644
--- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html
+++ b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html
@@ -4,10 +4,10 @@
 
   <div [ngSwitch]="question.controlType">
 
-    <input *ngSwitchWhen="'textbox'" [ngControl]="question.key"
+    <input *ngSwitchCase="'textbox'" [ngControl]="question.key"
             [id]="question.key" [type]="question.type">
 
-    <select [id]="question.key" *ngSwitchWhen="'dropdown'" [ngControl]="question.key">
+    <select [id]="question.key" *ngSwitchCase="'dropdown'" [ngControl]="question.key">
       <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
     </select>
 
diff --git a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
index a52ea6d267..08c9e542a8 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
@@ -18,10 +18,10 @@ const template = '{{log}}';
     providers: const [Logger]
     // #enddocregion providers-1, providers-logger
 )
-class ProviderComponent1 {
+class Provider1Component {
   String log;
 
-  ProviderComponent1(Logger logger) {
+  Provider1Component(Logger logger) {
     logger.log('Hello from logger provided with Logger class');
     log = logger.logs[0];
   }
@@ -31,15 +31,15 @@ class ProviderComponent1 {
 @Component(
   selector: 'provider-3',
   template: '{{log}}',
-  providers: 
+  providers:
     // #docregion providers-3
     const [const Provider(Logger, useClass: Logger)]
     // #enddocregion providers-3
 )
-class ProviderComponent3 {
+class Provider3Component {
   String log;
 
-  ProviderComponent3(Logger logger) {
+  Provider3Component(Logger logger) {
     logger.log('Hello from logger provided with useClass:Logger');
     log = logger.logs[0];
   }
@@ -56,10 +56,10 @@ class BetterLogger extends Logger {}
       const [const Provider(Logger, useClass: BetterLogger)]
       // #enddocregion providers-4
 )
-class ProviderComponent4 {
+class Provider4Component {
   String log;
 
-  ProviderComponent4(Logger logger) {
+  Provider4Component(Logger logger) {
     logger.log('Hello from logger provided with useClass:BetterLogger');
     log = logger.logs[0];
   }
@@ -87,10 +87,10 @@ class EvenBetterLogger extends Logger {
       const [UserService, const Provider(Logger, useClass: EvenBetterLogger)]
       // #enddocregion providers-5
 )
-class ProviderComponent5 {
+class Provider5Component {
   String log;
 
-  ProviderComponent5(Logger logger) {
+  Provider5Component(Logger logger) {
     logger.log('Hello from EvenBetterlogger');
     log = logger.logs[0];
   }
@@ -116,10 +116,10 @@ class OldLogger extends Logger {
         const Provider(OldLogger, useClass: NewLogger)]
       // #enddocregion providers-6a
 )
-class ProviderComponent6a {
+class Provider6aComponent {
   String log;
 
-  ProviderComponent6a(NewLogger newLogger, OldLogger oldLogger) {
+  Provider6aComponent(NewLogger newLogger, OldLogger oldLogger) {
     if (newLogger == oldLogger) {
       throw new Exception('expected the two loggers to be different instances');
     }
@@ -140,10 +140,10 @@ class ProviderComponent6a {
         const Provider(OldLogger, useExisting: NewLogger)]
       // #enddocregion providers-6b
 )
-class ProviderComponent6b {
+class Provider6bComponent {
   String log;
 
-  ProviderComponent6b(NewLogger newLogger, OldLogger oldLogger) {
+  Provider6bComponent(NewLogger newLogger, OldLogger oldLogger) {
     if (newLogger != oldLogger) {
       throw new Exception('expected the two loggers to be the same instance');
     }
@@ -178,10 +178,10 @@ const silentLogger = const SilentLogger();
     const [const Provider(Logger, useValue: silentLogger)]
     // #enddocregion providers-7
 )
-class ProviderComponent7 {
+class Provider7Component {
   String log;
 
-  ProviderComponent7(Logger logger) {
+  Provider7Component(Logger logger) {
     logger.log('Hello from logger provided with useValue');
     log = logger.logs[0];
   }
@@ -191,13 +191,13 @@ class ProviderComponent7 {
   selector: 'provider-8',
   template: '{{log}}',
   providers: const [heroServiceProvider, Logger, UserService])
-class ProviderComponent8 {
-  // #docregion provider-8-ctor
-  ProviderComponent8(HeroService heroService);
-  // #enddocregion provider-8-ctor
-
+class Provider8Component {
   // must be true else this component would have blown up at runtime
   var log = 'Hero service injected successfully via heroServiceProvider';
+
+  // #docregion provider-8-ctor
+  Provider8Component(HeroService heroService);
+  // #enddocregion provider-8-ctor
 }
 
 @Component(
@@ -208,12 +208,12 @@ class ProviderComponent8 {
     const Provider(APP_CONFIG, useValue: heroDiConfig)]
   // #enddocregion providers-9
 )
-class ProviderComponent9 implements OnInit {
+class Provider9Component implements OnInit {
   Map _config;
   String log;
 
   // #docregion provider-9-ctor
-  ProviderComponent9(@Inject(APP_CONFIG) this._config);
+  Provider9Component(@Inject(APP_CONFIG) this._config);
   // #enddocregion provider-9-ctor
 
   @override
@@ -225,7 +225,7 @@ class ProviderComponent9 implements OnInit {
 // Sample providers 1 to 7 illustrate a required logger dependency.
 // Optional logger, can be null.
 @Component(selector: 'provider-10', template: '{{log}}')
-class ProviderComponent10 implements OnInit {
+class Provider10Component implements OnInit {
   final Logger _logger;
   String log;
 
@@ -234,11 +234,10 @@ class ProviderComponent10 implements OnInit {
   HeroService(@Optional() this._logger) {
   // #enddocregion provider-10-ctor
    */
-  ProviderComponent10(@Optional() this._logger) {
+  Provider10Component(@Optional() this._logger) {
     const someMessage = 'Hello from the injected logger';
     // #docregion provider-10-ctor
-    if (_logger != null)
-      _logger.log(someMessage);
+    _logger?.log(someMessage);
   }
   // #enddocregion provider-10-ctor
 
@@ -263,15 +262,15 @@ class ProviderComponent10 implements OnInit {
       <div id="p9"><provider-9></provider-9></div>
       <div id="p10"><provider-10></provider-10></div>''',
     directives: const [
-      ProviderComponent1,
-      ProviderComponent3,
-      ProviderComponent4,
-      ProviderComponent5,
-      ProviderComponent6a,
-      ProviderComponent6b,
-      ProviderComponent7,
-      ProviderComponent8,
-      ProviderComponent9,
-      ProviderComponent10
+      Provider1Component,
+      Provider3Component,
+      Provider4Component,
+      Provider5Component,
+      Provider6aComponent,
+      Provider6bComponent,
+      Provider7Component,
+      Provider8Component,
+      Provider9Component,
+      Provider10Component
     ])
 class ProvidersComponent {}
diff --git a/public/docs/_examples/lifecycle-hooks/dart/example-config.json b/public/docs/_examples/lifecycle-hooks/dart/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/after_content_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/after_content_component.dart
index 4e11dc702b..c43ea4de73 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/after_content_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/after_content_component.dart
@@ -20,7 +20,7 @@ class ChildComponent {
       <div>-- projected content begins --</div>
         <ng-content></ng-content>
       <div>-- projected content ends --</div>
-      <p *ngIf="comment != null" class="comment">{{comment}}</p>
+      <p *ngIf="comment.isNotEmpty" class="comment">{{comment}}</p>
     '''
 // #enddocregion template
     )
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
index 308e36d9cd..c405c874ac 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/after_view_component.dart
@@ -22,16 +22,16 @@ class ChildViewComponent {
     <div>-- child view begins --</div>
       <my-child></my-child>
     <div>-- child view ends --</div>
-    <p *ngIf="comment != null" class="comment">{{comment}}</p>''',
+    <p *ngIf="comment.isNotEmpty" class="comment">{{comment}}</p>''',
 // #enddocregion template
   directives: const [ChildViewComponent])
 // #docregion hooks
 class AfterViewComponent implements AfterViewChecked, AfterViewInit {
   var _prevHero = '';
-  
+
   // Query for a VIEW child of type `ChildViewComponent`
   @ViewChild(ChildViewComponent) ChildViewComponent viewChild;
-  
+
 // #enddocregion hooks
   final LoggerService _logger;
 
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/counter_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/counter_component.dart
index 65ae6d00f6..6434b9f8b5 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/counter_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/counter_component.dart
@@ -17,8 +17,8 @@ import 'spy_directive.dart';
     styles: const [
       '.counter {background: LightYellow; padding: 8px; margin-top: 8px}'
     ],
-    directives: const [Spy])
-class MyCounter implements OnChanges {
+    directives: const [SpyDirective])
+class MyCounterComponent implements OnChanges {
   @Input() num counter;
   List<String> changeLog = [];
 
@@ -53,7 +53,7 @@ class MyCounter implements OnChanges {
     </div>
     ''',
     styles: const ['.parent {background: gold;}'],
-    directives: const [MyCounter],
+    directives: const [MyCounterComponent],
     providers: const [LoggerService])
 class CounterParentComponent {
   final LoggerService _logger;
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart
index 815c8441d1..8006c39a14 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/spy_component.dart
@@ -11,7 +11,7 @@ import 'spy_directive.dart';
       '.parent {background: khaki}',
       '.heroes {background: LightYellow; padding: 0 8px}'
     ],
-    directives: const [Spy],
+    directives: const [SpyDirective],
     providers: const [LoggerService])
 class SpyParentComponent {
   final LoggerService _logger;
@@ -31,7 +31,7 @@ class SpyParentComponent {
   }
 
   // removeHero(String hero) { } is not used.
-  
+
   void reset() {
     _logger.log('-- reset --');
     heroes.clear();
diff --git a/public/docs/_examples/lifecycle-hooks/dart/lib/spy_directive.dart b/public/docs/_examples/lifecycle-hooks/dart/lib/spy_directive.dart
index 42db9f591a..c8656eceba 100644
--- a/public/docs/_examples/lifecycle-hooks/dart/lib/spy_directive.dart
+++ b/public/docs/_examples/lifecycle-hooks/dart/lib/spy_directive.dart
@@ -9,10 +9,10 @@ int _nextId = 1;
 // Spy on any element to which it is applied.
 // Usage: <div mySpy>...</div>
 @Directive(selector: '[mySpy]')
-class Spy implements OnInit, OnDestroy {
+class SpyDirective implements OnInit, OnDestroy {
   final LoggerService _logger;
 
-  Spy(this._logger);
+  SpyDirective(this._logger);
 
   ngOnInit() => _logIt('onInit');
 
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 4f4dd51f00..c7aa9ffbb9 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -32,7 +32,7 @@
     "@angular/http": "2.0.0-rc.3",
     "@angular/platform-browser": "2.0.0-rc.3",
     "@angular/platform-browser-dynamic": "2.0.0-rc.3",
-    "@angular/router": "3.0.0-alpha.7",
+    "@angular/router": "3.0.0-alpha.8",
     "@angular/router-deprecated": "2.0.0-rc.2",
     "@angular/upgrade": "2.0.0-rc.3",
     "angular2-in-memory-web-api": "0.0.12",
@@ -72,7 +72,7 @@
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.2",
     "ts-node": "^0.7.3",
-    "typescript": "^1.9.0-dev.20160409",
+    "typescript": "^1.8.10",
     "typings": "^1.0.4",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1",
diff --git a/public/docs/_examples/pipes/dart/lib/app_component.dart b/public/docs/_examples/pipes/dart/lib/app_component.dart
index 85b32279a2..a03bb4a460 100644
--- a/public/docs/_examples/pipes/dart/lib/app_component.dart
+++ b/public/docs/_examples/pipes/dart/lib/app_component.dart
@@ -16,11 +16,11 @@ import 'power_booster_component.dart';
       FlyingHeroesComponent,
       FlyingHeroesImpureComponent,
       HeroAsyncMessageComponent,
-      HeroBirthday,
-      HeroBirthday2,
+      HeroBirthdayComponent,
+      HeroBirthday2Component,
       HeroListComponent,
-      PowerBoostCalculator,
-      PowerBooster,
+      PowerBoostCalculatorComponent,
+      PowerBoosterComponent,
     ])
 class AppComponent {
   DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988
diff --git a/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart b/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart
index accb756c37..2d2b63bb15 100644
--- a/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart
+++ b/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart
@@ -7,6 +7,6 @@ import 'package:angular2/angular2.dart';
     template: "<p>The hero's birthday is {{ birthday | date }}</p>"
     // #enddocregion hero-birthday-template
     )
-class HeroBirthday {
+class HeroBirthdayComponent {
   DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988
 }
diff --git a/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart b/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart
index eb76d84859..393a78bccb 100644
--- a/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart
+++ b/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart
@@ -11,7 +11,7 @@ import 'package:angular2/angular2.dart';
     // #enddocregion template
     )
 // #docregion class
-class HeroBirthday2 {
+class HeroBirthday2Component {
   DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988
 
   bool toggle = true;
diff --git a/public/docs/_examples/pipes/dart/lib/power_boost_calculator_component.dart b/public/docs/_examples/pipes/dart/lib/power_boost_calculator_component.dart
index 7c726ce511..1bf00b31fe 100644
--- a/public/docs/_examples/pipes/dart/lib/power_boost_calculator_component.dart
+++ b/public/docs/_examples/pipes/dart/lib/power_boost_calculator_component.dart
@@ -13,7 +13,7 @@ import 'exponential_strength_pipe.dart';
       </p>
     ''',
     pipes: const [ExponentialStrengthPipe])
-class PowerBoostCalculator {
+class PowerBoostCalculatorComponent {
   num power = 5;
   num factor = 1;
 }
diff --git a/public/docs/_examples/pipes/dart/lib/power_booster_component.dart b/public/docs/_examples/pipes/dart/lib/power_booster_component.dart
index 9152a2cc52..41a7be9878 100644
--- a/public/docs/_examples/pipes/dart/lib/power_booster_component.dart
+++ b/public/docs/_examples/pipes/dart/lib/power_booster_component.dart
@@ -9,4 +9,4 @@ import 'exponential_strength_pipe.dart';
       <p>Super power boost: {{2 | exponentialStrength: 10}}</p>
     ''',
     pipes: const [ExponentialStrengthPipe])
-class PowerBooster {}
+class PowerBoosterComponent {}
diff --git a/public/docs/_examples/pipes/dart/web/main.dart b/public/docs/_examples/pipes/dart/web/main.dart
index 98e9c1b34b..3266c05644 100644
--- a/public/docs/_examples/pipes/dart/web/main.dart
+++ b/public/docs/_examples/pipes/dart/web/main.dart
@@ -5,5 +5,5 @@ import 'package:pipe_examples/hero_birthday1_component.dart';
 
 main() {
   bootstrap(AppComponent);
-  bootstrap(HeroBirthday);
+  bootstrap(HeroBirthdayComponent);
 }
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index b5b25a4f10..7f58576e80 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -14,7 +14,7 @@
     "@angular/http":  "2.0.0-rc.3",
     "@angular/platform-browser":  "2.0.0-rc.3",
     "@angular/platform-browser-dynamic":  "2.0.0-rc.3",
-    "@angular/router":  "3.0.0-alpha.7",
+    "@angular/router":  "3.0.0-alpha.8",
     "@angular/router-deprecated":  "2.0.0-rc.2",
     "@angular/upgrade":  "2.0.0-rc.3",
 
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index 9353dfaa3e..e57d118d8f 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -18,7 +18,7 @@
     "@angular/http":  "2.0.0-rc.3",
     "@angular/platform-browser":  "2.0.0-rc.3",
     "@angular/platform-browser-dynamic":  "2.0.0-rc.3",
-    "@angular/router":  "3.0.0-alpha.7",
+    "@angular/router":  "3.0.0-alpha.8",
     "@angular/router-deprecated":  "2.0.0-rc.2",
     "@angular/upgrade":  "2.0.0-rc.3",
 
diff --git a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.html b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.html
index 3599c77271..cf19ebb137 100644
--- a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.html
+++ b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.html
@@ -9,8 +9,8 @@
 <!-- #enddocregion asterisk -->
 <!-- #docregion ngSwitch -->
 <div [ngSwitch]="status">
-  <template [ngSwitchWhen]="'in-mission'">In Mission</template>
-  <template [ngSwitchWhen]="'ready'">Ready</template>
+  <template [ngSwitchCase]="'in-mission'">In Mission</template>
+  <template [ngSwitchCase]="'ready'">Ready</template>
   <template ngSwitchDefault>Unknown</template>
 </div>
 <!-- #enddocregion ngSwitch -->
diff --git a/public/docs/_examples/styles.css b/public/docs/_examples/styles.css
index 054b417f6f..62ddfa5121 100644
--- a/public/docs/_examples/styles.css
+++ b/public/docs/_examples/styles.css
@@ -1,20 +1,20 @@
 /* Master Styles */
 h1 {
-  color: #369; 
-  font-family: Arial, Helvetica, sans-serif;   
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
   font-size: 250%;
 }
-h2, h3 { 
+h2, h3 {
   color: #444;
-  font-family: Arial, Helvetica, sans-serif;   
+  font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
-body { 
-  margin: 2em; 
+body {
+  margin: 2em;
 }
-body, input[text], button { 
-  color: #888; 
-  font-family: Cambria, Georgia; 
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
 }
 a {
   cursor: pointer;
@@ -34,7 +34,7 @@ button:hover {
 }
 button:disabled {
   background-color: #eee;
-  color: #aaa; 
+  color: #aaa;
   cursor: auto;
 }
 
@@ -54,7 +54,7 @@ nav a:hover {
   color: #039be5;
   background-color: #CFD8DC;
 }
-nav a.router-link-active {
+nav a.active {
   color: #039be5;
 }
 
@@ -137,6 +137,6 @@ nav a.router-link-active {
 }
 
 /* everywhere else */
-* { 
-  font-family: Arial, Helvetica, sans-serif; 
+* {
+  font-family: Arial, Helvetica, sans-serif;
 }
diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js
index 40758797e6..a9ec367c33 100644
--- a/public/docs/_examples/systemjs.config.plunker.js
+++ b/public/docs/_examples/systemjs.config.plunker.js
@@ -8,6 +8,7 @@
   var ngVer = '@2.0.0-rc.3'; // lock in the angular package version; do not let it float to current!
   var routerVer = '@3.0.0-alpha.7'; // lock router version
   var formsVer = '@0.1.1'; // lock forms version
+  var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides
 
   //map tells the System loader where to look for things
   var  map = {
@@ -16,6 +17,7 @@
     '@angular':                   'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
     '@angular/router':            'https://npmcdn.com/@angular/router' + routerVer,
     '@angular/forms':             'https://npmcdn.com/@angular/forms' + formsVer,
+    '@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer,
     'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
     'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
     'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
@@ -36,7 +38,6 @@
     'http',
     'platform-browser',
     'platform-browser-dynamic',
-    'router-deprecated',
     'upgrade',
   ];
 
@@ -62,6 +63,9 @@
   // Forms not on rc yet
   packages['@angular/forms'] = { main: 'index.js', defaultExtension: 'js' };
 
+  // Temporarily until we update the guides
+  packages['@angular/router-deprecated'] = { main: '/bundles/router-deprecated' + '.umd.js', defaultExtension: 'js' };
+
   var config = {
     // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
     transpiler: 'ts',
diff --git a/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart b/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart
index 5fd0b1e3cf..5eb6da1c76 100644
--- a/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart
@@ -4,8 +4,6 @@ import 'package:angular2/core.dart';
 
 import 'hero.dart';
 
-var nextHeroDetailId = 1;
-
 // #docregion input-output-2
 @Component(
 // #enddocregion input-output-2
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html
index dcfd423e50..fbe3527362 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.html
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.html
@@ -498,18 +498,18 @@ bindon-ngModel
 
       <!-- with *NgSwitch -->
       <!-- #docregion NgSwitch -->
-      <span *ngSwitchWhen="'Eenie'">Eenie</span>
-      <span *ngSwitchWhen="'Meanie'">Meanie</span>
-      <span *ngSwitchWhen="'Miney'">Miney</span>
-      <span *ngSwitchWhen="'Moe'">Moe</span>
+      <span *ngSwitchCase="'Eenie'">Eenie</span>
+      <span *ngSwitchCase="'Meanie'">Meanie</span>
+      <span *ngSwitchCase="'Miney'">Miney</span>
+      <span *ngSwitchCase="'Moe'">Moe</span>
       <span *ngSwitchDefault>other</span>
       <!-- #enddocregion NgSwitch -->
 
       <!-- with <template> -->
-      <template [ngSwitchWhen]="'Eenie'"><span>Eenie</span></template>
-      <template [ngSwitchWhen]="'Meanie'"><span>Meanie</span></template>
-      <template [ngSwitchWhen]="'Miney'"><span>Miney</span></template>
-      <template [ngSwitchWhen]="'Moe'"><span>Moe</span></template>
+      <template [ngSwitchCase]="'Eenie'"><span>Eenie</span></template>
+      <template [ngSwitchCase]="'Meanie'"><span>Meanie</span></template>
+      <template [ngSwitchCase]="'Miney'"><span>Miney</span></template>
+      <template [ngSwitchCase]="'Moe'"><span>Moe</span></template>
       <template ngSwitchDefault><span>other</span></template>
 
       <!-- #docregion NgSwitch -->
diff --git a/public/docs/_examples/toh-2/dart/lib/app_component.dart b/public/docs/_examples/toh-2/dart/lib/app_component.dart
index 66268118dc..82fc56754a 100644
--- a/public/docs/_examples/toh-2/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-2/dart/lib/app_component.dart
@@ -8,6 +8,21 @@ class Hero {
   Hero(this.id, this.name);
 }
 
+// #docregion hero-array
+final List<Hero> mockHeroes = [
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan'),
+  new Hero(17, 'Dynama'),
+  new Hero(18, 'Dr IQ'),
+  new Hero(19, 'Magma'),
+  new Hero(20, 'Tornado')
+];
+// #enddocregion hero-array
+
 @Component(
     selector: 'my-app',
     template: '''
@@ -94,18 +109,3 @@ class AppComponent {
   }
 // #enddocregion on-select
 }
-// #enddocregion
-
-// #docregion hero-array
-final List<Hero> mockHeroes = [
-  new Hero(11, 'Mr. Nice'),
-  new Hero(12, 'Narco'),
-  new Hero(13, 'Bombasto'),
-  new Hero(14, 'Celeritas'),
-  new Hero(15, 'Magneta'),
-  new Hero(16, 'RubberMan'),
-  new Hero(17, 'Dynama'),
-  new Hero(18, 'Dr IQ'),
-  new Hero(19, 'Magma'),
-  new Hero(20, 'Tornado')
-];
diff --git a/public/docs/_examples/toh-3/dart/lib/app_component.dart b/public/docs/_examples/toh-3/dart/lib/app_component.dart
index d2ed99d75b..a51d317005 100644
--- a/public/docs/_examples/toh-3/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-3/dart/lib/app_component.dart
@@ -8,6 +8,19 @@ import 'hero.dart';
 import 'hero_detail_component.dart';
 // #enddocregion hero-detail-import
 
+final List<Hero> mockHeroes = [
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan'),
+  new Hero(17, 'Dynama'),
+  new Hero(18, 'Dr IQ'),
+  new Hero(19, 'Magma'),
+  new Hero(20, 'Tornado')
+];
+
 @Component(
     selector: 'my-app',
     // #docregion hero-detail-template
@@ -87,16 +100,3 @@ class AppComponent {
     selectedHero = hero;
   }
 }
-
-final List<Hero> mockHeroes = [
-  new Hero(11, 'Mr. Nice'),
-  new Hero(12, 'Narco'),
-  new Hero(13, 'Bombasto'),
-  new Hero(14, 'Celeritas'),
-  new Hero(15, 'Magneta'),
-  new Hero(16, 'RubberMan'),
-  new Hero(17, 'Dynama'),
-  new Hero(18, 'Dr IQ'),
-  new Hero(19, 'Magma'),
-  new Hero(20, 'Tornado')
-];
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
index 972497e065..ff0fb8c0d1 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
@@ -32,7 +32,7 @@ class DashboardComponent implements OnInit {
   // #enddocregion ctor
 
   Future<Null> ngOnInit() async {
-    heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+    heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
   // #docregion goto-detail
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
index 15d239ba1b..aa9afb38d7 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
@@ -19,7 +19,7 @@ class DashboardComponent implements OnInit {
   DashboardComponent(this._heroService);
 
   Future<Null> ngOnInit() async {
-    heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+    heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
   gotoDetail() {/* not implemented yet */}
diff --git a/public/docs/_examples/toh-5/dart/lib/hero.dart b/public/docs/_examples/toh-5/dart/lib/hero.dart
index d62b733142..828f8cebab 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero.dart
@@ -3,4 +3,4 @@ class Hero {
   String name;
 
   Hero(this.id, this.name);
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
index ed648d626f..a6c506a231 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
@@ -1,6 +1,5 @@
 // #docplaster
-// #docregion
-// #docregion v2
+// #docregion , v2
 import 'dart:async';
 import 'dart:html';
 
diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.css b/public/docs/_examples/toh-5/dart/lib/heroes_component.css
index d939ab565d..35e45af98d 100644
--- a/public/docs/_examples/toh-5/dart/lib/heroes_component.css
+++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.css
@@ -6,7 +6,7 @@
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 10em;
+  width: 15em;
 }
 .heroes li {
   cursor: pointer;
diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
index fda869c3aa..48e1a167bf 100644
--- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
@@ -14,10 +14,9 @@ import 'hero_service.dart';
     selector: 'my-heroes',
     // #enddocregion heroes-component-renaming
     templateUrl: 'heroes_component.html',
-    styleUrls:  const ['heroes_component.css'],
-    directives: const [HeroDetailComponent]
-    // #docregion heroes-component-renaming
-)
+    styleUrls: const ['heroes_component.css'],
+    directives: const [HeroDetailComponent])
+// #docregion heroes-component-renaming
 // #enddocregion heroes-component-renaming, metadata
 // #docregion class, heroes-component-renaming
 class HeroesComponent implements OnInit {
@@ -37,9 +36,13 @@ class HeroesComponent implements OnInit {
     getHeroes();
   }
 
-  void onSelect(Hero hero) { selectedHero = hero; }
+  void onSelect(Hero hero) {
+    selectedHero = hero;
+  }
 
-  Future<Null> gotoDetail() =>
-      _router.navigate(['HeroDetail', {'id': selectedHero.id.toString()}]);
+  Future<Null> gotoDetail() => _router.navigate([
+        'HeroDetail',
+        {'id': selectedHero.id.toString()}
+      ]);
   // #docregion heroes-component-renaming
 }
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.ts b/public/docs/_examples/toh-5/ts/app/app.component.1.ts
index 07a2317293..2f0e3506dd 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.1.ts
@@ -8,7 +8,7 @@ import { HeroesComponent } from './heroes.component';
 // #enddocregion
 
 // For testing only
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 
 // #docregion
 @Component({
@@ -20,7 +20,6 @@ import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/route
   directives: [HeroesComponent],
   providers: [
     // #enddocregion
-   ROUTER_PROVIDERS,
     // #docregion
     HeroService
   ]
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.2.ts b/public/docs/_examples/toh-5/ts/app/app.component.2.ts
index 6b690a6c63..c2699f317b 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.2.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.2.ts
@@ -2,38 +2,27 @@
 // #docregion
 import { Component } from '@angular/core';
 // #docregion import-router
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 // #enddocregion import-router
 
 import { HeroService }     from './hero.service';
-import { HeroesComponent } from './heroes.component';
 
 @Component({
   selector: 'my-app',
   // #docregion template
   template: `
     <h1>{{title}}</h1>
-    <a [routerLink]="['Heroes']">Heroes</a>
+    <a [routerLink]="['/heroes']">Heroes</a>
     <router-outlet></router-outlet>
   `,
   // #enddocregion template
   // #docregion directives-and-providers
   directives: [ROUTER_DIRECTIVES],
   providers: [
-    ROUTER_PROVIDERS,
     HeroService
   ]
   // #enddocregion directives-and-providers
 })
-// #docregion route-config
-@RouteConfig([
-  {
-    path: '/heroes',
-    name: 'Heroes',
-    component: HeroesComponent
-  }
-])
-// #enddocregion route-config
 export class AppComponent {
   title = 'Tour of Heroes';
 }
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.3.ts b/public/docs/_examples/toh-5/ts/app/app.component.3.ts
new file mode 100644
index 0000000000..ff64e27ab1
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.component.3.ts
@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <nav>
+      // #docregion router-link-active
+      <a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
+      <a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
+      // #enddocregion router-link-active
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  // #enddocregion template
+  // #docregion style-urls
+  styleUrls: ['app/app.component.css'],
+  // #enddocregion style-urls
+  directives: [ROUTER_DIRECTIVES],
+  providers: [
+    HeroService
+  ]
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.css b/public/docs/_examples/toh-5/ts/app/app.component.css
index f4e8082ea1..071e665767 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.css
+++ b/public/docs/_examples/toh-5/ts/app/app.component.css
@@ -24,6 +24,6 @@ nav a:hover {
   color: #039be5;
   background-color: #CFD8DC;
 }
-nav a.router-link-active {
+nav a.active {
   color: #039be5;
 }
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts
index 5589cd84e9..3f3e758dcf 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.ts
@@ -1,13 +1,8 @@
 // #docplaster
 // #docregion
 import { Component } from '@angular/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 
-import { DashboardComponent } from './dashboard.component';
-import { HeroesComponent } from './heroes.component';
-// #docregion hero-detail-import
-import { HeroDetailComponent } from './hero-detail.component';
-// #enddocregion hero-detail-import
 import { HeroService } from './hero.service';
 
 @Component({
@@ -16,8 +11,8 @@ import { HeroService } from './hero.service';
   template: `
     <h1>{{title}}</h1>
     <nav>
-      <a [routerLink]="['Dashboard']">Dashboard</a>
-      <a [routerLink]="['Heroes']">Heroes</a>
+      <a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
+      <a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
     </nav>
     <router-outlet></router-outlet>
   `,
@@ -27,32 +22,9 @@ import { HeroService } from './hero.service';
   // #enddocregion style-urls
   directives: [ROUTER_DIRECTIVES],
   providers: [
-    ROUTER_PROVIDERS,
     HeroService
   ]
 })
-@RouteConfig([
-  // #docregion dashboard-route
-  {
-    path: '/dashboard',
-    name: 'Dashboard',
-    component: DashboardComponent,
-    useAsDefault: true
-  },
-  // #enddocregion dashboard-route
-  // #docregion hero-detail-route
-  {
-    path: '/detail/:id',
-    name: 'HeroDetail',
-    component: HeroDetailComponent
-  },
-  // #enddocregion hero-detail-route
-  {
-    path: '/heroes',
-    name: 'Heroes',
-    component: HeroesComponent
-  }
-])
 export class AppComponent {
   title = 'Tour of Heroes';
 }
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
new file mode 100644
index 0000000000..17f2df4e98
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
@@ -0,0 +1,37 @@
+// #docregion
+import { provideRouter, RouterConfig }  from '@angular/router';
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+// #docregion hero-detail-import
+import { HeroDetailComponent } from './hero-detail.component';
+// #enddocregion hero-detail-import
+
+export const routes: RouterConfig = [
+  // #docregion redirect-route
+  {
+    path: '',
+    redirectTo: '/dashboard',
+    terminal: true
+  },
+  // #enddocregion redirect-route
+  // #docregion dashboard-route
+  {
+    path: 'dashboard',
+    component: DashboardComponent
+  },
+  // #enddocregion dashboard-route
+  // #docregion hero-detail-route
+  {
+    path: 'detail/:id',
+    component: HeroDetailComponent
+  },
+  // #enddocregion hero-detail-route
+  {
+    path: 'heroes',
+    component: HeroesComponent
+  }
+];
+
+export const APP_ROUTER_PROVIDERS = [
+  provideRouter(routes)
+];
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
new file mode 100644
index 0000000000..45ddeb9230
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { provideRouter, RouterConfig }  from '@angular/router';
+import { HeroesComponent } from './heroes.component';
+
+const routes: RouterConfig = [
+  {
+    path: '/heroes',
+    component: HeroesComponent
+  }
+];
+
+export const APP_ROUTER_PROVIDERS = [
+  provideRouter(routes)
+];
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.ts b/public/docs/_examples/toh-5/ts/app/app.routes.ts
new file mode 100644
index 0000000000..b4f1f1efa1
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.routes.ts
@@ -0,0 +1,32 @@
+// #docregion
+import { provideRouter, RouterConfig }  from '@angular/router';
+
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+// #docregion hero-detail-import
+import { HeroDetailComponent } from './hero-detail.component';
+// #enddocregion hero-detail-import
+
+export const routes: RouterConfig = [
+  {
+    path: '',
+    redirectTo: '/dashboard',
+    terminal: true
+  },
+  {
+    path: 'dashboard',
+    component: DashboardComponent
+  },
+  {
+    path: 'detail/:id',
+    component: HeroDetailComponent
+  },
+  {
+    path: 'heroes',
+    component: HeroesComponent
+  }
+];
+
+export const APP_ROUTER_PROVIDERS = [
+  provideRouter(routes)
+];
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
index e58760caad..6dd4b1abc2 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
@@ -2,7 +2,7 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
-import { Router } from '@angular/router-deprecated';
+import { Router } from '@angular/router';
 // #enddocregion import-router
 
 import { Hero } from './hero';
@@ -36,7 +36,7 @@ export class DashboardComponent implements OnInit {
 
   // #docregion goto-detail
   gotoDetail(hero: Hero) {
-    let link = ['HeroDetail', { id: hero.id }];
+    let link = ['/detail', hero.id];
     this.router.navigate(link);
   }
   // #enddocregion goto-detail
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 96eb8aa93f..61edccb90e 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -1,11 +1,11 @@
 // #docplaster
 // #docregion
 // #docregion import-oninit, v2
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 // #enddocregion import-oninit
-// #docregion import-route-params
-import { RouteParams } from '@angular/router-deprecated';
-// #enddocregion import-route-params
+// #docregion import-activated-route
+import { ActivatedRoute } from '@angular/router';
+// #enddocregion import-activated-route
 
 import { Hero } from './hero';
 // #docregion import-hero-service
@@ -23,27 +23,36 @@ import { HeroService } from './hero.service';
 })
 // #enddocregion extract-template
 // #docregion implement
-export class HeroDetailComponent implements OnInit {
+export class HeroDetailComponent implements OnInit, OnDestroy {
   // #enddocregion implement
   hero: Hero;
+  sub: any;
 
   // #docregion ctor
   constructor(
     private heroService: HeroService,
-    private routeParams: RouteParams) {
+    private route: ActivatedRoute) {
   }
   // #enddocregion ctor
 
   // #docregion ng-oninit
   ngOnInit() {
     // #docregion get-id
-    let id = +this.routeParams.get('id');
+    this.sub = this.route.params.subscribe(params => {
+      let id = +params['id'];
+      this.heroService.getHero(id)
+        .then(hero => this.hero = hero);
+    });
     // #enddocregion get-id
-    this.heroService.getHero(id)
-      .then(hero => this.hero = hero);
   }
   // #enddocregion ng-oninit
 
+  // #docregion ng-ondestroy
+  ngOnDestroy() {
+    this.sub.unsubscribe();
+  }
+  // #enddocregion ng-ondestroy
+
   // #docregion go-back
   goBack() {
     window.history.back();
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
index cd43e03b86..c0dbd9c8e7 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router-deprecated';
+import { Router } from '@angular/router';
 
 import { Hero } from './hero';
 import { HeroService } from './hero.service';
@@ -36,7 +36,7 @@ export class HeroesComponent implements OnInit {
   onSelect(hero: Hero) { this.selectedHero = hero; }
 
   gotoDetail() {
-    this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+    this.router.navigate(['/detail', this.selectedHero.id]);
   }
   // #docregion heroes-component-renaming
 }
diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts
index ad256f0823..da35003df1 100644
--- a/public/docs/_examples/toh-5/ts/app/main.ts
+++ b/public/docs/_examples/toh-5/ts/app/main.ts
@@ -1,5 +1,9 @@
+// #docregion
 import { bootstrap }    from '@angular/platform-browser-dynamic';
 
 import { AppComponent } from './app.component';
+import { APP_ROUTER_PROVIDERS } from './app.routes';
 
-bootstrap(AppComponent);
+bootstrap(AppComponent, [
+  APP_ROUTER_PROVIDERS
+]);
diff --git a/public/docs/_examples/toh-5/ts/plnkr.json b/public/docs/_examples/toh-5/ts/plnkr.json
index 019630c28f..fbed287e3f 100644
--- a/public/docs/_examples/toh-5/ts/plnkr.json
+++ b/public/docs/_examples/toh-5/ts/plnkr.json
@@ -3,7 +3,7 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.[1,2].*"
+    "!**/*.[1,2,3].*"
   ],
   "tags": ["tutorial", "tour", "heroes", "router"]
 }
diff --git a/public/docs/_examples/toh-6/dart/.docsync.json b/public/docs/_examples/toh-6/dart/.docsync.json
new file mode 100644
index 0000000000..29f01f6648
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/.docsync.json
@@ -0,0 +1,5 @@
+{
+  "title": "Tour of Heroes: HTTP",
+  "docPart": "tutorial",
+  "docHref": "toh-pt6.html"
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/app_component.css b/public/docs/_examples/toh-6/dart/lib/app_component.css
new file mode 100644
index 0000000000..f4e8082ea1
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/app_component.css
@@ -0,0 +1,29 @@
+/* #docregion */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.router-link-active {
+  color: #039be5;
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/app_component.dart b/public/docs/_examples/toh-6/dart/lib/app_component.dart
new file mode 100644
index 0000000000..ecf2bf4f3c
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/app_component.dart
@@ -0,0 +1,45 @@
+// #docplaster
+// #docregion
+import 'package:angular2/core.dart';
+import 'package:angular2/router.dart';
+
+import 'package:angular2_tour_of_heroes/heroes_component.dart';
+import 'package:angular2_tour_of_heroes/hero_service.dart';
+import 'package:angular2_tour_of_heroes/dashboard_component.dart';
+// #docregion hero-detail-import
+import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
+// #enddocregion hero-detail-import
+
+@Component(
+    selector: 'my-app',
+    // #docregion template
+    template: '''
+      <h1>{{title}}</h1>
+      <nav>
+        <a [routerLink]="['Dashboard']">Dashboard</a>
+        <a [routerLink]="['Heroes']">Heroes</a>
+      </nav>
+      <router-outlet></router-outlet>''',
+    // #enddocregion template
+    // #docregion style-urls
+    styleUrls: const ['app_component.css'],
+    // #enddocregion style-urls
+    directives: const [ROUTER_DIRECTIVES],
+    providers: const [HeroService, ROUTER_PROVIDERS])
+@RouteConfig(const [
+  // #docregion dashboard-route
+  const Route(
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: DashboardComponent,
+      useAsDefault: true),
+  // #enddocregion dashboard-route
+  // #docregion hero-detail-route
+  const Route(
+      path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
+  // #enddocregion hero-detail-route
+  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
+])
+class AppComponent {
+  String title = 'Tour of Heroes';
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/dashboard_component.css b/public/docs/_examples/toh-6/dart/lib/dashboard_component.css
new file mode 100644
index 0000000000..f6263074f0
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/dashboard_component.css
@@ -0,0 +1,61 @@
+/* #docregion */
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+	padding: 20px;
+	text-align: center;
+	color: #eee;
+	max-height: 120px;
+	min-width: 120px;
+	background-color: #607D8B;
+	border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+	.module {
+	  font-size: 10px;
+	  max-height: 75px; }
+}
+@media (max-width: 1024px) {
+	.grid {
+	  margin: 0;
+	}
+	.module {
+	  min-width: 60px;
+	}
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart
new file mode 100644
index 0000000000..ff0fb8c0d1
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart
@@ -0,0 +1,47 @@
+// #docplaster
+// #docregion
+import 'dart:async';
+
+import 'package:angular2/core.dart';
+// #docregion import-router
+import 'package:angular2/router.dart';
+// #enddocregion import-router
+
+import 'hero.dart';
+import 'hero_service.dart';
+
+@Component(
+    selector: 'my-dashboard',
+    // #docregion template-url
+    templateUrl: 'dashboard_component.html',
+    // #enddocregion template-url
+    // #docregion css
+    styleUrls: const ['dashboard_component.css']
+    // #enddocregion css
+    )
+// #docregion component
+class DashboardComponent implements OnInit {
+  List<Hero> heroes;
+
+  // #docregion ctor
+  final Router _router;
+  final HeroService _heroService;
+
+  DashboardComponent(this._heroService, this._router);
+
+  // #enddocregion ctor
+
+  Future<Null> ngOnInit() async {
+    heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
+  }
+
+  // #docregion goto-detail
+  void gotoDetail(Hero hero) {
+    var link = [
+      'HeroDetail',
+      {'id': hero.id.toString()}
+    ];
+    _router.navigate(link);
+  }
+// #enddocregion goto-detail
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/dashboard_component.html b/public/docs/_examples/toh-6/dart/lib/dashboard_component.html
new file mode 100644
index 0000000000..7133c10ada
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/dashboard_component.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <!-- #docregion click -->
+  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4" >
+    <!-- #enddocregion click -->
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
diff --git a/public/docs/_examples/toh-6/dart/lib/hero.dart b/public/docs/_examples/toh-6/dart/lib/hero.dart
new file mode 100644
index 0000000000..bc9a33b8d9
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/hero.dart
@@ -0,0 +1,14 @@
+// #docregion
+class Hero {
+  final int id;
+  String name;
+
+  Hero(this.id, this.name);
+
+  factory Hero.fromJson(Map<String, dynamic> hero) =>
+    new Hero(_toInt(hero['id']), hero['name']);
+
+  Map toJson() => {'id': id, 'name': name};
+}
+
+int _toInt(id) => id is int ? id : int.parse(id);
diff --git a/public/docs/_examples/toh-6/dart/lib/hero_detail_component.css b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.css
new file mode 100644
index 0000000000..ab2437efd8
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.css
@@ -0,0 +1,30 @@
+/* #docregion */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer; cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc; 
+  cursor: auto;
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart
new file mode 100644
index 0000000000..39f9f531f5
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart
@@ -0,0 +1,61 @@
+// #docplaster
+// #docregion , v2
+import 'dart:async';
+import 'dart:html';
+
+// #docregion import-oninit
+import 'package:angular2/core.dart';
+// #enddocregion import-oninit
+// #docregion import-route-params
+import 'package:angular2/router.dart';
+// #enddocregion import-route-params
+
+import 'hero.dart';
+// #docregion import-hero-service
+import 'hero_service.dart';
+// #enddocregion import-hero-service
+
+// #docregion extract-template
+@Component(
+    selector: 'my-hero-detail',
+    // #docregion template-url
+    templateUrl: 'hero_detail_component.html',
+    // #enddocregion template-url, v2
+    styleUrls: const ['hero_detail_component.css']
+    // #docregion v2
+    )
+// #enddocregion extract-template
+// #docregion implement
+class HeroDetailComponent implements OnInit {
+  // #enddocregion implement
+  Hero hero;
+  // #docregion ctor
+  final HeroService _heroService;
+  final RouteParams _routeParams;
+
+  HeroDetailComponent(this._heroService, this._routeParams);
+  // #enddocregion ctor
+
+  // #docregion ng-oninit
+  Future<Null> ngOnInit() async {
+    // #docregion get-id
+    var idString = _routeParams.get('id');
+    var id = int.parse(idString, onError: (_) => null);
+    // #enddocregion get-id
+    if (id != null) hero = await (_heroService.getHero(id));
+  }
+  // #enddocregion ng-oninit
+
+  // #docregion save
+  Future<Null> save() async {
+    await _heroService.save(hero);
+    goBack();
+  }
+  // #enddocregion save
+
+  // #docregion go-back
+  void goBack() {
+    window.history.back();
+  }
+  // #enddocregion go-back
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/hero_detail_component.html b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.html
new file mode 100644
index 0000000000..d15546af74
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.html
@@ -0,0 +1,15 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<div *ngIf="hero != null">
+  <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>
+  <!-- #docregion save -->
+  <button (click)="save()">Save</button>
+  <!-- #enddocregion save -->
+</div>
diff --git a/public/docs/_examples/toh-6/dart/lib/hero_service.dart b/public/docs/_examples/toh-6/dart/lib/hero_service.dart
new file mode 100644
index 0000000000..7a15c6473f
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/hero_service.dart
@@ -0,0 +1,91 @@
+// #docregion
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:angular2/core.dart';
+import 'package:http/http.dart';
+
+import 'hero.dart';
+
+@Injectable()
+class HeroService {
+  // #docregion post
+  static final _headers = {'Content-Type': 'application/json'};
+  // #enddocregion post
+  // #docregion getHeroes
+  static const _heroesUrl = 'app/heroes'; // URL to web API
+
+  final Client _http;
+
+  HeroService(this._http);
+
+  Future<List<Hero>> getHeroes() async {
+    try {
+      final response = await _http.get(_heroesUrl);
+      final heroes = _extractData(response)
+          .map((value) => new Hero.fromJson(value))
+          .toList();
+      return heroes;
+      // #docregion catch
+    } catch (e) {
+      throw _handleError(e);
+    }
+    // #enddocregion catch
+  }
+
+  // #docregion extract-data
+  dynamic _extractData(Response resp) => JSON.decode(resp.body)['data'];
+  // #enddocregion extract-data, getHeroes
+
+  Future<Hero> getHero(int id) async =>
+      (await getHeroes()).firstWhere((hero) => hero.id == id);
+
+  // #docregion save
+  Future<Hero> save(dynamic heroOrName) =>
+      heroOrName is Hero ? _put(heroOrName) : _post(heroOrName);
+  // #enddocregion save
+
+  // #docregion handleError
+  Exception _handleError(dynamic e) {
+    print(e); // for demo purposes only
+    return new Exception('Server error; cause: $e');
+  }
+  // #enddocregion handleError
+
+  // #docregion post
+  Future<Hero> _post(String name) async {
+    try {
+      final response = await _http.post(_heroesUrl,
+          headers: _headers, body: JSON.encode({'name': name}));
+      return new Hero.fromJson(_extractData(response));
+    } catch (e) {
+      throw _handleError(e);
+    }
+  }
+  // #enddocregion post
+
+  // #docregion put
+  Future<Hero> _put(Hero hero) async {
+    try {
+      var url = '$_heroesUrl/${hero.id}';
+      final response =
+          await _http.put(url, headers: _headers, body: JSON.encode(hero));
+      return new Hero.fromJson(_extractData(response));
+    } catch (e) {
+      throw _handleError(e);
+    }
+  }
+  // #enddocregion put
+
+  // #docregion delete
+  Future<Null> delete(int id) async {
+    try {
+      var url = '$_heroesUrl/$id';
+      await _http.delete(url, headers: _headers);
+    } catch (e) {
+      throw _handleError(e);
+    }
+  }
+  // #enddocregion delete
+
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/heroes_component.css b/public/docs/_examples/toh-6/dart/lib/heroes_component.css
new file mode 100644
index 0000000000..35e45af98d
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/heroes_component.css
@@ -0,0 +1,59 @@
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/heroes_component.dart b/public/docs/_examples/toh-6/dart/lib/heroes_component.dart
new file mode 100644
index 0000000000..4cfc0c427e
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/heroes_component.dart
@@ -0,0 +1,69 @@
+// #docplaster
+// #docregion
+import 'dart:async';
+
+import 'package:angular2/core.dart';
+import 'package:angular2/router.dart';
+
+import 'hero.dart';
+import 'hero_detail_component.dart';
+import 'hero_service.dart';
+
+@Component(
+    selector: 'my-heroes',
+    templateUrl: 'heroes_component.html',
+    styleUrls: const ['heroes_component.css'],
+    directives: const [HeroDetailComponent])
+class HeroesComponent implements OnInit {
+  final Router _router;
+  final HeroService _heroService;
+  List<Hero> heroes;
+  Hero selectedHero;
+  // #docregion error
+  String errorMessage;
+  // #enddocregion error
+
+  HeroesComponent(this._heroService, this._router);
+
+  // #docregion addHero
+  Future<Null> addHero(String name) async {
+    name = name.trim();
+    if (name.isEmpty) return;
+    try {
+      heroes.add(await _heroService.save(name));
+    } catch (e) {
+      errorMessage = e.toString();
+    }
+  }
+  // #enddocregion addHero
+
+  // #docregion deleteHero
+  Future<Null> deleteHero(int id, event) async {
+    try {
+      event.stopPropagation();
+      await _heroService.delete(id);
+      heroes.removeWhere((hero) => hero.id == id);
+      if (selectedHero?.id == id) selectedHero = null;
+    } catch (e) {
+      errorMessage = e.toString();
+    }
+  }
+  // #enddocregion deleteHero
+
+  Future<Null> getHeroes() async {
+    heroes = await _heroService.getHeroes();
+  }
+
+  void ngOnInit() {
+    getHeroes();
+  }
+
+  void onSelect(Hero hero) {
+    selectedHero = hero;
+  }
+
+  Future<Null> gotoDetail() => _router.navigate([
+        'HeroDetail',
+        {'id': selectedHero.id.toString()}
+      ]);
+}
diff --git a/public/docs/_examples/toh-6/dart/lib/heroes_component.html b/public/docs/_examples/toh-6/dart/lib/heroes_component.html
new file mode 100644
index 0000000000..98f3db8442
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/heroes_component.html
@@ -0,0 +1,31 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<!-- #docregion add-and-error -->
+<div class="error" *ngIf="errorMessage != null">{{errorMessage}}</div>
+<div>
+  Name: <input #newHeroName />
+  <button (click)="addHero(newHeroName.value); newHeroName.value=''">
+    Add New Hero
+  </button>
+</div>
+<!-- #enddocregion add-and-error -->
+<ul class="heroes">
+  <li *ngFor="let hero of heroes"
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+    <!-- #docregion delete -->
+    <button class="delete-button" (click)="deleteHero(hero.id, $event)">x</button>
+    <!-- #enddocregion delete -->
+  </li>
+</ul>
+<!-- #docregion mini-detail -->
+<div *ngIf="selectedHero != null">
+  <h2>
+    <!-- #docregion pipe -->
+    {{selectedHero.name | uppercase}} is my hero
+    <!-- #enddocregion pipe -->
+  </h2>
+  <button (click)="gotoDetail()">View Details</button>
+</div>
diff --git a/public/docs/_examples/toh-6/dart/lib/in_memory_data_service.dart b/public/docs/_examples/toh-6/dart/lib/in_memory_data_service.dart
new file mode 100644
index 0000000000..86aad3de53
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/lib/in_memory_data_service.dart
@@ -0,0 +1,64 @@
+// #docregion
+import 'dart:async';
+import 'dart:convert';
+
+// #docregion init
+import 'package:angular2/core.dart';
+import 'package:http/http.dart';
+import 'package:http/testing.dart';
+
+import 'hero.dart';
+
+@Injectable()
+class InMemoryDataService extends MockClient {
+  static final _initialHeroes = [
+    {'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': 'Dynama2'},
+    {'id': 18, 'name': 'Dr IQ'},
+    {'id': 19, 'name': 'Magma'},
+    {'id': 20, 'name': 'Tornado'}
+  ];
+  // #enddocregion init
+
+  static final List<Hero> _heroesDb =
+      _initialHeroes.map((json) => new Hero.fromJson(json)).toList();
+  static int _nextId = 21;
+
+  static Future<Response> _handler(Request request) async {
+    var data;
+    switch (request.method) {
+      case 'GET':
+        data = _heroesDb;
+        break;
+      case 'POST':
+        var name = JSON.decode(request.body)['name'];
+        var newHero = new Hero(_nextId++, name);
+        _heroesDb.add(newHero);
+        data = newHero;
+        break;
+      case 'PUT':
+        var heroChanges = new Hero.fromJson(JSON.decode(request.body));
+        var targetHero = _heroesDb.firstWhere((h) => h.id == heroChanges.id);
+        targetHero.name = heroChanges.name;
+        data = targetHero;
+        break;
+      case 'DELETE':
+        var id = int.parse(request.url.pathSegments.last);
+        _heroesDb.removeWhere((hero) => hero.id == id);
+        // No data, so leave it as null.
+        break;
+      default:
+        throw 'Unimplemented HTTP method ${request.method}';
+    }
+    return new Response(JSON.encode({'data': data}), 200,
+        headers: {'content-type': 'application/json'});
+  }
+
+  InMemoryDataService() : super(_handler);
+  // #docregion init
+}
diff --git a/public/docs/_examples/toh-6/dart/pubspec.yaml b/public/docs/_examples/toh-6/dart/pubspec.yaml
new file mode 100644
index 0000000000..574758d902
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/pubspec.yaml
@@ -0,0 +1,28 @@
+# #docregion , additions
+name: angular2_tour_of_heroes
+  # #enddocregion additions
+description: Tour of Heroes
+version: 0.0.1
+environment:
+  sdk: '>=1.13.0 <2.0.0'
+  # #docregion additions
+dependencies:
+  angular2: 2.0.0-beta.17
+  # #enddocregion additions
+  browser: ^0.10.0
+  dart_to_js_script_rewriter: ^1.0.1
+  # #docregion additions
+  http: ^0.11.0
+transformers:
+- angular2:
+    # #enddocregion additions
+    platform_directives:
+    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
+    platform_pipes:
+    - 'package:angular2/common.dart#COMMON_PIPES'
+    # #docregion additions
+    entry_points: web/main.dart
+    resolved_identifiers:
+        BrowserClient: 'package:http/browser_client.dart'
+        Client: 'package:http/http.dart'
+- dart_to_js_script_rewriter
diff --git a/public/docs/_examples/toh-6/dart/web/index.html b/public/docs/_examples/toh-6/dart/web/index.html
new file mode 100644
index 0000000000..be8fb7b42e
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/web/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html>
+  <head>
+    <base href="/">
+    <title>Angular 2 Tour of Heroes</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
+
+    <script defer src="main.dart" type="application/dart"></script>
+    <script defer src="packages/browser/dart.js"></script>
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>
diff --git a/public/docs/_examples/toh-6/dart/web/main.dart b/public/docs/_examples/toh-6/dart/web/main.dart
new file mode 100644
index 0000000000..1075856c61
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/web/main.dart
@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion final
+// #docregion v1
+import 'package:angular2/core.dart';
+import 'package:angular2/platform/browser.dart';
+import 'package:angular2_tour_of_heroes/app_component.dart';
+// #enddocregion v1
+import 'package:http/http.dart';
+import 'package:angular2_tour_of_heroes/in_memory_data_service.dart';
+
+void main() {
+  bootstrap(AppComponent,
+      const [const Provider(Client, useClass: InMemoryDataService)]);
+}
+// #enddocregion final
+/*
+// #docregion v1
+import 'package:http/browser_client.dart';
+
+void main() {
+  bootstrap(AppComponent, [
+    provide(BrowserClient, useFactory: () => new BrowserClient(), deps: [])
+  ]);
+  // Simplify bootstrap provider list to [BrowserClient]
+  // once there is a fix for:
+  // https://github.com/angular/angular/issues/9673
+}
+// #enddocregion v1
+*/
diff --git a/public/docs/_examples/toh-6/dart/web/sample.css b/public/docs/_examples/toh-6/dart/web/sample.css
new file mode 100644
index 0000000000..6bbf5de8b7
--- /dev/null
+++ b/public/docs/_examples/toh-6/dart/web/sample.css
@@ -0,0 +1,7 @@
+/* #docregion */
+.error {color:red;}
+button.delete-button {
+  float:right;
+  background-color: gray !important;
+  color:white;
+}
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.css b/public/docs/_examples/toh-6/ts/app/app.component.css
index f4e8082ea1..071e665767 100644
--- a/public/docs/_examples/toh-6/ts/app/app.component.css
+++ b/public/docs/_examples/toh-6/ts/app/app.component.css
@@ -24,6 +24,6 @@ nav a:hover {
   color: #039be5;
   background-color: #CFD8DC;
 }
-nav a.router-link-active {
+nav a.active {
   color: #039be5;
 }
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts
index 22317d4403..2a1ff50ba3 100644
--- a/public/docs/_examples/toh-6/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.component.ts
@@ -1,12 +1,9 @@
 // #docplaster
 // #docregion
-import { Component } from '@angular/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { Component }          from '@angular/core';
+import { ROUTER_DIRECTIVES }  from '@angular/router';
 
-import { DashboardComponent }  from './dashboard.component';
-import { HeroesComponent }     from './heroes.component';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroService }         from './hero.service';
+import { HeroService }        from './hero.service';
 
 @Component({
   selector: 'my-app',
@@ -14,23 +11,17 @@ import { HeroService }         from './hero.service';
   template: `
     <h1>{{title}}</h1>
     <nav>
-      <a [routerLink]="['Dashboard']">Dashboard</a>
-      <a [routerLink]="['Heroes']">Heroes</a>
+      <a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
+      <a [routerLink]="['/heroes']" routerLinkActive="active">Heroes</a>
     </nav>
     <router-outlet></router-outlet>
   `,
   styleUrls: ['app/app.component.css'],
   directives: [ROUTER_DIRECTIVES],
   providers: [
-    ROUTER_PROVIDERS,
     HeroService,
   ]
 })
-@RouteConfig([
-  { path: '/dashboard',  name: 'Dashboard',  component: DashboardComponent, useAsDefault: true },
-  { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent },
-  { path: '/heroes',     name: 'Heroes',     component: HeroesComponent }
-])
 export class AppComponent {
   title = 'Tour of Heroes';
 }
diff --git a/public/docs/_examples/toh-6/ts/app/app.routes.ts b/public/docs/_examples/toh-6/ts/app/app.routes.ts
new file mode 100644
index 0000000000..b299102385
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.routes.ts
@@ -0,0 +1,30 @@
+// #docregion
+import { provideRouter, RouterConfig }  from '@angular/router';
+
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+export const routes: RouterConfig = [
+  {
+    path: '',
+    redirectTo: '/dashboard',
+    terminal: true
+  },
+  {
+    path: 'dashboard',
+    component: DashboardComponent
+  },
+  {
+    path: 'detail/:id',
+    component: HeroDetailComponent
+  },
+  {
+    path: 'heroes',
+    component: HeroesComponent
+  }
+];
+
+export const APP_ROUTER_PROVIDERS = [
+  provideRouter(routes)
+];
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
index 8ca1e3a2e2..08ffecc0ea 100644
--- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import { Router }           from '@angular/router-deprecated';
+import { Router }           from '@angular/router';
 
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
@@ -26,7 +26,7 @@ export class DashboardComponent implements OnInit {
   }
 
   gotoDetail(hero: Hero) {
-    let link = ['HeroDetail', { id: hero.id }];
+    let link = ['/detail', hero.id];
     this.router.navigate(link);
   }
 }
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
index 8da8978a08..85d722999e 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -1,9 +1,9 @@
 // #docplaster
 // #docregion, variables-imports
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, OnDestroy, Output } from '@angular/core';
 
 // #enddocregion variables-imports
-import { RouteParams } from '@angular/router-deprecated';
+import { ActivatedRoute } from '@angular/router';
 
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
@@ -14,31 +14,39 @@ import { HeroService } from './hero.service';
   styleUrls: ['app/hero-detail.component.css']
 })
 // #docregion variables-imports
-export class HeroDetailComponent implements OnInit {
+export class HeroDetailComponent implements OnInit, OnDestroy {
   @Input() hero: Hero;
   @Output() close = new EventEmitter();
   error: any;
+  sub: any;
   navigated = false; // true if navigated here
   // #enddocregion variables-imports
 
   constructor(
     private heroService: HeroService,
-    private routeParams: RouteParams) {
+    private route: ActivatedRoute) {
   }
 
   // #docregion ngOnInit
   ngOnInit() {
-    if (this.routeParams.get('id') !== null) {
-      let id = +this.routeParams.get('id');
-      this.navigated = true;
-      this.heroService.getHero(id)
-          .then(hero => this.hero = hero);
-    } else {
-      this.navigated = false;
-      this.hero = new Hero();
-    }
+    this.sub = this.route.params.subscribe(params => {
+      if (params['id'] !== undefined) {
+        let id = +params['id'];
+        this.navigated = true;
+        this.heroService.getHero(id)
+            .then(hero => this.hero = hero);
+      } else {
+        this.navigated = false;
+        this.hero = new Hero();
+      }
+    });
   }
   // #enddocregion ngOnInit
+
+  ngOnDestroy() {
+    this.sub.unsubscribe();
+  }
+
   // #docregion save
   save() {
     this.heroService
@@ -57,4 +65,3 @@ export class HeroDetailComponent implements OnInit {
   }
   // #enddocregion goBack
 }
-
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
index 1573b96be6..3bf618f5bd 100644
--- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
@@ -1,6 +1,6 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import { Router }            from '@angular/router-deprecated';
+import { Router }            from '@angular/router';
 
 import { Hero }                from './hero';
 import { HeroService }         from './hero.service';
@@ -68,6 +68,6 @@ export class HeroesComponent implements OnInit {
   }
 
   gotoDetail() {
-    this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+    this.router.navigate(['/detail', this.selectedHero.id]);
   }
 }
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
index 958b9a8c69..948e2ca5ba 100644
--- a/public/docs/_examples/toh-6/ts/app/main.ts
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -11,16 +11,21 @@ import { InMemoryDataService }               from './in-memory-data.service';
 import { bootstrap }      from '@angular/platform-browser-dynamic';
 import { HTTP_PROVIDERS } from '@angular/http';
 
-import { AppComponent }   from './app.component';
+import { AppComponent }         from './app.component';
+import { APP_ROUTER_PROVIDERS } from './app.routes';
 
 // #enddocregion v1, final
 /*
 // #docregion v1
-bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
+bootstrap(AppComponent, [
+  APP_ROUTER_PROVIDERS,
+  HTTP_PROVIDERS
+]);
 // #enddocregion v1
- */
+*/
 // #docregion final
 bootstrap(AppComponent, [
+    APP_ROUTER_PROVIDERS,
     HTTP_PROVIDERS,
     { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
     { provide: SEED_DATA, useClass: InMemoryDataService }      // in-mem server data
diff --git a/public/docs/_examples/user-input/dart/lib/app_component.dart b/public/docs/_examples/user-input/dart/lib/app_component.dart
index d86db43cb0..5f2c86f8d9 100644
--- a/public/docs/_examples/user-input/dart/lib/app_component.dart
+++ b/public/docs/_examples/user-input/dart/lib/app_component.dart
@@ -2,7 +2,7 @@
 import 'package:angular2/core.dart';
 
 import 'click_me_component.dart';
-import 'click_me_component_2.dart';
+import 'click_me2_component.dart';
 import 'keyup_components.dart';
 import 'little_tour_component.dart';
 import 'loop_back_component.dart';
@@ -12,7 +12,7 @@ import 'loop_back_component.dart';
     templateUrl: 'app_component.html',
     directives: const [
       ClickMeComponent,
-      ClickMeComponent2,
+      ClickMe2Component,
       KeyUpComponentV1,
       KeyUpComponentV2,
       KeyUpComponentV3,
diff --git a/public/docs/_examples/user-input/dart/lib/click_me2_component.dart b/public/docs/_examples/user-input/dart/lib/click_me2_component.dart
new file mode 100644
index 0000000000..3329a6692e
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/lib/click_me2_component.dart
@@ -0,0 +1,18 @@
+// #docregion
+import 'package:angular2/core.dart';
+
+@Component(
+    selector: 'click-me2',
+    template: '''
+      <button (click)="onClickMe2(\$event)">No! .. Click me!</button>
+      {{clickMessage}}''')
+class ClickMe2Component {
+  String clickMessage = '';
+  int _clicks = 1;
+
+  void onClickMe2(dynamic event) {
+    var evtMsg =
+        event != null ? ' Event target is ' + event.target.tagName : '';
+    clickMessage = ('Click #${_clicks++}. ${evtMsg}');
+  }
+}
diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component.dart b/public/docs/_examples/user-input/dart/lib/click_me_component.dart
index c1c7e19f93..c31d92e78b 100644
--- a/public/docs/_examples/user-input/dart/lib/click_me_component.dart
+++ b/public/docs/_examples/user-input/dart/lib/click_me_component.dart
@@ -1,3 +1,9 @@
+/* FOR DOCS ... MUST MATCH ClickMeComponent template
+// #docregion click-me-button
+  <button (click)="onClickMe()">Click me!</button>
+// #enddocregion click-me-button
+*/
+
 // #docregion
 import 'package:angular2/core.dart';
 
@@ -5,15 +11,12 @@ import 'package:angular2/core.dart';
 @Component(
     selector: 'click-me',
     template: '''
-    // #docregion click-me-button
-    <button (click)="onClickMe()">Click me!</button>
-    // #enddocregion click-me-button
-    {{clickMessage}}''')
+      <button (click)="onClickMe()">Click me!</button>
+      {{clickMessage}}''')
 class ClickMeComponent {
   String clickMessage = '';
 
-  onClickMe() {
+  void onClickMe() {
     clickMessage = 'You are my hero!';
   }
 }
-// #enddocregion click-me-component
diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart b/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart
deleted file mode 100644
index 8047b2280a..0000000000
--- a/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion
-import 'package:angular2/core.dart';
-
-@Component(
-    selector: 'click-me2',
-    template: '''<button (click)="onClickMe2(\$event)">No! .. Click me!</button>
-    {{clickMessage}}''')
-class ClickMeComponent2 {
-  String clickMessage = '';
-  int clicks = 1;
-
-  onClickMe2(dynamic event) {
-    var evtMsg =
-        event != null ? ' Event target is ' + event.target.tagName : '';
-    clickMessage = ('Click #${clicks++}. ${evtMsg}');
-  }
-}
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index 4064a86611..cc5948be7f 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -17,7 +17,7 @@
     "@angular/http": "2.0.0-rc.3",
     "@angular/platform-browser": "2.0.0-rc.3",
     "@angular/platform-browser-dynamic": "2.0.0-rc.3",
-    "@angular/router-deprecated": "2.0.0-rc.2",
+    "@angular/router": "3.0.0-alpha.8",
     "core-js": "^2.4.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.6",
diff --git a/public/docs/_examples/webpack/ts/src/vendor.ts b/public/docs/_examples/webpack/ts/src/vendor.ts
index 1a45c91d46..ede1e2717d 100644
--- a/public/docs/_examples/webpack/ts/src/vendor.ts
+++ b/public/docs/_examples/webpack/ts/src/vendor.ts
@@ -5,7 +5,7 @@ import '@angular/platform-browser-dynamic';
 import '@angular/core';
 import '@angular/common';
 import '@angular/http';
-import '@angular/router-deprecated';
+import '@angular/router';
 
 // RxJS
 import 'rxjs';
diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json
index 7d25438019..eff9a7e77e 100644
--- a/public/docs/dart/latest/guide/_data.json
+++ b/public/docs/dart/latest/guide/_data.json
@@ -73,6 +73,12 @@
     "intro": "Learn how to apply CSS styles to components."
   },
 
+  "glossary": {
+    "title": "Glossary",
+    "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
+    "basics": true
+  },
+
   "security": {
     "title": "Security",
     "intro": "Prevent security vulnerabilities"
diff --git a/public/docs/dart/latest/tutorial/toh-pt6.jade b/public/docs/dart/latest/tutorial/toh-pt6.jade
index 6778b6af28..694975a368 100644
--- a/public/docs/dart/latest/tutorial/toh-pt6.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt6.jade
@@ -1 +1,141 @@
-!= partial("../../../_includes/_ts-temp")
+extends ../../../ts/latest/tutorial/toh-pt6.jade
+
+block includes
+  include ../_util-fns
+  - var _Http = 'BrowserClient';
+  - var _Angular_Http = 'Dart <code>BrowserClient</code>'
+  - var _httpUrl = 'https://pub.dartlang.org/packages/http'
+  - var _Angular_http_library = 'Dart <a href="' + _httpUrl + '"><b>http</b></a> package'
+  - var _HTTP_PROVIDERS = 'BrowserClient'
+  - var _JSON_stringify = 'JSON.encode'
+
+block start-server-and-watch
+  :marked
+    ### Keep the app compiling and running
+    Open a terminal/console window.
+    Start the Dart compiler, watch for changes, and start our server by entering the command:
+
+  code-example(language="bash").
+      pub serve
+ 
+block http-library
+  :marked
+    We'll be using the !{_Angular_http_library}'s 
+    `BrowserClient` class to communicate with a server.
+
+    ### Pubspec updates
+    
+    We need to add a package dependency for the !{_Angular_http_library}.
+
+    We also need to add a `resolved_identifiers` entry, to inform the [angular2
+    transformer][ng2x] that we'll be using `BrowserClient`. (For an explanation of why
+    this extra configuration is needed, see the [HTTP client chapter][guide-http].) We'll
+    also need to use `Client` from http, so let's add that now as well.
+
+    Update `pubspec.yaml` to look like this (additions are highlighted):
+
+    [guide-http]: ../guide/server-communication.html#!#http-providers
+    [ng2x]: https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer
+
+  - var stylePattern = { pnk: /(http.*|resolved_identifiers:|Browser.*|Client.*)/gm };
+  +makeExcerpt('pubspec.yaml', 'additions', null, stylePattern)
+
+block http-providers
+  :marked
+    Before our app can use `#{_Http}`, we have to register it as a service provider.
+
+block backend
+  :marked
+    We want to replace `BrowserClient`, the service that talks to the remote server,
+    with the in-memory web API service. 
+    Our in-memory web API service, shown below, is implemented using the
+    `http` library `MockClient` class.
+    All `http` client implementations share a common `Client` interface, so
+    we'll have our app use the `Client` type so that we can freely switch between
+    implementations.
+
+block dont-be-distracted-by-backend-subst
+  //- N/A
+
+block get-heroes-details
+  :marked
+    To get the list of heroes, we first make an asynchronous call to
+    `http.get()`. Then we use the `_extractData` helper method to decode the
+    response payload (`body`).
+
+block hero-detail-comp-extra-imports-and-vars
+  //- N/A
+
+block hero-detail-comp-updates
+  :marked
+    ### Edit in the *HeroDetailComponent*
+
+    We already have `HeroDetailComponent` for viewing details about a specific hero. 
+    Supporting edit functionality is a natural extension of the detail view,
+    so we are able to reuse `HeroDetailComponent` with a few tweaks.
+
+block hero-detail-comp-save-and-goback
+  //- N/A
+
+block add-new-hero-via-detail-comp
+  //- N/A
+
+block heroes-comp-directives
+  //- N/A
+
+block heroes-comp-add
+  //- N/A
+
+block review
+  //- Not showing animated gif due to differences between TS and Dart implementations.
+
+block filetree
+  .filetree
+    .file angular2-tour-of-heroes
+    .children
+      .file lib
+      .children
+        .file app_component.dart
+        .file app_component.css
+        .file dashboard_component.css
+        .file dashboard_component.html
+        .file dashboard_component.dart
+        .file hero.dart
+        .file hero_detail_component.css
+        .file hero_detail_component.html
+        .file hero_detail_component.dart
+        .file hero_service.dart
+        .file heroes_component.css
+        .file heroes_component.html
+        .file heroes_component.dart
+        .file main.dart
+        .file in_memory_data_service.dart (new)
+      .file web
+      .children
+        .file main.dart
+        .file index.html
+        .file sample.css (new)
+        .file styles.css
+      .file pubspec.yaml
+
+block file-summary
+  +makeTabs(
+    `toh-6/dart/lib/hero.dart,
+     toh-6/dart/lib/hero_detail_component.dart,
+     toh-6/dart/lib/hero_detail_component.html,
+     toh-6/dart/lib/hero_service.dart,
+     toh-6/dart/lib/heroes_component.dart,
+     toh-6/dart/web/index.html,
+     toh-6/dart/web/main.dart,
+     toh-6/dart/web/sample.css`,
+    `,,,,,,final,`,
+    `lib/hero.dart,
+     lib/hero_detail_component.dart,
+     lib/hero_detail_component.html,
+     lib/hero_service.dart,
+     lib/heroes_component.dart,
+     web/index.html,
+     web/main.dart,
+     web/sample.css`)
+
+  +makeExample('pubspec.yaml')
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
index 93e3a9fb01..e7af4222b0 100644
--- a/public/docs/js/latest/cookbook/ts-to-js.jade
+++ b/public/docs/js/latest/cookbook/ts-to-js.jade
@@ -222,10 +222,11 @@ table(width="100%")
 
         Most Angular 2 classes have one or more TypeScript *decorators*
         attached to provide configuration and metadata. For example,
-        a component must have a [`@Component`](../api/core/Component-decorator.html) decorator.     
+        a component must have a [`@Component`](../api/core/index/Component-decorator.html) decorator.
         
         大部分Angular 2中的类都会附加一个或多个TypeScript*装饰器*，用来提供配置和元数据。比如组件必须要有一个[`@Component`](../api/core/index/Component-decorator.html)装饰器。
         
+
       +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." )
 
     td
@@ -242,7 +243,7 @@ table(width="100%")
         数组里的每一个条目都对应一个TypeScript装饰器。
 
         In the following example, we create a new instance of `Component` that corresponds
-        to the [`@Component`](../api/core/Component-decorator.html) TypeScript decorator.
+        to the [`@Component`](../api/core/index/Component-decorator.html) TypeScript decorator.
         
         在下面的例子中，我们新建了一个`Component`的新实例，与[`@Component`](../api/core/index/Component-decorator.html)TypeScript装饰器相对应。
 
@@ -356,8 +357,8 @@ table(width="100%")
         在TypeScript里，属性装饰器经常被用来为组件和指令提供额外的元数据。
 
         For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), 
-        we use [`@Input`](../api/core/Input-var.html)
-        and [`@Output`](../api/core/Output-var.html) property decorators.
+        we use [`@Input`](../api/core/index/Input-var.html)
+        and [`@Output`](../api/core/index/Output-var.html) property decorators.
         They may optionally specify input and output binding names if we want them to be
         different from the class property names.
         
@@ -497,10 +498,10 @@ table(width="100%")
 
         We can attach additional decorators to constructor parameters
         to qualify the injection behavior. We can mark
-        optional dependencies with the [`@Optional`](../api/core/Optional-var.html),
-        inject host element attributes with [`@Attribute`](../api/core/Attribute-var.html),
-        inject content child queries with [`@Query`](../api/core/Query-var.html)
-        and inject view child queries with [`@ViewQuery`](../api/core/ViewQuery-var.html).
+        optional dependencies with the [`@Optional`](../api/core/index/Optional-var.html),
+        inject host element attributes with [`@Attribute`](../api/core/index/Attribute-var.html),
+        inject content child queries with [`@Query`](../api/core/index/Query-var.html)
+        and inject view child queries with [`@ViewQuery`](../api/core/index/ViewQuery-var.html).
         
         我们可以往构造函数中附加额外的装饰器来调整注入行为。比如使用[`@Optional`](../api/core/index/Optional-var.html)来标记依赖是可选的，
         用[`@Attribute`](../api/core/index/Attribute-var.html)来注入宿主元素的属性(Attribute)，
@@ -533,8 +534,8 @@ table(width="100%")
 
       :marked
         We can apply other additional parameter decorators such as
-        [`@Host`](../api/core/Host-var.html) and
-        [`@SkipSelf`](../api/core/SkipSelf-var.html) in the same way -
+        [`@Host`](../api/core/index/Host-var.html) and
+        [`@SkipSelf`](../api/core/index/SkipSelf-var.html) in the same way -
         by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
         parameters array.
         
@@ -565,9 +566,9 @@ table(width="100%")
         ### `Host`(宿主)装饰器
 
         We can use host property decorators to bind a host element to a component or directive.
-        The [`@HostBinding`](../api/core/HostBinding-var.html) decorator
+        The [`@HostBinding`](../api/core/index/HostBinding-var.html) decorator
         binds host element properties to component data properties. 
-        The [`@HostListener`](../api/core/HostListener-var.html) decorator binds
+        The [`@HostListener`](../api/core/index/HostListener-var.html) decorator bimds
         host element events to component event handlers.
         
         我们可以使用宿主属性装饰器来把宿主元素绑定到组件或指令。
@@ -620,8 +621,8 @@ table(width="100%")
         
         有好几个属性装饰器可以用来查询组件或指令的各级子节点。
         
-        The [`@ViewChild`](../api/core/ViewChild-var.html) and 
-        [`@ViewChildren`](../api/core/ViewChildren-var.html) property decorators
+        The [`@ViewChild`](../api/core/index/ViewChild-var.html) and
+        [`@ViewChildren`](../api/core/index/ViewChildren-var.html) property decorators
         allow a component to query instances of other components that are used in
         its view.
         
@@ -633,8 +634,8 @@ table(width="100%")
       +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
 
       :marked
-        The [`@ContentChild`](../api/core/ContentChild-var.html) and
-        [`@ContentChildren`](../api/core/ContentChildren-var.html) property decorators
+        The [`@ContentChild`](../api/core/index/ContentChild-var.html) and
+        [`@ContentChildren`](../api/core/index/ContentChildren-var.html) property decorators
         allow a component to query instances of other components that have been projected
         into its view from elsewhere.
         
diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json
index 567324b649..1e0d9aa221 100644
--- a/public/docs/js/latest/guide/_data.json
+++ b/public/docs/js/latest/guide/_data.json
@@ -73,6 +73,12 @@
     "intro": "Learn how to apply CSS styles to components."
   },
 
+  "glossary": {
+    "title": "Glossary",
+    "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
+    "basics": true
+  },
+
   "hierarchical-dependency-injection": {
     "title": "Hierarchical Dependency Injectors",
     "navTitle": "Hierarchical Injectors",
diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
index 3ddf9f4a2b..94d997b8bb 100644
--- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
+++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
@@ -722,10 +722,10 @@ table(width="100%")
       +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." )
       :marked
         In Angular&nbsp;2, the `ngSwitch` directive works similarly.
-        It displays an element whose `*ngSwitchWhen` matches the current `ngSwitch` expression value.
+        It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.
 
         在Angular 2中，`ngSwitch`指令的工作方式与此类似。
-        它会显示那个与`ngSwitch`表达式的当前值匹配的那个`*ngSwitchWhen`所在的元素。
+        它会显示那个与`ngSwitch`表达式的当前值匹配的那个`*ngSwitchCase`所在的元素。
 
         In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
         and we see the `*ngSwitchDefault` paragraph, "Please enter ...".
@@ -739,9 +739,9 @@ table(width="100%")
         如果该方法返回`true`，我们就会看到“Excellent choice!”。
         如果该方法返回`false`，我们就会看到“No movie, sorry!”。
 
-        The (*) before `ngSwitchWhen` and `ngSwitchDefault` is required in this example.
+        The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example.
 
-        在这个例子中，`ngSwitchWhen`和`ngSwitchDefault`前面的星号(*)是必须的。
+        在这个例子中，`ngSwitchCase`和`ngSwitchDefault`前面的星号(*)是必须的。
 
         For more information on the ngSwitch directive see [Template Syntax](../guide/template-syntax.html#ngSwitch).
 
diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json
index c2e1ccbfa4..07277ad84c 100644
--- a/public/docs/ts/latest/guide/_data.json
+++ b/public/docs/ts/latest/guide/_data.json
@@ -86,6 +86,12 @@
     "intro": "学习如何给组件应用CSS样式。"
   },
 
+  "glossary": {
+    "title": "Glossary",
+    "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
+    "basics": true
+  },
+
   "hierarchical-dependency-injection": {
     "title": "多级依赖注入器",
     "navTitle": "多级注入器",
diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade
index 9578809e5f..0793559c9d 100644
--- a/public/docs/ts/latest/guide/animations.jade
+++ b/public/docs/ts/latest/guide/animations.jade
@@ -107,7 +107,7 @@ figure
 :marked
   With these we can now define an *animation trigger* called `heroState` in the component
   metadata. It has animated transitions between two states: `active` and `inactive`. When a
-  hero is active, we display a the element in slightly larger size and lighter color.
+  hero is active, we display the element in a slightly larger size and lighter color.
 
   通过这些，可以在组件元数据中定义一个名叫`heroState`的*动画触发器*。它在两个状态`active`和`inactive`之间进行转场。
   当英雄处于激活状态时，它会把该元素显示得稍微大一点、亮一点。
diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade
index ae10bd72e4..437c22dcbb 100644
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@@ -727,10 +727,10 @@ figure
 +makeExample('architecture/ts/app/logger.service.ts', 'class', 'app/logger.service.ts (只有类)')(format=".")
 :marked
   Here's a `HeroService` that fetches heroes and returns them in a resolved [promise](http://exploringjs.com/es6/ch_promises.html). 
-  The `HeroService` depends on the `LoggerService` and another `BackendService` that handles the server communication grunt work.
+  The `HeroService` depends on the `Logger` service and another `BackendService` that handles the server communication grunt work.
   
   下面是`HeroService`类，用于获取英雄数据，并通过一个已解析的[承诺Promise](http://exploringjs.com/es6/ch_promises.html)返回它们。
-  `HeroService`还依赖于`LoggerService`和另一个用来处理服务器通讯工作的`BackendService`。
+  `HeroService`还依赖于`Logger`服务和另一个用来处理服务器通讯工作的`BackendService`服务。
   
 +makeExample('architecture/ts/app/hero.service.ts', 'class', 'app/hero.service.ts (只有类)')(format=".")
 :marked
diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade
index 8385384ee7..3ff036869c 100644
--- a/public/docs/ts/latest/guide/attribute-directives.jade
+++ b/public/docs/ts/latest/guide/attribute-directives.jade
@@ -108,7 +108,8 @@ include ../_quickstart_repo
   Create the following source file in the indicated folder with the given code:
   
   在指定的文件夹下创建下列源码文件：
-+makeExample('attribute-directives/ts/app/highlight.directive.1.ts', null, 'app/highlight.directive.ts')
+  
++makeExample('app/highlight.directive.1.ts')
 
 block highlight-directive-1
   :marked
@@ -165,7 +166,7 @@ block highlight-directive-1
     
     我们需要一个自己的前缀，最好短点儿，目前用的这个`my`前缀就不错。
 p
-  | After the `@Directive` metadata comes the directive's controller class, which contains the logic for the directive. 
+  | After the #[code @Directive] metadata comes the directive's controller class, which contains the logic for the directive. 
   +ifDocsFor('ts')
     | We export `HighlightDirective` to make it accessible to other components.
 p
@@ -270,6 +271,7 @@ figure.image-display
 a#respond-to-user
 :marked
   ## Respond to user action
+  
   ## 响应用户的操作
 
   We are not satisfied to simply set an element color.
@@ -283,20 +285,23 @@ a#respond-to-user
   We'll need to
   
   我们需要：
+  
   1. detect when the user hovers into and out of the element,
   1. 检测用户的鼠标啥时候进入和离开这个元素。
   2. respond to those actions by setting and clearing the highlight color, respectively.
   2. 通过设置和清除高亮色来响应这些操作。
   
-  We use the `@HostListener` decorator on a method which is called when the event is raised.
+  We apply the `@HostListener` !{_decorator} to methods which are called when an event is raised.
 
   从事件检测开始吧。
   把`host`属性加入指令的元数据中，并给它一个配置对象，用来指定两个鼠标事件，并在它们被触发时，调用指令中的方法：
+  
 +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','host')(format=".")
 
 .l-sub-section
+  
   :marked
-    The `@HostListener` decorator refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
+    The `@HostListener` !{_decorator} refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
     
     `@HostListener`装饰器引用的是我们这个属性型指令的宿主元素，在这个例子中就是`<p>`。
      
@@ -312,14 +317,17 @@ a#respond-to-user
     1. We'd be talking to DOM API directly which, we learned, is something to avoid.
     1. 必须直接和DOM API打交道，但正如我们学过的那样，应该避免这样做。
 
-    Let's roll with the `@HostListener` decorator. 
+    Let's roll with the `@HostListener` !{_decorator}. 
     
     我们还是围绕`@HostListener`装饰器来吧。
+    
 :marked
   Now we implement the two mouse event handlers:
   
   现在，我们实现那两个鼠标事件处理器：
+  
 +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','mouse-methods')(format=".")
+
 :marked
   Notice that they delegate to a helper method that sets the color via a private local variable, `#{_priv}el`.
   We revise the constructor to capture the `ElementRef.nativeElement` in this variable.
@@ -328,11 +336,14 @@ a#respond-to-user
   我们要修改构造函数，来把`ElementRef.nativeElement`存进这个私有变量。
 
 +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','ctor')(format=".")
+
 :marked
   Here's the updated directive:
   
   这里是更新过的指令：
-+makeExample('attribute-directives/ts/app/highlight.directive.2.ts',null, 'app/highlight.directive.ts')
+  
++makeExample('app/highlight.directive.2.ts')
+
 :marked
   We run the app and confirm that the background color appears as we move the mouse over the `p` and
   disappears as we move out.
@@ -361,7 +372,8 @@ a#bindings
   
   这里是该类的最终版：
   
-+makeExample('attribute-directives/ts/app/highlight.directive.ts', 'class-1', 'app/highlight.directive.ts (class only)')
++makeExcerpt('app/highlight.directive.ts', 'class')
+
 a#input
 :marked
   The new `highlightColor` property is called an *input* property because data flows from the binding expression into our directive.
@@ -369,7 +381,9 @@ a#input
 
   新的`highlightColor`属性被称为“输入”属性，这是因为数据流是从绑定表达式到这个指令的。
   注意，在定义这个属性的时候，我们调用了`@Input()`#{_decoratorCn}。
-+makeExample('attribute-directives/ts/app/highlight.directive.ts', 'color')
+  
++makeExcerpt('app/highlight.directive.ts', 'color')
+
 :marked
   `@Input` adds metadata to the class that makes the `highlightColor` property available for 
   property binding under the `myHighlight` alias. 
@@ -393,7 +407,7 @@ a#input
     
     我们可以通过把属性名改为`myHighlight`来解决这个矛盾，就像这样：
 
-  +makeExample('attribute-directives/ts/app/highlight.directive.ts', 'highlight')
+  +makeExcerpt('app/highlight.directive.ts', 'highlight', '')
   :marked
     Maybe we don't want that property name inside the directive perhaps because it 
     doesn't express our intention well. 
@@ -402,7 +416,9 @@ a#input
     
     但我们可能在指令中不想要那样一个属性名，因为它不能很好的表示我们的意图。
     可以通过把`myHighlight`传给`@Input`#{_decoratorCn}来把这个属性名作为`highlightColor`属性的别名。
-  +makeExample('attribute-directives/ts/app/highlight.directive.ts', 'color')
+    
+  +makeExcerpt('app/highlight.directive.ts', 'color', '')
+  
 :marked
   Now that we're getting the highlight color as an input, we modify the `onMouseEnter()` method to use
   it instead of the hard-coded color name.
@@ -411,7 +427,9 @@ a#input
   
   现在，通过输入型属性得到了高亮的颜色，然后修改`onMouseEnter()`来使用它代替硬编码的那个颜色名。
   我们还把红色定义为默认颜色，以便在用户忘了绑定颜色时作为备用。
-+makeExample('attribute-directives/ts/app/highlight.directive.ts', 'mouse-enter')
+  
++makeExcerpt('attribute-directives/ts/app/highlight.directive.ts', 'mouse-enter', '')
+
 :marked
   Now we'll update our `AppComponent` template to let 
   users pick the highlight color and bind their choice to our directive.
@@ -422,7 +440,7 @@ a#input
   
   这里是更新后的模板：
 
-+makeExample('attribute-directives/ts/app/app.component.html', 'v2')
++makeExcerpt('attribute-directives/ts/app/app.component.html', 'v2', '')
 
 .l-sub-section
   :marked
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index c2fe895c5d..86abbfbd51 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -1172,7 +1172,7 @@ block what-should-we-use-as-token
 // end Typescript only
 
 //- FIXME simplify once APIs are defined for Dart.
-- var opaquetoken = _docsFor == 'dart' ? '<b>OpaqueToken</b>' : '<a href="../api/core/OpaqueToken-class.html"><b>OpaqueToken</b></a>'
+- var opaquetoken = _docsFor == 'dart' ? '<b>OpaqueToken</b>' : '<a href="../api/core/index/OpaqueToken-class.html"><b>OpaqueToken</b></a>'
 :marked
   ### OpaqueToken
 
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index b44136e48e..c5fe5af688 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -2,11 +2,13 @@ include ../_util-fns
 
 .alert.is-important
   :marked
-    This guide is using the new forms API. 
+    This guide is using the new forms API. To use this API, you must opt in by adding special
+    providers to your bootstrap file (see the Bootstrap seection below).
     
     这份指南使用新的表单API。
     
-    The old forms API is deprecated, but we still maintain a separate version of the guide using the deprecated forms API <a href='/docs/ts/latest/guide/forms-deprecated.html'>here</a>.
+    The old forms API is deprecated, but we still maintain a separate version of the guide using
+    the deprecated forms API <a href='/docs/ts/latest/guide/forms-deprecated.html'>here</a>.
     
     旧的表单API已经废弃了，但是在本指南中仍然维护着一个独立的版本，它使用已废弃的表单API，参见<a href='/docs/ts/latest/guide/forms-deprecated.html'>这里</a>。
 
@@ -883,7 +885,7 @@ figure.image-display
 .l-sub-section
   :marked
     Why "ngModel"? 
-    A directive's [exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs) property 
+    A directive's [exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs-anchor) property
     tells Angular how to link the reference variable to the directive.
     We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
     
diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade
index a052341e31..f7a6238fd3 100644
--- a/public/docs/ts/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade
@@ -657,7 +657,7 @@ figure.image-display
 +makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'ng-on-changes', 'OnChangesComponent (ngOnChanges)')(format=".")
 :marked
   The `ngOnChanges` method takes an object that maps each changed property name to a 
-  [SimpleChange](../api/core/SimpleChange-class.html) object with the current and previous property values.
+  [SimpleChange](../api/core/index/SimpleChange-class.html) object with the current and previous property values.
   We iterate over the changed properties and log them.
   
   `ngOnChanges`方法获取了一个对象，它把每个发生变化的属性名都映射到了一个[SimpleChange](../api/core/index/SimpleChange-class.html)对象，
@@ -754,7 +754,7 @@ figure.image-display
 .l-sub-section
   :marked
     We also see that the `ngOnChanges` method is called in contradiction of the 
-    [incorrect API documentation](../api/core/DoCheck-interface.html).
+    [incorrect API documentation](../api/core/index/DoCheck-class.html).
 
     我们还看到，`ngOnChanges`方法的调用方式与[API文档](../api/core/index/DoCheck-interface.html)中是不一样的，这是因为API文档过时了。
     (译注：这是经过与官方开发组沟通得到的消息，由于代码快速迭代，因此API文档现在的更新不够及时，将来会进行一次系统的梳理和更正)
@@ -778,7 +778,7 @@ figure.image-display
 :marked
   The following hooks take action based on changing values *within the child view* 
   which we can only reach by querying for the child view via the property decorated with 
-  [@ViewChild](../api/core/ViewChild-var.html). 
+  [@ViewChild](../api/core/index/ViewChild-var.html).
   
   下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](../api/core/index/ViewChild-var.html)装饰器的属性来访问子视图。
 
@@ -907,7 +907,7 @@ figure.image-display
   
   The following *AfterContent* hooks take action based on changing values in a  *content child*
   which we can only reach by querying for it via the property decorated with 
-  [@ContentChild](../api/core/ContentChild-var.html). 
+  [@ContentChild](../api/core/index/ContentChild-var.html).
   
   下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](../api/core/index/ContentChild-var.html)装饰器的属性来查询到“子级内容”。
 
diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade
index 0f8148af7a..5bef166edc 100644
--- a/public/docs/ts/latest/guide/pipes.jade
+++ b/public/docs/ts/latest/guide/pipes.jade
@@ -402,7 +402,7 @@ figure.image-display
   More often we don't know when the data have changed,
   especially in applications that mutate data in many ways,
   perhaps in application locations far away.
-  A component is such an application usually can't know about those changes.
+  A component in such an application usually can't know about those changes.
   Moreover, it's unwise to distort our component design to accommodate a pipe.
   We strive as much as possible to keep the component class independent of the HTML.
   The component should be unaware of pipes.
diff --git a/public/docs/ts/latest/guide/router-deprecated.jade b/public/docs/ts/latest/guide/router-deprecated.jade
index 5e34f2fb1c..d55523a082 100644
--- a/public/docs/ts/latest/guide/router-deprecated.jade
+++ b/public/docs/ts/latest/guide/router-deprecated.jade
@@ -892,7 +892,7 @@ code-example(format="").
   ## Router Lifecycle Hooks
 
   Angular components have [lifecycle hooks](lifecycle-hooks.html). For example, Angular calls the hook methods of the
-  [OnInit](../api/core/OnInit-interface.html) and [OnDestroy](../api/core/OnDestroy-interface.html)
+  [OnInit](../api/core/index/OnInit-class.html) and [OnDestroy](../api/core/index/OnDestroy-class.html)
   interfaces when it creates and destroys components.
 
   The router also has hooks for *its* lifecycle such as
@@ -1369,8 +1369,8 @@ code-example(format="." language="bash").
   How do we ensure that happens if not in the constructor?
 
   Angular detects when a component has certain lifecycle methods like
-  [ngOnInit](../api/core/OnInit-interface.html) and
-  [ngOnDestroy](../api/core/OnDestroy-interface.html) and calls
+  [ngOnInit](../api/core/index/OnInit-class.html) and
+  [ngOnDestroy](../api/core/index/OnDestroy-class.html) and calls
   them
   at the appropriate moment.
 
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index a9dab49dc0..66c88998ab 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -413,9 +413,9 @@ table
       p <code><i>路由组件</i></code>
 
     td
-      p An Angular component with a *RouterOutlet* that displays views based on router navigations.
+      p An Angular component with a <code>RouterOutlet</code> that displays views based on router navigations.
 
-      p 一个带有*RouterOutlet*的Angular组件，它根据路由器的导航来显示相应的视图。
+      p 一个带有<code>RouterOutlet</code>的Angular组件，它根据路由器的导航来显示相应的视图。
 
 :marked
   We've barely touched the surface of the router and its capabilities.
@@ -1996,7 +1996,7 @@ h2#guards 路由守卫
   守卫可能会向用户问一个问题、把更改保存到服务器，或者获取新数据，而这些都是异步操作。
 
   Accordingly, a routing guard can return an `Observable<boolean>` and the
-  router will wait for the observable to resolve to `true` or `false.
+  router will wait for the observable to resolve to `true` or `false`.
 
   因此，路由的守卫可以返回一个`Observable<boolean>`，并且路由器会等待这个可观察对象被解析为`true`或`false`。
 
@@ -2907,8 +2907,8 @@ code-example(format="." language="bash").
   然而我们还是需要该类的实例在创建完之后尽快从`HeroService`中获取英雄数据。如果不能放在构造函数中又该怎么办？
 
   Angular detects when a component has certain lifecycle methods like
-  [ngOnInit](../api/core/OnInit-interface.html) and
-  [ngOnDestroy](../api/core/OnDestroy-interface.html) and calls
+  [ngOnInit](../api/core/index/OnInit-class.html) and
+  [ngOnDestroy](../api/core/index/OnDestroy-class.html) and calls
   them
   at the appropriate moment.
 
@@ -3079,7 +3079,7 @@ code-example(format=".", language="bash").
 .l-sub-section
 
   :marked
-    Learn about the [APP_BASE_HREF](../api/router/APP_BASE_HREF-let.html)
+    Learn about the [APP_BASE_HREF](../api/common/index/APP_BASE_HREF-let.html)
     in the API Guide.
 
     你可以到API指南中学习关于[APP_BASE_HREF](../api/router/APP_BASE_HREF-let.html)的更多知识。
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index a82c6ab0c0..698d21761c 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -147,9 +147,10 @@ block system-config-of-http
       
       当我们从`@angular/http`模块中导入服务时，SystemJS知道该如何从!{_Angular_http_libraryCn}中加载它们，这是因为我们已经在`system.config`文件中注册过这个模块名。
 :marked
-    Before we can use the `#{_Http}` client , we'll have to register it as a service provider with the Dependency Injection system.
+  Before we can use the `#{_Http}` client , we'll have to register it as a service provider with the Dependency Injection system.
     
-    要想使用`#{_Http}`客户端，我们得先通过依赖注入系统把它注册成一个服务供应商。
+  要想使用`#{_Http}`客户端，我们得先通过依赖注入系统把它注册成一个服务供应商。
+  
 .l-sub-section
   :marked
     Learn about providers in the [Dependency Injection](dependency-injection.html) chapter.
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index daff04baf1..cf8d731227 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -2028,7 +2028,7 @@ a(href="#toc") 回到顶部
 
 .s-rule.do
   :marked
-    **Do** use [`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) and [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html) instead of the `inputs` and `outputs` properties of the [`@Directive`](https://angular.io/docs/ts/latest/api/core/Directive-decorator.html) and [`@Component`](https://angular.io/docs/ts/latest/api/core/Component-decorator.html) decorators:
+    **Do** use [`@Input`](https://angular.io/docs/ts/latest/api/core/index/Input-var.html) and [`@Output`](https://angular.io/docs/ts/latest/api/core/index/Output-var.html) instead of the `inputs` and `outputs` properties of the [`@Directive`](https://angular.io/docs/ts/latest/api/core/index/Directive-decorator.html) and [`@Component`](https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html) decorators:
     
     **坚持**使用[`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html)和[`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html), 而非[`@Directive`](https://angular.io/docs/ts/latest/api/core/Directive-decorator.html) 和 [`@Component`](https://angular.io/docs/ts/latest/api/core/Component-decorator.html) 装饰器里面的`inputs`和`outputs`属性。
 
@@ -2046,7 +2046,7 @@ a(href="#toc") 回到顶部
 
 .s-why
   :marked
-    **Why?** If we ever need to rename the property or event name associated to [`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) or [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html) we can modify it on a single place.
+    **Why?** If we ever need to rename the property or event name associated to [`@Input`](https://angular.io/docs/ts/latest/api/core/index/Input-var.html) or [`@Output`](https://angular.io/docs/ts/latest/api/core/index/Output-var.html) we can modify it on a single place.
     
     **为何？**如果我们需要重命名[`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) 或 [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html)关的属性或者事件，我们可以在一个地方修改。
 
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index b385b18f0e..da855fb0c2 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -836,8 +836,8 @@ table
     If we must read a target element property or call one of its methods,
     we'll need a different technique.
     See the API reference for
-    [viewChild](../api/core/ViewChild-var.html) and
-    [contentChild](../api/core/ContentChild-var.html).
+    [viewChild](../api/core/index/ViewChild-var.html) and
+    [contentChild](../api/core/index/ContentChild-var.html).
 
     如果我们不得不读取目标元素上的属性或调用它的某个方法，我们得用另一种技术。
     参见API参考手册中的[viewChild](../api/core/index/ViewChild-var.html)和
@@ -1310,7 +1310,7 @@ block style-property-name-dart-diff
   ### Custom events with EventEmitter
   ### 使用EventEmitter实现自定义事件
 
-  Directives typically raise custom events with an Angular [EventEmitter](../api/core/EventEmitter-class.html).
+  Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html).
   A directive creates an `EventEmitter` and exposes it as a property.
   The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything.
   Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
@@ -1456,7 +1456,7 @@ block style-property-name-dart-diff
     The `ngModel` input property sets the element's value property and the `ngModelChange` output property
     listens for changes to the element's value.
     The details are specific to each kind of element and therefore the `NgModel` directive only works for elements,
-    such as the input text box, that are supported by a [ControlValueAccessor](../api/common/ControlValueAccessor-interface.html).
+    such as the input text box, that are supported by a [ControlValueAccessor](../api/common/index/ControlValueAccessor-interface.html).
     We can't apply `[(ngModel)]` to our custom components until we write a suitable *value accessor*,
     a technique that is beyond the scope of this chapter.
 
@@ -1738,8 +1738,8 @@ block dart-no-truthy-falsey
   这里有三个相互合作的指令：
   1. `ngSwitch`: bound to an expression that returns the switch value
   1. `ngSwitch`：绑定到一个返回开关值的表达式
-  1. `ngSwitchWhen`: bound to an expression returning a match value
-  1. `ngSwitchWhen`：绑定到一个返回匹配值的表达式
+  1. `ngSwitchCase`: bound to an expression returning a match value
+  1. `ngSwitchCase`：绑定到一个返回匹配值的表达式
   1. `ngSwitchDefault`: a marker attribute on the default element
   1. `ngSwitchDefault`：一个用于标记出默认元素的Attribute
 
@@ -1749,10 +1749,10 @@ block dart-no-truthy-falsey
 
     **不要**在`ngSwitch`的前面放星号(`*`)，而应该用属性绑定。
 
-    **Do** put the asterisk (`*`) in front of `ngSwitchWhen` and `ngSwitchDefault`.
+    **Do** put the asterisk (`*`) in front of `ngSwitchCase` and `ngSwitchDefault`.
     For more information, see [\* and &lt;template>](#star-template).
 
-    **要**把星号(`*`)放在`ngSwitchWhen`和`ngSwitchDefault`的前面。
+    **要**把星号(`*`)放在`ngSwitchCase`和`ngSwitchDefault`的前面。
     要了解更多信息，参见[\*与&lt;template>](#star-template)。
 
 <a id="ngFor"></a>
@@ -1852,7 +1852,7 @@ block dart-no-truthy-falsey
 +makeExample('template-syntax/ts/app/app.component.html', 'NgFor-3')(format=".")
 .l-sub-section
   :marked
-    Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html).
+    Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/index/NgFor-directive.html).
 
     要学习更多的*类似index*的值，例如`last`、`even`和`odd`，请参阅[NgFor API 参考](../api/common/index/NgFor-directive.html)。
 
@@ -1983,13 +1983,13 @@ block remember-the-brackets
   ### Expanding `*ngSwitch`
   ### 展开`*ngSwitch`
   A similar transformation applies to `*ngSwitch`. We can de-sugar the syntax ourselves.
-  Here's an example, first with `*ngSwitchWhen` and `*ngSwitchDefault` and then again with `<template>` tags:
+  Here's an example, first with `*ngSwitchCase` and `*ngSwitchDefault` and then again with `<template>` tags:
 
   类似的转换也作用于`*ngSwitch`上。我们可以自己解开这个语法糖。
-  这里是一个例子，首先是`*ngSwitchWhen`和`*ngSwitchDefault`，然后再解出`<template>`标签：
+  这里是一个例子，首先是`*ngSwitchCase`和`*ngSwitchDefault`，然后再解出`<template>`标签：
 +makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')(format=".")
 :marked
-  The `*ngSwitchWhen` and `*ngSwitchDefault` expand in exactly the same manner as `*ngIf`,
+  The `*ngSwitchCase` and `*ngSwitchDefault` expand in exactly the same manner as `*ngIf`,
   wrapping their former elements in `<template>` tags.
 
   `*ngSwitchWhen`和`*ngSwitchDefault`用和`*ngIf`完全相同的方式展开，把它们以前的元素包裹在`<template>`标签中。
@@ -2000,13 +2000,14 @@ block remember-the-brackets
   现在，我们应该明白为什么`ngSwitch`本身不能用星号(*)前缀的原因了吧？
   它没有定义内容，它的工作是控制一组模板。
 
-  In this case, it governs two sets of `NgSwitchWhen` and `NgSwitchDefault` directives.
+  In this case, it governs two sets of `NgSwitchCase` and `NgSwitchDefault` directives.
   We should expect it to display the values of the selected template twice,
   once for the (*) prefixed version and once for the expanded template version.
   That's exactly what we see in this example:
   
-  上面这种情况下，它管理两组`NgSwitchWhen`和`NgSwitchDefault`指令，一次是(*)前缀的版本，一次是展开模板后的版本。
+  上面这种情况下，它管理两组`NgSwitchCase`和`NgSwitchDefault`指令，一次是(*)前缀的版本，一次是展开模板后的版本。
   我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的：
+  
 figure.image-display
     img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch")
 :marked
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index 29cd99a140..67b1b42d71 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -571,7 +571,7 @@ figure.image-display
   In Angular 2 things are different. While change detection still
   occurs after every event, no one needs to call `scope.$apply()` for
   that to happen. This is because all Angular 2 code runs inside something
-  called the [Angular zone](../api/core/NgZone-class.html). Angular always
+  called the [Angular zone](../api/core/index/NgZone-class.html). Angular always
   knows when the code finishes, so it also knows when it should kick off
   change detection. The code itself doesn't have to call `scope.$apply()`
   or anything like it.
@@ -617,7 +617,7 @@ figure.image-display
   the component's inputs will be watched using Angular 1 change detection.
   When those inputs change, the corresponding properties in the component
   are set. We can also hook into the changes by implementing the
-  [OnChanges](../api/core/OnChanges-interface.html) interface in the component,
+  [OnChanges](../api/core/index/OnChanges-class.html) interface in the component,
   just like we could if it hadn't been downgraded.
 
   当我们降级一个Angular 2组件，然后把它用于Angular 1中时，组件的输入属性就会被Angular 1的变更检测体系监视起来。
diff --git a/public/docs/ts/latest/testing/first-app-tests.jade b/public/docs/ts/latest/testing/first-app-tests.jade
index c35e871cda..b891f90973 100644
--- a/public/docs/ts/latest/testing/first-app-tests.jade
+++ b/public/docs/ts/latest/testing/first-app-tests.jade
@@ -340,7 +340,7 @@ figure.image-display
 
   ### 异步System.import
 
-  The call to `System.import` shouldn't surprise us but it's asynchronous nature might.
+  The call to `System.import` shouldn't surprise us but its asynchronous nature might.
   If we ponder this for a moment, we realize that it must be asynchronous because
   System.js may have to fetch the corresponding JavaScript file from the server.
   Accordingly, `System.import` returns a promise and we must wait for that promise to resolve.
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 5bd8e5a252..fb63694e9a 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -5,7 +5,7 @@ include ../_util-fns
   
   # 应用中的路由
   
-  We received new requirements for our Tour of Heroes application: 
+  We received new requirements for our Tour of Heroes application:
   
   我们收到了一份《英雄指南》的新需求：
   
@@ -21,10 +21,10 @@ include ../_util-fns
   
   * 无论在哪个视图中点击一个英雄，都会导航到该英雄的详情页。
   
-  * Clicking a *deep link* in an email opens the detail view for a particular hero; 
+  * Clicking a *deep link* in an email opens the detail view for a particular hero;
   
   * 在邮件中点击一个*深链接*，会直接打开一个特定英雄的详情视图。
-  
+
   When we’re done, users will be able to navigate the app like this:
   
   完成时，用户就能像这样浏览一个应用：
@@ -38,10 +38,10 @@ figure.image-display
   
 .l-sub-section
   :marked
-    The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail
-    than we will in this tour.  
+    The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
+    than we will in this tutorial.
     
-    [路由与导航](../guide/router-deprecated.html)一章覆盖了比该教程中更详细的路由知识。
+    [路由与导航](../guide/router.html)一章覆盖了比该教程中更详细的路由知识。
     
 p Run the #[+liveExampleLink2('', 'toh-5')] for this part.
 
@@ -50,7 +50,7 @@ p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-5')]。
 .l-sub-section
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="弹出窗口" align="right" style="margin-right:-20px")
   :marked
-    To see the URL changes in the browser address bar, 
+    To see the URL changes in the browser address bar,
     pop out the preview window by clicking the blue 'X' button in the upper right corner:
 
     注意看浏览器地址栏中的URL变化，点击右上角的蓝色'X'按钮，弹出预览窗口。
@@ -61,7 +61,7 @@ p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-5')]。
   
   ## 我们在哪儿
   
-  Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service 
+  Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service
   and hero detail component. If not, we’ll need to go back and follow the previous chapters.
 
   在继续《英雄指南》之前，先来检查一下，在添加了英雄服务和英雄详情组件之后，你是否已经有了如下目录结构。如果没有，你得先回上一章，再照做一遍。
@@ -78,7 +78,7 @@ p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-5')]。
       .file main.ts
       .file mock-heroes.ts
     .file node_modules ...
-    .file typings ...      
+    .file typings ...
     .file index.html
     .file package.json
     .file styles.css
@@ -190,7 +190,7 @@ code-example(language="bash").
   
   ## 创建*AppComponent*
   
-  The new `AppComponent` will be the application shell. 
+  The new `AppComponent` will be the application shell.
   It will have some navigation links at the top and a display area below for the pages we navigate to.
   
   新的`AppComponent`将成为应用的“壳”。
@@ -259,7 +259,7 @@ code-example(language="bash").
     我们可不希望在应用的两个不同层次上存在它的***两个副本***。
     
 :marked
-  The app still runs and still displays heroes. 
+  The app still runs and still displays heroes.
   Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked!
   We have done no harm.
 
@@ -301,51 +301,27 @@ code-example(language="bash").
   header base href是不可或缺的
   
   :marked
-    See the *base href* section of the [Router](../guide/router-deprecated.html#!#base-href) chapter to learn why this matters.
+    See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters.
 
     查看[路由器](../guide/router-deprecated.html#!#base-href)一章的*base href*部分，了解为何如此。
     
 :marked
-  ### Make the router available.
-  
-  ### 让路由可用。
-  
-  The *Component Router* is a service. Like any service, we have to import it and make it
-  available to the application by adding it to the `providers` array.
-  
-  *组件路由器*是一个服务。像所有服务一样，我们得导入它，并且把它加入`providers`数组来让它在应用中可用。
-  
-  The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), 
-  and a configuration decorator (`RouteConfig`). We'll import them all together:
+  The Angular router is a combination of multiple provided services (`provideRouter`), multiple directives (`ROUTER_DIRECTIVES`),
+  and a configuration (`RouterConfig`). We'll configure our routes first:
   
   Angular路由器是由多个服务(`ROUTER_PROVIDERS`)和多个指令(`ROUTER_DIRECTIVES`)以及一个配置装饰器(`RouteConfig`)组成的。我们一次性导入它们。
-  
-+makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app/app.component.ts (router imports)')(format=".")
 
-:marked
-  Next we update the `directives` and `providers` metadata arrays to *include* the router assets.
+  ### Configure and add the router
   
-  接下来，我们要更新`directives`和`providers`元数据数组，来包含这些路由器部件。
+  ### 配置与添加路由器
+
+  Our application doesn't have a router yet. We'll create a configuration file for our routes that
+  does two things
+  (a) configure that router with *routes*. (b) provide an export to add the router to our bootstrap
   
-+makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app/app.component.ts (directives and providers)')(format=".")
-:marked
-  Notice that we also removed the `HeroesComponent` from the `directives` array.
-  `AppComponent` no longer shows heroes; that will be the router's job. 
-  We'll soon remove `<my-heroes>` from the template too.
-  
-  注意，我们已经从`directives`数组中移除了`HeroesComponent`。`AppComponent`不会再显示英雄了，那是路由器的工作。
-  我们马上也会从模板中移除`<my-heroes>`。
-  
-  ### Add and configure the router
-  
-  ### 添加与配置路由器
- 
-  The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` decorator to simultaneously
-  (a) assign a router to the component and (b) configure that router with *routes*.
-  
-  `AppComponent`还没有路由器。我们使用`@RouteConfig`装饰器来同时 (a)为组件指定一个路由器，并 (b) 通过*路由*来配置路由器。
-  
-  *Routes* tell the router  which views to display when a user clicks a link or 
+  我们的应用还没有路由器。我们得为这些路由创建一个配置文件，该文件要做两件事：(a) 使用*一些路由*配置路由器。(b) 提供一个导出，以便把该路由器添加到我们的启动代码。
+
+  *Routes* tell the router which views to display when a user clicks a link or
   pastes a URL into the browser address bar.
 
   *路由*告诉路由器，当用户点击链接或者把URL粘贴到浏览器地址栏时，应该显示哪个视图。
@@ -354,18 +330,20 @@ code-example(language="bash").
   
   我们来定义第一个路由 —— 到`HeroesComponent`的路由。
   
-+makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app/app.component.ts (RouteConfig for heroes)')(format=".")
++makeExample('toh-5/ts/app/app.routes.2.ts', '', 'app/app.routes.ts')(format=".")
 :marked
-  `@RouteConfig` takes an array of *route definitions*. 
-  We have only one route definition at the moment but rest assured, we'll add more. 
+  The `RouterConfig` is an array of *route definitions*.
+  We have only one route definition at the moment but rest assured, we'll add more.
   
-  `@RouteConfig`有一个*路由定义*数组。
+  
+  这个`RouteConfig`是一个*路由定义*的数组。
   此刻我们只有一个路由定义，但别急，后面还会添加更多。
   
   This *route definition* has three parts:
   
   “路由定义”包括三个部分：
   
+  This *route definition* has two parts:
   * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`).
   
   * **path**: 路由器会用它来匹配路由中指定的路径和浏览器地址栏中的当前路径，如`/heroes`。
@@ -380,16 +358,28 @@ code-example(language="bash").
 
 .l-sub-section
   :marked
-    Learn more about defining routes with @RouteConfig in the [Routing](../guide/router-deprecated.html) chapter.
-    
-    要学习更多使用`@RouteConfig`定义路由的知识，请参见[路由](../guide/router-deprecated.html)一章。
+    Learn more about defining routes with RouterConfig in the [Routing](../guide/router.html) chapter.
     
+    要学习更多使用`RouterConfig`定义路由的知识，请参见[路由](../guide/router.html)一章。
+:marked
+  ### Make the router available.
+  
+  ### 让路由器生效
+  
+  The *Component Router* is a service. We have to import our `APP_ROUTER_PROVIDERS` which
+  contains our configured router and make it available to the application by adding it to
+  the `bootstrap` array.
+  
+  *组件路由器*是一个服务。我们得导入`APP_ROUTER_PROVIDERS`（它包含了我们配置好的路由器），并通过把它添加到`bootstrap`的数组参数中让它在此应用中可用。
+  
++makeExample('toh-5/ts/app/main.ts', '', 'app/main.ts')(format=".")
+
 :marked
   ### Router Outlet
   
   ### 路由插座(Outlet)
 
-  If we paste the path, `/heroes`, into the browser address bar, 
+  If we paste the path, `/heroes`, into the browser address bar,
   the router should match it to the `'Heroes'` route and display the `HeroesComponent`.
   But where?
   
@@ -419,25 +409,25 @@ code-example(language="bash").
   
 +makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app/app.component.ts (template v1)')(format=".")
 :marked
-  Notice the `[routerLink]` binding in the anchor tag. 
+  Notice the `[routerLink]` binding in the anchor tag.
   We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array
   that tells the router where to navigate when the user clicks the link.
   
   注意，a标签中的`[routerLink]`绑定。我们把`RouterLink`指令(`ROUTER_DIRECTIVES`中的另一个指令)绑定到一个数组。它将告诉路由器，当用户点击这个链接时，应该导航到哪里。
   
   We define a *routing instruction* with a *link parameters array*.
-  The array only has one element in our little sample, the quoted ***name* of the route** to follow.
-  Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
+  The array only has one element in our little sample, the quoted ***path* of the route** to follow.
+  Looking back at the route configuration, we confirm that `'/heroes'` is the path of the route to the `HeroesComponent`.
   
   我们通过一个*链接参数数组*定义了一个*路由说明*。
-  在这个小例子中，该数组只有一个元素，一个放在引号中的**路由名称**，作为路标。
-  回来看路由配置表，我们清楚的看到，这个名称 —— `'Heroes'`就是指向`HeroesComponent`的那个路由的名称。
+  在这个小例子中，该数组只有一个元素，一个放在引号中的**路径**，作为路标。
+  回来看路由配置表，我们清楚的看到，这个路径 —— `'/heroes'`就是指向`HeroesComponent`的那个路由的路径。
   
 .l-sub-section
   :marked
-    Learn about the *link parameters array* in the [Routing](../guide/router-deprecated.html#link-parameters-array) chapter.
+    Learn about the *link parameters array* in the [Routing](../guide/router.html#link-parameters-array) chapter.
     
-    学习关于 *链接参数数组* 的更多知识，参见[路由](../guide/router-deprecated.html#link-parameters-array)一章。
+    学习关于 *链接参数数组* 的更多知识，参见[路由](../guide/router.html#link-parameters-array)一章。
     
 :marked
   Refresh the browser.  We see only the app title. We don't see the heroes list. 
@@ -446,8 +436,8 @@ code-example(language="bash").
   
 .l-sub-section
   :marked
-    The browser's address bar shows `/`. 
-    The route path to `HeroesComponent` is `/heroes`, not `/`. 
+    The browser's address bar shows `/`.
+    The route path to `HeroesComponent` is `/heroes`, not `/`.
     We don't have a route that matches the path `/`, so there is nothing to show.
     That's something we'll want to fix.
     
@@ -456,7 +446,7 @@ code-example(language="bash").
     接下来，我们就修复这个问题。
     
 :marked
-  We click the "Heroes" navigation link, the browser bar updates to `/heroes`, 
+  We click the "Heroes" navigation link, the browser bar updates to `/heroes`,
   and now we see the list of heroes. We are navigating at last!
   
   我们点击“英雄列表(Heroes)”导航链接，浏览器地址栏更新为`/heroes`，并且看到了英雄列表。我们终于导航过去了！
@@ -497,36 +487,41 @@ code-example(language="bash").
   
   ### 配置仪表盘路由
   
-  Go back to `app.component.ts` and teach it to navigate to the dashboard.
+  Go back to `app.routes.ts` and teach it to navigate to the dashboard.
   
-  回到`app.component.ts`文件，我们得教它如何导航到这个仪表盘。
+  回到`app.routes.ts`文件，我们得教它如何导航到这个仪表盘。
   
   Import the `DashboardComponent` so we can reference it in the dashboard route definition. 
   
   先导入`DashboardComponent`类，这样我们就可以在仪表盘的路由定义中引用它了。
   
-  Add the following `'Dashboard'` route definition to the `@RouteConfig` array of definitions.
+  Add the following `'Dashboard'` route definition to the `RouterConfig` array of definitions.
   
   然后把下列`'Dashboard'`路由的定义添加到`@RouteConfig`数组中。
   
-+makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app/app.component.ts (Dashboard route)')(format=".")
++makeExample('toh-5/ts/app/app.routes.1.ts','dashboard-route', 'app/app.routes.ts (Dashboard route)')(format=".")
+
 .l-sub-section
   :marked
-    **useAsDefault**
-    
-    We want the app to show the dashboard when it starts and 
+    **Redirect**
+
+    We want the app to show the dashboard when it starts and
     we want to see a nice URL in the browser address bar that says `/dashboard`.
     Remember that the browser launches with `/` in the address bar. 
-    We don't have a route for that path and we'd rather not create one.
+    We can use a redirect route to make this happen.
     
     我们希望在应用启动的时候就显示仪表盘，而且我们希望在浏览器的地址栏看到一个好看的URL，比如`/dashboard`。
-    记住，浏览器启动时，在地址栏中使用的路径是`/`。我们没有指向这个路径的路由，也不想单独创建它。
+    记住，浏览器启动时，在地址栏中使用的路径是`/`。
+    我们可以使用一个重定向路由来达到目的。
     
-    Fortunately we can add the `useAsDefault: true` property to the *route definition* and the
-    router will display the dashboard when the browser URL doesn't match an existing route. 
++makeExample('toh-5/ts/app/app.routes.1.ts','redirect-route', 'app/app.routes.ts (Redirect route)')(format=".")
     
-    幸运的是，我们可以把`useAsDefault: true`属性添加到*路由定义*上。这样，如果浏览器中的URL匹配不上任何已知的路由，路由器就会显示这个仪表盘组件。
+.l-sub-section
+  :marked
+    Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter.
     
+    要学习关于*重定向*的更多知识，参见[路由与导航](../guide/router.html#!#redirect)一章。
+
 :marked
   Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
   
@@ -535,14 +530,14 @@ code-example(language="bash").
 +makeExample('toh-5/ts/app/app.component.ts','template', 'app/app.component.ts (template)')(format=".")
 .l-sub-section
   :marked
-    We nestled the two links within `<nav>` tags. 
+    We nestled the two links within `<nav>` tags.
     They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
     
     我们在`<nav>`标签中放了两个链接。
     它们现在还没有作用，但稍后，当我们对这些链接添加样式时，会显得比较方便。
     
 :marked
-  Refresh the browser. The app displays the dashboard and 
+  Refresh the browser. The app displays the dashboard and
   we can navigate between the dashboard and the heroes.
 
   刷新浏览器。应用显示出了仪表盘，并可以在仪表盘和英雄列表之间导航了。
@@ -561,7 +556,7 @@ code-example(language="bash").
 
 .l-sub-section
   :marked
-    We specify the path _all the way back to the application root_ &mdash; `app/` in this case &mdash; 
+    We specify the path _all the way back to the application root_ &mdash; `app/` in this case &mdash;
     because Angular doesn't support relative paths _by default_.
     We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
     
@@ -576,7 +571,7 @@ code-example(language="bash").
   
 +makeExample('toh-5/ts/app/dashboard.component.html', null, 'app/dashboard.component.html')(format=".")
 :marked
-  We use `*ngFor` once again to iterate over a list of heroes and display their names. 
+  We use `*ngFor` once again to iterate over a list of heroes and display their names.
   We added extra `<div>` elements to help with styling later in this chapter.
   
   我们又一次使用`*ngFor`来在英雄列表上迭代，并显示他们的名字。
@@ -644,18 +639,14 @@ code-example(language="bash").
   
   * call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
   
-  * 在Angular的`ngOnInit`生命周期钩子中调用这个服务，并且取得英雄列表。
-  
   The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice*
   and stub the `gotoDetail` method until we're ready to implement it.
   
-  不同之处在于：我们使用*slice*函数挑选四个英雄(第2、3、4、5个)，并暂时为`gotoDetail`方法提供桩实现 —— 直到我们准备好实现它。
-  
   Refresh the browser and see four heroes in the new dashboard.
   
   刷新浏览器，在这个新的仪表盘中就看到了四个英雄。
 
-.l-main-section  
+.l-main-section
 :marked
   ## Navigate to Hero Details
   
@@ -703,7 +694,7 @@ code-example(language="bash").
 code-example(format='').
   &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
 :marked
-  That clearly won't work in any of our routing scenarios. 
+  That clearly won't work in any of our routing scenarios.
   Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
   
   显然，在我们的任何一个路由场景中它都无法工作。
@@ -735,10 +726,10 @@ code-example(format='').
   
   下面是我们将使用的*路由定义*。
   
-+makeExample('toh-5/ts/app/app.component.ts','hero-detail-route', 'app/app.component.ts (route to HeroDetailComponent)')(format=".")
++makeExample('toh-5/ts/app/app.routes.1.ts','hero-detail-route', 'app/app.routes.ts (route to HeroDetailComponent)')(format=".")
 
 :marked
-  The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id` 
+  The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
   when navigating to the `HeroDetailComponent`.
   
   路径中的冒号(:)表示`:id`是一个占位符，当导航到这个`HeroDetailComponent`组件时，它将被填入一个特定英雄的`id`。
@@ -749,13 +740,14 @@ code-example(format='').
     
     当然，在创建这个路由之前，我们必须导入`HeroDetailComponent`类：
     
-  +makeExample('toh-5/ts/app/app.component.ts','hero-detail-import')(format=".")
+  +makeExample('toh-5/ts/app/app.routes.1.ts','hero-detail-import')(format=".")
   
 :marked
-  We're finished with the `AppComponent`.
+  We're finished with the application routes.
   
-  我们已完成了`AppComponent`组件。
+  我们已经做好了该应用的路由。
   
+
   We won't add a `'Hero Detail'` link to the template because users
   don't click a navigation *link* to view a particular hero.
   They click a *hero* whether that hero is displayed on the dashboard or in the heroes list.
@@ -774,7 +766,7 @@ code-example(format='').
   
   那就需要对`HeroDetailComponent`做一次大修。
 
-.l-main-section  
+.l-main-section
 :marked
   ## Revise the *HeroDetailComponent*
   
@@ -792,17 +784,17 @@ code-example(format='').
   模板不用修改，我们会用原来的方式显示英雄。导致这次大修的原因是如何获得这个英雄的数据。
   
   We will no longer receive the hero in a parent component property binding.
-  The new `HeroDetailComponent` should take the `id` parameter from the router's `RouteParams` service
-  and use the `HeroService` to fetch the hero with that `id`.
+  The new `HeroDetailComponent` should take the `id` parameter from the `params` observable
+  in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.
   
   我们不会再从父组件的属性绑定中取得英雄数据。
-  新的`HeroDetailComponent`应该从路由器的`RouteParams`服务中取得`id`参数，并通过`HeroService`服务获取具有这个指定`id`的英雄数据。
+  新的`HeroDetailComponent`应该从`ActivatedRoute`服务的可观察对象`params`中取得`id`参数，并通过`HeroService`服务获取具有这个指定`id`的英雄数据。
 
-  We need an import statement to reference the `RouteParams`.
+  We need an import statement to reference the `ActivatedRoute`.
   
-  我们需要一个import语句，来引用`RouteParams`。
+  我们需要一个import语句，来引用`ActivatedRoute`。
   
-+makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-route-params')(format=".")
++makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-activated-route')(format=".")
 
 :marked
   We import the `HeroService`so we can fetch a hero.
@@ -812,14 +804,15 @@ code-example(format='').
 +makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-hero-service')(format=".")
 
 :marked
-  We import the `OnInit` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
+  We import the `OnInit` and `OnDestroy` interfaces because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook
+  and we'll clean up our `params` subscription in the `ngOnDestroy`.
   
-  我们要导入`OnInit`接口，是因为我们需要在组件的`ngOnInit`生命周期钩子中调用`HeroService`。
+  我们得导入`OnInit`和`OnDestroy`接口，因为我们需要在组件的`ngOnInit`生命周期钩子中调用`HeroService`并在`ngOnDestroy`中清理对`params`的订阅。
   
 +makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-oninit')(format=".")
 
 :marked
-  We inject the both the `RouteParams` service and the `HeroService` into the constructor as we've done before, 
+  We inject the both the `ActivatedRoute` service and the `HeroService` into the constructor as we've done before,
   making private variables for both:
   
   像以前一样，我们把`RouteParams`服务和`HeroService`服务注入到构造函数中，让它们成为私有变量。
@@ -827,14 +820,15 @@ code-example(format='').
 +makeExample('toh-5/ts/app/hero-detail.component.ts', 'ctor', 'app/hero-detail.component.ts (构造函数)')(format=".")
 
 :marked
-  We tell the class that we want to implement the `OnInit` interface.
+  We tell the class that we want to implement the `OnInit` and `OnDestroy` interfaces.
   
-  我们告诉这个类，我们要实现`OnInit`接口。
+  我们告诉这个类，我们要实现`OnInit`和`OnDestroy`接口。
   
 +makeExample('toh-5/ts/app/hero-detail.component.ts', 'implement')(format=".")
 
 :marked
-  Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` service
+  Inside the `ngOnInit` lifecycle hook, we _subscribe_ to the `params` observable to
+  extract the `id` parameter value from the `ActivateRoute` service
   and use the `HeroService` to fetch the hero with that `id`.
   
   在`ngOnInit`生命周期钩子中，从`RouteParams`服务中提取`id`参数，并且使用`HeroService`来获得具有这个`id`的英雄数据。
@@ -842,10 +836,14 @@ code-example(format='').
 +makeExample('toh-5/ts/app/hero-detail.component.ts', 'ng-oninit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")
 
 :marked
-  Notice how we extract the `id` by calling the `RouteParams.get` method.
+  Inside the `ngOnDestroy` lifecycle hook, we _unsubscribe_ from the `params` subscription.
   
-  注意我们是如何通过调用`RouteParams.get`方法来获取`id`的。
+  在`ngOnDestroy`生命周期钩子中，我们_取消了_对`params`的订阅。
   
++makeExample('toh-5/ts/app/hero-detail.component.ts', 'ng-ondestroy', 'app/hero-detail.component.ts (ngOnDestroy)')(format=".")
+:marked
+  Notice how we extract the `id` by calling the `subscribe` method
+  which will deliver our array of route parameters.
 +makeExample('toh-5/ts/app/hero-detail.component.ts', 'get-id')(format=".")
 
 :marked
@@ -895,13 +893,13 @@ code-example(format='').
 
 .l-sub-section
  :marked
-   Going back too far could take us out of the application. 
+   Going back too far could take us out of the application.
    That's acceptable in a demo. We'd guard against it in a real application,
-   perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html).
+   perhaps with the [*CanDeactivate* guard](../api/router/index/CanDeactivate-interface.html).
    
    回退太多步儿会跑出我们的应用。
    在Demo中，这算不上问题。但在真实的应用中，我们需要对此进行防范。
-   也许你该用[*routerCanDeactivate*钩子](/docs/ts/latest/api/router/index/CanDeactivate-interface.html)。
+   也许你该用[*CanDeactivate*守卫](../api/router/index/CanDeactivate-interface.html).。
    
 :marked
   Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
@@ -974,23 +972,24 @@ code-example(format='').
   1. 把这个数组传给路由器的navigate方法。
   
   We wrote *link parameters arrays* in the `AppComponent` for the navigation links.
-  Those arrays had only one element, the name of the destination route.
+  Those arrays had only one element, the path of the destination route.
   
   我们当初在`AppComponent`中生成导航链接的时候曾写过*链接参数数组*。
+  那些数组中只有一个元素：目标路由的路径。
   
-  This array has two elements, the ***name*** of the destination route and a ***route parameter object*** 
+  This array has two elements, the ***path*** of the destination route and a ***route parameter***
   with an `id` field set to the value of the selected hero's `id`.
   
-  这个数组有两个元素，目标路由的***名称(name)***，和一个***路由参数对象***，其中包括一个`id`字段，它的取值是所选英雄的`id`。
+  这个数组则两个元素，目标路由的***路径(path)***，和一个***路由参数对象***，其中包括一个`id`字段，它的取值是所选英雄的`id`。
   
-  The two array items align with the ***name*** and ***:id*** token in the parameterized `HeroDetail` route configuration we added to `AppComponent` earlier in the chapter.
+  The two array items align with the ***path*** and ***:id*** token in the parameterized `HeroDetail` route configuration we added to `app.routes.ts` earlier in the chapter.
   
-  当初我们在`AppComponent`中添加路由的时候，这两个数组元素以***name***和***:id***为代号被参数化的`HeroDetail`路由配置对象中。
+  当初我们在`app.routes.ts`中添加路由的时候，这两个数组元素以***path***和***:id***为代号被参数化的`HeroDetail`路由配置对象中。
   
-+makeExample('toh-5/ts/app/app.component.ts','hero-detail-route', 'app/app.component.ts (英雄详情路由)')(format=".")
++makeExample('toh-5/ts/app/app.routes.1.ts','hero-detail-route', 'app/app.routes.ts (hero detail route)')(format=".")
 
 :marked
-  The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way: 
+  The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
   import the `router` reference and inject it in the constructor (along with the `HeroService`):
 
   `DashboardComponent`还没有路由器。我们使用常规的方式为它加上路由：
@@ -1152,9 +1151,9 @@ figure.image-display
 +makeExample('toh-5/ts/app/heroes.component.ts', 'class', 'app/heroes.component.ts (类)')
 
 :marked
-  Refresh the browser and start clicking. 
+  Refresh the browser and start clicking.
   We can navigate around the app, from the dashboard to hero details and back,
-  for heroes list to the mini-detail to the hero details and back to the heroes again. 
+  for heroes list to the mini-detail to the hero details and back to the heroes again.
   We can jump back and forth between the dashboard and the heroes.
   
   刷新浏览器，并开始点击。
@@ -1194,7 +1193,7 @@ figure.image-display
   如果我们把这60来行CSS粘贴到组件元数据的`styles`中，它们会完全淹没组件的工作逻辑。
   不能这么做。在一个独立的`*.css`文件中编辑CSS当然会更简单。
 
-  Add a `dashboard.component.css` file to the `app` folder and reference 
+  Add a `dashboard.component.css` file to the `app` folder and reference
   that file in the component metadata's `styleUrls` array property like this:
   
   把`dashboard.component.css`文件添加到`app`目录下，并在组件元数据的`styleUrls`数组属性中引用它。就像这样：
@@ -1256,16 +1255,19 @@ figure.image-display
 
 .l-sub-section
   :marked
-    **The *router-link-active* class**
+    **The *routerLinkActive* directive**
     
-    ** *router-link-active* 类**
+    ***routerLinkActive*指令**
+
+    The Angular Router provides a `routerLinkActive` directive we can use to
+    to add a class to the HTML navigation element whose route matches the active route.
+    All we have to do is define the style for it. Sweet!
     
-    The Angular Router adds the `router-link-active` class to the HTML navigation element 
-    whose route matches the active route. All we have to do is define the style for it. Sweet!
-    
-    Angular路由器会为当前活动路由所在的导航元素加上`router-link-active`类。
-    我们唯一要做的就是为它(`router-link-active`类)定义样式。真好！
+    Angular路由器提供了`routerLinkActive`指令，我们可以用它来为匹配了活动路由的HTML导航元素自动添加一个CSS类。
+    我们唯一要做的就是为它定义样式。真好！
     
++makeExample('toh-5/ts/app/app.component.3.ts', 'router-link-active', 'app/app.component.ts (active router links)')(format=".")
+
 :marked
   Set the `AppComponent`’s `styleUrls` property to this CSS file. 
   
@@ -1290,8 +1292,8 @@ figure.image-display
   我们也可以在所有组件之外创建*应用级*样式。
 
   Our designers provided some basic styles to apply to elements across the entire app.
-  These correspond to the full set of master styles that we 
-  introduced earlier (see 
+  These correspond to the full set of master styles that we
+  introduced earlier (see
   [QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
   Here is an excerpt.
   
@@ -1347,6 +1349,7 @@ p.
     .children
       .file app.component.ts
       .file app.component.css
+      .file app.routes.ts
       .file dashboard.component.css
       .file dashboard.component.html
       .file dashboard.component.ts
@@ -1361,7 +1364,7 @@ p.
       .file main.ts
       .file mock-heroes.ts
     .file node_modules ...
-    .file typings ...      
+    .file typings ...
     .file index.html
     .file package.json
     .file styles.css
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index f36cb8c572..7f0b98729d 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -7,7 +7,7 @@ block includes
   - var _Angular_http_library = 'Angular HTTP library'
   - var _HTTP_PROVIDERS = 'HTTP_PROVIDERS'
   - var _JSON_stringify = 'JSON.stringify'
-  
+
 :marked
   # Getting and Saving Data with HTTP
   
@@ -419,7 +419,7 @@ block hero-detail-comp-updates
   :marked
     ### Add/Edit in the *HeroDetailComponent*
 
-    We already have `HeroDetailComponent` for viewing details about a specific hero. 
+    We already have `HeroDetailComponent` for viewing details about a specific hero.
     Add and Edit are natural extensions of the detail view, so we are able to reuse `HeroDetailComponent` with a few tweaks. 
     
     我们已经有了`HeroDetailComponent`，用以查看指定英雄的详情。
@@ -609,6 +609,7 @@ block filetree
       .children
         .file app.component.ts
         .file app.component.css
+        .file app.routes.ts
         .file dashboard.component.css
         .file dashboard.component.html
         .file dashboard.component.ts
diff --git a/public/events.jade b/public/events.jade
index 36d0634e2a..2c0acabad0 100644
--- a/public/events.jade
+++ b/public/events.jade
@@ -7,17 +7,6 @@ table.is-full-width
 
   tbody
 
-    <!-- Devoxx -->
-    tr
-      th
-        a(
-        target="_blank"
-        href="http://devoxx.pl/"
-        ) Devoxx
-      td Krakow, Poland
-      td June 22-25, 2016
-
-
     <!-- FullStack -->
     tr
       th
@@ -91,4 +80,14 @@ table.is-full-width
         href="http://www.dotjs.io/"
         ) dotJS
       td Paris, France
-      td Dec. 5, 2016
\ No newline at end of file
+      td Dec. 5, 2016
+
+    <!-- NG-BE -->
+    tr
+      th
+        a(
+        target="_blank"
+        href="https://ng-be.org/"
+        ) NG-BE
+      td Ghent, Belgium
+      td Dec. 9, 2016
diff --git a/public/news.jade b/public/news.jade
index 624159abe1..52eed6d6c3 100644
--- a/public/news.jade
+++ b/public/news.jade
@@ -8,43 +8,27 @@
 .grid-fluid
   .c6
     .article-card
-      .date 2016年6月15日
+      .date June 21, 2016
       .title
         a(
         target="_blank"
-        href="http://angularjs.blogspot.com/2016/06/rc2-now-available.html"
-        ) RC2 Now Available
-       
-        a(
-        target="_blank"
-        href="http://angularjs.blogspot.com/2016/06/rc2-now-available.html"
-        ) RC2已经发布
-      
-      p Today we’re happy to announce that we are shipping Angular 2.0.0-rc2. This release includes  1. Animation Framework  2. Improvements to Forms  3. More than 100 community contributions...
-      
-      p 今天，我们非常高兴的宣布，Angular 2.0.0-rc2发布了！本次发布包含 1）动画框架 2）表单改进 3）100多个来自社区的贡献...
+        href="http://angularjs.blogspot.com/2016/06/rc3-now-available.html"
+        ) RC3 Now Available
+      p oday we’re happy to announce that we are shipping Angular 2.0.0-rc3. This release includes a fix for a major performance regression in RC2...
+
       .author
         img(src="/resources/images/bios/stephenfluin.jpg")
         .posted 发稿人：<b>Stephen Fluin</b>
 
   .c6
     .article-card
-      .date 2016年6月9日
+      .date June 15, 2016
       .title
         a(
         target="_blank"
-        href="http://angularjs.blogspot.com/2016/06/improvements-coming-for-routing-in.html"
-        ) Improvements Coming for Routing in Angular
-        
-          a(
-        target="_blank"
-        href="http://angularjs.blogspot.com/2016/06/improvements-coming-for-routing-in.html"
-        ) Angular的路由器将会被增强
-      
-      p A little more than a month ago, we introduced a new router at ng-conf. We’re grateful to have heard from many folks at ng-conf about flaws in this new design, so we are announcing...
-      
-      p 一个多月前，我们在ng-conf介绍了一个新的路由器。感谢在ng-conf的很多朋友，我们收到很多关于路由器新设计潜在的缺陷，所以现在我们现在宣布...
-
+        href="http://angularjs.blogspot.com/2016/06/rc2-now-available.html"
+        ) RC2 Now Available
+      p Today we’re happy to announce that we are shipping Angular 2.0.0-rc2. This release includes  1. Animation Framework  2. Improvements to Forms  3. More than 100 community contributions...
       .author
         img(src="/resources/images/bios/stephenfluin.jpg")
         .posted 发稿人： <b>Stephen Fluin</b>
diff --git a/public/resources/images/bios/max-sills.jpg b/public/resources/images/bios/max-sills.jpg
new file mode 100644
index 0000000000..7826e8579f
Binary files /dev/null and b/public/resources/images/bios/max-sills.jpg differ
diff --git a/public/resources/images/bios/mikeryan.jpg b/public/resources/images/bios/mikeryan.jpg
new file mode 100755
index 0000000000..da05b1d170
Binary files /dev/null and b/public/resources/images/bios/mikeryan.jpg differ
diff --git a/public/resources/images/bios/rex.jpg b/public/resources/images/bios/rex.jpg
new file mode 100644
index 0000000000..8c9844c1bc
Binary files /dev/null and b/public/resources/images/bios/rex.jpg differ
diff --git a/script/install.sh b/script/install.sh
index d5947e09b2..15c2e4c89d 100755
--- a/script/install.sh
+++ b/script/install.sh
@@ -3,7 +3,7 @@
 set -ex -o pipefail
 
 npm install --no-optional
-(cd public/docs/_examples && npm install)
-(cd public/docs/_examples/_protractor && npm install)
+(cd public/docs/_examples && npm install --no-optional)
+(cd public/docs/_examples/_protractor && npm install --no-optional)
 npm run webdriver:update --prefix public/docs/_examples/_protractor
 gulp add-example-boilerplate
diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js
index 60a801057d..11ffe8cb17 100644
--- a/tools/api-builder/angular.io-package/index.js
+++ b/tools/api-builder/angular.io-package/index.js
@@ -62,8 +62,6 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
   readTypeScriptModules.sourceFiles = [
     '@angular/common/index.ts',
     '@angular/common/testing.ts',
-    '@angular/compiler/index.ts',
-    '@angular/compiler/testing.ts',
     '@angular/core/index.ts',
     '@angular/core/testing.ts',
     '@angular/http/index.ts',