Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit c15a68e

Browse files
brandonrobertsnaomiblack
brandonroberts
authored and
naomiblack
committed
docs(router): Added and organized more router dev guide content
Moved all heroes functionality into milestone 2 Crisis Center initial functionality is milestone 3 Admin feature module as milestone 4 including route guard examples Updated milestone 5 to lazy load admin feature module Added examples for CanLoad, CanActivateChildren guard, component-less routes Added section on explanation of ActivatedRoute Added section on animating route components Added section on relative navigation
1 parent 4d46d7c commit c15a68e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1418
-753
lines changed

‎public/docs/_examples/router/e2e-spec.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ describe('Router', function () {
1616

1717
crisisHref: hrefEles.get(0),
1818
crisisList: element.all(by.css('my-app > ng-component > ng-component li')),
19-
crisisDetail: element(by.css('my-app > ng-component > ng-component > div')),
20-
crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > div > h3')),
19+
crisisDetail: element(by.css('my-app > ng-component > ng-component > ng-component > div')),
20+
crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > ng-component > div > h3')),
2121

2222
heroesHref: hrefEles.get(1),
2323
heroesList: element.all(by.css('my-app > ng-component li')),
@@ -34,7 +34,7 @@ describe('Router', function () {
3434
expect(page.hrefs.count()).toEqual(4, 'should be 4 dashboard choices');
3535
expect(page.crisisHref.getText()).toEqual('Crisis Center');
3636
expect(page.heroesHref.getText()).toEqual('Heroes');
37-
expect(page.adminHref.getText()).toEqual('Crisis Admin');
37+
expect(page.adminHref.getText()).toEqual('Admin');
3838
expect(page.loginHref.getText()).toEqual('Login');
3939
});
4040

@@ -118,7 +118,6 @@ describe('Router', function () {
118118
crisisText = text.substr(text.indexOf(' ')).trim();
119119
return crisisEle.click();
120120
}).then(function () {
121-
expect(page.crisisList.count()).toBe(0, 'should no longer see crisis center entries');
122121
expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
123122
expect(page.crisisDetailTitle.getText()).toContain(crisisText);
124123
let inputEle = page.crisisDetail.element(by.css('input'));

‎public/docs/_examples/router/ts/app/admin/admin-dashboard.component.1.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
template: `
6+
<p>Dashboard</p>
7+
`
8+
})
9+
export class AdminDashboardComponent { }

‎public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts renamed to ‎public/docs/_examples/router/ts/app/admin/admin-dashboard.component.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@ import 'rxjs/add/operator/map';
66

77
@Component({
88
template: `
9-
<h3>CRISIS ADMINISTRATION</h3>
10-
<p>Manage your crises here</p>
9+
<p>Dashboard</p>
1110
1211
<p>Session ID: {{ sessionId | async }}</p>
1312
<a id="anchor"></a>
1413
<p>Token: {{ token | async }}</p>
1514
`
1615
})
17-
export class CrisisAdminComponent implements OnInit {
16+
export class AdminDashboardComponent implements OnInit {
1817
sessionId: Observable<string>;
1918
token: Observable<string>;
2019

‎public/docs/_examples/router/ts/app/admin/admin.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
template: `
6+
<h3>ADMIN</h3>
7+
<nav>
8+
<a routerLink="./" routerLinkActive="active"
9+
[routerLinkActiveOptions]="{ exact: true }">Dashboard</a>
10+
<a routerLink="./crises" routerLinkActive="active">Manage Crises</a>
11+
<a routerLink="./heroes" routerLinkActive="active">Manage Heroes</a>
12+
</nav>
13+
<router-outlet></router-outlet>
14+
`
15+
})
16+
export class AdminComponent {
17+
}

‎public/docs/_examples/router/ts/app/admin/admin.module.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// #docplaster
2+
// #docregion
3+
import { NgModule } from '@angular/core';
4+
import { CommonModule } from '@angular/common';
5+
6+
import { AdminComponent } from './admin.component';
7+
import { AdminDashboardComponent } from './admin-dashboard.component';
8+
import { ManageCrisesComponent } from './manage-crises.component';
9+
import { ManageHeroesComponent } from './manage-heroes.component';
10+
11+
import { adminRouting } from './admin.routing';
12+
13+
@NgModule({
14+
imports: [
15+
CommonModule,
16+
adminRouting
17+
],
18+
declarations: [
19+
AdminComponent,
20+
AdminDashboardComponent,
21+
ManageCrisesComponent,
22+
ManageHeroesComponent
23+
]
24+
})
25+
// #docregion admin-module-export
26+
export class AdminModule {}
27+
// #enddocregion admin-module-export
28+
// #enddocregion

‎public/docs/_examples/router/ts/app/admin/admin.routing.1.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// #docplaster
2+
// #docregion
3+
import { ModuleWithProviders } from '@angular/core';
4+
import { Routes, RouterModule } from '@angular/router';
5+
6+
import { AdminComponent } from './admin.component';
7+
import { AdminDashboardComponent } from './admin-dashboard.component';
8+
import { ManageCrisesComponent } from './manage-crises.component';
9+
import { ManageHeroesComponent } from './manage-heroes.component';
10+
11+
// #docregion admin-routes
12+
const adminRoutes: Routes = [
13+
{
14+
path: 'admin',
15+
component: AdminComponent,
16+
children: [
17+
{
18+
path: '',
19+
children: [
20+
{ path: 'crises', component: ManageCrisesComponent },
21+
{ path: 'heroes', component: ManageHeroesComponent },
22+
{ path: '', component: AdminDashboardComponent }
23+
]
24+
}
25+
]
26+
}
27+
];
28+
29+
export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
30+
// #enddocregion admin-routes
31+
// #enddocregion

‎public/docs/_examples/router/ts/app/admin/admin.routing.2.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// #docplaster
2+
// #docregion
3+
import { ModuleWithProviders } from '@angular/core';
4+
import { Routes, RouterModule } from '@angular/router';
5+
6+
import { AdminComponent } from './admin.component';
7+
import { AdminDashboardComponent } from './admin-dashboard.component';
8+
import { ManageCrisesComponent } from './manage-crises.component';
9+
import { ManageHeroesComponent } from './manage-heroes.component';
10+
11+
// #docregion admin-route, can-activate-child
12+
import { AuthGuard } from '../auth-guard.service';
13+
14+
const adminRoutes: Routes = [
15+
{
16+
path: 'admin',
17+
component: AdminComponent,
18+
canActivate: [AuthGuard],
19+
children: [
20+
{
21+
path: '',
22+
children: [
23+
{ path: 'crises', component: ManageCrisesComponent },
24+
{ path: 'heroes', component: ManageHeroesComponent },
25+
{ path: '', component: AdminDashboardComponent }
26+
],
27+
// #enddocregion admin-route
28+
// #docregion can-activate-child
29+
canActivateChild: [AuthGuard]
30+
// #docregion admin-route
31+
}
32+
]
33+
}
34+
];
35+
36+
export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
37+
// #enddocregion

‎public/docs/_examples/router/ts/app/admin/admin.routing.3.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// #docplaster
2+
// #docregion
3+
import { ModuleWithProviders } from '@angular/core';
4+
import { Routes, RouterModule } from '@angular/router';
5+
6+
import { AdminComponent } from './admin.component';
7+
import { AdminDashboardComponent } from './admin-dashboard.component';
8+
import { ManageCrisesComponent } from './manage-crises.component';
9+
import { ManageHeroesComponent } from './manage-heroes.component';
10+
11+
// #docregion admin-route
12+
import { AuthGuard } from '../auth-guard.service';
13+
14+
// #docregion can-activate-child
15+
const adminRoutes: Routes = [
16+
{
17+
path: 'admin',
18+
component: AdminComponent,
19+
canActivate: [AuthGuard],
20+
children: [
21+
{
22+
path: '',
23+
canActivateChild: [AuthGuard],
24+
children: [
25+
{ path: 'crises', component: ManageCrisesComponent },
26+
{ path: 'heroes', component: ManageHeroesComponent },
27+
{ path: '', component: AdminDashboardComponent }
28+
]
29+
}
30+
]
31+
}
32+
];
33+
34+
export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
35+
// #enddocregion

‎public/docs/_examples/router/ts/app/admin/admin.routing.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// #docplaster
2+
// #docregion
3+
import { ModuleWithProviders } from '@angular/core';
4+
import { Routes, RouterModule } from '@angular/router';
5+
6+
import { AdminComponent } from './admin.component';
7+
import { AdminDashboardComponent } from './admin-dashboard.component';
8+
import { ManageCrisesComponent } from './manage-crises.component';
9+
import { ManageHeroesComponent } from './manage-heroes.component';
10+
11+
// #docregion admin-route
12+
import { AuthGuard } from '../auth-guard.service';
13+
14+
const adminRoutes: Routes = [
15+
{
16+
path: '',
17+
component: AdminComponent,
18+
canActivate: [AuthGuard],
19+
children: [
20+
{
21+
path: '',
22+
canActivateChild: [AuthGuard],
23+
children: [
24+
{ path: 'crises', component: ManageCrisesComponent },
25+
{ path: 'heroes', component: ManageHeroesComponent },
26+
{ path: '', component: AdminDashboardComponent }
27+
]
28+
}
29+
]
30+
}
31+
];
32+
33+
export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
34+
// #enddocregion

‎public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts renamed to ‎public/docs/_examples/router/ts/app/admin/manage-crises.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { Component } from '@angular/core';
33

44
@Component({
55
template: `
6-
<h3>CRISIS ADMINISTRATION</h3>
76
<p>Manage your crises here</p>
87
`
98
})
10-
export class CrisisAdminComponent { }
9+
export class ManageCrisesComponent { }

‎public/docs/_examples/router/ts/app/admin/manage-heroes.component.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
template: `
6+
<p>Manage your heroes here</p>
7+
`
8+
})
9+
export class ManageHeroesComponent { }

