Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

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

Merged
merged 1 commit into from
Jan 26, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 16 additions & 20 deletions public/docs/ts/latest/guide/router.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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*
Expand Down