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

devguide(router): child route rename - "CrisisCenter" -> "CrisisList"

This commit is contained in:
Ward Bell 2016-02-16 09:18:46 -08:00
parent 8c291ab760
commit d4914eed26
6 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/docs/_examples/router/ts/app/app.component.3.ts
View File

@ -27,7 +27,7 @@ import {HeroService} from './heroes/hero.service';
*/
/* Crisis Center link when CC lacks a default
// #docregion cc-anchor-no-default
<a [routerLink]="['CrisisCenter', 'CrisisCenter']">Crisis Center</a>
<a [routerLink]="['CrisisCenter', 'CrisisList']">Crisis Center</a>
// #enddocregion cc-anchor-no-default
*/
/* Crisis Center Detail link
@ -39,7 +39,7 @@ import {HeroService} from './heroes/hero.service';
template: `
<h1 class="title">Component Router</h1>
<nav>
<a [routerLink]="['CrisisCenter', 'CrisisCenter']">Crisis Center</a>
<a [routerLink]="['CrisisCenter', 'CrisisList']">Crisis Center</a>
<a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Princess Crisis</a>
<a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:2}]">Dragon Crisis</a>
</nav>

4
public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts
View File

@ -19,9 +19,9 @@ import {CrisisService} from './crisis.service';
// #docregion route-config
@RouteConfig([
// #docregion default-route
{path:'/', name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true},
{path:'/', name: 'CrisisList', component: CrisisListComponent, useAsDefault: true},
// #enddocregion default-route
{path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent}
{path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent}
])
// #enddocregion route-config
export class CrisisCenterComponent { }

4
public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts
View File

@ -15,8 +15,8 @@ import {CrisisService} from './crisis.service';
providers: [CrisisService]
})
@RouteConfig([
{path:'/', name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true},
{path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent}
{path:'/', name: 'CrisisList', component: CrisisListComponent, useAsDefault: true},
{path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent}
])
export class CrisisCenterComponent { }
// #enddocregion

4
public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
View File

@ -82,8 +82,8 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate {
// #docregion gotoCrises
gotoCrises() {
// Like <a [routerLink]="['CrisisCenter']">Crisis Center</a
this._router.navigate(['CrisisCenter']);
// Like <a [routerLink]="['CrisisList']">Crisis Center</a
this._router.navigate(['CrisisList']);
}
// #enddocregion gotoCrises
// #docregion routerCanDeactivate, cancel-save

2
public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
View File

@ -75,7 +75,7 @@ export class CrisisDetailComponent implements OnInit, CanDeactivate {
// so that the CrisisListComponent can select that hero.
// Add a totally useless `foo` parameter for kicks.
// #docregion gotoCrises-navigate
this._router.navigate(['CrisisCenter', {id: crisisId, foo: 'foo'} ]);
this._router.navigate(['CrisisList', {id: crisisId, foo: 'foo'} ]);
// #enddocregion gotoCrises-navigate
}
// #enddocregion gotoCrises

46
public/docs/ts/latest/guide/router.jade
View File

@ -412,7 +412,7 @@ figure.image-display
1. *When the application requests navigation to a route **named** `CrisisCenter`, compose a browser URL
with the path segment `/crisis-center`, update the browser's address location and history, create or retrieve an instance of
the `CrisisCenterComponent`, and display that component's view.*
the `CrisisListComponent`, and display that component's list view.*
### "Getting Started" wrap-up
@ -808,15 +808,17 @@ code-example(format="." language="bash").
that we did earlier.
+makeExample('router/ts/app/crisis-center/crisis-center.component.1.ts', 'route-config', 'app/crisis-center/crisis-center.component.ts (routes only)' )(format=".")
:marked
There is an *important difference in the paths*. They both begin at `/`.
Normally such paths would refer to the root of the application.
The two routes terminate in the two *Crisis Center* child components, `CrisisListComponent` and `CrisisDetailComponent`.
There is an *important difference* in the treatment of the root `AppComponent` paths and these paths.
Normally paths that begin with `/` refer to the root of the application.
Here they refer to the **root of the child component!**.
The Component Router composes the final route by concatenating route paths beginning with the ancestor paths to this child router.
In our example, there is one ancestor path: "crisis-center".
The final route to the `HeroDetailComponent` displaying hero 11 would be something like:
In our example, there is one ancestor path: "crisis-center".
The final route to the `CrisisDetailComponent` displaying the crisis whose `id` is 2 would be something like:
code-example(format="").
localhost:3000//crisis-center/11
localhost:3000/crisis-center/2
:marked
We cannot know this simply by looking at the `CrisisCenterComponent` alone.
We can't tell that it is a *child* routing component.
@ -858,19 +860,21 @@ code-example(format="").
We've set the top level default route to go to the `CrisisCenterComponent`.
The final route will be a combination of `/crisis-center/`
and one of the child `CrisisCenterComponent` router's *three* routes. Which one?
and one of the child `CrisisCenterComponent` router's two routes. Which one?
It could be any of the three. In the absence of additional information, the router can't decide and must throw an error.
It could be either of them. In the absence of additional information, the router can't decide and must throw an error.
We've tried the sample application and it didn't fail. We must have done something right.
Scroll to the end of the child `CrisisCenterComponent`s first route.
Look at the end of the child `CrisisCenterComponent`s first route.
+makeExample('router/ts/app/crisis-center/crisis-center.component.1.ts', 'default-route', 'app/crisis-center/crisis-center.component.ts (default route)')(format=".")
:marked
There is `useAsDefault: true` again. That tells the router to compose the final URL using the path from the default child route.
Concatenate the base URL with `/crisis-center/` and `/`, remove extraneous slashes, and we get:
We see `useAsDefault: true` once again.
That tells the router to compose the final URL using the path from the default *child* route.
Concatenate the base URL with the parent path, `/crisis-center/`, and the child path, `/`.
Remove superfluous slashes. We get:
code-example(format="").
localhost:3000//crisis-center/
localhost:3000/crisis-center/
.l-main-section
:marked
@ -1292,25 +1296,23 @@ code-example(format="." language="bash").
These two examples cover our needs for an app with one level routing.
The moment we add a child router, such as the *Crisis Center*, we create new link array possibilities.
We specify a default child route for *Crisis Center* so this simple `RouterLink` is fine.
Recall that we specified a default child route for *Crisis Center* so this simple `RouterLink` is fine.
+makeExample('router/ts/app/app.component.3.ts', 'cc-anchor-w-default')(format=".")
:marked
If we hadn't specified a default route, our single item array would fail
*If we had not specified a default route*, our single item array would fail
because we didn't tell the router which child route to use.
+makeExample('router/ts/app/app.component.3.ts', 'cc-anchor-fail')(format=".")
:marked
We'd need to write our anchor with a link array like this:
+makeExample('router/ts/app/app.component.3.ts', 'cc-anchor-no-default')(format=".")
:marked
Huh? *Crisis Center, Crisis Center*. This looks like a routing crisis!
But it actually makes sense. Let's parse it out.
Let's parse it out.
* The first item in the array identifies the parent route ('CrisisCenter').
* There are no parameters for this parent route so we're done with it.
* There is no default for the child route so we need to pick one.
* We decide to go to the `CrisisListComponent` whose route name just happens also to be 'CrisisCenter'
* So we add that 'CrisisCenter' as the second item in the array.
* Voila! `['CrisisCenter', 'CrisisCenter']`.
* We decide to go to the `CrisisListComponent` whose route name is 'CrisisList'
* So we add that 'CrisisList' as the second item in the array.
* Voila! `['CrisisCenter', 'CrisisList']`.
Let's take it a step further.
This time we'll build a link parameters array that navigates from the root of the application
@ -1325,7 +1327,7 @@ code-example(format="." language="bash").
It looks like this!
+makeExample('router/ts/app/app.component.3.ts', 'princess-anchor')(format=".")
:marked
We could redefine our `AppComponent` template with *Crisis Center* routes exclusively
If we wanted to, we could redefine our `AppComponent` template with *Crisis Center* routes exclusively:
+makeExample('router/ts/app/app.component.3.ts', 'template')(format=".")
:marked
### Link Parameters Arrays in Redirects
@ -1342,7 +1344,7 @@ code-example(format="." language="bash").
Here's the redirect route we'll add to our configuration.
+makeExample('router/ts/app/app.component.ts', 'asteroid-route')(format=".")
:marked
We hope the picture is clear. We can write applications with one, two or more levels of routing.
In sum, we can write applications with one, two or more levels of routing.
The link parameters array affords the flexibility to represent any routing depth and
any legal sequence of route names and (optional) route parameter objects.