docs(toh-5/dart): review edits and code cleanup

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

@@ -13,6 +13,7 @@ import 'hero_service.dart';
 
 @Component(
     selector: 'my-app',
+    // #docregion template
     template: '''
       <h1>{{title}}</h1>
       <h2>My Heroes</h2>
@@ -25,6 +26,7 @@ import 'hero_service.dart';
       </ul>
       <my-hero-detail [hero]="selectedHero"></my-hero-detail>
     ''',
+    // #enddocregion template
     styles: const [
     '''
       .selected {

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

@@ -1,5 +1,4 @@
-/* #docplaster */
-/* #docregion css */
+/* #docregion */
 h1 {
   font-size: 1.2em;
   color: #999;
@@ -28,4 +27,3 @@ nav a:hover {
 nav a.router-link-active {
   color: #039be5;
 }
-/* #enddocregion css */

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

@@ -27,20 +27,19 @@ import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
     directives: const [ROUTER_DIRECTIVES],
     providers: const [HeroService, ROUTER_PROVIDERS])
 @RouteConfig(const [
-// #docregion dashboard-route
+  // #docregion dashboard-route
   const Route(
       path: '/dashboard',
       name: 'Dashboard',
       component: DashboardComponent,
       useAsDefault: true),
-// #enddocregion dashboard-route
-// #docregion hero-detail-route
+  // #enddocregion dashboard-route
+  // #docregion hero-detail-route
   const Route(
       path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
-// #enddocregion hero-detail-route
+  // #enddocregion hero-detail-route
   const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
 ])
 class AppComponent {
   String title = 'Tour of Heroes';
 }
-// #enddocregion

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

@@ -15,12 +15,11 @@ import 'heroes_component.dart';
       <my-heroes></my-heroes>''',
     directives: const [HeroesComponent],
     providers: const [
-// #enddocregion
+      // #enddocregion
       ROUTER_PROVIDERS,
-// #docregion
+      // #docregion
       HeroService
     ])
 class AppComponent {
   String title = 'Tour of Heroes';
 }
-// #enddocregion

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

@@ -10,12 +10,12 @@ import 'heroes_component.dart';
 
 @Component(
     selector: 'my-app',
-// #docregion template
+    // #docregion template
     template: '''
       <h1>{{title}}</h1>
       <a [routerLink]="['Heroes']">Heroes</a>
       <router-outlet></router-outlet>''',
-// #enddocregion template
+    // #enddocregion template
     // #docregion directives-and-providers
     directives: const [ROUTER_DIRECTIVES],
     providers: const [ROUTER_PROVIDERS, HeroService]
@@ -29,4 +29,3 @@ import 'heroes_component.dart';
 class AppComponent {
   String title = 'Tour of Heroes';
 }
-// #enddocregion

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

@@ -1,4 +1,3 @@
-/* #docplaster */
 /* #docregion */
 [class*='col-'] {
   float: left;
@@ -60,4 +59,3 @@ h4 {
 	  min-width: 60px;
 	}
 }
-/* #enddocregion */

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

@@ -1,5 +1,7 @@
 // #docplaster
 // #docregion
+import 'dart:async';
+
 import 'package:angular2/core.dart';
 // #docregion import-router
 import 'package:angular2/router.dart';
@@ -16,22 +18,25 @@ import 'hero_service.dart';
     // #docregion css
     styleUrls: const ['dashboard_component.css']
     // #enddocregion css
-)
+    )
 // #docregion component
 class DashboardComponent implements OnInit {
   List<Hero> heroes;
-// #docregion ctor
+
+  // #docregion ctor
   final Router _router;
   final HeroService _heroService;
 
   DashboardComponent(this._heroService, this._router);
-// #enddocregion ctor
 
-  ngOnInit() async =>
-      heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+  // #enddocregion ctor
+
+  Future<Null> ngOnInit() async {
+    heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+  }
 
   // #docregion goto-detail
-  gotoDetail(Hero hero) {
+  void gotoDetail(Hero hero) {
     var link = [
       'HeroDetail',
       {'id': hero.id.toString()}
@@ -40,4 +45,3 @@ class DashboardComponent implements OnInit {
   }
 // #enddocregion goto-detail
 }
-// #enddocregion

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

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

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

@@ -1,5 +1,7 @@
 // #docplaster
 // #docregion imports
+import 'dart:async';
+
 import 'package:angular2/core.dart';
 
 import 'hero.dart';
@@ -9,17 +11,16 @@ import 'hero_service.dart';
 // #docregion component
 @Component(
   selector: 'my-dashboard',
-  templateUrl: 'dashboard_component.html'
-)
+  templateUrl: 'dashboard_component.html')
 class DashboardComponent implements OnInit {
   List<Hero> heroes;
   final HeroService _heroService;
 
   DashboardComponent(this._heroService);
 
-  ngOnInit() async =>
-      heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+  Future<Null> ngOnInit() async {
+    heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+  }
 
-  gotoDetail(){ /* not implemented yet */}
+  gotoDetail() {/* not implemented yet */}
 }
-// #enddocregion component

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

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion
 // #docregion v2
+import 'dart:async';
 import 'dart:html';
 
 // #docregion import-oninit
@@ -20,37 +21,35 @@ import 'hero_service.dart';
     selector: 'my-hero-detail',
     // #docregion template-url
     templateUrl: 'hero_detail_component.html',
-    // #enddocregion template-url
-// #enddocregion v2
+    // #enddocregion template-url, v2
     styleUrls: const ['hero_detail_component.css']
-// #docregion v2
-)
+    // #docregion v2
+    )
 // #enddocregion extract-template
 // #docregion implement
 class HeroDetailComponent implements OnInit {
-// #enddocregion implement
+  // #enddocregion implement
   Hero hero;
-// #docregion ctor
+  // #docregion ctor
   final HeroService _heroService;
   final RouteParams _routeParams;
 
   HeroDetailComponent(this._heroService, this._routeParams);
-// #enddocregion ctor
+  // #enddocregion ctor
 
-// #docregion ng-oninit
-  ngOnInit() async {
+  // #docregion ng-oninit
+  Future<Null> ngOnInit() async {
     // #docregion get-id
-    var id = int.parse(_routeParams.get('id'));
+    var idString = _routeParams.get('id');
+    var id = int.parse(idString, onError: (_) => null);
     // #enddocregion get-id
-    hero = await (_heroService.getHero(id));
+    if (id != null) hero = await (_heroService.getHero(id));
   }
-// #enddocregion ng-oninit
+  // #enddocregion ng-oninit
 
-// #docregion go-back
-  goBack() {
+  // #docregion go-back
+  void goBack() {
     window.history.back();
   }
-// #enddocregion go-back
+  // #enddocregion go-back
 }
-// #enddocregion v2
-// #enddocregion

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

@@ -1,5 +1,3 @@
-// #docplaster
-
 // #docregion
 import 'dart:async';
 
@@ -10,18 +8,16 @@ import 'mock_heroes.dart';
 
 @Injectable()
 class HeroService {
-  Future<List<Hero>> getHeroes() async => HEROES;
+  Future<List<Hero>> getHeroes() async => mockHeroes;
 
   // See the "Take it slow" appendix
   Future<List<Hero>> getHeroesSlowly() {
     return new Future<List<Hero>>.delayed(
-        const Duration(seconds: 2), () => HEROES // 2 seconds
-        );
+        const Duration(seconds: 2), () => mockHeroes);
   }
 
-//#docregion get-hero
+  // #docregion get-hero
   Future<Hero> getHero(int id) async =>
-      HEROES.where((hero) => hero.id == id).first;
-//#enddocregion get-hero
+      (await getHeroes()).firstWhere((hero) => hero.id == id);
+  // #enddocregion get-hero
 }
-// #enddocregion

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

@@ -9,30 +9,27 @@ import 'hero.dart';
 import 'hero_detail_component.dart';
 import 'hero_service.dart';
 
-// #docregion metadata
-// #docregion heroes-component-renaming
+// #docregion metadata, heroes-component-renaming
 @Component(
     selector: 'my-heroes',
-// #enddocregion heroes-component-renaming
+    // #enddocregion heroes-component-renaming
     templateUrl: 'heroes_component.html',
     styleUrls:  const ['heroes_component.css'],
     directives: const [HeroDetailComponent]
-// #docregion heroes-component-renaming
+    // #docregion heroes-component-renaming
 )
-// #enddocregion heroes-component-renaming
-// #enddocregion metadata
-// #docregion class
-// #docregion heroes-component-renaming
+// #enddocregion heroes-component-renaming, metadata
+// #docregion class, heroes-component-renaming
 class HeroesComponent implements OnInit {
-// #enddocregion heroes-component-renaming
+  // #enddocregion heroes-component-renaming
   final Router _router;
   final HeroService _heroService;
   List<Hero> heroes;
   Hero selectedHero;
 
   HeroesComponent(this._heroService, this._router);
 
-  Future getHeroes() async {
+  Future<Null> getHeroes() async {
     heroes = await _heroService.getHeroes();
   }
 
@@ -42,10 +39,7 @@ class HeroesComponent implements OnInit {
 
   void onSelect(Hero hero) { selectedHero = hero; }
 
-  Future gotoDetail() =>
+  Future<Null> gotoDetail() =>
       _router.navigate(['HeroDetail', {'id': selectedHero.id.toString()}]);
-// #docregion heroes-component-renaming
+  // #docregion heroes-component-renaming
 }
-// #enddocregion heroes-component-renaming
-// #enddocregion class
-// #enddocregion

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

@@ -17,5 +17,3 @@ <h2>
   </h2>
   <button (click)="gotoDetail()">View Details</button>
 </div>
-<!-- #enddocregion mini-detail -->
-<!-- #enddocregion -->

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

@@ -1,6 +1,6 @@
 import 'hero.dart';
 
-final List<Hero> HEROES = [
+final List<Hero> mockHeroes = [
   new Hero(11, 'Mr. Nice'),
   new Hero(12, 'Narco'),
   new Hero(13, 'Bombasto'),

public/docs/_examples/toh-5/dart/web/index.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
-  <!-- #docregion head -->
-  <!-- #docregion base-href -->
+  <!-- #docregion head, base-href -->
   <head>
-    <base href="/">   <!-- For testing using pub serve directly -->
-    <!-- base href="/dart/web/" --> <!-- For testing in WebStorm -->
+    <!-- For testing using pub serve directly use: -->
+    <base href="/">
+    <!-- For testing in WebStorm use: -->
+    <!-- base href="/dart/web/" -->
     <!-- #enddocregion base-href -->
     <title>Angular 2 Tour of Heroes</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">

public/docs/_examples/toh-5/dart/web/main.dart

@@ -2,6 +2,6 @@ import 'package:angular2/platform/browser.dart';
 
 import 'package:angular2_tour_of_heroes/app_component.dart';
 
-main() {
+void main() {
   bootstrap(AppComponent);
 }

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

@@ -0,0 +1,24 @@
+/* #docregion toh-excerpt */
+/* Master Styles */
+h1 {
+  color: #369; 
+  font-family: Arial, Helvetica, sans-serif;   
+  font-size: 250%;
+}
+h2, h3 { 
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;   
+  font-weight: lighter;
+}
+body { 
+  margin: 2em; 
+}
+body, input[text], button { 
+  color: #888; 
+  font-family: Cambria, Georgia; 
+}
+/* . . . */
+/* everywhere else */
+* { 
+  font-family: Arial, Helvetica, sans-serif; 
+}