docs(router): fix typos in routing and navigation chapter

closes #650
This commit is contained in:
Rabah Ghodbane 2016-01-05 16:41:47 +01:00 committed by Ward Bell
parent b10e3768d1
commit d0b325faaa
1 changed files with 11 additions and 12 deletions

View File

@ -34,7 +34,7 @@ include ../../../../_includes/_util-fns
* passing optional information in [query parameters](#query-parameters) * passing optional information in [query parameters](#query-parameters)
* choosing the "HTML5" or "hash" [URL style](#browser-url-styles) * choosing the "HTML5" or "hash" [URL style](#browser-url-styles)
We proceed in phases marked by milestones building rom a simple two-pager with placeholder views We proceed in phases marked by milestones building from a simple two-pager with placeholder views
up to a modular, multi-view design with child routes. up to a modular, multi-view design with child routes.
Try that [live final version](/resources/live-examples/router/ts/plnkr.html). Try that [live final version](/resources/live-examples/router/ts/plnkr.html).
@ -205,11 +205,11 @@ table
figure.image-display figure.image-display
img(src='/resources/images/devguide/router/hero-list.png' alt="Hero List" width="250") img(src='/resources/images/devguide/router/hero-list.png' alt="Hero List" width="250")
:marked :marked
We select one and the applications takes us to a hero editing screen. We select one and the application takes us to a hero editing screen.
figure.image-display figure.image-display
img(src='/resources/images/devguide/router/hero-detail.png' alt="Crisis Center Detail" width="250") img(src='/resources/images/devguide/router/hero-detail.png' alt="Crisis Center Detail" width="250")
:marked :marked
Our changes take affect immediately. We click the "Back" button and the Our changes take effect immediately. We click the "Back" button and the
app returns us to the Heroes list. app returns us to the Heroes list.
We could have clicked the browser's back button instead. We could have clicked the browser's back button instead.
@ -220,13 +220,12 @@ figure.image-display
figure.image-display figure.image-display
img(src='/resources/images/devguide/router/crisis-center-list.png' alt="Crisis Center List" ) img(src='/resources/images/devguide/router/crisis-center-list.png' alt="Crisis Center List" )
:marked :marked
We select one and the applications takes us to a crisis editing screen. We select one and the application takes us to a crisis editing screen.
figure.image-display figure.image-display
img(src='/resources/images/devguide/router/crisis-center-detail.png' alt="Crisis Center Detail") img(src='/resources/images/devguide/router/crisis-center-detail.png' alt="Crisis Center Detail")
:marked :marked
This is a bit different from the *Hero Detail*. *Hero Detail* saves the changes as we type. This is a bit different from the *Hero Detail*. *Hero Detail* saves the changes as we type.
In *Crisis Detail* our changes are temporary until we either save or discard them In *Crisis Detail* our changes are temporary until we either save or discard them by pressing the "Save" or "Cancel" buttons.
with by pressing the "Save" or "Cancel" buttons.
Both buttons navigate back to the *Crisis Center* and its list of crises. Both buttons navigate back to the *Crisis Center* and its list of crises.
Suppose we click a crisis, make a change, but ***do not click either button***. Suppose we click a crisis, make a change, but ***do not click either button***.
@ -494,7 +493,7 @@ figure.image-display
We also copy the `hero-detail.component.ts` and the `hero.service.ts` files We also copy the `hero-detail.component.ts` and the `hero.service.ts` files
into the `heroes/` folder. into the `heroes/` folder.
When were done organizing, we have three *Hero Management* files: When we're done organizing, we have three *Hero Management* files:
.filetree .filetree
.file app/heroes .file app/heroes
@ -536,7 +535,7 @@ figure.image-display
We added a new route definition for the `HeroDetailComponent` — and this definition has a twist. We added a new route definition for the `HeroDetailComponent` — and this definition has a twist.
+makeExample('router/ts/app/app.component.2.ts','hero-detail-route')(format=".") +makeExample('router/ts/app/app.component.2.ts','hero-detail-route')(format=".")
:marked :marked
Notice the `:id` token in the the path. That creates a slot in the path for a **Route Parameter**. Notice the `:id` token in the path. That creates a slot in the path for a **Route Parameter**.
In this case, we're expecting the router to insert the `id` of a hero into that slot. In this case, we're expecting the router to insert the `id` of a hero into that slot.
If we tell the router to navigate to the detail component and display "Magneta", we expect hero `id` (15) to appear in the If we tell the router to navigate to the detail component and display "Magneta", we expect hero `id` (15) to appear in the
@ -808,7 +807,7 @@ code-example(format="").
*We* make it a child component of our application by reconfiguring the routes of the top level `AppComponent`. *We* make it a child component of our application by reconfiguring the routes of the top level `AppComponent`.
:marked :marked
### Parent Route Configuration ### Parent Route Configuration
Here is is the revised route configuration for the parent `AppComponent`: Here is the revised route configuration for the parent `AppComponent`:
+makeExample('router/ts/app/app.component.ts', 'route-config', 'app/app.component.ts (routes only)' ) +makeExample('router/ts/app/app.component.ts', 'route-config', 'app/app.component.ts (routes only)' )
:marked :marked
The last two *Hero* routes haven't changed. The last two *Hero* routes haven't changed.
@ -1391,14 +1390,14 @@ code-example(format=".", language="bash").
could be rendered on the server and delivered to the user's device could be rendered on the server and delivered to the user's device
in less than a second. in less than a second.
Thist option is only available if application URLs look like normal web URLs This option is only available if application URLs look like normal web URLs
without hashes (#) in the middle. without hashes (#) in the middle.
Stick with the default unless you have a compelling reason to Stick with the default unless you have a compelling reason to
resort to hash routes. resort to hash routes.
### HTML 5 URLs and the *<base href>* ### HTML 5 URLs and the *<base href>*
While the router use the "[HTML 5 pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries)" While the router uses the "[HTML 5 pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries)"
style by default, we *must* configure that strategy with a **base href** style by default, we *must* configure that strategy with a **base href**
The preferred way to configure the strategy is to add a The preferred way to configure the strategy is to add a
@ -1406,7 +1405,7 @@ code-example(format=".", language="bash").
in the `<head>` of the `index.html`. in the `<head>` of the `index.html`.
+makeExample('router/ts/index.html','base-href')(format=".") +makeExample('router/ts/index.html','base-href')(format=".")
:marked :marked
Without that tag, the browser may not be be able to load resources Without that tag, the browser may not be able to load resources
(images, css, scripts) when "deep linking" into the app. (images, css, scripts) when "deep linking" into the app.
Bad things could happen when someone pastes an application link into the Bad things could happen when someone pastes an application link into the
browser's address bar or clicks such a link in an email link. browser's address bar or clicks such a link in an email link.