-
-
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
index 300f3065e0..cd43e03b86 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -6,21 +6,18 @@ import { Router } from '@angular/router-deprecated';
import { Hero } from './hero';
import { HeroService } from './hero.service';
-// #docregion metadata
-// #docregion heroes-component-renaming
+// #docregion heroes-component-renaming, metadata
@Component({
selector: 'my-heroes',
-// #enddocregion heroes-component-renaming
+ // #enddocregion heroes-component-renaming
templateUrl: 'app/heroes.component.html',
styleUrls: ['app/heroes.component.css']
-// #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
export class HeroesComponent implements OnInit {
-// #enddocregion heroes-component-renaming
+ // #enddocregion heroes-component-renaming
heroes: Hero[];
selectedHero: Hero;
@@ -41,8 +38,5 @@ export class HeroesComponent implements OnInit {
gotoDetail() {
this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
}
-// #docregion heroes-component-renaming
+ // #docregion heroes-component-renaming
}
-// #enddocregion heroes-component-renaming
-// #enddocregion class
-// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
index ddd36d7868..69afde3d34 100644
--- a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
+++ b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
@@ -13,4 +13,3 @@ export var HEROES: Hero[] = [
{id: 19, name: 'Magma'},
{id: 20, name: 'Tornado'}
];
-// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html
index 93fa8d4889..4df64edba1 100644
--- a/public/docs/_examples/toh-5/ts/index.html
+++ b/public/docs/_examples/toh-5/ts/index.html
@@ -1,7 +1,7 @@
-
+
diff --git a/public/docs/_examples/toh-5/ts/styles.1.css b/public/docs/_examples/toh-5/ts/styles.1.css
index 5b77b74d1c..dee6d5b8ca 100644
--- a/public/docs/_examples/toh-5/ts/styles.1.css
+++ b/public/docs/_examples/toh-5/ts/styles.1.css
@@ -1,5 +1,11 @@
-/* #docregion */
-h2 {
+/* #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;
@@ -11,23 +17,7 @@ body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
-button {
- font-family: Arial;
- background-color: #eee;
- border: none;
- padding: 5px 10px;
- border-radius: 4px;
- cursor: pointer;
- cursor: hand;
-}
-button:hover {
- background-color: #cfd8dc;
-}
-button:disabled {
- background-color: #eee;
- color: #aaa;
- cursor: auto;
-}
+/* . . . */
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 74033d91d3..76d7a579bb 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -3,10 +3,10 @@ include ../_util-fns
:marked
# Routing Around the App
We received new requirements for our Tour of Heroes application:
- * add a *Dashboard* view.
- * navigate between the *Heroes* and *Dashboard* views.
- * clicking on a hero in either view navigates to a detail view of the selected hero.
- * clicking a *deep link* in an email opens the detail view for a particular hero;
+ * Add a *Dashboard* view.
+ * Navigate between the *Heroes* and *Dashboard* views.
+ * Clicking on a hero in either view navigates to a detail view of the selected hero.
+ * Clicking a *deep link* in an email opens the detail view for a particular hero;
When we’re done, users will be able to navigate the app like this:
figure.image-display
@@ -16,7 +16,7 @@ figure.image-display
.l-sub-section
:marked
The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail
- than we will in this tour.
+ than we will in this tutorial.
p Run the #[+liveExampleLink2('', 'toh-5')] for this part.
@@ -65,10 +65,10 @@ code-example(language="bash").
## Action plan
Here's our plan
- * turn `AppComponent` into an application shell that only handles navigation.
- * relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
- * add routing
- * create a new `DashboardComponent`
+ * turn `AppComponent` into an application shell that only handles navigation,
+ * relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`,
+ * add routing,
+ * create a new `DashboardComponent`,
* tie the *Dashboard* into the navigation structure.
.l-sub-section
@@ -91,13 +91,13 @@ code-example(language="bash").
Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
and create a new `AppComponent` shell separately.
- The steps are:
- * rename `app.component.ts` file to `heroes.component.ts`.
- * rename the `AppComponent` class to `HeroesComponent`.
- * rename the selector `my-app` to `my-heroes`.
+ The steps are: rename the
+ * `app.component.ts` file to `heroes.component.ts`,
+ * `AppComponent` class to `HeroesComponent`,
+ * selector `my-app` to `my-heroes`.
:marked
-+makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (renaming)')(format=".")
++makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (showing renamings only)')(format=".")
:marked
## Create *AppComponent*
@@ -154,10 +154,10 @@ code-example(language="bash").
The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`),
and a configuration decorator (`RouteConfig`). We'll import them all together:
-+makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app.component.ts (router imports)')(format=".")
++makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app/app.component.ts (router imports)')(format=".")
:marked
Next we update the `directives` and `providers` metadata arrays to *include* the router assets.
-+makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app.component.ts (directives and providers)')(format=".")
++makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app/app.component.ts (directives and providers)')(format=".")
:marked
Notice that we also removed the `HeroesComponent` from the `directives` array.
`AppComponent` no longer shows heroes; that will be the router's job.
@@ -172,7 +172,7 @@ code-example(language="bash").
pastes a URL into the browser address bar.
Let's define our first route, a route to the `HeroesComponent`.
-+makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app.component.ts (RouteConfig for heroes)')(format=".")
++makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app/app.component.ts (RouteConfig for heroes)')(format=".")
:marked
`@RouteConfig` takes an array of *route definitions*.
We have only one route definition at the moment but rest assured, we'll add more.
@@ -203,7 +203,7 @@ code-example(language="bash").
We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
The revised template looks like this:
-+makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app.component.ts (template for Heroes)')(format=".")
++makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app/app.component.ts (template v1)')(format=".")
:marked
Notice the `[routerLink]` binding in the anchor tag.
We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array
@@ -250,7 +250,7 @@ code-example(language="bash").
Import the `DashboardComponent` so we can reference it in the dashboard route definition.
Add the following `'Dashboard'` route definition to the `@RouteConfig` array of definitions.
-+makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app.component.ts (Dashboard Route)')(format=".")
++makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app/app.component.ts (Dashboard route)')(format=".")
.l-sub-section
:marked
**useAsDefault**
@@ -265,7 +265,7 @@ code-example(language="bash").
:marked
Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
-+makeExample('toh-5/ts/app/app.component.ts','template', 'app.component.ts (template)')(format=".")
++makeExample('toh-5/ts/app/app.component.ts','template', 'app/app.component.ts (template)')(format=".")
.l-sub-section
:marked
We nestled the two links within `