post-review changes

Author: chalin

public/_includes/_util-fns.jade

@@ -222,8 +222,8 @@ script.
 -   // E.g. of a project relative path is 'app/main.ts'
 -   if (ex.title === null || ex.title === undefined) {
 -     // Title is not given so take it to be ex.filePath.
--     // Is title like styles.1.css? Then drop the '.1' qualifier:
--     var matches = ex.filePath.match(/^(.*)\.\d(\.\w+)$/);
+-     // Title like styles.1.css or foo_1.dart? Then drop the '.1' or '_1' qualifier:
+-     var matches = ex.filePath.match(/^(.*)[\._]\d(\.\w+)$/);
 -     ex.title = matches ? matches[1] + matches[2] : ex.filePath;
 -   }
 -   ex.filePath = getExampleName() + '/' + _docsFor + '/' + ex.filePath;

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

@@ -1,31 +1,40 @@
 // #docplaster
 // #docregion , v2
 import 'package:angular2/core.dart';
+// #enddocregion ,
+// #docregion v2
+import 'package:angular2/router.dart';
+// #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 [HeroService])
-// #enddocregion
+    directives: const [HeroesComponent],
+    providers: const [HeroService])
+// #enddocregion ,
+class Bogus {}
+
 // #docregion v2
 @Component(
-  selector: 'my-app',
-  // #docregion template-v2
-  template: '''
+    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
+    // #enddocregion template-v2
+    directives: const [ROUTER_DIRECTIVES],
+    providers: const [HeroService, ROUTER_PROVIDERS])
+@RouteConfig(const [
+  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
+])
+// #docregion ,
 class AppComponent {
   String title = 'Tour of Heroes';
 }

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

@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion , v2
 import 'dart:async';
-// #docregion goBack
+// #docregion dart-html
 import 'dart:html';
+// #enddocregion dart-html
 
-// #enddocregion goBack
 import 'package:angular2/core.dart';
 // #docregion added-imports
 import 'package:angular2/router.dart';
@@ -23,9 +23,9 @@ import 'hero_service.dart';
     styleUrls: const ['hero_detail_component.css']
     // #docregion v2
     )
-// #docregion goBack, implement
+// #docregion implement
 class HeroDetailComponent implements OnInit {
-  // #enddocregion goBack, implement
+  // #enddocregion implement
   Hero hero;
   // #docregion ctor
   final HeroService _heroService;
@@ -41,9 +41,10 @@ class HeroDetailComponent implements OnInit {
     if (id != null) hero = await (_heroService.getHero(id));
   }
   // #enddocregion ngOnInit
-  // #docregion goBack
 
+  // #docregion goBack
   void goBack() {
     window.history.back();
   }
+  // #enddocregion goBack
 }

public/docs/dart/latest/tutorial/toh-pt5.jade

@@ -29,6 +29,7 @@ block intro-file-tree
 block keep-app-running
   :marked
     ### Keep the app compiling and running
+
     Open a terminal/console window.
     Start the Dart compiler, watch for changes, and start our server by entering the command:
 
@@ -71,7 +72,7 @@ block router-config-intro
     The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig`
     annotation to simultaneously:
 
-    - Assign a router to the component and
+    - Assign a router to the component
     - Configure that router with *routes*
 
 block routerLink
@@ -96,17 +97,16 @@ block redirect-vs-use-as-default
 
 block templateUrl-path-resolution
   :marked
-    The given path must resolve to the named [asset][] within the
-    application's package. Assests from other packages can also be accessed
-    by providing a full package reference, such as
-    `'package:some_other_package/dashboard_component.html'`.
+    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
 
 block route-params
   :marked
     We will no longer receive the hero in a parent component property binding.
-    The new `HeroDetailComponent` should take the `id` parameter from the router's 
+    The new `HeroDetailComponent` should take the `id` parameter from the router's
     `RouteParams` service and use the `HeroService` to fetch the hero with that `id`.
 
 block ngOnInit
@@ -118,6 +118,12 @@ block extract-id
   :marked
     Notice how we extract the `id` by calling the `RouteParams.get` method.
 
+block dart-html
+  :marked
+    We'll also need to import `dart:html` to gain access to `window`.
+
+  +makeExcerpt('lib/hero_detail_component.dart', 'dart-html', '')
+
 block heroes-component-cleanup
   :marked
     Because the template for `HeroesComponent` no longer uses `HeroDetailComponent`

public/docs/ts/_cache/tutorial/toh-pt5.jade

@@ -46,7 +46,7 @@ figure.image-display
 :marked
   ## Where We Left Off
 
-  Before we continue with our Tour of Heroes, let’s verify that 
+  Before we continue with our Tour of Heroes, let’s verify that
   we have the following structure after adding our hero service
   and hero detail component. If not, we’ll need to go back and follow the previous chapters.
 
@@ -105,7 +105,7 @@ block keep-app-running
 
   Our current app loads `AppComponent` and immediately displays the list of heroes.
 
-  Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) 
+  Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*)
   and then default to one of them.
 
   The `AppComponent` should only handle navigation.
@@ -135,9 +135,9 @@ block keep-app-running
   * Create the file <span ngio-ex>app/app.component.ts</span>.
   * Define an <span if-docs="ts">exported</span> `AppComponent` class.
   * Add an `@Component` !{_decorator} above the class with a `my-app` selector.
-  * Move from `HeroesComponent` to `AppComponent` the
-    * `title` class property, and
-    * `@Component` template `<h1>` element containing a `title` binding.
+  * Move the following from `HeroesComponent` to `AppComponent`:
+    * `title` class property
+    * `@Component` template `<h1>` element, which contains a binding to  `title`
   * Add a `<my-heroes>` element to the app template just below the heading so we still see the heroes.
   * Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `<my-heroes>` tags.
   * Add `HeroService` to the  `providers` !{_array} of `!{_AppModuleVsAppComp}` because we'll need it in every other view.
@@ -171,8 +171,8 @@ block app-comp-v1
 block angular-router
   :marked
     The Angular router is an external, optional Angular NgModule called `RouterModule`.
-    The router is a combination of multiple provided services (`RouterModule`), 
-    multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`), 
+    The router is a combination of multiple provided services (`RouterModule`),
+    multiple directives (`RouterOutlet, RouterLink, RouterLinkActive`),
     and a configuration (`Routes`). We'll configure our routes first.
 
 :marked
@@ -185,7 +185,7 @@ block angular-router
 .callout.is-important
   header base href is essential
   :marked
-    See the *base href* section of the [Router](../guide/router.html#!#base-href) 
+    See the *base href* section of the [Router](../guide/router.html#!#base-href)
     chapter to learn why this matters.
 
 a#configure-routes
@@ -213,7 +213,7 @@ block router-config-intro
   This *route definition* has the following parts:
 
   - **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`).
-  <li if-docs="dart"> **name**: the official name of the route; 
+  <li if-docs="dart"> **name**: the official name of the route;
    it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`).</li>
   - **component**: the component that the router should create when navigating to this route (`HeroesComponent`).
 
@@ -315,7 +315,7 @@ block routerLink
 
   Go back to `!{_appRoutingTsVsAppComp}` and teach it to navigate to the dashboard.
 
-  Import `DashboardComponent` and 
+  Import the dashboard component and
   add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
 
 - var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.routing.ts'
@@ -346,6 +346,8 @@ block redirect-vs-use-as-default
       Learn about the *redirects* in the [Routing](../guide/router.html#!#redirect) chapter.
 
 :marked
+  #### Add navigation to the template
+
   Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
 
 - var _vers = _docsFor == 'dart' ? '' : '.1'
@@ -443,7 +445,7 @@ block redirect-vs-use-as-default
   The new route is a bit unusual in that we must tell the `HeroDetailComponent` *which hero to show*.
   We didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.
 
-  At the moment the parent `HeroesComponent` sets the component's `hero` property to a 
+  At the moment the parent `HeroesComponent` sets the component's `hero` property to a
   hero object with a binding like this.
 
 code-example(language="html").
@@ -455,7 +457,7 @@ code-example(language="html").
 
   ### Parameterized route
 
-  We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11, 
+  We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11,
   we could expect to see an URL such as this:
 
 code-example(format='').
@@ -475,9 +477,10 @@ code-example(format='').
 :marked
   The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
   when navigating to the `HeroDetailComponent`.
+
 .l-sub-section
   :marked
-    Remember to import `HeroDetailComponent` before creating this route.
+    Remember to import the hero detail component before creating this route.
 
 +ifDocsFor('ts|js')
   :marked
@@ -517,15 +520,15 @@ block route-params
     in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`.
 
 :marked
-  Add requisite imports first:
+  First, add the requisite imports:
 
 - var _vers = _docsFor == 'dart' ? '' : '.1'
 +makeExcerpt('app/hero-detail.component' + _vers + '.ts', 'added-imports', '')
 
 - var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
 :marked
   Let's have the `!{_ActivatedRoute}` service and the `HeroService` injected
-  into the constructor with their values saved in private fields:
+  into the constructor, saving their values in private fields:
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
 
@@ -574,6 +577,9 @@ block extract-id
 
 +makeExcerpt('app/hero-detail.component.ts', 'goBack')
 
+block dart-html
+  //- N/A
+
 - var _CanDeactivateGuard = _docsFor == 'dart' ? '<em>routerCanDeactivate</em> hook' : '<em>CanDeactivate</em> guard'
 - var _CanDeactivateGuardUri = _docsFor == 'dart' ? 'angular2.router/CanDeactivate-class' : 'router/index/CanDeactivate-interface'
 .l-sub-section
@@ -589,8 +595,9 @@ block extract-id
 +makeExcerpt('app/hero-detail.component.html', 'back-button', '')
 
 :marked
-  Modifing the template to add this button spurs us to take one more 
-  incremental improvement and migrate the template to its own file:
+  Modifing the template to add this button spurs us to take one more
+  incremental improvement and migrate the template to its own file,
+  called <span ngio-ex>hero-detail.component.html</span>:
 
 +makeExcerpt('app/hero-detail.component.html')
 
@@ -601,10 +608,6 @@ block extract-id
 
 :marked
   Refresh the browser and see the results.
-  Here's the (nearly) finished `HeroDetailComponent` but without the `@Input` !{_decorator} on `hero`
-  &mdash; we'll be cleaning that out soon:
-
-+makeExcerpt('app/hero-detail.component.ts', 'v2')
 
 .l-main-section
 :marked
@@ -725,7 +728,7 @@ figure.image-display
   :marked
     The `styleUrls` property is !{_an} !{_array} of style file names (with paths).
     We could list multiple style files from different locations if we needed them.
-    <span if-docs="ts">As with `templateUrl`, we must specify the path _all the way 
+    <span if-docs="ts">As with `templateUrl`, we must specify the path _all the way
     back to the application root_.</span>
 
 block heroes-component-cleanup
@@ -777,10 +780,10 @@ block heroes-component-cleanup
 
 :marked
   ### Stylish Hero Details
-  
+
   The designers also gave us CSS styles specifically for the `HeroDetailComponent`.
 
-  Add a <span ngio-ex>hero-detail.component.css</span> to the `!{_appDir}` 
+  Add a <span ngio-ex>hero-detail.component.css</span> to the `!{_appDir}`
   folder and refer to that file inside
   the `styleUrls` !{_array} as we did for `DashboardComponent`.
   Let's also remove the `hero` property `@Input` !{_decorator}
@@ -891,7 +894,7 @@ block file-tree-end
       .file index.html
       .file package.json
       .file styles.css
-      .file systemjs.config.json
+      .file systemjs.config.js
       .file tsconfig.json
       .file typings.json