parent
b10e3768d1
commit
d0b325faaa
|
@ -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.
|
||||||
|
|
Loading…
Reference in New Issue