‎public/docs/_examples/router/ts/app/app.component.1.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
66
selector: 'my-app',
77
// #docregion template
88
template: `
9-
<h1>Component Router</h1>
9+
<h1>Angular Router</h1>
1010
<nav>
1111
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
1212
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

‎public/docs/_examples/router/ts/app/app.component.2.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
77
@Component({
88
selector: 'my-app',
99
template: `
10-
<h1>Component Router</h1>
10+
<h1>Angular Router</h1>
1111
<nav>
1212
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
1313
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

‎public/docs/_examples/router/ts/app/app.component.3.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* tslint:disable:no-unused-variable */
22
// #docplaster
33
import { Component } from '@angular/core';
4-
import { Router } from '@angular/router';
4+
import { Router } from '@angular/router';
55

66
@Component({
77
selector: 'my-app',
@@ -36,7 +36,7 @@ import { Router } from '@angular/router';
3636
*/
3737
// #docregion template
3838
template: `
39-
<h1 class="title">Component Router</h1>
39+
<h1 class="title">Angular Router</h1>
4040
<nav>
4141
<a [routerLink]="['/crisis-center']">Crisis Center</a>
4242
<a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>

‎public/docs/_examples/router/ts/app/app.component.4.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
// #docregion
2-
import { Component } from '@angular/core';
2+
import { Component } from '@angular/core';
33

44
@Component({
55
selector: 'my-app',
66
// #docregion template
77
template: `
8-
<h1 class="title">Component Router</h1>
8+
<h1 class="title">Angular Router</h1>
99
<nav>
10-
<a routerLink="/crisis-center" routerLinkActive="active"
11-
[routerLinkActiveOptions]="{ exact: true }">Crisis Center</a>
10+
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
1211
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
13-
<a routerLink="/crisis-center/admin" routerLinkActive="active">Crisis Admin</a>
12+
<a routerLink="/admin" routerLinkActive="active">Admin</a>
1413
</nav>
1514
<router-outlet></router-outlet>
1615
`

‎public/docs/_examples/router/ts/app/app.component.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
// #docplaster
22
// #docregion
3-
import { Component } from '@angular/core';
3+
import { Component } from '@angular/core';
44

55
@Component({
66
selector: 'my-app',
77
// #docregion template
88
template: `
9-
<h1 class="title">Component Router</h1>
9+
<h1 class="title">Angular Router</h1>
1010
<nav>
11-
<a routerLink="/crisis-center" routerLinkActive="active"
12-
[routerLinkActiveOptions]="{ exact: true }">Crisis Center</a>
11+
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
1312
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
14-
<a routerLink="/crisis-center/admin" routerLinkActive="active">Crisis Admin</a>
13+
<a routerLink="/admin" routerLinkActive="active">Admin</a>
1514
<a routerLink="/login" routerLinkActive="active">Login</a>
1615
</nav>
1716
<router-outlet></router-outlet>

‎public/docs/_examples/router/ts/app/app.module.1.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@ import { NgModule } from '@angular/core';
44
import { BrowserModule } from '@angular/platform-browser';
55
import { FormsModule } from '@angular/forms';
66

7-
87
// #docregion router-basics
9-
import { AppComponent } from './app.component';
8+
import { AppComponent } from './app.component';
109
import { routing,
11-
appRoutingProviders } from './app.routing';
10+
appRoutingProviders } from './app.routing';
1211

1312
import { HeroListComponent } from './hero-list.component';
1413
import { CrisisListComponent } from './crisis-list.component';

‎public/docs/_examples/router/ts/app/app.module.2.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// #docplaster
22
// #docregion
3+
// #docregion hero-import
34
import { NgModule } from '@angular/core';
45
import { BrowserModule } from '@angular/platform-browser';
56
import { FormsModule } from '@angular/forms';
67

7-
import { AppComponent } from './app.component';
8+
import { AppComponent } from './app.component';
89
import { routing,
9-
appRoutingProviders } from './app.routing';
10+
appRoutingProviders } from './app.routing';
1011

11-
// #docregion hero-import
1212
import { HeroesModule } from './heroes/heroes.module';
1313

1414
import { CrisisListComponent } from './crisis-list.component';

0 commit comments

Comments
 (0)