diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 29c9bac19c..c4f6e19ba3 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -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 app.component.ts file as heroes.component.ts. - * Rename the `AppComponent` class as `HeroesComponent` (rename locally, _only_ in this file). - * Rename the selector `my-app` as `my-heroes`. + * Rename the app.component.ts file to heroes.component.ts. + * 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) with the `Array.slice` method. + In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th) with the `Array.slice()` method. 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' ? 'int.parse static method' : 'JavaScript (+) operator' +- var _str2int = _docsFor == 'dart' ? 'int.parse() 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' ? 'routerCanDeactivate hook' : 'CanDeactivate guard' -- var _CanDeactivateGuardUri = _docsFor == 'dart' ? 'angular2.router/CanDeactivate-class' : 'router/index/CanDeactivate-interface' +- var _CanDeactivateGuard = _docsFor == 'dart' ? 'routerCanDeactivate() hook' : 'CanDeactivate 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