docs(toh-5): copyedits (#3435)
This commit is contained in:
Patrice Chalin
Ward Bell
parent
e9a6001d60
commit
22918b40b5
|
|
@ -5,7 +5,7 @@ block includes
|
|||
- var _appRoutingTsVsAppComp = 'app.module.ts'
|
||||
- var _RoutesVsAtRouteConfig = 'Routes'
|
||||
- var _RouterModuleVsRouterDirectives = 'RouterModule'
|
||||
- var _redirectTo = 'redirectTo'
|
||||
- var _redirect = 'redirect'
|
||||
|
||||
:marked
|
||||
There are new requirements for the Tour of Heroes app:
|
||||
|
|
@ -65,13 +65,14 @@ block keep-app-running
|
|||
## Keep the app transpiling and running
|
||||
Enter the following command in the terminal window:
|
||||
|
||||
code-example(language="sh" class="code-shell").
|
||||
npm start
|
||||
code-example(language="sh" class="code-shell").
|
||||
npm start
|
||||
|
||||
:marked
|
||||
This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
|
||||
The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
|
||||
|
||||
:marked
|
||||
This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
|
||||
The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
|
||||
|
||||
You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
|
||||
|
||||
## Action plan
|
||||
|
|
@ -103,13 +104,13 @@ code-example(language="sh" class="code-shell").
|
|||
### *HeroesComponent*
|
||||
|
||||
`AppComponent` is already dedicated to *Heroes*.
|
||||
Instead of moving the code out of `AppComponent`, rename it `HeroesComponent`
|
||||
Instead of moving the code out of `AppComponent`, rename it to `HeroesComponent`
|
||||
and create a separate `AppComponent` shell.
|
||||
|
||||
Do the following:
|
||||
* Rename the <span ngio-ex>app.component.ts</span> file as <span ngio-ex>heroes.component.ts</span>.
|
||||
* Rename the `AppComponent` class as `HeroesComponent` (rename locally, _only_ in this file).
|
||||
* Rename the selector `my-app` as `my-heroes`.
|
||||
* Rename the <span ngio-ex>app.component.ts</span> file to <span ngio-ex>heroes.component.ts</span>.
|
||||
* Rename the `AppComponent` class to `HeroesComponent` (rename locally, _only_ in this file).
|
||||
* Rename the selector `my-app` to `my-heroes`.
|
||||
|
||||
+makeExcerpt('src/app/heroes.component.ts (showing renamings only)', 'renaming')
|
||||
|
||||
|
|
@ -117,7 +118,7 @@ code-example(language="sh" class="code-shell").
|
|||
### Create *AppComponent*
|
||||
|
||||
The new `AppComponent` is the application shell.
|
||||
It will have some navigation links at the top and a display area below for the pages users navigate to.
|
||||
It will have some navigation links at the top and a display area below.
|
||||
|
||||
Perform these steps:
|
||||
|
||||
|
|
@ -147,9 +148,9 @@ block app-comp-v1
|
|||
The app still runs and displays heroes.
|
||||
|
||||
:marked
|
||||
## Adding routing
|
||||
## Add routing
|
||||
|
||||
Instead of displaying automatically, heroes should display after users click a button.
|
||||
Instead of displaying automatically, heroes should display after users click a button.
|
||||
In other words, users should be able to navigate to the list of heroes.
|
||||
|
||||
Use the Angular router to enable navigation.
|
||||
|
|
@ -307,11 +308,11 @@ block routerLink
|
|||
+makeExcerpt('src/app/app.module.ts', 'dashboard')
|
||||
|
||||
:marked
|
||||
### Add a redirect route
|
||||
### Add a !{_redirect} route
|
||||
|
||||
Currently, the browser launches with `/` in the address bar.
|
||||
When the app starts, it should show the dashboard and
|
||||
display a `/dashboard` URL in the browser address bar.
|
||||
Currently, the browser launches with `/` in the address bar.
|
||||
|
||||
block redirect-vs-use-as-default
|
||||
:marked
|
||||
|
|
@ -387,9 +388,9 @@ block templateUrl-path-resolution
|
|||
|
||||
* Define a `heroes` !{_array} property.
|
||||
* Inject the `HeroService` in the constructor and hold it in a private `!{_priv}heroService` field.
|
||||
* Call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
|
||||
* Call the service to get heroes inside the Angular `ngOnInit()` lifecycle hook.
|
||||
|
||||
In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice` method</span>.
|
||||
In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice()` method</span>.
|
||||
|
||||
Refresh the browser to see four hero names in the new dashboard.
|
||||
|
||||
|
|
@ -480,10 +481,8 @@ block route-params
|
|||
Add the following imports:
|
||||
|
||||
- var _vers = _docsFor == 'dart' ? '' : '.1'
|
||||
|
||||
+makeExcerpt('src/app/hero-detail.component' + _vers + '.ts', 'added-imports', 'src/app/hero-detail.component')
|
||||
|
||||
|
||||
- var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
|
||||
:marked
|
||||
Inject the `!{_ActivatedRoute}`, `HeroService`, and `Location` services
|
||||
|
|
@ -504,7 +503,7 @@ block route-params
|
|||
|
||||
block ngOnInit
|
||||
:marked
|
||||
Inside the `ngOnInit` lifecycle hook, use the `params` Observable to
|
||||
Inside the `ngOnInit()` lifecycle hook, use the `params` Observable to
|
||||
extract the `id` parameter value from the `ActivatedRoute` service
|
||||
and use the `HeroService` to fetch the hero with that `id`.
|
||||
|
||||
|
|
@ -519,7 +518,7 @@ block extract-id
|
|||
If a user re-navigates to this component while a `getHero` request is still processing,
|
||||
`switchMap` cancels the old request and then calls `HeroService.getHero()` again.
|
||||
|
||||
- var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
|
||||
- var _str2int = _docsFor == 'dart' ? '<code>int.parse()</code> static method' : 'JavaScript (+) operator'
|
||||
:marked
|
||||
The hero `id` is a number. Route parameters are always strings.
|
||||
So the route parameter value is converted to a number with the !{_str2int}.
|
||||
|
|
@ -536,10 +535,10 @@ block extract-id
|
|||
memory leaks, so you don't need to unsubscribe from the route `params` `Observable`.
|
||||
|
||||
:marked
|
||||
### Add *HeroService.getHero*
|
||||
### Add *HeroService.getHero()*
|
||||
|
||||
In the previous code snippet, `HeroService` doesn't have a `getHero()` method. To fix this issue,
|
||||
open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes` by `id`.
|
||||
open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes()` by `id`.
|
||||
|
||||
+makeExcerpt('src/app/hero.service.ts', 'getHero')
|
||||
|
||||
|
|
@ -554,13 +553,12 @@ block extract-id
|
|||
|
||||
+makeExcerpt('src/app/hero-detail.component.ts', 'goBack')
|
||||
|
||||
- var _CanDeactivateGuard = _docsFor == 'dart' ? '<em>routerCanDeactivate</em> hook' : '<em>CanDeactivate</em> guard'
|
||||
- var _CanDeactivateGuardUri = _docsFor == 'dart' ? 'angular2.router/CanDeactivate-class' : 'router/index/CanDeactivate-interface'
|
||||
- var _CanDeactivateGuard = _docsFor == 'dart' ? '<em>routerCanDeactivate()</em> hook' : '<em>CanDeactivate</em> guard'
|
||||
.l-sub-section
|
||||
:marked
|
||||
Going back too far could take users out of the app.
|
||||
In a real app, you can prevent this issue with the !{_CanDeactivateGuard}.
|
||||
Read more on the [CanDeactivate](../api/!{_CanDeactivateGuardUri}.html) page.
|
||||
Read more on the [CanDeactivate](../api/router/index/CanDeactivate-interface.html) page.
|
||||
|
||||
:marked
|
||||
You'll wire this method with an event binding to a *Back* button that you'll add to the component template.
|
||||
|
|
@ -660,14 +658,13 @@ block extract-id
|
|||
Delete the routing configuration from `AppModule` and import the `AppRoutingModule`.
|
||||
Use an ES `import` statement *and* add it to the `NgModule.imports` list.
|
||||
|
||||
:marked
|
||||
Here is the revised `AppModule`, compared to its pre-refactor state:
|
||||
|
||||
+makeTabs(
|
||||
+makeTabs(
|
||||
`toh-5/ts/src/app/app.module.ts, toh-5/ts/src/app/app.module.3.ts`,
|
||||
null,
|
||||
`src/app/app.module.ts (after), src/app/app.module.ts (before)`)
|
||||
:marked
|
||||
:marked
|
||||
The revised and simplified `AppModule` is focused on identifying the key pieces of the app.
|
||||
|
||||
.l-main-section
|
||||
|
|
@ -771,14 +768,14 @@ block heroes-component-cleanup
|
|||
|
||||
1. Import the `router` from the Angular router library.
|
||||
1. Inject the `router` in the constructor, along with the `HeroService`.
|
||||
1. Implement `gotoDetail()` by calling the `router.navigate()` method.
|
||||
1. Implement `gotoDetail()` by calling the router `navigate()` method.
|
||||
|
||||
+makeExcerpt('src/app/heroes.component.ts', 'gotoDetail')
|
||||
|
||||
:marked
|
||||
Note that you're passing a two-element *link parameters !{_array}*—a
|
||||
path and the route parameter—to
|
||||
the `router.navigate()` method, just as you did in the `[routerLink]` binding
|
||||
!{_pathVsName} and the route parameter—to
|
||||
the router `navigate()` method, just as you did in the `[routerLink]` binding
|
||||
back in the `DashboardComponent`.
|
||||
Here's the revised `HeroesComponent` class:
|
||||
|
||||
|
|
@ -821,13 +818,12 @@ block heroes-component-cleanup
|
|||
|
||||
Here's the content for the component CSS files.
|
||||
|
||||
block css-files
|
||||
+makeTabs(
|
||||
`toh-5/ts/src/app/hero-detail.component.css,
|
||||
toh-5/ts/src/app/dashboard.component.css`,
|
||||
null,
|
||||
`src/app/hero-detail.component.css,
|
||||
src/app/dashboard.component.css`)
|
||||
+makeTabs(
|
||||
`toh-5/ts/src/app/hero-detail.component.css,
|
||||
toh-5/ts/src/app/dashboard.component.css`,
|
||||
null,
|
||||
`src/app/hero-detail.component.css,
|
||||
src/app/dashboard.component.css`)
|
||||
|
||||
:marked
|
||||
### Style the navigation links
|
||||
|
|
@ -848,7 +844,6 @@ block css-files
|
|||
add a class to the HTML navigation element whose route matches the active route.
|
||||
All you have to do is define the style for it.
|
||||
|
||||
|
||||
+makeExcerpt('src/app/app.component.ts (active router links)', 'template')
|
||||
|
||||
:marked
|
||||
|
|
|
|||
Loading…
Reference in New Issue