docs(toh-5): review and update/resync Dart

**NOTE: run `gulp add-example-boilerplate` after pulling in the
commit.**

This is preparatory work for angular#2035.
As part of the the chapter review, the Dart .jade was enhanced to use
Jade extends (angular#2018).
By the same token it contributed to a post-RC5 resync (angular#2077). Other
key changes:

Dart and TS code:
- Eliminated `styles.1.css` in favor of docregions in `styles.css`.
- `docregion` tags renamed in a few places.
- **No other code changes**.

TS prose
- Fixed: misnamed variable `routing` -> `appRoutes`.
- All other changes are **minor copy edits**, or changes to support
Dart via Jade extends.

Diff of generated HTML for TS chapter was inspected to ensure only
minor copy edits prevailed (i.e., that the support for Jade extends had
no impact on the generated HTML).

Author: chalin

public/docs/_examples/styles.css

@@ -1,4 +1,4 @@
-/* #docregion , quickstart */
+/* #docregion , quickstart, toh */
 /* Master Styles */
 h1 {
   color: #369;
@@ -18,6 +18,7 @@ body, input[text], button {
   color: #888;
   font-family: Cambria, Georgia;
 }
+/* #enddocregion toh */
 a {
   cursor: pointer;
   cursor: hand;
@@ -137,7 +138,7 @@ nav a.active {
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
-
+/* #docregion toh */
 /* everywhere else */
 * {
   font-family: Arial, Helvetica, sans-serif;

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

@@ -21,9 +21,9 @@ import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
       </nav>
       <router-outlet></router-outlet>''',
     // #enddocregion template
-    // #docregion style-urls
+    // #docregion styleUrls
     styleUrls: const ['app_component.css'],
-    // #enddocregion style-urls
+    // #enddocregion styleUrls
     directives: const [ROUTER_DIRECTIVES],
     providers: const [HeroService, ROUTER_PROVIDERS])
 @RouteConfig(const [

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

@@ -21,11 +21,11 @@ import 'heroes_component.dart';
     providers: const [ROUTER_PROVIDERS, HeroService]
     // #enddocregion directives-and-providers
 )
-// #docregion route-config
+// #docregion config
 @RouteConfig(const [
   const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
 ])
-// #enddocregion route-config
+// #enddocregion config
 class AppComponent {
   String title = 'Tour of Heroes';
 }

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

@@ -12,9 +12,9 @@ import 'hero_service.dart';
 
 @Component(
     selector: 'my-dashboard',
-    // #docregion template-url
+    // #docregion templateUrl
     templateUrl: 'dashboard_component.html',
-    // #enddocregion template-url
+    // #enddocregion templateUrl
     // #docregion css
     styleUrls: const ['dashboard_component.css']
     // #enddocregion css
@@ -35,13 +35,13 @@ class DashboardComponent implements OnInit {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
-  // #docregion goto-detail
+  // #docregion gotoDetail
   void gotoDetail(Hero hero) {
     var link = [
       'HeroDetail',
       {'id': hero.id.toString()}
     ];
     _router.navigate(link);
   }
-// #enddocregion goto-detail
+// #enddocregion gotoDetail
 }

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

@@ -6,25 +6,23 @@ import 'dart:html';
 // #docregion import-oninit
 import 'package:angular2/core.dart';
 // #enddocregion import-oninit
-// #docregion import-route-params
+// #docregion router
 import 'package:angular2/router.dart';
-// #enddocregion import-route-params
+// #enddocregion router
 
 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
+    // #docregion templateUrl
     templateUrl: 'hero_detail_component.html',
-    // #enddocregion template-url, v2
+    // #enddocregion templateUrl, v2
     styleUrls: const ['hero_detail_component.css']
     // #docregion v2
     )
-// #enddocregion extract-template
 // #docregion implement
 class HeroDetailComponent implements OnInit {
   // #enddocregion implement
@@ -36,19 +34,19 @@ class HeroDetailComponent implements OnInit {
   HeroDetailComponent(this._heroService, this._routeParams);
   // #enddocregion ctor
 
-  // #docregion ng-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
     if (id != null) hero = await (_heroService.getHero(id));
   }
-  // #enddocregion ng-oninit
+  // #enddocregion ngOnInit
 
-  // #docregion go-back
+  // #docregion goBack
   void goBack() {
     window.history.back();
   }
-  // #enddocregion go-back
+  // #enddocregion goBack
 }

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

@@ -16,8 +16,8 @@ class HeroService {
         const Duration(seconds: 2), () => mockHeroes);
   }
 
-  // #docregion get-hero
+  // #docregion getHero
   Future<Hero> getHero(int id) async =>
       (await getHeroes()).firstWhere((hero) => hero.id == id);
-  // #enddocregion get-hero
+  // #enddocregion getHero
 }

public/docs/_examples/toh-5/dart/web/styles_1.css

@@ -14,9 +14,9 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `,
   // #enddocregion template
-  // #docregion style-urls
+  // #docregion styleUrls
   styleUrls: ['app/app.component.css'],
-  // #enddocregion style-urls
+  // #enddocregion styleUrls
 })
 export class AppComponent {
   title = 'Tour of Heroes';

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

@@ -1,5 +1,5 @@
 // #docregion
-// #docregion routing-config
+// #docregion config
 import { Routes, RouterModule } from '@angular/router';
 
 import { HeroesComponent } from './heroes.component';
@@ -10,8 +10,8 @@ const appRoutes: Routes = [
     component: HeroesComponent
   }
 ];
-// #enddocregion routing-config
+// #enddocregion config
 
-// #docregion routing-export
+// #docregion export
 export const routing = RouterModule.forRoot(appRoutes);
-// #enddocregion routing-export
+// #enddocregion export

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

@@ -10,9 +10,9 @@ import { HeroService } from './hero.service';
 
 @Component({
   selector: 'my-dashboard',
-  // #docregion template-url
+  // #docregion templateUrl
   templateUrl: 'app/dashboard.component.html',
-  // #enddocregion template-url
+  // #enddocregion templateUrl
   // #docregion css
   styleUrls: ['app/dashboard.component.css']
   // #enddocregion css
@@ -34,10 +34,10 @@ export class DashboardComponent implements OnInit {
       .then(heroes => this.heroes = heroes.slice(1, 5));
   }
 
-  // #docregion goto-detail
+  // #docregion gotoDetail
   gotoDetail(hero: Hero) {
     let link = ['/detail', hero.id];
     this.router.navigate(link);
   }
-  // #enddocregion goto-detail
+  // #enddocregion gotoDetail
 }

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

@@ -3,25 +3,23 @@
 // #docregion import-oninit, v2
 import { Component, OnInit } from '@angular/core';
 // #enddocregion import-oninit
-// #docregion import-activated-route
+// #docregion router
 import { ActivatedRoute, Params } from '@angular/router';
-// #enddocregion import-activated-route
+// #enddocregion router
 
 import { Hero } from './hero';
 // #docregion import-hero-service
 import { HeroService } from './hero.service';
 // #enddocregion import-hero-service
 
-// #docregion extract-template
 @Component({
   selector: 'my-hero-detail',
-  // #docregion template-url
+  // #docregion templateUrl
   templateUrl: 'app/hero-detail.component.html',
-  // #enddocregion template-url, v2
+  // #enddocregion templateUrl, v2
   styleUrls: ['app/hero-detail.component.css']
   // #docregion v2
 })
-// #enddocregion extract-template
 // #docregion implement
 export class HeroDetailComponent implements OnInit {
   // #enddocregion implement
@@ -34,7 +32,7 @@ export class HeroDetailComponent implements OnInit {
   }
   // #enddocregion ctor
 
-  // #docregion ng-oninit
+  // #docregion ngOnInit
   ngOnInit() {
     // #docregion get-id
     this.route.params.forEach((params: Params) => {
@@ -44,11 +42,11 @@ export class HeroDetailComponent implements OnInit {
     });
     // #enddocregion get-id
   }
-  // #enddocregion ng-oninit
+  // #enddocregion ngOnInit
 
-  // #docregion go-back
+  // #docregion goBack
   goBack() {
     window.history.back();
   }
-// #enddocregion go-back
+// #enddocregion goBack
 }

public/docs/_examples/toh-5/ts/app/hero-detail.component.ts

@@ -17,10 +17,10 @@ export class HeroService {
     );
   }
 
-  // #docregion get-hero
+  // #docregion getHero
   getHero(id: number) {
     return this.getHeroes()
                .then(heroes => heroes.find(hero => hero.id === id));
   }
-  // #enddocregion get-hero
+  // #enddocregion getHero
 }