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

Commit 5c4cc9a

Browse files
wardbellwardbell
authored
docs(router): Updated usage of observables in router tutorial and developer guide (#2696)
Moved route configuration into separate variable for consistency Added async pipe to handle subscriptions for list items
2 parents 43457e9 + 1afe5dc commit 5c4cc9a

Some content is hidden

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

42 files changed

+539
-570
lines changed

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

+18-16
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
// #docplaster
22
// #docregion
3-
import { NgModule } from '@angular/core';
4-
import { RouterModule } from '@angular/router';
3+
import { NgModule } from '@angular/core';
4+
import { RouterModule, Routes } from '@angular/router';
55

66
import { AdminComponent } from './admin.component';
77
import { AdminDashboardComponent } from './admin-dashboard.component';
88
import { ManageCrisesComponent } from './manage-crises.component';
99
import { ManageHeroesComponent } from './manage-heroes.component';
1010

1111
// #docregion admin-routes
12-
@NgModule({
13-
imports: [
14-
RouterModule.forChild([
12+
const adminRoutes: Routes = [
13+
{
14+
path: 'admin',
15+
component: AdminComponent,
16+
children: [
1517
{
16-
path: 'admin',
17-
component: AdminComponent,
18+
path: '',
1819
children: [
19-
{
20-
path: '',
21-
children: [
22-
{ path: 'crises', component: ManageCrisesComponent },
23-
{ path: 'heroes', component: ManageHeroesComponent },
24-
{ path: '', component: AdminDashboardComponent }
25-
]
26-
}
20+
{ path: 'crises', component: ManageCrisesComponent },
21+
{ path: 'heroes', component: ManageHeroesComponent },
22+
{ path: '', component: AdminDashboardComponent }
2723
]
2824
}
29-
])
25+
]
26+
}
27+
];
28+
29+
@NgModule({
30+
imports: [
31+
RouterModule.forChild(adminRoutes)
3032
],
3133
exports: [
3234
RouterModule

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

+23-21
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// #docplaster
22
// #docregion
33
import { NgModule } from '@angular/core';
4-
import { RouterModule } from '@angular/router';
4+
import { RouterModule, Routes } from '@angular/router';
55

66
import { AdminComponent } from './admin.component';
77
import { AdminDashboardComponent } from './admin-dashboard.component';
@@ -11,29 +11,31 @@ import { ManageHeroesComponent } from './manage-heroes.component';
1111
// #docregion admin-route, can-activate-child
1212
import { AuthGuard } from '../auth-guard.service';
1313

14-
@NgModule({
15-
imports: [
16-
RouterModule.forChild([
14+
const adminRoutes: Routes = [
15+
{
16+
path: 'admin',
17+
component: AdminComponent,
18+
canActivate: [AuthGuard],
19+
children: [
1720
{
18-
path: 'admin',
19-
component: AdminComponent,
20-
canActivate: [AuthGuard],
21+
path: '',
2122
children: [
22-
{
23-
path: '',
24-
children: [
25-
{ path: 'crises', component: ManageCrisesComponent },
26-
{ path: 'heroes', component: ManageHeroesComponent },
27-
{ path: '', component: AdminDashboardComponent }
28-
],
29-
// #enddocregion admin-route
30-
// #docregion can-activate-child
31-
canActivateChild: [AuthGuard]
32-
// #docregion admin-route
33-
}
34-
]
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
3531
}
36-
])
32+
]
33+
}
34+
];
35+
36+
@NgModule({
37+
imports: [
38+
RouterModule.forChild(adminRoutes)
3739
],
3840
exports: [
3941
RouterModule

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

+20-18
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// #docplaster
22
// #docregion
3-
import { NgModule } from '@angular/core';
4-
import { RouterModule } from '@angular/router';
3+
import { NgModule } from '@angular/core';
4+
import { RouterModule, Routes } from '@angular/router';
55

66
import { AdminComponent } from './admin.component';
77
import { AdminDashboardComponent } from './admin-dashboard.component';
@@ -12,26 +12,28 @@ import { ManageHeroesComponent } from './manage-heroes.component';
1212
import { AuthGuard } from '../auth-guard.service';
1313

1414
// #docregion can-activate-child
15-
@NgModule({
16-
imports: [
17-
RouterModule.forChild([
15+
const adminRoutes: Routes = [
16+
{
17+
path: 'admin',
18+
component: AdminComponent,
19+
canActivate: [AuthGuard],
20+
children: [
1821
{
19-
path: 'admin',
20-
component: AdminComponent,
21-
canActivate: [AuthGuard],
22+
path: '',
23+
canActivateChild: [AuthGuard],
2224
children: [
23-
{
24-
path: '',
25-
canActivateChild: [AuthGuard],
26-
children: [
27-
{ path: 'crises', component: ManageCrisesComponent },
28-
{ path: 'heroes', component: ManageHeroesComponent },
29-
{ path: '', component: AdminDashboardComponent }
30-
]
31-
}
25+
{ path: 'crises', component: ManageCrisesComponent },
26+
{ path: 'heroes', component: ManageHeroesComponent },
27+
{ path: '', component: AdminDashboardComponent }
3228
]
3329
}
34-
])
30+
]
31+
}
32+
];
33+
34+
@NgModule({
35+
imports: [
36+
RouterModule.forChild(adminRoutes)
3537
],
3638
exports: [
3739
RouterModule

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

+19-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// #docplaster
22
// #docregion
3-
import { NgModule } from '@angular/core';
4-
import { RouterModule } from '@angular/router';
3+
import { NgModule } from '@angular/core';
4+
import { RouterModule, Routes } from '@angular/router';
55

66
import { AdminComponent } from './admin.component';
77
import { AdminDashboardComponent } from './admin-dashboard.component';
@@ -11,26 +11,28 @@ import { ManageHeroesComponent } from './manage-heroes.component';
1111
// #docregion admin-route
1212
import { AuthGuard } from '../auth-guard.service';
1313

14-
@NgModule({
15-
imports: [
16-
RouterModule.forChild([
14+
const adminRoutes: Routes = [
15+
{
16+
path: '',
17+
component: AdminComponent,
18+
canActivate: [AuthGuard],
19+
children: [
1720
{
1821
path: '',
19-
component: AdminComponent,
20-
canActivate: [AuthGuard],
22+
canActivateChild: [AuthGuard],
2123
children: [
22-
{
23-
path: '',
24-
canActivateChild: [AuthGuard],
25-
children: [
26-
{ path: 'crises', component: ManageCrisesComponent },
27-
{ path: 'heroes', component: ManageHeroesComponent },
28-
{ path: '', component: AdminDashboardComponent }
29-
]
30-
}
24+
{ path: 'crises', component: ManageCrisesComponent },
25+
{ path: 'heroes', component: ManageHeroesComponent },
26+
{ path: '', component: AdminDashboardComponent }
3127
]
3228
}
33-
])
29+
]
30+
}
31+
];
32+
33+
@NgModule({
34+
imports: [
35+
RouterModule.forChild(adminRoutes)
3436
],
3537
exports: [
3638
RouterModule

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

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
// #docplaster
22
// #docregion
3-
import { NgModule } from '@angular/core';
4-
import { RouterModule } from '@angular/router';
3+
import { NgModule } from '@angular/core';
4+
import { RouterModule, Routes } from '@angular/router';
55

66
import { CrisisListComponent } from './crisis-list.component';
77
import { HeroListComponent } from './hero-list.component';
88

9+
const appRoutes: Routes = [
10+
{ path: 'crisis-center', component: CrisisListComponent },
11+
{ path: 'heroes', component: HeroListComponent }
12+
];
13+
914
@NgModule({
1015
imports: [
11-
RouterModule.forRoot([
12-
{ path: 'crisis-center', component: CrisisListComponent },
13-
{ path: 'heroes', component: HeroListComponent }
14-
])
16+
RouterModule.forRoot(appRoutes)
1517
],
1618
exports: [
1719
RouterModule

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

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
// #docplaster
22
// #docregion
3-
import { NgModule } from '@angular/core';
4-
import { RouterModule } from '@angular/router';
3+
import { NgModule } from '@angular/core';
4+
import { RouterModule, Routes } from '@angular/router';
55

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

8+
const appRoutes: Routes = [
9+
{ path: 'crisis-center', component: CrisisListComponent }
10+
];
11+
812
@NgModule({
913
imports: [
10-
RouterModule.forRoot([
11-
{ path: 'crisis-center', component: CrisisListComponent },
12-
])
14+
RouterModule.forRoot(appRoutes)
1315
],
1416
exports: [
1517
RouterModule

‎public/docs/_examples/router/ts/app/app-routing.module.3.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
// #docplaster
22
// #docregion
33
import { NgModule } from '@angular/core';
4-
import { RouterModule } from '@angular/router';
4+
import { RouterModule, Routes } from '@angular/router';
5+
6+
const appRoutes: Routes = [
7+
8+
];
59

610
@NgModule({
711
imports: [
8-
RouterModule.forRoot([
9-
10-
])
12+
RouterModule.forRoot(appRoutes)
1113
],
1214
exports: [
1315
RouterModule

‎public/docs/_examples/router/ts/app/app-routing.module.4.ts

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
// #docplaster
22
// #docregion
3-
import { NgModule } from '@angular/core';
4-
import { RouterModule } from '@angular/router';
3+
import { NgModule } from '@angular/core';
4+
import { RouterModule, Routes } from '@angular/router';
55

66
import { CanDeactivateGuard } from './can-deactivate-guard.service';
77

8+
const appRoutes: Routes = [
9+
10+
];
11+
812
@NgModule({
913
imports: [
10-
RouterModule.forRoot([
11-
12-
])
14+
RouterModule.forRoot(appRoutes)
1315
],
1416
exports: [
1517
RouterModule

‎public/docs/_examples/router/ts/app/app-routing.module.5.ts

+13-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// #docregion
33
import { NgModule } from '@angular/core';
44
// #docregion import-router
5-
import { RouterModule } from '@angular/router';
5+
import { RouterModule, Routes } from '@angular/router';
66
// #enddocregion import-router
77

88
import { CanDeactivateGuard } from './can-deactivate-guard.service';
@@ -11,17 +11,20 @@ import { AuthGuard } from './auth-guard.service';
1111
// #enddocregion can-load-guard
1212

1313
// #docregion lazy-load-admin, can-load-guard
14+
15+
const appRoutes: Routes = [
16+
{
17+
path: 'admin',
18+
loadChildren: 'app/admin/admin.module#AdminModule',
19+
// #enddocregion lazy-load-admin
20+
canLoad: [AuthGuard]
21+
// #docregion lazy-load-admin
22+
}
23+
];
24+
1425
@NgModule({
1526
imports: [
16-
RouterModule.forRoot([
17-
{
18-
path: 'admin',
19-
loadChildren: 'app/admin/admin.module#AdminModule',
20-
// #enddocregion lazy-load-admin
21-
canLoad: [AuthGuard]
22-
// #docregion lazy-load-admin
23-
}
24-
])
27+
RouterModule.forRoot(appRoutes)
2528
],
2629
exports: [
2730
RouterModule

0 commit comments

Comments
 (0)