docs(toh-5): edits after doing tutorial

- Some adjustments following actually doing the tutorial. In some cases code shown (e.g. this is what file foo should look like now) didn't match what the user would have. E.g., lingering @input on the hero property.
- Fixed some lingering deprecated-router prose elements on TS side (e.g., still referring to a route by the old string names like `HeroDetail`).
- Added extra step to `app.component.ts` creation rather than having a critical-call-out later on.
- Reorder some prose for better harmony between TS and Dart prose (also improves the flow).
- Moved the `styleUrls` call-out to the point of first use.

Author: chalin

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

@@ -1,45 +1,51 @@
 // #docplaster
 // #docregion
 import 'package:angular2/core.dart';
+// #docregion import-router
 import 'package:angular2/router.dart';
+// #enddocregion import-router
 
-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
+import 'dashboard_component.dart';
+import 'hero_detail_component.dart';
+import 'hero_service.dart';
+import 'heroes_component.dart';
 
 @Component(
     selector: 'my-app',
-    // #docregion template
+    // #docregion template, template-v3
     template: '''
       <h1>{{title}}</h1>
       <nav>
         <a [routerLink]="['Dashboard']">Dashboard</a>
         <a [routerLink]="['Heroes']">Heroes</a>
       </nav>
       <router-outlet></router-outlet>''',
-    // #enddocregion template
+    // #enddocregion template, template-v3
     // #docregion styleUrls
     styleUrls: const ['app_component.css'],
     // #enddocregion styleUrls
+    // #docregion directives-and-providers
     directives: const [ROUTER_DIRECTIVES],
     providers: const [HeroService, ROUTER_PROVIDERS])
