parent
b10e3768d1
commit
d0b325faaa
|
@ -34,7 +34,7 @@ include ../../../../_includes/_util-fns
|
|||
* passing optional information in [query parameters](#query-parameters)
|
||||
* 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.
|
||||
|
||||
Try that [live final version](/resources/live-examples/router/ts/plnkr.html).
|
||||
|
@ -205,11 +205,11 @@ table
|
|||
figure.image-display
|
||||
img(src='/resources/images/devguide/router/hero-list.png' alt="Hero List" width="250")
|
||||
: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
|
||||
img(src='/resources/images/devguide/router/hero-detail.png' alt="Crisis Center Detail" width="250")
|
||||
: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.
|
||||
|
||||
We could have clicked the browser's back button instead.
|
||||
|
@ -220,13 +220,12 @@ figure.image-display
|
|||
figure.image-display
|
||||
img(src='/resources/images/devguide/router/crisis-center-list.png' alt="Crisis Center List" )
|
||||
: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
|
||||
img(src='/resources/images/devguide/router/crisis-center-detail.png' alt="Crisis Center Detail")
|
||||
:marked
|
||||
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
|
||||
with by pressing the "Save" or "Cancel" buttons.
|
||||
In *Crisis Detail* our changes are temporary until we either save or discard them by pressing the "Save" or "Cancel" buttons.
|
||||
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***.
|
||||
|
@ -494,7 +493,7 @@ figure.image-display
|
|||
We also copy the `hero-detail.component.ts` and the `hero.service.ts` files
|
||||
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
|
||||
.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.
|
||||
+makeExample('router/ts/app/app.component.2.ts','hero-detail-route')(format=".")
|
||||
: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.
|
||||
|
||||
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`.
|
||||
:marked
|
||||
### 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)' )
|
||||
:marked
|
||||
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
|
||||
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.
|
||||
|
||||
Stick with the default unless you have a compelling reason to
|
||||
resort to hash routes.
|
||||
|
||||
### 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**
|
||||
|
||||
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`.
|
||||
+makeExample('router/ts/index.html','base-href')(format=".")
|
||||
: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.
|
||||
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.
|
||||
|
|
Loading…
Reference in New Issue