docs(toh-5): dashboard uses [routerLink] bindings #998

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

@@ -0,0 +1,9 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <div *ngFor="let hero of heroes" class="col-1-4">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>

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

@@ -1,6 +1,12 @@
 /* #docregion */
 [class*='col-'] {
   float: left;
+  text-decoration: none;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
 }
 *, *:after, *:before {
 	-webkit-box-sizing: border-box;
@@ -10,12 +16,8 @@
 h3 {
   text-align: center; margin-bottom: 0;
 }
-[class*='col-'] {
-  padding-right: 20px;
-  padding-bottom: 20px;
-}
-[class*='col-']:last-of-type {
-  padding-right: 0;
+h4 {
+  position: relative;
 }
 .grid {
   margin: 0;
@@ -32,9 +34,6 @@ h3 {
 	background-color: #607D8B;
 	border-radius: 2px;
 }
-h4 {
-  position: relative;
-}
 .module:hover {
   background-color: #EEE;
   cursor: pointer;

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

@@ -1,14 +1,13 @@
 // #docplaster
 // #docregion
+// #docregion imports
 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
 
 @Component(
     selector: 'my-dashboard',
@@ -24,24 +23,14 @@ class DashboardComponent implements OnInit {
   List<Hero> heroes;
 
   // #docregion ctor
-  final Router _router;
   final HeroService _heroService;
 
-  DashboardComponent(this._heroService, this._router);
+  DashboardComponent(this._heroService);
 
   // #enddocregion ctor
 
   Future<Null> ngOnInit() async {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
-
-  // #docregion gotoDetail
-  void gotoDetail(Hero hero) {
-    var link = [
-      'HeroDetail',
-      {'id': hero.id.toString()}
-    ];
-    _router.navigate(link);
-  }
-// #enddocregion gotoDetail
 }
+// #enddocregion component

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

@@ -2,10 +2,10 @@
 <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 -->
+  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
+  <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>
     </div>
-  </div>
+  </a>
 </div>

public/docs/_examples/toh-5/e2e-spec.ts

@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
@@ -42,16 +42,16 @@ describe('Tutorial part 5', () => {
   beforeAll(() => browser.get(''));
 
   function getPageElts() {
-    let hrefElts = element.all(by.css('my-app a'));
+    let navElts = element.all(by.css('my-app nav a'));
 
     return {
-      hrefs: hrefElts,
+      navElts: navElts,
 
-      myDashboardHref: hrefElts.get(0),
+      myDashboardHref: navElts.get(0),
       myDashboard: element(by.css('my-app my-dashboard')),
       topHeroes: element.all(by.css('my-app my-dashboard > div h4')),
 
-      myHeroesHref: hrefElts.get(1),
+      myHeroesHref: navElts.get(1),
       myHeroes: element(by.css('my-app my-heroes')),
       allHeroes: element.all(by.css('my-app my-heroes li')),
       selectedHero: element(by.css('my-app li.selected')),
@@ -73,7 +73,7 @@ describe('Tutorial part 5', () => {
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
     it(`has views ${expectedViewNames}`, () => {
-      let viewNames = getPageElts().hrefs.map((el: ElementFinder) => el.getText());
+      let viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 

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

@@ -0,0 +1,9 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <div *ngFor="let hero of heroes" class="col-1-4">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>

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

@@ -1,21 +1,25 @@
 /* #docregion */
 [class*='col-'] {
   float: left;
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+a {
+  text-decoration: none;
 }
 *, *:after, *:before {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
+  -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;
+h4 {
+  position: relative;
 }
 .grid {
   margin: 0;
@@ -24,16 +28,13 @@ h3 {
   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;
+  padding: 20px;
+  text-align: center;
+  color: #eee;
+  max-height: 120px;
+  min-width: 120px;
+  background-color: #607D8B;
+  border-radius: 2px;
 }
 .module:hover {
   background-color: #EEE;
@@ -47,15 +48,15 @@ h4 {
   padding-right: 20px;
 }
 @media (max-width: 600px) {
-	.module {
-	  font-size: 10px;
-	  max-height: 75px; }
+  .module {
+    font-size: 10px;
+    max-height: 75px; }
 }
 @media (max-width: 1024px) {
-	.grid {
-	  margin: 0;
-	}
-	.module {
-	  min-width: 60px;
-	}
+  .grid {
+    margin: 0;
+  }
+  .module {
+    min-width: 60px;
+  }
 }

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

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

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

@@ -1,13 +1,13 @@
 // #docplaster
 // #docregion
+// #docregion imports
 import { Component, OnInit } from '@angular/core';
-// #docregion import-router
-import { Router } from '@angular/router';
-// #enddocregion import-router
 
 import { Hero } from './hero';
 import { HeroService } from './hero.service';
-  // #docregion metadata
+// #enddocregion imports
+
+// #docregion metadata
 @Component({
   moduleId: module.id,
   selector: 'my-dashboard',
@@ -19,27 +19,18 @@ import { HeroService } from './hero.service';
   // #docregion metadata
 })
 // #enddocregion metadata
-// #docregion component
+// #docregion class
 export class DashboardComponent implements OnInit {
 
   heroes: Hero[] = [];
 
   // #docregion ctor
-  constructor(
-    private router: Router,
-    private heroService: HeroService) {
-  }
+  constructor(private heroService: HeroService) { }
   // #enddocregion ctor
 
   ngOnInit(): void {
     this.heroService.getHeroes()
       .then(heroes => this.heroes = heroes.slice(1, 5));
   }
-
-  // #docregion gotoDetail
-  gotoDetail(hero: Hero): void {
-    let link = ['/detail', hero.id];
-    this.router.navigate(link);
-  }
-  // #enddocregion gotoDetail
 }
+// #enddocregion class

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

@@ -40,8 +40,10 @@ export class HeroesComponent implements OnInit {
     this.selectedHero = hero;
   }
 
+  // #docregion gotoDetail
   gotoDetail(): void {
     this.router.navigate(['/detail', this.selectedHero.id]);
   }
+  // #enddocregion gotoDetail
   // #docregion renaming
 }