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

Commit 2f5306f

Browse files
brandonrobertswardbell
brandonroberts
authored and
wardbell
committed
docs(router): Added example of feature module pre-loading (#2595)
* added example of feature module pre-loading * added transition aliases for route animations
1 parent 3eb7a41 commit 2f5306f

16 files changed

+379
-50
lines changed

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use strict'; // necessary for es6 output in node
1+
'use strict'; // necessary for es6 output in node
22

33
import { browser, element, by, ElementFinder } from 'protractor';
44

@@ -27,7 +27,10 @@ describe('Router', function () {
2727
heroDetailTitle: element(by.css('my-app > ng-component > div > h3')),
2828

2929
adminHref: hrefEles.get(2),
30-
loginHref: hrefEles.get(3)
30+
adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')),
31+
loginHref: hrefEles.get(3),
32+
loginButton: element.all(by.css('my-app > ng-component > p > button')),
33+
3134
};
3235
}
3336

@@ -105,6 +108,16 @@ describe('Router', function () {
105108
});
106109
});
107110

111+
it('should be able to see the preloaded modules', function () {
112+
let page = getPageStruct();
113+
page.loginHref.click().then(function() {
114+
return page.loginButton.click();
115+
}).then(function() {
116+
expect(page.adminPreloadList.count()).toBe(1, 'should be 1 preloaded module');
117+
expect(page.adminPreloadList.first().getText()).toBe('crisis-center', 'first preload should be crisis center');
118+
});
119+
});
120+
108121
function crisisCenterEdit(index: number, shouldSave: boolean) {
109122
let page = getPageStruct();
110123
let crisisEle: ElementFinder;

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// #docregion
2+
import { Component, OnInit } from '@angular/core';
3+
import { ActivatedRoute } from '@angular/router';
4+
import { Observable } from 'rxjs/Observable';
5+
import 'rxjs/add/operator/map';
6+
7+
@Component({
8+
template: `
9+
<p>Dashboard</p>
10+
11+
<p>Session ID: {{ sessionId | async }}</p>
12+
<a id="anchor"></a>
13+
<p>Token: {{ token | async }}</p>
14+
`
15+
})
16+
export class AdminDashboardComponent implements OnInit {
17+
sessionId: Observable<string>;
18+
token: Observable<string>;
19+
20+
constructor(private route: ActivatedRoute) {}
21+
22+
ngOnInit() {
23+
// Capture the session ID if available
24+
this.sessionId = this.route
25+
.queryParams
26+
.map(params => params['session_id'] || 'None');
27+
28+
// Capture the fragment if available
29+
this.token = this.route
30+
.fragment
31+
.map(fragment => fragment || 'None');
32+
}
33+
}

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// #docregion
2-
import { Component, OnInit } from '@angular/core';
3-
import { ActivatedRoute } from '@angular/router';
4-
import { Observable } from 'rxjs/Observable';
2+
import { Component, OnInit } from '@angular/core';
3+
import { ActivatedRoute } from '@angular/router';
4+
import { Observable } from 'rxjs/Observable';
5+
import { PreloadSelectedModules } from '../selective-preload-strategy';
6+
57
import 'rxjs/add/operator/map';
68

79
@Component({
@@ -11,13 +13,24 @@ import 'rxjs/add/operator/map';
1113
<p>Session ID: {{ sessionId | async }}</p>
1214
<a id="anchor"></a>
1315
<p>Token: {{ token | async }}</p>
16+
17+
Preloaded Modules
18+
<ul>
19+
<li *ngFor="let module of modules">{{ module }}</li>
20+
</ul>
1421
`
1522
})
1623
export class AdminDashboardComponent implements OnInit {
1724
sessionId: Observable<string>;
1825
token: Observable<string>;
26+
modules: string[];
1927

20-
constructor(private route: ActivatedRoute) {}
28+
constructor(
29+
private route: ActivatedRoute,
30+
private preloadStrategy: PreloadSelectedModules
31+
) {
32+
this.modules = preloadStrategy.preloadedModules;
33+
}
2134

2235
ngOnInit() {
2336
// Capture the session ID if available

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// #docplaster
2+
// #docregion
3+
import { NgModule } from '@angular/core';
4+
// #docregion import-router
5+
import { RouterModule } from '@angular/router';
6+
// #enddocregion import-router
7+
8+
import { CanDeactivateGuard } from './can-deactivate-guard.service';
9+
// #docregion can-load-guard
10+
import { AuthGuard } from './auth-guard.service';
11+
// #enddocregion can-load-guard
12+
13+
// #docregion lazy-load-admin, can-load-guard
14+
@NgModule({
15+
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+
])
25+
],
26+
exports: [
27+
RouterModule
28+
],
29+
providers: [
30+
CanDeactivateGuard
31+
]
32+
})
33+
export class AppRoutingModule {}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// #docplaster
2+
// #docregion, preload-v1
3+
import { NgModule } from '@angular/core';
4+
import {
5+
RouterModule,
6+
// #enddocregion preload-v1
7+
PreloadAllModules
8+
// #docregion preload-v1
9+
} from '@angular/router';
10+
11+
import { CanDeactivateGuard } from './can-deactivate-guard.service';
12+
import { AuthGuard } from './auth-guard.service';
13+
14+
@NgModule({
15+
imports: [
16+
RouterModule.forRoot([
17+
{
18+
path: 'admin',
19+
loadChildren: 'app/admin/admin.module#AdminModule',
20+
canLoad: [AuthGuard]
21+
},
22+
{
23+
path: '',
24+
redirectTo: '/heroes',
25+
pathMatch: 'full'
26+
},
27+
{
28+
path: 'crisis-center',
29+
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
30+
},
31+
],
32+
// #enddocregion preload-v1
33+
{ preloadingStrategy: PreloadAllModules }
34+
// #docregion preload-v1
35+
)
36+
],
37+
exports: [
38+
RouterModule
39+
],
40+
providers: [
41+
CanDeactivateGuard
42+
]
43+
})
44+
export class AppRoutingModule {}

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,43 @@
11
// #docplaster
2-
// #docregion
2+
// #docregion, preload-v1
33
import { NgModule } from '@angular/core';
4-
// #docregion import-router
54
import { RouterModule } from '@angular/router';
6-
// #enddocregion import-router
75

86
import { CanDeactivateGuard } from './can-deactivate-guard.service';
9-
// #docregion can-load-guard
107
import { AuthGuard } from './auth-guard.service';
11-
// #enddocregion can-load-guard
8+
import { PreloadSelectedModules } from './selective-preload-strategy';
129

13-
// #docregion lazy-load-admin, can-load-guard
1410
@NgModule({
1511
imports: [
1612
RouterModule.forRoot([
1713
{
1814
path: 'admin',
1915
loadChildren: 'app/admin/admin.module#AdminModule',
20-
// #enddocregion lazy-load-admin
2116
canLoad: [AuthGuard]
22-
// #docregion lazy-load-admin
17+
},
18+
{
19+
path: '',
20+
redirectTo: '/heroes',
21+
pathMatch: 'full'
22+
},
23+
// #docregion preload-v2
24+
{
25+
path: 'crisis-center',
26+
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
27+
data: {
28+
preload: true
29+
}
2330
}
24-
])
31+
// #enddocregion preload-v2
32+
],
33+
{ preloadingStrategy: PreloadSelectedModules })
2534
],
2635
exports: [
2736
RouterModule
2837
],
2938
providers: [
30-
CanDeactivateGuard
39+
CanDeactivateGuard,
40+
PreloadSelectedModules
3141
]
3242
})
3343
export class AppRoutingModule {}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { AppRoutingModule } from './app-routing.module';
99
import { HeroesModule } from './heroes/heroes.module';
1010
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
1111
import { LoginRoutingModule } from './login-routing.module';
12+
import { LoginComponent } from './login.component';
13+
1214
import { DialogService } from './dialog.service';
1315

1416
@NgModule({
@@ -21,7 +23,8 @@ import { DialogService } from './dialog.service';
2123
AppRoutingModule
2224
],
2325
declarations: [
24-
AppComponent
26+
AppComponent,
27+
LoginComponent
2528
],
2629
providers: [
2730
DialogService

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@ import { FormsModule } from '@angular/forms';
55

66
import { AppComponent } from './app.component';
77
import { AppRoutingModule } from './app-routing.module';
8-
import { LoginRoutingModule } from './login-routing.module';
98

109
import { HeroesModule } from './heroes/heroes.module';
11-
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
12-
10+
import { LoginRoutingModule } from './login-routing.module';
1311
import { LoginComponent } from './login.component';
1412

1513
import { DialogService } from './dialog.service';
@@ -19,7 +17,6 @@ import { DialogService } from './dialog.service';
1917
BrowserModule,
2018
FormsModule,
2119
HeroesModule,
22-
CrisisCenterModule,
2320
LoginRoutingModule,
2421
AppRoutingModule
2522
],

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// #docplaster
2+
// #docregion
3+
import { NgModule } from '@angular/core';
4+
import { RouterModule } from '@angular/router';
5+
6+
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
7+
import { CrisisListComponent } from './crisis-list.component';
8+
import { CrisisCenterComponent } from './crisis-center.component';
9+
import { CrisisDetailComponent } from './crisis-detail.component';
10+
11+
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
12+
13+
// #docregion crisis-detail-resolve
14+
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
15+
16+
@NgModule({
17+
imports: [
18+
RouterModule.forChild([
19+
// #docregion redirect
20+
{
21+
path: '',
22+
redirectTo: '/crisis-center',
23+
pathMatch: 'full'
24+
},
25+
// #enddocregion redirect
26+
{
27+
path: 'crisis-center',
28+
component: CrisisCenterComponent,
29+
children: [
30+
{
31+
path: '',
32+
component: CrisisListComponent,
33+
children: [
34+
{
35+
path: ':id',
36+
component: CrisisDetailComponent,
37+
canDeactivate: [CanDeactivateGuard],
38+
resolve: {
39+
crisis: CrisisDetailResolve
40+
}
41+
},
42+
{
43+
path: '',
44+
component: CrisisCenterHomeComponent
45+
}
46+
]
47+
}
48+
]
49+
}
50+
])
51+
],
52+
exports: [
53+
RouterModule
54+
],
55+
providers: [
56+
CrisisDetailResolve
57+
]
58+
})
59+
export class CrisisCenterRoutingModule { }
60+
// #enddocregion

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,8 @@ import { CrisisDetailResolve } from './crisis-detail-resolve.service';
1616
@NgModule({
1717
imports: [
1818
RouterModule.forChild([
19-
// #docregion redirect
2019
{
2120
path: '',
22-
redirectTo: '/crisis-center',
23-
pathMatch: 'full'
24-
},
25-
// #enddocregion redirect
26-
{
27-
path: 'crisis-center',
2821
component: CrisisCenterComponent,
2922
children: [
3023
{

‎public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@ import { DialogService } from '../dialog.service';
3535
transform: 'translateX(0)'
3636
})
3737
),
38-
transition('void => *', [
38+
transition(':enter', [
3939
style({
4040
opacity: 0,
4141
transform: 'translateX(-100%)'
4242
}),
4343
animate('0.2s ease-in')
4444
]),
45-
transition('* => void', [
45+
transition(':leave', [
4646
animate('0.5s ease-out', style({
4747
opacity: 0,
4848
transform: 'translateY(100%)'

‎public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ import { DialogService } from '../dialog.service';
3434
transform: 'translateX(0)'
3535
})
3636
),
37-
transition('void => *', [
37+
transition(':enter', [
3838
style({
3939
opacity: 0,
4040
transform: 'translateX(-100%)'
4141
}),
4242
animate('0.2s ease-in')
4343
]),
44-
transition('* => void', [
44+
transition(':leave', [
4545
animate('0.5s ease-out', style({
4646
opacity: 0,
4747
transform: 'translateY(100%)'

0 commit comments

Comments
 (0)