docs(router): copyedits and moved code excerpt earlier (#3133)

- Copyedits
- Link directly to APP_BASE_HREF API entry, no need for a callout.
- Put dragon-anchor routerLink example *before* the detailed bulleted
list that analyzes it.
This commit is contained in:
Patrice Chalin 2017-01-26 14:12:18 -08:00 committed by Filipe Silva
parent 0ecac4ec9e
commit b793d1d531
1 changed files with 16 additions and 20 deletions

View File

@ -2659,26 +2659,25 @@ a#final-app
:marked
Parse it out.
* The first item in the array identifies the parent route ('/crisis-center').
* The first item in the array identifies the parent route (`/crisis-center`).
* There are no parameters for this parent route so you're done with it.
* There is no default for the child route so you need to pick one.
* You're navigating to the `CrisisListComponent`, whose route path is '/', but you don't need to explicitly add the slash
* You're navigating to the `CrisisListComponent`, whose route path is `/`, but you don't need to explicitly add the slash
* Voila! `['/crisis-center']`.
Take it a step further.
This time you'll build a link parameters array that navigates from the root of the application
down to the "Dragon Crisis".
* The first item in the array identifies the parent route ('/crisis-center').
* There are no parameters for this parent route so you're done with it.
* The second item identifies the child route for details about a particular crisis ('/:id').
* The details child route requires an `id` route parameter
* You added the `id` of the *Dragon Crisis* as the second item in the array (`1`)
It looks like this!
Take it a step further. Consider the following router link that
navigates from the root of the application down to the *Dragon Crisis*:
+makeExcerpt('app/app.component.3.ts', 'Dragon-anchor', '')
:marked
* The first item in the array identifies the parent route (`/crisis-center`).
* There are no parameters for this parent route so you're done with it.
* The second item identifies the child route details about a particular crisis (`/:id`).
* The details child route requires an `id` route parameter.
* You added the `id` of the *Dragon Crisis* as the second item in the array (`1`).
* The resulting path is `/crisis-center/1`.
:marked
If you wanted to, you could redefine the `AppComponent` template with *Crisis Center* routes exclusively:
@ -2707,7 +2706,7 @@ a#browser-url-styles
Here's the *Crisis Center* URL in this "HTML 5 pushState" style:
code-example(format=".", language="bash").
code-example(format="nocode").
localhost:3002/crisis-center/
:marked
@ -2716,7 +2715,7 @@ code-example(format=".", language="bash").
Routers can take advantage of this exception by composing in-application route
URLs with hashes. Here's a "hash URL" that routes to the *Crisis Center*
code-example(format=".", language="bash").
code-example(format="nocode").
localhost:3002/src/#/crisis-center/
:marked
@ -2780,13 +2779,10 @@ code-example(format=".", language="bash").
Those developers may still use HTML 5 URLs by taking two remedial steps:
1. Provide the router with an appropriate `APP_BASE_HREF` value.
1. Provide the router with an appropriate [APP_BASE_HREF][] value.
1. Use _root URLs_ for all web resources: css, images, scripts, and template html files.
.l-sub-section
:marked
Learn about the [APP_BASE_HREF](../api/common/index/APP_BASE_HREF-let.html)
in the API Guide.
[APP_BASE_HREF]: ../api/common/index/APP_BASE_HREF-let.html
:marked
### *HashLocationStrategy*