+// #enddocregion directives-and-providers
+// #docregion heroes
 @RouteConfig(const [
-  // #docregion dashboard-route
+  // #enddocregion heroes
+  // #docregion dashboard
   const Route(
       path: '/dashboard',
       name: 'Dashboard',
       component: DashboardComponent,
       useAsDefault: true),
-  // #enddocregion dashboard-route
-  // #docregion hero-detail-route
+  // #enddocregion dashboard
+  // #docregion hero-detail
   const Route(
       path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
-  // #enddocregion hero-detail-route
+  // #enddocregion hero-detail
+  // #docregion heroes
   const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
 ])
+// #enddocregion heroes
 class AppComponent {
   String title = 'Tour of Heroes';
 }

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

@@ -1,25 +1,31 @@
 // #docplaster
-// #docregion
+// #docregion , v2
 import 'package:angular2/core.dart';
-// #enddocregion
-import 'package:angular2/router.dart'; // for testing only
-// #docregion
 
 import 'hero_service.dart';
 import 'heroes_component.dart';
 
+// #enddocregion v2
 @Component(
-    selector: 'my-app',
-    template: '''
+  selector: 'my-app',
+  template: '''
       <h1>{{title}}</h1>
       <my-heroes></my-heroes>''',
-    directives: const [HeroesComponent],
-    providers: const [
-      // #enddocregion
-      ROUTER_PROVIDERS,
-      // #docregion
-      HeroService
-    ])
+  directives: const [HeroesComponent],
+  providers: const [HeroService])
+// #enddocregion
+// #docregion v2
+@Component(
+  selector: 'my-app',
+  // #docregion template-v2
+  template: '''
+      <h1>{{title}}</h1>
+      <a [routerLink]="['Heroes']">Heroes</a>
+      <router-outlet></router-outlet>''',
+  // #enddocregion template-v2
+  directives: const [HeroesComponent],
+  providers: const [HeroService])
+// #docregion , v2
 class AppComponent {
   String title = 'Tour of Heroes';
 }

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

@@ -22,5 +22,5 @@ class DashboardComponent implements OnInit {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
-  gotoDetail() {/* not implemented yet */}
+  gotoDetail(Hero hero) {/* not implemented yet */}
 }

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

@@ -1,19 +1,19 @@
 // #docplaster
 // #docregion , v2
 import 'dart:async';
+// #docregion goBack
 import 'dart:html';
 
-// #docregion import-oninit
+// #enddocregion goBack
 import 'package:angular2/core.dart';
-// #enddocregion import-oninit
-// #docregion router
+// #docregion added-imports
 import 'package:angular2/router.dart';
-// #enddocregion router
 
+// #enddocregion added-imports
 import 'hero.dart';
-// #docregion import-hero-service
+// #docregion added-imports
 import 'hero_service.dart';
-// #enddocregion import-hero-service
+// #enddocregion added-imports
 
 @Component(
     selector: 'my-hero-detail',
@@ -23,9 +23,9 @@ import 'hero_service.dart';
     styleUrls: const ['hero_detail_component.css']
     // #docregion v2
     )
-// #docregion implement
+// #docregion goBack, implement
 class HeroDetailComponent implements OnInit {
-  // #enddocregion implement
+  // #enddocregion goBack, implement
   Hero hero;
   // #docregion ctor
   final HeroService _heroService;
@@ -36,17 +36,14 @@ class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   Future<Null> ngOnInit() async {
-    // #docregion get-id
     var idString = _routeParams.get('id');
-    var id = int.parse(idString, onError: (_) => null);
-    // #enddocregion get-id
+    var id = int.parse(idString ?? '', onError: (_) => null);
     if (id != null) hero = await (_heroService.getHero(id));
   }
   // #enddocregion ngOnInit
-
   // #docregion goBack
+
   void goBack() {
     window.history.back();
   }
-  // #enddocregion goBack
 }

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

@@ -6,27 +6,28 @@ import 'package:angular2/core.dart';
 import 'package:angular2/router.dart';
 
 import 'hero.dart';
-import 'hero_detail_component.dart';
 import 'hero_service.dart';
 
-// #docregion metadata, heroes-component-renaming
+// #docregion metadata, renaming
 @Component(
     selector: 'my-heroes',
-    // #enddocregion heroes-component-renaming
+    // #enddocregion renaming
     templateUrl: 'heroes_component.html',
-    styleUrls: const ['heroes_component.css'],
-    directives: const [HeroDetailComponent])
-// #docregion heroes-component-renaming
-// #enddocregion heroes-component-renaming, metadata
-// #docregion class, heroes-component-renaming
+    styleUrls: const ['heroes_component.css']
+// #docregion renaming
+)
+// #enddocregion metadata
+// #docregion class
 class HeroesComponent implements OnInit {
-  // #enddocregion heroes-component-renaming
+  // #enddocregion renaming
   final Router _router;
   final HeroService _heroService;
   List<Hero> heroes;
   Hero selectedHero;
 
+  // #docregion renaming
   HeroesComponent(this._heroService, this._router);
+  // #enddocregion renaming
 
   Future<Null> getHeroes() async {
     heroes = await _heroService.getHeroes();
@@ -44,5 +45,5 @@ class HeroesComponent implements OnInit {
         'HeroDetail',
         {'id': selectedHero.id.toString()}
       ]);
-  // #docregion heroes-component-renaming
+  // #docregion renaming
 }

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

@@ -1,14 +1,42 @@
 // #docplaster
-// #docregion
+// #docregion , v2
 import { Component } from '@angular/core';
 
+// #enddocregion v2
 @Component({
   selector: 'my-app',
   template: `
     <h1>{{title}}</h1>
     <my-heroes></my-heroes>
   `
 })
+// #enddocregion
+// #docregion v2
+@Component({
+  selector: 'my-app',
+  // #docregion template-v2
+  template: `
+     <h1>{{title}}</h1>
+     <a routerLink="/heroes">Heroes</a>
+     <router-outlet></router-outlet>
+   `
+  // #enddocregion template-v2
+})
+// #enddocregion
+@Component({
+  selector: 'my-app',
+  // #docregion template-v3
+  template: `
+     <h1>{{title}}</h1>
+     <nav>
+       <a routerLink="/dashboard">Dashboard</a>
+       <a routerLink="/heroes">Heroes</a>
+     </nav>
+     <router-outlet></router-outlet>
+   `
+  // #enddocregion template-v3
+})
+// #docregion , v2
 export class AppComponent {
   title = 'Tour of Heroes';
 }

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

@@ -1,4 +1,3 @@
-// #docplaster
 // #docregion
 import { Component } from '@angular/core';