From fb976537213da266d8fb492d117759e8b529ef6c Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 23 Nov 2016 15:42:49 -0800 Subject: [PATCH] docs(toh-5/6): update Dart to match TS, with minor tweaks to TS (#2869) * sync cache before making changes to Dart files * docs(toh-5): updates for Dart and tweaks for TS * final sync of toh cache files --- public/docs/dart/latest/tutorial/toh-pt5.jade | 32 +++++++-------- public/docs/ts/_cache/tutorial/toh-pt5.jade | 40 +++++++++++++------ public/docs/ts/_cache/tutorial/toh-pt6.jade | 7 ++++ public/docs/ts/latest/tutorial/toh-pt5.jade | 24 ++++++----- 4 files changed, 64 insertions(+), 39 deletions(-) diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade index 372a45d129..f9425e846d 100644 --- a/public/docs/dart/latest/tutorial/toh-pt5.jade +++ b/public/docs/dart/latest/tutorial/toh-pt5.jade @@ -42,7 +42,7 @@ block angular-router :marked The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), and a - configuration annotation (`RouteConfig`). We'll get them all by importing + configuration annotation (`RouteConfig`). You get them all by importing the router library: +makeExcerpt('app/app.component.ts (router imports)', 'import-router') @@ -53,22 +53,22 @@ block angular-router Not all apps need routing, which is why the Angular *Component Router* is in a separate, optional library module. - Like for any service, we make router services available to the application - by adding them to the `providers` list. Let's update the `directives` and + Like for any service, you make router services available to the application + by adding them to the `providers` list. Update the `directives` and `providers` lists to include the router assets: +makeExcerpt('app/app.component.ts (excerpt)', 'directives-and-providers') :marked - Notice that we also removed the `HeroesComponent` from the `directives` list. - `AppComponent` no longer shows heroes; that will be the router's job. - We'll soon remove `` from the template too. + `AppComponent` no longer shows heroes, that will be the router's job, + so you can remove the `HeroesComponent` from the `directives` list. + You'll soon remove `` from the template too. block router-config-intro :marked ### Configure routes and add the router - The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` + The `AppComponent` doesn't have a router yet. You'll use the `@RouteConfig` annotation to simultaneously: - Assign a router to the component @@ -77,12 +77,12 @@ block router-config-intro block routerLink :marked Notice the `[routerLink]` binding in the anchor tag. - We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list + You bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list that tells the router where to navigate when the user clicks the link. - We define a *routing instruction* with a *link parameters list*. + You define a *routing instruction* with a *link parameters list*. The list only has one element in our little sample, the quoted ***name* of the route** to follow. - Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`. + Looking back at the route configuration, confirm that `'Heroes'` is the name of the route to the `HeroesComponent`. .l-sub-section :marked Learn about the *link parameters list* @@ -90,8 +90,8 @@ block routerLink block redirect-vs-use-as-default :marked - We don't need a route definition for that. Instead, - we add `useAsDefault: true` to the dashboard *route definition* and the + You don't need a route definition for that. Instead, + add `useAsDefault: true` to the dashboard *route definition* and the router will display the dashboard when the browser URL doesn't match an existing route. block templateUrl-path-resolution @@ -105,7 +105,7 @@ block templateUrl-path-resolution block route-params :marked - We will no longer receive the hero in a parent component property binding. + You will no longer receive the hero in a parent component property binding. The new `HeroDetailComponent` should take the `id` parameter from the router's `RouteParams` service and use the `HeroService` to fetch the hero with that `id`. @@ -116,12 +116,12 @@ block ngOnInit block extract-id :marked - Notice how we extract the `id` by calling the `RouteParams.get` method. + Notice how you can extract the `id` by calling the `RouteParams.get` method. block heroes-component-cleanup :marked Because the template for `HeroesComponent` no longer uses `HeroDetailComponent` - directly — instead using the router to _navigate_ to it — we can + directly — instead using the router to _navigate_ to it — you can drop the `directives` argument from `@Component` and remove the unused hero detail import. The revised `@Component` looks like this: @@ -138,7 +138,7 @@ block router-link-active **The *router-link-active* class** The Angular Router adds the `router-link-active` class to the HTML navigation element - whose route matches the active route. All we have to do is define the style for it. Sweet! + whose route matches the active route. All you have to do is define the style for it. Sweet! block file-tree-end .filetree diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade index c959e29a85..492e15e672 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt5.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade @@ -3,7 +3,6 @@ block includes include ../_util-fns - var _appRoutingTsVsAppComp = 'app.module.ts' - - var _declsVsDirectives = 'declarations' - var _RoutesVsAtRouteConfig = 'Routes' - var _RouterModuleVsRouterDirectives = 'RouterModule' - var _redirectTo = 'redirectTo' @@ -511,10 +510,16 @@ block route-params +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor') ++ifDocsFor('ts') + :marked + Also import the `switchMap` operator to use later with the route parameters `Observable`. + + +makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import') + :marked We tell the class that we want to implement the `OnInit` interface. -+makeExcerpt('app/hero-detail.component.ts', 'implement', '')(format=".") ++makeExcerpt('app/hero-detail.component.ts', 'implement', '') block ngOnInit :marked @@ -526,14 +531,27 @@ block ngOnInit block extract-id :marked - Notice how we extract the `id` by calling the `forEach` method - which will deliver our !{_array} of route parameters. + Note how the `switchMap` operator maps the id in the observable route parameters + to a new `Observable`, the result of the `HeroService.getHero` method. + + If the user re-navigates to this component while a getHero request is still inflight, + switchMap cancels that old request before calling `HeroService.getHero` again. - var _str2int = _docsFor == 'dart' ? 'int.parse static method' : 'JavaScript (+) operator' :marked The hero `id` is a number. Route parameters are *always strings*. So we convert the route parameter value to a number with the !{_str2int}. ++ifDocsFor('ts') + .l-sub-section + :marked + ### Do I need to unsubscribe? + + The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes + the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against + memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`. + +:marked ### Add *HeroService.getHero* The problem with this bit of code is that `HeroService` doesn't have a `getHero` method! @@ -654,16 +672,16 @@ block extract-id +makeExample('app/app-routing.module.ts') :marked Noteworthy points, typical of _Routing Modules_: - * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern. + * Pulls the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern. - * Add `RouterModule.forRoot(routes)` to `imports`. + * Adds `RouterModule.forRoot(routes)` to `imports`. - * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables + * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables such as `RouterLink` and `RouterOutlet`. * No `declarations`! Declarations are the responsibility of the companion module. - * Add module `providers` for guard services if you have them; there are none in this example. + * Adds module `providers` for guard services if you have them; there are none in this example. ### Update _AppModule_ @@ -676,7 +694,7 @@ block extract-id null, `app/app.module.ts (after), app/app.module.ts (before)`) :marked - It's simpler and focused on indentifying the key pieces of the application. + It's simpler and focused on identifying the key pieces of the application. .l-main-section :marked @@ -870,9 +888,7 @@ block css-files We can also create styles at the *application level* outside of any component. Our designers provided some basic styles to apply to elements across the entire app. - These correspond to the full set of master styles that we - introduced earlier (see - [QuickStart, "Add some style"](../quickstart.html#add-some-style)). + These correspond to the full set of master styles that we installed earlier during [setup](../guide/setup.html). Here is an excerpt: +makeExcerpt('styles.css (excerpt)', 'toh') diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade index 68efb0cdb5..784fc08db6 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt6.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade @@ -618,3 +618,10 @@ block file-summary hero-search.component.css, rxjs-extensions.ts` ) + +.l-sub-section + :marked + ### Next Step + + Return to the [learning path](../guide/learning-angular.html#architecture) where + you can read about the concepts and practices you discovered in this tutorial. diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 2d7c9c1f59..492e15e672 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -510,15 +510,16 @@ block route-params +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor') -:marked - We'll also import the `switchMap` operator to use later with the route parameters `Observable`. ++ifDocsFor('ts') + :marked + Also import the `switchMap` operator to use later with the route parameters `Observable`. -+makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import') + +makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import') :marked We tell the class that we want to implement the `OnInit` interface. -+makeExcerpt('app/hero-detail.component.ts', 'implement', '')(format=".") ++makeExcerpt('app/hero-detail.component.ts', 'implement', '') block ngOnInit :marked @@ -541,13 +542,14 @@ block extract-id The hero `id` is a number. Route parameters are *always strings*. So we convert the route parameter value to a number with the !{_str2int}. -.l-sub-section - :marked - ### Do I need to unsubscribe? ++ifDocsFor('ts') + .l-sub-section + :marked + ### Do I need to unsubscribe? - The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes - the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against - memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`. + The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes + the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against + memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`. :marked ### Add *HeroService.getHero* @@ -886,7 +888,7 @@ block css-files We can also create styles at the *application level* outside of any component. Our designers provided some basic styles to apply to elements across the entire app. - These correspond to the full set of master styles that we installed earlier during [setup](../setup.html). + These correspond to the full set of master styles that we installed earlier during [setup](../guide/setup.html). Here is an excerpt: +makeExcerpt('styles.css (excerpt)', 'toh')