docs(toh-5/dart): use routerLink in dashboard (#2744)

* docs(toh-5/dart): use routerLink in dashboard

* minor edits to TS jade

* remove dart/toh-pt5 from bad-code-excerpt-skip-patterns

Author: chalin

public/docs/_examples/toh-5/dart/lib/dashboard_component.dart

@@ -4,33 +4,37 @@
 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';
 // #enddocregion imports
 
+// #docregion metadata
 @Component(
     selector: 'my-dashboard',
     // #docregion templateUrl
     templateUrl: 'dashboard_component.html',
     // #enddocregion templateUrl
     // #docregion css
-    styleUrls: const ['dashboard_component.css']
+    styleUrls: const ['dashboard_component.css'],
     // #enddocregion css
+    directives: const [ROUTER_DIRECTIVES],
     )
-// #docregion component
+// #enddocregion metadata
+// #docregion class, component
 class DashboardComponent implements OnInit {
   List<Hero> heroes;
 
   // #docregion ctor
   final HeroService _heroService;
 
   DashboardComponent(this._heroService);
-
   // #enddocregion ctor
 
   Future<Null> ngOnInit() async {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 }
-// #enddocregion component

public/docs/_examples/toh-5/dart/lib/dashboard_component.html

@@ -2,7 +2,7 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
   <!-- #docregion click -->
-  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
+  <a *ngFor="let hero of heroes" [routerLink]="['./HeroDetail', {id: hero.id}]" class="col-1-4">
   <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>

public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html renamed to public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html

@@ -2,12 +2,12 @@
 // #docregion , v2
 // #docregion added-imports
 import 'dart:async';
-import 'dart:html' show window;
 
 // #enddocregion added-imports
 import 'package:angular2/core.dart';
 // #docregion added-imports
 import 'package:angular2/router.dart';
+import 'package:angular2/platform/common.dart';
 
 // #enddocregion added-imports
 import 'hero.dart';
@@ -17,9 +17,9 @@ import 'hero_service.dart';
 
 @Component(
     selector: 'my-hero-detail',
-    // #docregion templateUrl
+    // #docregion metadata, templateUrl
     templateUrl: 'hero_detail_component.html',
-    // #enddocregion templateUrl, v2
+    // #enddocregion metadata, templateUrl, v2
     styleUrls: const ['hero_detail_component.css']
     // #docregion v2
     )
@@ -30,8 +30,9 @@ class HeroDetailComponent implements OnInit {
   // #docregion ctor
   final HeroService _heroService;
   final RouteParams _routeParams;
+  final Location _location;
 
-  HeroDetailComponent(this._heroService, this._routeParams);
+  HeroDetailComponent(this._heroService, this._routeParams, this._location);
   // #enddocregion ctor
 
   // #docregion ngOnInit
@@ -44,7 +45,7 @@ class HeroDetailComponent implements OnInit {
 
   // #docregion goBack
   void goBack() {
-    window.history.back();
+    _location.back();
   }
   // #enddocregion goBack
 }

public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart

@@ -41,9 +41,11 @@ class HeroesComponent implements OnInit {
     selectedHero = hero;
   }
 
+  // #docregion gotoDetail
   Future<Null> gotoDetail() => _router.navigate([
         'HeroDetail',
         {'id': selectedHero.id.toString()}
       ]);
+  // #enddocregion gotoDetail
   // #docregion renaming
 }

public/docs/_examples/toh-5/dart/lib/heroes_component.dart

@@ -33,4 +33,3 @@ export class DashboardComponent implements OnInit {
       .then(heroes => this.heroes = heroes.slice(1, 5));
   }
 }
-// #enddocregion class

public/docs/_examples/toh-5/ts/app/dashboard.component.ts

@@ -96,12 +96,13 @@ block redirect-vs-use-as-default
     router will display the dashboard when the browser URL doesn't match an existing route.
 
 block templateUrl-path-resolution
-  :marked
-    The value of `templateUrl` can be an [asset][] in this package or another
-    package. To use an asset in another package, use a full package reference,
-    such as `'package:some_other_package/dashboard_component.html'`.
+  .l-sub-section
+    :marked
+      The value of `templateUrl` can be an [asset][] in this package or another
+      package. To use an asset in another package, use a full package reference,
+      such as `'package:some_other_package/dashboard_component.html'`.
 
-    [asset]: https://www.dartlang.org/tools/pub/glossary#asset
+      [asset]: https://www.dartlang.org/tools/pub/glossary#asset
 
 block route-params
   :marked