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

Commit 397c337

Browse files
brandonrobertswardbell
brandonroberts
authored and
wardbell
committed
docs(router): Added section for named outlets and secondary routes (#2842)
1 parent b47757a commit 397c337

15 files changed

+409
-57
lines changed

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,25 @@ describe('Router', function () {
2828

2929
adminHref: hrefEles.get(2),
3030
adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')),
31+
3132
loginHref: hrefEles.get(3),
3233
loginButton: element.all(by.css('my-app > ng-component > p > button')),
33-
34-
sidekicksButton: element.all(by.css('my-app > ng-component > button')),
35-
34+
35+
contactHref: hrefEles.get(4),
36+
contactCancelButton: element.all(by.buttonText('Cancel')),
37+
38+
outletComponents: element.all(by.css('my-app > ng-component'))
3639
};
3740
}
3841

3942
it('should be able to see the start screen', function () {
4043
let page = getPageStruct();
41-
expect(page.hrefs.count()).toEqual(4, 'should be 4 dashboard choices');
44+
expect(page.hrefs.count()).toEqual(5, 'should be 5 dashboard choices');
4245
expect(page.crisisHref.getText()).toEqual('Crisis Center');
4346
expect(page.heroesHref.getText()).toEqual('Heroes');
4447
expect(page.adminHref.getText()).toEqual('Admin');
4548
expect(page.loginHref.getText()).toEqual('Login');
49+
expect(page.contactHref.getText()).toEqual('Contact');
4650
});
4751

4852
it('should be able to see crises center items', function () {
@@ -120,12 +124,12 @@ describe('Router', function () {
120124
});
121125
});
122126

123-
it('should be able to handle 404 pages', function () {
127+
it('should be able to see the secondary route', function () {
124128
let page = getPageStruct();
125129
page.heroesHref.click().then(function() {
126-
return page.sidekicksButton.click();
130+
return page.contactHref.click();
127131
}).then(function() {
128-
expect(page.routerTitle.getText()).toContain('Page Not Found');
132+
expect(page.outletComponents.count()).toBe(2, 'should be 2 displayed routes');
129133
});
130134
});
131135

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
// #docplaster
2-
// #docregion
3-
import { NgModule } from '@angular/core';
2+
// #docregion , v3
3+
import { NgModule } from '@angular/core';
44
import { RouterModule, Routes } from '@angular/router';
5-
import { PageNotFoundComponent }from './not-found.component';
5+
import { ComposeMessageComponent } from './compose-message.component';
66

77
const appRoutes: Routes = [
8-
{ path: '**', component: PageNotFoundComponent }
8+
// #enddocregion v3
9+
{
10+
path: 'compose',
11+
component: ComposeMessageComponent,
12+
outlet: 'modal'
13+
}
14+
// #docregion v3
915
];
1016

1117
@NgModule({

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
// #docplaster
21
// #docregion
32
import { NgModule } from '@angular/core';
43
import { RouterModule, Routes } from '@angular/router';
54
import { PageNotFoundComponent }from './not-found.component';
65

7-
import { CanDeactivateGuard } from './can-deactivate-guard.service';
6+
import { ComposeMessageComponent } from './compose-message.component';
7+
import { CanDeactivateGuard } from './can-deactivate-guard.service';
88

99
const appRoutes: Routes = [
10-
{ path: '**', component: PageNotFoundComponent }
10+
{
11+
path: 'compose',
12+
component: ComposeMessageComponent,
13+
outlet: 'modal'
14+
}
1115
];
1216

1317
@NgModule({

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,21 @@ import { NgModule } from '@angular/core';
44
// #docregion import-router
55
import { RouterModule, Routes } from '@angular/router';
66
// #enddocregion import-router
7-
import { PageNotFoundComponent } from './not-found.component';
8-
import { CanDeactivateGuard } from './can-deactivate-guard.service';
7+
8+
import { ComposeMessageComponent } from './compose-message.component';
9+
import { CanDeactivateGuard } from './can-deactivate-guard.service';
910
// #docregion can-load-guard
10-
import { AuthGuard } from './auth-guard.service';
11+
import { AuthGuard } from './auth-guard.service';
1112
// #enddocregion can-load-guard
1213

1314
// #docregion lazy-load-admin, can-load-guard
1415

1516
const appRoutes: Routes = [
17+
{
18+
path: 'compose',
19+
component: ComposeMessageComponent,
20+
outlet: 'modal'
21+
},
1622
{
1723
path: 'admin',
1824
loadChildren: 'app/admin/admin.module#AdminModule',

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@ import {
88
// #docregion preload-v1
99
} from '@angular/router';
1010

11-
import { PageNotFoundComponent } from './not-found.component';
12-
import { CanDeactivateGuard } from './can-deactivate-guard.service';
13-
import { AuthGuard } from './auth-guard.service';
11+
import { ComposeMessageComponent } from './compose-message.component';
12+
import { CanDeactivateGuard } from './can-deactivate-guard.service';
13+
import { AuthGuard } from './auth-guard.service';
1414

1515
const appRoutes: Routes = [
16+
{
17+
path: 'compose',
18+
component: ComposeMessageComponent,
19+
outlet: 'modal'
20+
},
1621
{
1722
path: 'admin',
1823
loadChildren: 'app/admin/admin.module#AdminModule',

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@
33
import { NgModule } from '@angular/core';
44
import { RouterModule, Routes } from '@angular/router';
55

6-
import { PageNotFoundComponent } from './not-found.component';
7-
import { CanDeactivateGuard } from './can-deactivate-guard.service';
8-
import { AuthGuard } from './auth-guard.service';
9-
import { PreloadSelectedModules } from './selective-preload-strategy';
6+
import { ComposeMessageComponent } from './compose-message.component';
7+
import { CanDeactivateGuard } from './can-deactivate-guard.service';
8+
import { AuthGuard } from './auth-guard.service';
9+
import { PreloadSelectedModules } from './selective-preload-strategy';
1010

1111
const appRoutes: Routes = [
12+
{
13+
path: 'compose',
14+
component: ComposeMessageComponent,
15+
outlet: 'modal'
16+
},
1217
{
1318
path: 'admin',
1419
loadChildren: 'app/admin/admin.module#AdminModule',
@@ -26,10 +31,6 @@ const appRoutes: Routes = [
2631
data: {
2732
preload: true
2833
}
29-
},
30-
{
31-
path: '**',
32-
component: PageNotFoundComponent
3334
}
3435
// #enddocregion preload-v2
3536
];

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ import { Component } from '@angular/core';
1212
<a routerLink="/admin" routerLinkActive="active">Admin</a>
1313
</nav>
1414
<router-outlet></router-outlet>
15+
// #enddocregion template
16+
<router-outlet name="modal"></router-outlet>
17+
// #enddocregion template
1518
`
1619
// #enddocregion template
1720
})

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ import { Component } from '@angular/core';
1212
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
1313
<a routerLink="/admin" routerLinkActive="active">Admin</a>
1414
<a routerLink="/login" routerLinkActive="active">Login</a>
15+
<a [routerLink]="[{ outlets: { modal: ['compose'] } }]">Contact</a>
1516
</nav>
1617
<router-outlet></router-outlet>
18+
<router-outlet name="modal"></router-outlet>
1719
`
1820
// #enddocregion template
1921
})

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ import { NgModule } from '@angular/core';
55
import { CommonModule } from '@angular/common';
66
import { FormsModule } from '@angular/forms';
77

8-
import { AppComponent } from './app.component';
9-
import { PageNotFoundComponent }from './not-found.component';
10-
import { AppRoutingModule } from './app-routing.module';
11-
12-
import { HeroesModule } from './heroes/heroes.module';
8+
import { AppComponent } from './app.component';
9+
import { PageNotFoundComponent } from './not-found.component';
10+
import { AppRoutingModule } from './app-routing.module';
11+
import { HeroesModule } from './heroes/heroes.module';
1312
// #docregion crisis-center-module
14-
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
13+
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
1514
// #enddocregion crisis-center-module
15+
import { ComposeMessageComponent } from './compose-message.component';
1616
// #docregion admin-module
17-
import { AdminModule } from './admin/admin.module';
17+
import { AdminModule } from './admin/admin.module';
1818
// #docregion crisis-center-module
1919

20-
import { DialogService } from './dialog.service';
20+
import { DialogService } from './dialog.service';
2121

2222
@NgModule({
2323
imports: [
@@ -26,13 +26,16 @@ import { DialogService } from './dialog.service';
2626
HeroesModule,
2727
CrisisCenterModule,
2828
// #enddocregion crisis-center-module
29+
// #enddocregion admin-module
2930
AdminModule,
3031
// #docregion crisis-center-module
3132
AppRoutingModule
3233
],
3334
declarations: [
3435
AppComponent,
35-
PageNotFoundComponent
36+
// #enddocregion admin-module, crisis-center-module
37+
ComposeMessageComponent
38+
// #docregion admin-module, crisis-center-module
3639
],
3740
providers: [
3841
DialogService

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1+
// #docplaster
12
// #docregion
23
import { NgModule } from '@angular/core';
3-
import { BrowserModule } from '@angular/platform-browser';
4+
import { CommonModule } from '@angular/common';
45
import { FormsModule } from '@angular/forms';
56

6-
import { AppComponent } from './app.component';
7-
import { PageNotFoundComponent }from './not-found.component';
8-
import { AppRoutingModule } from './app-routing.module';
7+
import { AppComponent } from './app.component';
8+
import { AppRoutingModule } from './app-routing.module';
99

10-
import { HeroesModule } from './heroes/heroes.module';
11-
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
12-
import { AdminModule } from './admin/admin.module';
10+
import { HeroesModule } from './heroes/heroes.module';
11+
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
12+
import { ComposeMessageComponent } from './compose-message.component';
1313

14-
import { DialogService } from './dialog.service';
14+
import { AdminModule } from './admin/admin.module';
15+
import { DialogService } from './dialog.service';
1516

1617
@NgModule({
1718
imports: [
18-
BrowserModule,
19+
CommonModule,
1920
FormsModule,
2021
HeroesModule,
2122
CrisisCenterModule,
@@ -24,7 +25,7 @@ import { DialogService } from './dialog.service';
2425
],
2526
declarations: [
2627
AppComponent,
27-
PageNotFoundComponent
28+
ComposeMessageComponent
2829
],
2930
providers: [
3031
DialogService
@@ -33,3 +34,4 @@ import { DialogService } from './dialog.service';
3334
})
3435
export class AppModule {
3536
}
37+
// #enddocregion

0 commit comments

Comments
 (0)