iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Patrice Chalin 2016-11-23 15:42:49 -08:00 committed by Filipe Silva
parent 54141c1518
commit fb97653721
4 changed files with 64 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/docs/dart/latest/tutorial/toh-pt5.jade
View File

@ -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 `<my-heroes>` 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 `<my-heroes>` 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 &mdash; instead using the router to _navigate_ to it &mdash; we can
directly &mdash; instead using the router to _navigate_ to it &mdash; 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

40
public/docs/ts/_cache/tutorial/toh-pt5.jade
View File

@ -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' ? '<code>int.parse</code> 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')

7
public/docs/ts/_cache/tutorial/toh-pt6.jade
View File

@ -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.

24
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -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')