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

docs(router): Updated routing examples to use routing modules (#2478) 

Simplified routing in tutorial example

Updated ngmodule guide and ngmodule faq with routing module prose
This commit is contained in:
Brandon 2016-10-05 16:59:09 -05:00 committed by Ward Bell
parent 3a78f6d8c6
commit ff118810ff
81 changed files with 1601 additions and 1217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts → public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app-routing.module.ts
View File

@ -1,5 +1,5 @@
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MovieListComponent } from './movie-list.component';
@ -9,4 +9,8 @@ const routes: Routes = [
{ path: 'movies', component: MovieListComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

4
public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
View File

@ -5,13 +5,13 @@ import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MovieListComponent } from './movie-list.component';
import { routing } from './app.routing';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [
BrowserModule,
FormsModule,
routing
AppRoutingModule
],
declarations: [
AppComponent,

11
public/docs/_examples/cb-dependency-injection/ts/app/app-routing.module.ts Normal file
View File

@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [],
exports: [RouterModule]
})
export class AppRoutingModule {}

4
public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
View File

@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
/* import { routing } from './app.routing';*/
// import { AppRoutingModule } from './app-routing.module';
import { LocationStrategy,
HashLocationStrategy } from '@angular/common';
import { NgModule } from '@angular/core';
@ -56,7 +56,7 @@ const c_components = [
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(HeroData)
// routing TODO: add routes
// AppRoutingModule TODO: add routes
],
declarations: [
declarations,

10
public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts
View File

@ -1,10 +0,0 @@
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
export const appRoutingProviders: any[] = [
];

8
public/docs/_examples/ngmodule/ts/app/app.routing.3.ts → public/docs/_examples/ngmodule/ts/app/app-routing.module.3.ts
View File

@ -1,4 +1,4 @@
import { ModuleWithProviders } from '@angular/core';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
export const routes: Routes = [
@ -7,4 +7,8 @@ export const routes: Routes = [
{ path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

8
public/docs/_examples/ngmodule/ts/app/app.routing.ts → public/docs/_examples/ngmodule/ts/app/app-routing.module.ts
View File

@ -1,5 +1,5 @@
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
export const routes: Routes = [
@ -11,5 +11,9 @@ export const routes: Routes = [
];
// #docregion forRoot
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
// #enddocregion forRoot

6
public/docs/_examples/ngmodule/ts/app/app.module.3.ts
View File

@ -11,14 +11,16 @@ import { UserService } from './user.service';
/* Feature Modules */
import { ContactModule } from './contact/contact.module.3';
import { routing } from './app.routing.3';
/* Routing Module */
import { AppRoutingModule } from './app-routing.module.3';
@NgModule({
// #docregion imports
imports: [
BrowserModule,
ContactModule,
routing
AppRoutingModule
],
// #enddocregion imports
providers: [ UserService ],

10
public/docs/_examples/ngmodule/ts/app/app.module.ts
View File

@ -8,9 +8,11 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
/* Feature Modules */
import { ContactModule } from './contact/contact.module';
import { CoreModule } from './core/core.module';
import { routing } from './app.routing';
import { ContactModule } from './contact/contact.module';
import { CoreModule } from './core/core.module';
/* Routing Module */
import { AppRoutingModule } from './app-routing.module';
@NgModule({
// #docregion import-for-root
@ -29,7 +31,7 @@ import { routing } from './app.routing';
// #docregion
CoreModule.forRoot({userName: 'Miss Marple'}),
// #docregion v4
routing
AppRoutingModule
],
// #enddocregion import-for-root
declarations: [ AppComponent ],

12
public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.3.ts Normal file
View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ContactComponent } from './contact.component.3';
@NgModule({
imports: [RouterModule.forChild([
{ path: 'contact', component: ContactComponent}
])],
exports: [RouterModule]
})
export class ContactRoutingModule {}

14
public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.ts Normal file
View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ContactComponent } from './contact.component';
// #docregion routing
@NgModule({
imports: [RouterModule.forChild([
{ path: 'contact', component: ContactComponent }
])],
exports: [RouterModule]
})
export class ContactRoutingModule {}
// #enddocregion

4
public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts
View File

@ -9,11 +9,11 @@ import { ContactComponent } from './contact.component.3';
import { ContactService } from './contact.service';
import { HighlightDirective } from './highlight.directive';
import { routing } from './contact.routing.3';
import { ContactRoutingModule } from './contact-routing.module.3';
// #docregion class
@NgModule({
imports: [ CommonModule, FormsModule, routing ],
imports: [ CommonModule, FormsModule, ContactRoutingModule ],
declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
providers: [ ContactService ]
})

8
public/docs/_examples/ngmodule/ts/app/contact/contact.module.ts
View File

@ -2,13 +2,13 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { ContactComponent } from './contact.component';
import { ContactService } from './contact.service';
import { routing } from './contact.routing';
import { ContactComponent } from './contact.component';
import { ContactService } from './contact.service';
import { ContactRoutingModule } from './contact-routing.module';
// #docregion class
@NgModule({
imports: [ SharedModule, routing ],
imports: [ SharedModule, ContactRoutingModule ],
declarations: [ ContactComponent ],
providers: [ ContactService ]
})

8
public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts
View File

@ -1,8 +0,0 @@
import { ModuleWithProviders } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ContactComponent } from './contact.component.3';
export const routing: ModuleWithProviders = RouterModule.forChild([
{ path: 'contact', component: ContactComponent}
]);

10
public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts
View File

@ -1,10 +0,0 @@
import { ModuleWithProviders } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ContactComponent } from './contact.component';
// #docregion routing
export const routing: ModuleWithProviders = RouterModule.forChild([
{ path: 'contact', component: ContactComponent}
]);
// #enddocregion

8
public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts → public/docs/_examples/ngmodule/ts/app/crisis/crisis-routing.module.ts
View File

@ -1,4 +1,4 @@
import { ModuleWithProviders } from '@angular/core';
import { NgModule } from '@angular/core';
import { Routes,
RouterModule } from '@angular/router';
@ -11,4 +11,8 @@ const routes: Routes = [
{ path: ':id', component: CrisisDetailComponent }
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CrisisRoutingModule {}

6
public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts
View File

@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisService } from './crisis.service';
import { routing } from './crisis.routing';
import { CrisisService } from './crisis.service';
import { CrisisRoutingModule } from './crisis-routing.module';
@NgModule({
imports: [ CommonModule, routing ],
imports: [ CommonModule, CrisisRoutingModule ],
declarations: [ CrisisDetailComponent, CrisisListComponent ],
providers: [ CrisisService ]
})

8
public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts → public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.3.ts
View File

@ -1,4 +1,4 @@
import { ModuleWithProviders } from '@angular/core';
import { NgModule } from '@angular/core';
import { Routes,
RouterModule } from '@angular/router';
@ -16,4 +16,8 @@ const routes: Routes = [
}
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HeroRoutingModule {}

8
public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts → public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.ts
View File

@ -1,4 +1,4 @@
import { ModuleWithProviders } from '@angular/core';
import { NgModule } from '@angular/core';
import { Routes,
RouterModule } from '@angular/router';
@ -16,4 +16,8 @@ const routes: Routes = [
}
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HeroRoutingModule {}

4
public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts
View File

@ -6,11 +6,11 @@ import { HeroComponent } from './hero.component.3';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroListComponent } from './hero-list.component';
import { HighlightDirective } from './highlight.directive';
import { routing } from './hero.routing.3';
import { HeroRoutingModule } from './hero-routing.module.3';
// #docregion class
@NgModule({
imports: [ CommonModule, FormsModule, routing ],
imports: [ CommonModule, FormsModule, HeroRoutingModule ],
declarations: [
HeroComponent, HeroDetailComponent, HeroListComponent,
HighlightDirective

4
public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts
View File

@ -5,10 +5,10 @@ import { SharedModule } from '../shared/shared.module';
import { HeroComponent } from './hero.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroListComponent } from './hero-list.component';
import { routing } from './hero.routing';
import { HeroRoutingModule } from './hero-routing.module';
@NgModule({
imports: [ SharedModule, routing ],
imports: [ SharedModule, HeroRoutingModule ],
declarations: [
HeroComponent, HeroDetailComponent, HeroListComponent,
]

6
public/docs/_examples/ngmodule/ts/plnkr.json
View File

@ -3,7 +3,7 @@
"files": [
"app/app.component.ts",
"app/app.module.ts",
"app/app.routing.ts",
"app/app-routing.module.ts",
"app/main.ts",
"app/contact/contact.component.css",
@ -12,7 +12,7 @@
"app/contact/contact.component.ts",
"app/contact/contact.module.ts",
"app/contact/contact.routing.ts",
"app/contact/contact-routing.module.ts",
"app/crisis/*.ts",
@ -22,7 +22,7 @@
"app/hero/hero.component.ts",
"app/hero/hero.module.ts",
"app/hero/hero.routing.ts",
"app/hero/hero-routing.module.ts",
"app/core/*.css",
"app/core/*.html",

6
public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json
View File

@ -3,7 +3,7 @@
"files": [
"app/app.component.3.ts",
"app/app.module.3.ts",
"app/app.routing.3.ts",
"app/app-routing.module.3.ts",
"app/main.3.ts",
"app/highlight.directive.ts",
@ -18,7 +18,7 @@
"app/contact/awesome.pipe.ts",
"app/contact/contact.component.3.ts",
"app/contact/contact.module.3.ts",
"app/contact/contact.routing.3.ts",
"app/contact/contact-routing.module.3.ts",
"app/contact/highlight.directive.ts",
"app/crisis/*.ts",
@ -29,7 +29,7 @@
"app/hero/hero.component.3.ts",
"app/hero/hero.module.3.ts",
"app/hero/hero.routing.3.ts",
"app/hero/hero-routing.module.3.ts",
"app/hero/highlight.directive.ts",
"styles.css",

37
public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts Normal file
View File

@ -0,0 +1,37 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-routes
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
children: [
{
path: '',
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule {}
// #enddocregion admin-routes
// #enddocregion

43
public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts Normal file
View File

@ -0,0 +1,43 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route, can-activate-child
import { AuthGuard } from '../auth-guard.service';
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
],
// #enddocregion admin-route
// #docregion can-activate-child
canActivateChild: [AuthGuard]
// #docregion admin-route
}
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule {}
// #enddocregion

41
public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts Normal file
View File

@ -0,0 +1,41 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route
import { AuthGuard } from '../auth-guard.service';
// #docregion can-activate-child
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule {}
// #enddocregion

40
public/docs/_examples/router/ts/app/admin/admin-routing.module.ts Normal file
View File

@ -0,0 +1,40 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route
import { AuthGuard } from '../auth-guard.service';
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule {}
// #enddocregion

4
public/docs/_examples/router/ts/app/admin/admin.module.ts
View File

@ -8,12 +8,12 @@ import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
import { adminRouting } from './admin.routing';
import { AdminRoutingModule } from './admin-routing.module';
@NgModule({
imports: [
CommonModule,
adminRouting
AdminRoutingModule
],
declarations: [
AdminComponent,

31
public/docs/_examples/router/ts/app/admin/admin.routing.1.ts
View File

@ -1,31 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-routes
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
children: [
{
path: '',
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
];
export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
// #enddocregion admin-routes
// #enddocregion

37
public/docs/_examples/router/ts/app/admin/admin.routing.2.ts
View File

@ -1,37 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route, can-activate-child
import { AuthGuard } from '../auth-guard.service';
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
],
// #enddocregion admin-route
// #docregion can-activate-child
canActivateChild: [AuthGuard]
// #docregion admin-route
}
]
}
];
export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
// #enddocregion

35
public/docs/_examples/router/ts/app/admin/admin.routing.3.ts
View File

@ -1,35 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route
import { AuthGuard } from '../auth-guard.service';
// #docregion can-activate-child
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
];
export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
// #enddocregion

34
public/docs/_examples/router/ts/app/admin/admin.routing.ts
View File

@ -1,34 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';
// #docregion admin-route
import { AuthGuard } from '../auth-guard.service';
const adminRoutes: Routes = [
{
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
];
export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
// #enddocregion

20
public/docs/_examples/router/ts/app/app-routing.module.1.ts Normal file
View File

@ -0,0 +1,20 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
@NgModule({
imports: [
RouterModule.forRoot([
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
])
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}

18
public/docs/_examples/router/ts/app/app-routing.module.2.ts Normal file
View File

@ -0,0 +1,18 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
@NgModule({
imports: [
RouterModule.forRoot([
{ path: 'crisis-center', component: CrisisListComponent },
])
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}

16
public/docs/_examples/router/ts/app/app-routing.module.3.ts Normal file
View File

@ -0,0 +1,16 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot([
])
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}

21
public/docs/_examples/router/ts/app/app-routing.module.4.ts Normal file
View File

@ -0,0 +1,21 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
@NgModule({
imports: [
RouterModule.forRoot([
])
],
exports: [
RouterModule
],
providers: [
CanDeactivateGuard
]
})
export class AppRoutingModule {}

33
public/docs/_examples/router/ts/app/app-routing.module.ts Normal file
View File

@ -0,0 +1,33 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
// #docregion import-router
import { RouterModule } from '@angular/router';
// #enddocregion import-router
import { CanDeactivateGuard } from './can-deactivate-guard.service';
// #docregion can-load-guard
import { AuthGuard } from './auth-guard.service';
// #enddocregion can-load-guard
// #docregion lazy-load-admin, can-load-guard
@NgModule({
imports: [
RouterModule.forRoot([
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
// #enddocregion lazy-load-admin
canLoad: [AuthGuard]
// #docregion lazy-load-admin
}
])
],
exports: [
RouterModule
],
providers: [
CanDeactivateGuard
]
})
export class AppRoutingModule {}

51
public/docs/_examples/router/ts/app/app.module.0.ts Normal file
View File

@ -0,0 +1,51 @@
// #docplaster
// #docregion
// #docregion router-basics
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroListComponent } from './hero-list.component';
import { CrisisListComponent } from './crisis-list.component';
import { PageNotFoundComponent } from './not-found.component';
import { PageNotFoundComponent as HeroDetailComponent } from './not-found.component';
import { PageNotFoundComponent as HomeComponent } from './not-found.component';
// #docregion route-config
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
// #docregion route-defs
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent },
// #enddocregion hero-detail-route
{ path: 'crisis-center', component: CrisisListComponent },
{
path: 'heroes',
component: HeroListComponent,
data: {
title: 'Heroes List'
}
},
{ path: '', component: HomeComponent },
// #enddocregion route-defs
{ path: '**', component: PageNotFoundComponent }
])
],
declarations: [
AppComponent,
HeroListComponent,
HeroDetailComponent,
CrisisListComponent,
PageNotFoundComponent
],
bootstrap: [ AppComponent ]
})
// #enddocregion router-basics
export class AppModule {
}
// #enddocregion

18
public/docs/_examples/router/ts/app/app.module.1.ts
View File

@ -3,29 +3,31 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
// #docregion import-router, route-config
import { RouterModule } from '@angular/router';
// #enddocregion import-router, route-config
// #docregion router-basics
import { AppComponent } from './app.component';
import { routing,
appRoutingProviders } from './app.routing';
import { HeroListComponent } from './hero-list.component';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
routing
// #docregion route-config
RouterModule.forRoot([
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
])
// #enddocregion route-config
],
declarations: [
AppComponent,
HeroListComponent,
CrisisListComponent
],
providers: [
appRoutingProviders
],
bootstrap: [ AppComponent ]
})
// #enddocregion router-basics

15
public/docs/_examples/router/ts/app/app.module.2.ts
View File

@ -5,28 +5,23 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { routing,
appRoutingProviders } from './app.routing';
import { HeroesModule } from './heroes/heroes.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
routing,
HeroesModule
AppRoutingModule
],
declarations: [
AppComponent,
HeroListComponent,
CrisisListComponent
],
providers: [
appRoutingProviders
],
bootstrap: [ AppComponent ]
})
// #enddocregion hero-import

35
public/docs/_examples/router/ts/app/app.module.3.ts
View File

@ -1,44 +1,31 @@
// #docplaster
// #docregion
// #docregion crisis-center-module, admin-module
// #docregion hero-import
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { routing,
appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';
// #docregion crisis-center-module
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
// #enddocregion crisis-center-module
// #docregion admin-module
import { AdminModule } from './admin/admin.module';
// #docregion crisis-center-module
import { HeroesModule } from './heroes/heroes.module';
import { DialogService } from './dialog.service';
import { CrisisListComponent } from './crisis-list.component';
@NgModule({
imports: [
CommonModule,
BrowserModule,
FormsModule,
routing,
HeroesModule,
CrisisCenterModule,
// #enddocregion crisis-center-module
AdminModule
// #docregion crisis-center-module
AppRoutingModule
],
declarations: [
AppComponent
],
providers: [
appRoutingProviders,
DialogService
AppComponent,
CrisisListComponent
],
bootstrap: [ AppComponent ]
})
// #enddocregion hero-import
export class AppModule {
}
// #enddocregion

31
public/docs/_examples/router/ts/app/app.module.4.ts
View File

@ -1,33 +1,42 @@
// #docplaster
// #docregion
// #docregion crisis-center-module, admin-module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { routing,
appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
import { HeroesModule } from './heroes/heroes.module';
// #docregion crisis-center-module
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
// #enddocregion crisis-center-module
// #docregion admin-module
import { AdminModule } from './admin/admin.module';
// #docregion crisis-center-module
import { DialogService } from './dialog.service';
import { DialogService } from './dialog.service';
@NgModule({
imports: [
BrowserModule,
CommonModule,
FormsModule,
routing,
HeroesModule,
CrisisCenterModule
CrisisCenterModule,
// #enddocregion crisis-center-module
AdminModule,
// #docregion crisis-center-module
AppRoutingModule
],
declarations: [
AppComponent
],
providers: [
appRoutingProviders,
DialogService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// #enddocregion

23
public/docs/_examples/router/ts/app/app.module.5.ts
View File

@ -1,26 +1,31 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
const routes: Routes = [
import { HeroesModule } from './heroes/heroes.module';
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
import { AdminModule } from './admin/admin.module';
];
import { DialogService } from './dialog.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/
HeroesModule,
CrisisCenterModule,
AdminModule,
AppRoutingModule
],
declarations: [
AppComponent
],
providers: [
DialogService
],
bootstrap: [ AppComponent ]
})

28
public/docs/_examples/router/ts/app/app.module.6.ts Normal file
View File

@ -0,0 +1,28 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const routes: Routes = [
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/
],
declarations: [
AppComponent
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

32
public/docs/_examples/router/ts/app/app.module.7.ts Normal file
View File

@ -0,0 +1,32 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesModule } from './heroes/heroes.module';
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
import { LoginRoutingModule } from './login-routing.module';
import { DialogService } from './dialog.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HeroesModule,
CrisisCenterModule,
LoginRoutingModule,
AppRoutingModule
],
declarations: [
AppComponent
],
providers: [
DialogService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

10
public/docs/_examples/router/ts/app/app.module.ts
View File

@ -4,8 +4,8 @@ import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { routing,
appRoutingProviders } from './app.routing';
import { AppRoutingModule } from './app-routing.module';
import { LoginRoutingModule } from './login-routing.module';
import { HeroesModule } from './heroes/heroes.module';
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
@ -18,16 +18,16 @@ import { DialogService } from './dialog.service';
imports: [
BrowserModule,
FormsModule,
routing,
HeroesModule,
CrisisCenterModule
CrisisCenterModule,
LoginRoutingModule,
AppRoutingModule
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
appRoutingProviders,
DialogService
],
bootstrap: [ AppComponent ]

32
public/docs/_examples/router/ts/app/app.routing.5.ts
View File

@ -1,16 +1,16 @@
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { loginRoutes,
authProviders } from './login.routing';
const appRoutes: Routes = [
...loginRoutes
];
export const appRoutingProviders: any[] = [
authProviders
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
// // #docregion
// import { ModuleWithProviders } from '@angular/core';
// import { Routes, RouterModule } from '@angular/router';
//
// import { loginRoutes,
// authProviders } from './login.routing';
//
// const appRoutes: Routes = [
// ...loginRoutes
// ];
//
// export const appRoutingProviders: any[] = [
// authProviders
// ];
//
// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

42
public/docs/_examples/router/ts/app/app.routing.6.ts
View File

@ -1,21 +1,21 @@
// #docregion
import { ModuleWithProviders } from '@angular/core';
// #docregion import-router
import { Routes, RouterModule } from '@angular/router';
// #enddocregion import-router
import { loginRoutes,
authProviders } from './login.routing';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
const appRoutes: Routes = [
...loginRoutes
];
export const appRoutingProviders: any[] = [
authProviders,
CanDeactivateGuard
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
// // #docregion
// import { ModuleWithProviders } from '@angular/core';
// // #docregion import-router
// import { Routes, RouterModule } from '@angular/router';
// // #enddocregion import-router
//
// import { loginRoutes,
// authProviders } from './login.routing';
//
// import { CanDeactivateGuard } from './can-deactivate-guard.service';
//
// const appRoutes: Routes = [
// ...loginRoutes
// ];
//
// export const appRoutingProviders: any[] = [
// authProviders,
// CanDeactivateGuard
// ];
//
// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

40
public/docs/_examples/router/ts/app/app.routing.ts
View File

@ -1,40 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
// #docregion import-router
import { Routes, RouterModule } from '@angular/router';
// #enddocregion import-router
import { loginRoutes,
authProviders } from './login.routing';
import { CanDeactivateGuard } from './can-deactivate-guard.service';
// #docregion can-load-guard
import { AuthGuard } from './auth-guard.service';
// #enddocregion can-load-guard
// #docregion lazy-load-admin, can-load-guard
const adminRoutes: Routes = [
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
// #enddocregion lazy-load-admin
canLoad: [AuthGuard]
// #docregion lazy-load-admin
}
];
// #enddocregion can-load-guard
const appRoutes: Routes = [
...loginRoutes,
...adminRoutes
];
// #enddocregion lazy-load-admin
export const appRoutingProviders: any[] = [
authProviders,
CanDeactivateGuard
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

42
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts Normal file
View File

@ -0,0 +1,42 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
// #docregion routes
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
])
],
exports: [
RouterModule
]
})
export class CrisisCenterRoutingModule { }
// #enddocregion

71
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts Normal file
View File

@ -0,0 +1,71 @@
// #docplaster
// #docregion routes
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
// #enddocregion routes
// #docregion can-deactivate-guard
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #enddocregion can-deactivate-guard
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
// #enddocregion crisis-detail-resolve
// #docregion routes
@NgModule({
imports: [
RouterModule.forChild([
// #enddocregion routes
// #docregion redirect, routes
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
// #enddocregion redirect, routes
// #docregion routes
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
// #enddocregion routes
// #docregion can-deactivate-guard
canDeactivate: [CanDeactivateGuard],
// #enddocregion can-deactivate-guard
// #docregion crisis-detail-resolve
resolve: {
crisis: CrisisDetailResolve
}
// #enddocregion crisis-detail-resolve
// #docregion routes
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
// #docregion routes
])
],
exports: [
RouterModule
]
})
export class CrisisCenterRoutingModule { }
// #enddocregion

50
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts Normal file
View File

@ -0,0 +1,50 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
// #docregion can-deactivate-guard
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard]
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
])
],
exports: [
RouterModule
]
})
export class CrisisCenterRoutingModule { }
// #enddocregion

60
public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts Normal file
View File

@ -0,0 +1,60 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
@NgModule({
imports: [
RouterModule.forChild([
// #docregion redirect
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
// #enddocregion redirect
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
}
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
])
],
exports: [
RouterModule
],
providers: [
CrisisDetailResolve
]
})
export class CrisisCenterRoutingModule { }
// #enddocregion

12
public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts
View File

@ -6,18 +6,18 @@ import { CommonModule } from '@angular/common';
import { CrisisService } from './crisis.service';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { crisisCenterRouting } from './crisis-center.routing';
import { CrisisCenterRoutingModule } from './crisis-center-routing.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
crisisCenterRouting
CrisisCenterRoutingModule
],
declarations: [
CrisisCenterComponent,

12
public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts
View File

@ -5,22 +5,19 @@ import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { CrisisService } from './crisis.service';
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
// #enddocregion crisis-detail-resolve
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { crisisCenterRouting } from './crisis-center.routing';
import { CrisisCenterRoutingModule } from './crisis-center-routing.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
crisisCenterRouting
CrisisCenterRoutingModule
],
declarations: [
CrisisCenterComponent,
@ -28,11 +25,8 @@ import { crisisCenterRouting } from './crisis-center.routing';
CrisisCenterHomeComponent,
CrisisDetailComponent
],
// #docregion crisis-detail-resolve
providers: [
CrisisService,
CrisisDetailResolve
CrisisService
]
// #enddocregion crisis-detail-resolve
})

37
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
View File

@ -1,37 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
// #docregion routes
const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
// #docregion routes
// #enddocregion

65
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
View File

@ -1,65 +0,0 @@
// #docplaster
// #docregion routes
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
// #enddocregion routes
// #docregion can-deactivate-guard
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #enddocregion can-deactivate-guard
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
// #enddocregion crisis-detail-resolve
// #docregion routes
const crisisCenterRoutes: Routes = [
// #enddocregion routes
// #docregion redirect, routes
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
// #enddocregion redirect, routes
// #docregion routes
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
// #enddocregion routes
// #docregion can-deactivate-guard
canDeactivate: [CanDeactivateGuard],
// #enddocregion can-deactivate-guard
// #docregion crisis-detail-resolve
resolve: {
crisis: CrisisDetailResolve
}
// #enddocregion crisis-detail-resolve
// #docregion routes
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
// #docregion routes
];
export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
// #enddocregion

44
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
View File

@ -1,44 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
// #docregion can-deactivate-guard
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
const crisisCenterRoutes: Routes = [
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard]
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
// #enddocregion

51
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
View File

@ -1,51 +0,0 @@
// #docplaster
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisCenterHomeComponent } from './crisis-center-home.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
// #docregion crisis-detail-resolve
import { CrisisDetailResolve } from './crisis-detail-resolve.service';
const crisisCenterRoutes: Routes = [
// #docregion redirect
{
path: '',
redirectTo: '/crisis-center',
pathMatch: 'full'
},
// #enddocregion redirect
{
path: 'crisis-center',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
}
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
// #enddocregion

22
public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts Normal file
View File

@ -0,0 +1,22 @@
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: 'heroes', component: HeroListComponent },
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent }
// #enddocregion hero-detail-route
])
],
exports: [
RouterModule
]
})
export class HeroRoutingModule { }
// #enddocregion

4
public/docs/_examples/router/ts/app/heroes/heroes.module.ts
View File

@ -9,13 +9,13 @@ import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service';
// #docregion heroes-routes
import { heroesRouting } from './heroes.routing';
import { HeroRoutingModule } from './heroes-routing.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
heroesRouting
HeroRoutingModule
],
declarations: [
HeroListComponent,

16
public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
View File

@ -1,16 +0,0 @@
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
const heroesRoutes: Routes = [
{ path: 'heroes', component: HeroListComponent },
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent }
// #enddocregion hero-detail-route
];
export const heroesRouting: ModuleWithProviders = RouterModule.forChild(heroesRoutes);
// #enddocregion

22
public/docs/_examples/router/ts/app/login-routing.module.ts Normal file
View File

@ -0,0 +1,22 @@
// #docregion
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthGuard } from './auth-guard.service';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';
@NgModule({
imports: [
RouterModule.forChild([
{ path: 'login', component: LoginComponent }
])
],
exports: [
RouterModule
],
providers: [
AuthGuard,
AuthService
]
})
export class LoginRoutingModule {}

14
public/docs/_examples/router/ts/app/login.routing.ts
View File

@ -1,14 +0,0 @@
// #docregion
import { Routes } from '@angular/router';
import { AuthGuard } from './auth-guard.service';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';
export const loginRoutes: Routes = [
{ path: 'login', component: LoginComponent }
];
export const authProviders = [
AuthGuard,
AuthService
];

8
public/docs/_examples/testing/ts/app/hero/hero.routing.ts → public/docs/_examples/testing/ts/app/hero/hero-routing.module.ts
View File

@ -1,3 +1,4 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroListComponent } from './hero-list.component';
@ -9,4 +10,9 @@ const routes: Routes = [
];
export const routedComponents = [HeroDetailComponent, HeroListComponent];
export const routing = RouterModule.forChild(routes);
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HeroRoutingModule {}

4
public/docs/_examples/testing/ts/app/hero/hero.module.ts
View File

@ -1,9 +1,9 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { routedComponents, routing } from './hero.routing';
import { routedComponents, HeroRoutingModule } from './hero-routing.module';
@NgModule({
imports: [ SharedModule, routing ],
imports: [ SharedModule, HeroRoutingModule ],
declarations: [ routedComponents ]
})
export class HeroModule { }

48
public/docs/_examples/toh-5/ts/app/app.module.2.ts Normal file
View File

@ -0,0 +1,48 @@
// #docplaster
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
],
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent
],
providers: [
HeroService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// #enddocregion
/*
// #docregion heroes, routing
import { RouterModule } from '@angular/router';
RouterModule.forRoot([
{
path: 'heroes',
component: HeroesComponent
}
])
// #enddocregion heroes, routing
*/

59
public/docs/_examples/toh-5/ts/app/app.module.3.ts Normal file
View File

@ -0,0 +1,59 @@
// #docregion
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
// #docregion redirect
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
// #enddocregion redirect
// #docregion dashboard
{
path: 'dashboard',
component: DashboardComponent
},
// #enddocregion dashboard
// #docregion hero-detail
{
path: 'detail/:id',
component: HeroDetailComponent
},
// #enddocregion hero-detail
// #docregion heroes
// #docregion heroes, routing
{
path: 'heroes',
component: HeroesComponent
}
// #enddocregion heroes, routing
])
],
declarations: [
AppComponent,
DashboardComponent,
HeroDetailComponent,
HeroesComponent
],
providers: [
HeroService
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// #enddocregion

24
public/docs/_examples/toh-5/ts/app/app.module.ts
View File

@ -3,21 +3,37 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
// #docregion routing
import { routing } from './app.routing';
// #docregion routing
@NgModule({
imports: [
BrowserModule,
FormsModule,
routing
RouterModule.forRoot([
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'detail/:id',
component: HeroDetailComponent
},
{
path: 'heroes',
component: HeroesComponent
}
])
],
// #enddocregion routing
// #docregion dashboard, hero-detail

17
public/docs/_examples/toh-5/ts/app/app.routing.1.ts
View File

@ -1,17 +0,0 @@
// #docregion , heroes, routing
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeroesComponent } from './heroes.component';
const appRoutes: Routes = [
{
path: 'heroes',
component: HeroesComponent
}
];
// #enddocregion heroes, routing
// #docregion routing-export
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
// #enddocregion routing-export

43
public/docs/_examples/toh-5/ts/app/app.routing.ts
View File

@ -1,43 +0,0 @@
// #docplaster
// #docregion , heroes
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// #enddocregion heroes
import { DashboardComponent } from './dashboard.component';
// #docregion heroes
import { HeroesComponent } from './heroes.component';
// #enddocregion heroes
import { HeroDetailComponent } from './hero-detail.component';
// #docregion heroes
const appRoutes: Routes = [
// #enddocregion heroes
// #docregion redirect
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
// #enddocregion redirect
// #docregion dashboard
{
path: 'dashboard',
component: DashboardComponent
},
// #enddocregion dashboard
// #docregion hero-detail
{
path: 'detail/:id',
component: HeroDetailComponent
},
// #enddocregion hero-detail
// #docregion heroes
{
path: 'heroes',
component: HeroesComponent
}
];
// #enddocregion heroes
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

22
public/docs/_examples/toh-6/ts/app/app.module.ts
View File

@ -9,6 +9,7 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
// #enddocregion v1
// Imports for loading & configuring the in-memory web api
@ -24,7 +25,6 @@ import { HeroService } from './hero.service';
// #enddocregion v1, v2
import { HeroSearchComponent } from './hero-search.component';
// #docregion v1, v2
import { routing } from './app.routing';
@NgModule({
imports: [
@ -36,7 +36,25 @@ import { routing } from './app.routing';
InMemoryWebApiModule.forRoot(InMemoryDataService),
// #enddocregion in-mem-web-api
// #docregion v1
routing
RouterModule.forRoot([
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'detail/:id',
component: HeroDetailComponent
},
{
path: 'heroes',
component: HeroesComponent
}
])
],
// #docregion search
declarations: [

29
public/docs/_examples/toh-6/ts/app/app.routing.ts
View File

@ -1,29 +0,0 @@
// #docregion
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'detail/:id',
component: HeroDetailComponent
},
{
path: 'heroes',
component: HeroesComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

20
public/docs/ts/_cache/tutorial/toh-pt5.jade
View File

@ -2,7 +2,7 @@
block includes
include ../_util-fns
- var _appRoutingTsVsAppComp = 'app.routing.ts'
- var _appRoutingTsVsAppComp = 'app-routing.module.ts'
- var _declsVsDirectives = 'declarations'
- var _RoutesVsAtRouteConfig = 'Routes'
- var _RouterModuleVsRouterDirectives = 'RouterModule'
@ -202,7 +202,7 @@ block router-config-intro
Let's define our first route as a route to the heroes component:
- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.routing.ts'
- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app-routing.module.ts'
+makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
- var _are = _docsFor == 'dart' ? 'takes' : 'are'
@ -227,7 +227,7 @@ block router-config-intro
We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes.
This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`.
+makeExcerpt('app/app.routing.1.ts (excerpt)', 'routing-export')
+makeExcerpt('app/app-routing.module.1.ts (excerpt)', 'routing-export')
.l-sub-section
:marked
@ -237,9 +237,9 @@ block router-config-intro
:marked
### Make the router available
We've setup initial routes in the `app.routing.ts` file. Now we'll add it to our root NgModule.
We've setup initial routes in the `app-routing.module.ts` file. Now we'll add it to our root NgModule.
Import the `routing` constant from `app.routing.ts` and add it the `imports` !{_array} of `AppModule`.
Import the `routing` constant from `app-routing.module.ts` and add it the `imports` !{_array} of `AppModule`.
+makeExcerpt('app/app.module.ts', 'routing')
@ -319,7 +319,7 @@ block routerLink
Import the dashboard component and
add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.routing.ts'
- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app-routing.module.ts'
+makeExcerpt(_file + ' (Dashboard route)', 'dashboard')
+ifDocsFor('ts|js')
@ -340,7 +340,7 @@ block redirect-vs-use-as-default
We can use a redirect route to make this happen. Add the following
to our array of route definitions:
+makeExcerpt('app/app.routing.ts','redirect')
+makeExcerpt('app/app-routing.module.ts','redirect')
.l-sub-section
:marked
@ -472,7 +472,7 @@ code-example(format='').
Here's the *route definition* we'll use.
- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
+makeExcerpt(_file + ' (hero detail)','hero-detail')
:marked
@ -639,7 +639,7 @@ block extract-id
token in the parameterized hero detail route definition we added to
`!{_appRoutingTsVsAppComp}` earlier in the chapter:
- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
+makeExcerpt(_file + ' (hero detail)', 'hero-detail')
:marked
@ -868,7 +868,7 @@ block file-tree-end
.file app.component.css
.file app.component.ts
.file app.module.ts
.file app.routing.ts
.file app-routing.module.ts
.file dashboard.component.css
.file dashboard.component.html
.file dashboard.component.ts

2
public/docs/ts/_cache/tutorial/toh-pt6.jade
View File

@ -539,7 +539,7 @@ block filetree
.file app.component.ts
.file app.component.css
.file app.module.ts
.file app.routing.ts
.file app-routing.module.ts
.file dashboard.component.css
.file dashboard.component.html
.file dashboard.component.ts

44
public/docs/ts/latest/cookbook/ngmodule-faq.jade
View File

@ -734,6 +734,7 @@ a#q-module-recommendations
Feature modules tend to fall into one of these four groups:
* [Domain Feature Modules](#domain-feature-module)
* [Routed Feature Modules](#routed-feature-module)
* [Routing Modules](#routing-module)
* [Service Feature Modules](#service-feature-module)
* [Widget Feature Modules](#widget-feature-module)
@ -802,6 +803,42 @@ table
Do not provide application-wide singleton services in a routed feature module
or in a module that the routed module imports.
tr
td(style="vertical-align: top")<a id="routing-module"></a>Routing
td
:marked
A [_Routing Module_](../guide/router.html#routing-module) **provides routing configuration** for another module.
A Routing Module separates routing concerns from its companion module.
It typically:
* defines routes
* adds router configuration to the module's `imports`
* re-exports `RouterModule`
* adds guard and resolver service providers to the module's `providers`.
The name of the Routing Module should parallel the name of its companion module, using the suffix "Routing".
For example, `FooModule` in `foo.module.ts` has a routing module named `FooRoutingModule`
in `foo-routing.module.ts`
If the companion module is the _root_ `AppModule`,
the `AppRoutingModule` adds router configuration to its `imports` with `RouterModule.forRoot(routes)`.
All other Routing Modules are children that import `RouterModule.forChild(routes)`.
A Routing Module re-exports the `RouterModule` as a convenience
so that components of the companion module have access to
router directives such as `RouterLink` and `RouterOutlet`.
A Routing Module **should not have its own `declarations`!**
&nbsp; Components, directives, and pipes are the **responsibility of the feature module**
not the _routing_ module.
A Routing Module should _only_ be imported by its companion module.
The `AppRoutingModule`, `ContactRoutingModule` and `HeroRoutingModule` are good examples.
.l-sub-section
:marked
See also "[Do you need a _Routing Module_?](../guide/router.html#why-routing-module)".
tr
td(style="vertical-align: top")<a id="service-feature-module"></a>Service
@ -859,6 +896,13 @@ table
td No
td Nobody
td <code>ContactModule</code>, <code>HeroModule</code>, <code>CrisisModule</code>
tr
td Routing
td No
td Yes (Guards)
td <code>RouterModule</code>
td Feature (for routing)
td <code>AppRoutingModule</code>, <code>ContactRoutingModule</code>, <code>HeroRoutingModule</code>
tr
td Service
td No

48
public/docs/ts/latest/guide/ngmodule.jade
View File

@ -291,7 +291,7 @@ a#imports
.l-sub-section
:marked
#### Angular Form Styles
### Angular Form Styles
We write Angular form components in either the
[_template-driven form_](forms.html) style or
@ -398,7 +398,7 @@ a#import-name-conflict
a#application-scoped-providers
.l-sub-section
:marked
#### Application-scoped Providers
### Application-scoped Providers
The `ContactService` provider is _application_-scoped because Angular
registers a module's `providers` with the application's **root injector**.
@ -663,11 +663,12 @@ a#lazy-load
The module does _not_ import `HeroModule` or `CrisisModule`.
They'll be fetched and mounted asynchronously when the user navigates to one of their routes.
The significant change from version 2 is the addition of a ***routing*** object to the `imports`.
The routing object, which provides a configured `Router` service, is defined in the `app.routing.ts` file.
The significant change from version 2 is the addition of the ***AppRoutingModule*** to the module `imports`.
The `AppRoutingModule` is a [_Routing Module_](../guide/router.html#routing-module)
that handles the app's routing concerns.
### App routing
+makeExample('ngmodule/ts/app/app.routing.ts', '', 'app/app.routing.ts')(format='.')
+makeExample('ngmodule/ts/app/app-routing.module.ts', '', 'app/app-routing.module.ts')(format='.')
:marked
The router is the subject of [its own page](router.html) so we'll skip lightly over the details and
concentrate on the intersection of Angular modules and routing.
@ -678,12 +679,12 @@ a#lazy-load
to another route whose path is `contact` (e.g., `http://host.com/contact`).
The `contact` route isn't defined here.
It's defined in the _Contact_ feature's _own_ routing file, `contact.routing.ts`.
It's defined in the _Contact_ feature's _own_ routing module, `contact-routing.module.ts`.
It's standard practice for feature modules with routing components to define their own routes.
We'll get to that file in a moment.
The remaining two routes use lazy loading syntax to tell the router where to find the modules:
+makeExample('ngmodule/ts/app/app.routing.ts', 'lazy-routes')(format='.')
+makeExample('ngmodule/ts/app/app-routing.module.ts', 'lazy-routes')(format='.')
.l-sub-section
:marked
A lazy loaded module location is a _string_, not a _type_.
@ -693,34 +694,35 @@ a#lazy-load
:marked
### RouterModule.forRoot
The last line calls the `forRoot` static class method of the `RouterModule`, passing in the configuration.
+makeExample('ngmodule/ts/app/app.routing.ts', 'forRoot')(format='.')
The `forRoot` static class method of the `RouterModule` with the provided configuration,
added to the `imports` array provides the routing concerns for the module.
+makeExample('ngmodule/ts/app/app-routing.module.ts', 'forRoot')(format='.')
:marked
The returned `routing` object is a `ModuleWithProviders` containing both the `RouterModule` directives
The returned `AppRoutingModule` class is a `Routing Module` containing both the `RouterModule` directives
and the Dependency Injection providers that produce a configured `Router`.
This `routing` object is intended for the app _root_ module _only_.
This `AppRoutingModule` is intended for the app _root_ module _only_.
.alert.is-critical
:marked
Never call `RouterModule.forRoot` in a feature module.
Never call `RouterModule.forRoot` in a feature routing module.
:marked
Back in the root `AppModule`, we add this `routing` object to its `imports` list,
Back in the root `AppModule`, we add the `AppRoutingModule` to its `imports` list,
and the app is ready to navigate.
+makeExample('ngmodule/ts/app/app.module.3.ts', 'imports', 'app/app.module.ts (imports)')(format='.')
:marked
### Routing to a feature module
The `app/contact` folder holds a new file, `contact.routing.ts`.
It defines the `contact` route we mentioned a bit earlier and also creates a `routing` object like so:
+makeExample('ngmodule/ts/app/contact/contact.routing.ts', 'routing', 'app/contact/contact.routing.ts (routing)')(format='.')
The `app/contact` folder holds a new file, `contact-routing.module.ts`.
It defines the `contact` route we mentioned a bit earlier and also provides a `ContactRoutingModule` like so:
+makeExample('ngmodule/ts/app/contact/contact-routing.module.ts', 'routing', 'app/contact/contact-routing.module.ts (routing)')(format='.')
:marked
This time we pass the route list to the `forChild` method of the `RouterModule`.
It produces a different kind of object intended for feature modules.
It's only responsible for providing additional routes and is intended for feature modules.
.alert.is-important
:marked
Always call `RouterModule.forChild` in a feature module.
Always call `RouterModule.forChild` in a feature routing module.
.alert.is-helpful
:marked
@ -740,7 +742,7 @@ a#lazy-load
`app/contact/contact.module.3.ts,
app/contact/contact.module.2.ts`)
:marked
1. It imports the `routing` object from `contact.routing.ts`
1. It imports the `ContactRoutingModule` object from `contact-routing.module.ts`
1. It no longer exports `ContactComponent`
Now that we navigate to `ContactComponent` with the router there's no reason to make it public.
@ -765,7 +767,7 @@ a#hero-module
.file hero-list.component.ts
.file hero.component.ts
.file hero.module.ts
.file hero.routing.ts
.file hero-routing.module.ts
.file hero.service.ts
.file highlight.directive.ts
:marked
@ -783,7 +785,7 @@ a#hero-module
+makeExample('ngmodule/ts/app/hero/hero.module.3.ts', 'class', 'app/hero/hero.module.ts (class)')(format='.')
:marked
It imports the `FormsModule` because the `HeroDetailComponent` template binds with `[(ngModel)]`.
It imports a `routing` object from `hero.routing.ts` just as `ContactModule` and `CrisisModule` do.
It imports the `HeroRoutingModule` from `hero-routing.module.ts` just as `ContactModule` and `CrisisModule` do.
The `CrisisModule` is much the same. There's nothing more to say that's new.
@ -815,7 +817,7 @@ a#shared-module
* It declares and exports the utility pipe, directive, and component classes as expected.
* It re-exports the `CommonModule` and `FormsModule`
#### Re-exporting other modules
### Re-exporting other modules
While reviewing our application, we noticed that many components requiring `SharedModule` directives
also use `NgIf` and `NgFor` from `CommonModule`
@ -894,7 +896,7 @@ a#core-module
.l-sub-section
:marked
#### Why bother?
### Why bother?
This scenario is clearly contrived.
The app is too small to worry about a single service file and a tiny, one-time component.

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

@ -46,6 +46,7 @@ include ../_util-fns
* toggling css classes for the [active router link](#router-link-active)
* embedding critical information in the URL with [route parameters](#route-parameters)
* providing non-critical information in [optional route parameters](#optional-route-parameters)
* refactoring routing into a [routing module](#routing-module)
* add [child routes](#child-routing-component) under a feature section
* [grouping child routes](#component-less-route) without a component
* [redirecting](#redirect) from one route to another
@ -87,7 +88,7 @@ include ../_util-fns
It is not part of the Angular core. It is in its own library package, `@angular/router`.
We import what we need from it as we would from any other Angular package.
+makeExcerpt('app/app.routing.ts (import)', 'import-router')
+makeExcerpt('app/app.module.1.ts (import)', 'import-router')
.l-sub-section
:marked
@ -100,13 +101,14 @@ include ../_util-fns
A router has no routes until we configure it.
We bootstrap our application with an array of routes that we'll provide to our **`RouterModule.forRoot`** function.
In the following example, we configure our application with four route definitions.
In the following example, we configure our application with four route definitions. The configured `RouterModule` is
add to the `AppModule`'s `imports` array.
+makeExcerpt('app/app.routing.1.ts (excerpt)', 'route-config')
+makeExcerpt('app/app.module.0.ts (excerpt)', 'route-config')
.l-sub-section
:marked
The `Routes` is an array of *routes* that describe how to navigate.
The `RouterModule` is provided an array of *routes* that describe how to navigate.
Each *Route* maps a URL `path` to a component.
There are no **leading slashes** in our **path**. The router parses and builds the URL for us,
@ -135,14 +137,6 @@ include ../_util-fns
that matches as the default route. The wildcard route is listed last as it's the most generic route and should be
matched **only** if no other routes are matched first.
:marked
We export the `routing` constant so we can import it into our `app.module.ts` file where we'll add
a configured *Router* module to our `AppModule` imports.
:marked
Next we open `app.module.ts` where we must register our routing, routing providers, and declare our two route components.
+makeExcerpt('app/app.module.1.ts (basic setup)', 'router-basics')
:marked
### Router Outlet
Given this configuration, when the browser URL for this application becomes `/heroes`,
@ -192,7 +186,7 @@ code-example(language="html").
that make up the current state of the router. We can access the current `RouterState` from anywhere in our
application using the `Router` service and the `routerState` property.
The router state provides us with methods to traverse up and down the route tree from any activated route
Each `ActivatedRoute` in the `RouterState` provides methods to traverse up and down the route tree
to get information we may need from parent, child and sibling routes.
:marked
@ -413,20 +407,6 @@ a#base-href
need routing and, depending on your requirements, you may need a different routing library.
We teach our router how to navigate by configuring it with routes.
We recommend creating a separate `app.routing.ts` file dedicated to this purpose.
:marked
Here is our first configuration. We pass the array of routes to the `RouterModule.forRoot` method
which returns a module containing the configured `Router` service provider ... and some other,
unseen providers that the routing library requires. We export this as the `routing` token.
+makeExcerpt('app/app.routing.2.ts')
.l-sub-section
:marked
We also export an empty `appRoutingProviders` array
so we can simplify registration of router dependencies later in `app.module.ts`.
We don't have any providers to register right now. But we will.
a#route-config
h4#define-routes Define routes
@ -451,25 +431,23 @@ h4#define-routes Define routes
the `CrisisListComponent`, display its view, and update the browser's address location and history with the URL
for that path.*
.l-sub-section
:marked
Learn about *providers* in the [Dependency Injection](dependency-injection.html#!#injector-providers) chapter.
h4#register-providers Register routing in the AppModule
:marked
Our app launches from the `app.module.ts` file in the `/app` folder.
We import the `routing` token we exported from the `app.routing.ts` file and add it to the `imports` array.
We import our `CrisisListComponent` and `HeroListComponent` components and add them to our *declarations*
so they will be registered within our `AppModule`.
We also import the `appRoutingProviders` array and add it to the `providers` array.
Here is our first configuration. We pass the array of routes to the `RouterModule.forRoot` method
which returns a module containing the configured `Router` service provider ... and some other,
unseen providers that the routing library requires. Once our application is bootstrapped, the `Router`
will perform the initial navigation based on the current browser URL.
+makeExcerpt('app/app.module.1.ts')
.l-sub-section
:marked
Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.
As our application grows, we'll want to refactor our routing configuration into a separate file
and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicating for the purpose
of routing in feature modules.
:marked
Providing the router module in our `AppModule` makes the Router available everywhere in our application.
Providing the `RouterModule` in our `AppModule` makes the Router available everywhere in our application.
h3#shell The <i>AppComponent</i> shell
:marked
@ -562,7 +540,6 @@ h3#router-directives <i>Router Directives</i>
.children
.file app.component.ts
.file app.module.ts
.file app.routing.ts
.file crisis-list.component.ts
.file hero-list.component.ts
.file main.ts
@ -579,7 +556,6 @@ h3#router-directives <i>Router Directives</i>
+makeTabs(
`router/ts/app/app.component.1.ts,
router/ts/app/app.module.1.ts,
router/ts/app/app.routing.2.ts,
router/ts/app/main.ts,
router/ts/app/hero-list.component.ts,
router/ts/app/crisis-list.component.ts,
@ -587,15 +563,85 @@ h3#router-directives <i>Router Directives</i>
',,,,',
`app.component.ts,
app.module.ts,
app.routing.ts,
main.ts,
hero-list.component.ts,
crisis-list.component.ts,
index.html`)
.l-main-section#routing-module
:marked
## Milestone #2: The *Routing Module*
In our initial route configuration, we provided a simple setup with two routes used
to configure our application for routing. This is perfectly fine for simple routing.
As our application grows and we make use of more *Router* features, such as guards,
resolvers, and child routing, we'll naturally want to refactor our routing. We
recommend moving the routing into a separate file using a special-purpose
service called a *Routing Module*.
The **Routing Module**
* separates our routing concerns from our feature module
* provides a module to replace or remove when testing our feature module
* provides a common place for require routing service providers including guards and resolvers
* is **not** concerned with feature [module declarations](../cookbook/ngmodule-faq.html#!#routing-module)
:marked
### Refactor routing into a module
We'll create a file named `app-routing.module.ts` in our `/app` folder to
contain our `Routing Module`. The routing module will import our `RouterModule` tokens
and configure our routes. We'll follow the convention of our filename and name
the Angular module `AppRoutingModule`.
We import the `CrisisListComponent` and the `HeroListComponent` components
just like we did in the `app.module.ts`. Then we'll move the `Router` imports
and routing configuration including `RouterModule.forRoot` into our routing module.
We'll also export the `AppRoutingModule` so we can add it to our `AppModule` imports.
Our last step is to re-export the `RouterModule`. By re-exporting the `RouterModule`,
our feature module will be provided with the `Router Directives` when using our `Routing Module`.
Here is our first `Routing Module`:
+makeExcerpt('app/app-routing.module.1.ts')
:marked
Next, we'll update our `app.module.ts` file by importing our `AppRoutingModule` token
from the `app-routing.module.ts` and replace our `RouterModule.forRoot` with our newly
created `AppRoutingModule`.
+makeExcerpt('app/app.module.2.ts')
:marked
Our application continues to work just the same, and we can use our routing module as
the central place to maintain our routing configuration for each feature module.
a#why-routing-module
:marked
### Do you need a _Routing Module_?
The _Routing Module_ *replaces* the routing configuration in the root or feature module.
_Either_ configure routes in the Routing Module _or_ within the module itself but not in both.
The Routing Module is a design choice whose value is most obvious when the configuration is complex
and includes specialized guard and resolver services.
It can seem like overkill when the actual configuration is dead simple.
Some developers skip the Routing Module (e.g., `AppRoutingModule`) when the configuration is simple and
merge the routing configuration directly into the companion module (e.g., `AppModule`).
We recommend that you choose one pattern or the other and follow that pattern consistently.
Most developers should always implement a Routing Module for the sake of consistency.
It keeps the code clean when configuration becomes complex.
It makes testing the feature module easier.
Its existence calls attention to the fact that a module is routed.
It is where developers expect to find and expand routing configuration.
.l-main-section#heroes-feature
:marked
## Milestone #2: The Heroes Feature
## Milestone #3: The Heroes Feature
We've seen how to navigate using the `RouterLink` directive.
@ -677,20 +723,25 @@ figure.image-display
We recommend giving each feature area its own route configuration file.
Create a new `heroes.routing.ts` in the `heroes` folder like this:
Create a new `heroes-routing.module.ts` in the `heroes` folder like this:
+makeExcerpt('app/heroes/heroes.routing.ts')
+makeExcerpt('app/heroes/heroes-routing.module.ts')
.l-sub-section
:marked
Keep the Routing Module file in the same folder as its companion module file.
Here both `heroes-routing.module.ts` and `heroes.module.ts` are in the same `app/heroes` folder.
:marked
We use the same techniques we learned for `app.routing.ts`.
We use the same techniques we learned in creating the `app-routing.module.ts`.
We import the two components from their new locations in the `app/heroes/` folder, define the two hero routes.
and add export our `heroesRouting` that returns configured `RouterModule` for our feature module.
and add export our `HeroRoutingModule` that returns our `RoutingModule` for the hero feature module.
:marked
Now that we have routes for our `Heroes` module, we'll need to register them with the *Router*.
We'll import the *RouterModule* like we did in the `app.routing.ts`, but there is a slight difference here.
In our `app.routing.ts`, we used the static **forRoot** method to register our routes and application level
We'll import the *RouterModule* like we did in the `app-routing.module.ts`, but there is a slight difference here.
In our `app-routing.module.ts`, we used the static **forRoot** method to register our routes and application level
service providers. In a feature module we use static **forChild** method.
.l-sub-section
@ -699,7 +750,7 @@ figure.image-display
module, we'll use **RouterModule.forChild** method to only register additional routes.
:marked
We import our `heroesRouting` token from `heroes.routing.ts` into our `Heroes` module and register the routing.
We import our `HeroRoutingModule` token from `heroes-routing.module.ts` into our `Heroes` module and register the routing.
+makeExcerpt('app/heroes/heroes.module.ts (heroes routing)', 'heroes-routes')
@ -707,7 +758,7 @@ figure.image-display
### Route definition with a parameter
The route to `HeroDetailComponent` has a twist.
+makeExcerpt('app/heroes/heroes.routing.ts (excerpt)', 'hero-detail-route')
+makeExcerpt('app/heroes/heroes-routing.module.ts (excerpt)', 'hero-detail-route')
:marked
Notice the `:id` token in the path. That creates a slot in the path for a **Route Parameter**.
@ -963,7 +1014,7 @@ figure.image-display
The router embedded the `id` value in the navigation URL because we had defined it
as a route parameter with an `:id` placeholder token in the route `path`:
+makeExcerpt('app/heroes/heroes.routing.ts', 'hero-detail-route')
+makeExcerpt('app/heroes/heroes-routing.module.ts', 'hero-detail-route')
:marked
When the user clicks the back button, the `HeroDetailComponent` constructs another *link parameters array*
@ -1125,7 +1176,7 @@ h3#merge-hero-routes Import hero module into AppModule
Update `app.module.ts` as follows:
+makeExcerpt('app/app.module.2.ts (heroes module import)', 'hero-import')
+makeExcerpt('app/app.module.3.ts (heroes module import)', 'hero-import')
:marked
We imported the `HeroesModule` and added it to our `AppModule`'s `imports`.
@ -1145,9 +1196,9 @@ h3#merge-hero-routes Import hero module into AppModule
We can evolve the hero feature with more components and different routes.
That's a key benefit of creating a separate module for each feature area.
Since our `Heroes` routes are defined within our feature module, we can also remove our initial `heroes` route from the `app.routing.ts`.
Since our `Heroes` routes are defined within our feature module, we can also remove our initial `heroes` route from the `app-routing.module.ts`.
+makeExcerpt('app/app.routing.3.ts (v2)', '')
+makeExcerpt('app/app-routing.module.2.ts (v2)', '')
:marked
### Heroes App Wrap-up
@ -1173,10 +1224,10 @@ h3#merge-hero-routes Import hero module into AppModule
.file hero-list.component.ts
.file hero.service.ts
.file heroes.module.ts
.file heroes.routing.ts
.file heroes-routing.module.ts
.file app.component.ts
.file app.module.ts
.file app.routing.ts
.file app-routing.module.ts
.file crisis-list.component.ts
.file main.ts
.file node_modules ...
@ -1193,26 +1244,26 @@ h3#merge-hero-routes Import hero module into AppModule
+makeTabs(
`router/ts/app/app.component.1.ts,
router/ts/app/app.module.2.ts,
router/ts/app/app.routing.3.ts,
router/ts/app/app.module.3.ts,
router/ts/app/app-routing.module.3.ts,
router/ts/app/heroes/hero-list.component.ts,
router/ts/app/heroes/hero-detail.component.ts,
router/ts/app/heroes/hero.service.ts,
router/ts/app/heroes/heroes.module.ts,
router/ts/app/heroes/heroes.routing.ts`,
router/ts/app/heroes/heroes-routing.module.ts`,
null,
`app.component.ts,
app.module.ts,
app.routing.ts,
app-routing.module.ts,
hero-list.component.ts,
hero-detail.component.ts,
hero.service.ts,
heroes.module.ts,
heroes.routing.ts`)
heroes-routing.module.ts`)
.l-main-section#crisis-center-feature
:marked
## Milestone #3: The Crisis Center
## Milestone #4: The Crisis Center
The *Crisis Center* is a fake view at the moment. Time to make it useful.
@ -1240,9 +1291,6 @@ h3#merge-hero-routes Import hero module into AppModule
* The router should block access to certain features until the user logs-in.
* Our `CrisisService` is only needed within the *Crisis Center* module.
We should limit access to it to that module.
* Changes to a feature module such as *Crisis Center* shouldn't provoke changes to the `AppModule` or
any other feature's component.
We need to [*separate our concerns*](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html).
@ -1298,31 +1346,6 @@ a#child-routing-component
We *can* give it a selector. There's no harm in it.
Our point is that we don't *need* one because we only *navigate* to it.
:marked
### Service isolation
The `CrisisService` is neither needed nor wanted outside the *Crisis Center* domain.
Instead of registering it with the `AppModule`'s providers &mdash;
which makes it visible everywhere &mdash;
we register the `CrisisService` in the `CrisisCenterModule` providers array.
+makeExcerpt('app/crisis-center/crisis-center.module.1.ts', 'providers', '')
:marked
This limits the scope of the `CrisisService` to the *Crisis Center* routes.
No module outside of the *Crisis Center* can access it.
There's a practical benefit to restricting its scope in this way.
First we can evolve the service independently of the rest of the application
without fear of breaking what should be unrelated modules.
Second, we can delay loading this service into memory until we need it.
We can remove it from the application launch bundle,
reducing the size of the initial payload and improving performance.
We can load it optionally, [asynchronously](#asynchronous-routing) with the other *Crisis Center* components
if and when the user begins that workflow.
:marked
### Child Route Configuration
@ -1334,10 +1357,10 @@ a#child-routing-component
+makeExcerpt('app/crisis-center/crisis-center-home.component.ts (minus imports)', 'minus-imports')
:marked
We create a `crisis-center.routing.ts` file as we did the `heroes.routing.ts` file.
We create a `crisis-center-routing.module.ts` file as we did the `heroes-routing.module.ts` file.
But this time we define **child routes** *within* the parent `crisis-center` route.
+makeExcerpt('app/crisis-center/crisis-center.routing.1.ts (Routes)', 'routes')
+makeExcerpt('app/crisis-center/crisis-center-routing.module.1.ts (Routes)', 'routes')
:marked
Notice that the parent `crisis-center` route has a `children` property
@ -1378,22 +1401,22 @@ code-example.
localhost:3000/crisis-center/2
:marked
Here's the complete `crisis-center.routing.ts` file with its imports.
Here's the complete `crisis-center-routing.module.ts` file with its imports.
+makeExcerpt('app/crisis-center/crisis-center.routing.1.ts', '')
+makeExcerpt('app/crisis-center/crisis-center-routing.module.1.ts', '')
h3#import-crisis-module Import crisis center module into the AppModule routes
:marked
As with the `Heroes` module, we must import the `Crisis Center` module into the `AppModule`:
+makeExcerpt('app/app.module.3.ts (Crisis Center Module)', 'crisis-center-module')
+makeExcerpt('app/app.module.4.ts (import CrisisCenterModule)', 'crisis-center-module')
:marked
We also remove the initial crisis center route from our `app.routing.ts`. Our routes
are now being provided by our `HeroesModule` and our `CrisisCenter` feature modules. We'll keep our `app.routing.ts` file
We also remove the initial crisis center route from our `app-routing.module.ts`. Our routes
are now being provided by our `HeroesModule` and our `CrisisCenter` feature modules. We'll keep our `app-routing.module.ts` file
for general routes which we'll cover later in the chapter.
+makeExcerpt('app/app.routing.4.ts (v3)', '')
+makeExcerpt('app/app-routing.module.3.ts (v3)', '')
a#redirect
:marked
@ -1414,7 +1437,7 @@ code-example.
The preferred solution is to add a `redirect` route that transparently translates from the initial relative URL (`''`)
to the desired default path (`/crisis-center`):
+makeExcerpt('app/crisis-center/crisis-center.routing.2.ts' , 'redirect', '')
+makeExcerpt('app/crisis-center/crisis-center-routing.module.2.ts' , 'redirect', '')
:marked
A redirect route requires a `pathMatch` property to tell the router how to match a URL to the path of a route.
@ -1445,7 +1468,7 @@ code-example.
:marked
The updated route definitions look like this:
+makeExcerpt('app/crisis-center/crisis-center.routing.2.ts (routes v2)' , 'routes')
+makeExcerpt('app/crisis-center/crisis-center-routing.module.2.ts (routes v2)' , 'routes')
.l-main-section
h2#relative-navigation Relative Navigation
@ -1522,7 +1545,7 @@ h2#relative-navigation Relative Navigation
.l-main-section
h2#guards Route Guards
:marked
## Milestone #4: Route Guards
## Milestone #5: Route Guards
At the moment, *any* user can navigate *anywhere* in the application *anytime*.
@ -1597,7 +1620,7 @@ a#can-activate-guard
.file admin-dashboard.component.ts
.file admin.component.ts
.file admin.module.ts
.file admin.routing.ts
.file admin-routing.module.ts
.file manage-crises.component.ts
.file manage-heroes.component.ts
@ -1631,7 +1654,7 @@ a#can-activate-guard
:marked
Our initial admin routing configuration:
+makeExcerpt('app/admin/admin.routing.1.ts (admin routing)', 'admin-routes')
+makeExcerpt('app/admin/admin-routing.module.1.ts (admin routing)', 'admin-routes')
h3#component-less-route <i>Component-Less Route</i>: grouping routes without a component
:marked
@ -1646,7 +1669,7 @@ h3#component-less-route <i>Component-Less Route</i>: grouping routes without a c
Next, we'll import the `AdminModule` into our `app.module.ts` and add it to the `imports` array
to register our admin routes.
+makeExcerpt('app/app.module.3.ts (admin module)', 'admin-module')
+makeExcerpt('app/app.module.4.ts (admin module)', 'admin-module')
:marked
And we add a link to the `AppComponent` shell that users can click to get to this feature.
@ -1671,10 +1694,10 @@ h3#component-less-route <i>Component-Less Route</i>: grouping routes without a c
+makeExcerpt('app/auth-guard.service.1.ts')
:marked
Next we open `admin.routing.ts `, import the `AuthGuard` class, and
Next we open `admin-routing.module.ts `, import the `AuthGuard` class, and
update the admin route with a `CanActivate` guard property that references it:
+makeExcerpt('app/admin/admin.routing.2.ts (guarded admin route)', 'admin-route')
+makeExcerpt('app/admin/admin-routing.module.2.ts (guarded admin route)', 'admin-route')
:marked
Our admin feature is now protected by the guard, albeit protected poorly.
@ -1716,20 +1739,19 @@ h3#component-less-route <i>Component-Less Route</i>: grouping routes without a c
to our stored URL if available, or use the default URL.
There is nothing new about this component or the way we wire it into the router configuration.
We'll register a `/login` route in our `app.routing.ts` and add the necessary providers to the `appRoutingProviders`
array we created earlier. In our `app.module.ts`, we'll import the `LoginComponent` and add it to our `AppModule` `declarations`.
We'll register a `/login` route in our `login-routing.module.ts` and add the necessary providers to the `providers`
array. In our `app.module.ts`, we'll import the `LoginComponent` and add it to our `AppModule` `declarations`.
We'll also import and add the `LoginRoutingModule` to our `AppModule` imports.
+makeTabs(
`router/ts/app/app.module.ts,
router/ts/app/app.routing.6.ts,
router/ts/app/login.component.1.ts,
router/ts/app/login.routing.ts
router/ts/app/login-routing.module.ts
`,
null,
`app/app.module.ts,
app/app.routing.ts,
app/login.component.ts,
app/login.routing.ts
app/login-routing.module.ts
`)
.l-sub-section
@ -1759,7 +1781,7 @@ h3#can-activate-child-guard <i>CanActivateChild</i>: guarding child routes
We add the same `AuthGuard` to our `component-less` admin route to protect all other child routes at one time
instead of adding the `AuthGuard` to each route individually.
+makeExcerpt('app/admin/admin.routing.3.ts (excerpt)', 'can-activate-child')
+makeExcerpt('app/admin/admin-routing.module.3.ts (excerpt)', 'can-activate-child')
h3#can-deactivate-guard <i>CanDeactivate</i>: handling unsaved changes
:marked
@ -1851,14 +1873,14 @@ a#CanDeactivate
to resolve to truthy (navigate) or falsey (stay put).
:marked
We add the `Guard` to our crisis detail route in `crisis-center.routing.ts` using the `canDeactivate` array.
We add the `Guard` to our crisis detail route in `crisis-center-routing.module.ts` using the `canDeactivate` array.
+makeExcerpt('app/crisis-center/crisis-center.routing.3.ts (can deactivate guard)', '')
+makeExcerpt('app/crisis-center/crisis-center-routing.module.3.ts (can deactivate guard)', '')
:marked
We also need to add the `Guard` to our main `appRoutingProviders` so the `Router` can inject it during the navigation process.
We also need to add the `Guard` to our main `AppRoutingModule` `providers` so the `Router` can inject it during the navigation process.
+makeExample('app/app.routing.6.ts', '', '')
+makeExample('app/app-routing.module.4.ts', '', '')
:marked
Now we have given our user a safeguard against unsaved changes.
@ -1909,14 +1931,11 @@ h3#resolve-guard <i>Resolve</i>: pre-fetching component data
We'll use our `CrisisService.getCrisis` method that returns a promise to prevent our route from loading until the data is fetched. If we don't find a valid `Crisis`,
we navigate the user back to the `CrisisList`, canceling the previous in-flight navigation to the crisis details.
Now that our guard is ready, we'll import it in our `crisis-center.routing.ts` and use the `resolve` object in our route configuration.
Now that our guard is ready, we'll import it in our `crisis-center-routing.module.ts` and use the `resolve` object in our route configuration.
+makeExcerpt('app/crisis-center/crisis-center.routing.ts (resolve)', 'crisis-detail-resolve')
We'll add the `CrisisDetailResolve` service to our `CrisisCenterRoutingModule`'s `providers`, so its available to the `Router` during the navigation process.
:marked
We'll add the `CrisisDetailResolve` service to our crisis center module's `providers`, so its available to the `Router` during the navigation process.
+makeExcerpt('app/crisis-center/crisis-center.module.ts (crisis detail resolve provider)', 'crisis-detail-resolve')
+makeExcerpt('app/crisis-center/crisis-center-routing.module.ts (resolve)', 'crisis-detail-resolve')
:marked
Now that we've added our `Resolve` guard to fetch data before the route loads, we no longer need to do this once we get into our `CrisisDetailComponent`.
@ -1940,7 +1959,7 @@ h3#resolve-guard <i>Resolve</i>: pre-fetching component data
`router/ts/app/app.component.ts,
router/ts/app/crisis-center/crisis-center-home.component.ts,
router/ts/app/crisis-center/crisis-center.component.ts,
router/ts/app/crisis-center/crisis-center.routing.ts,
router/ts/app/crisis-center/crisis-center-routing.module.ts,
router/ts/app/crisis-center/crisis-list.component.ts,
router/ts/app/crisis-center/crisis-detail.component.ts,
router/ts/app/crisis-center/crisis-detail-resolve.service.ts,
@ -1950,7 +1969,7 @@ h3#resolve-guard <i>Resolve</i>: pre-fetching component data
`app.component.ts,
crisis-center-home.component.ts,
crisis-center.component.ts,
crisis-center.routing.ts,
crisis-center-routing.module.ts,
crisis-list.component.ts,
crisis-detail.component.ts,
crisis-detail-resolve.service.ts,
@ -2026,7 +2045,7 @@ a#fragment
<a id="asynchronous-routing"></a>
.l-main-section
:marked
## Milestone #5: Asynchronous Routing
## Milestone #6: Asynchronous Routing
As we have completed our milestones, our application has naturally gotten larger. As we continue to build
out feature areas our overall application size will get larger also. At some point we'll reach a tipping
@ -2047,27 +2066,22 @@ a#fragment
:marked
### Lazy-Loading route configuration
We'll start by adding an `admin` route to our `app.routing.ts` file. We want to load our `Admin` module asynchronously,
We'll start by adding an `admin` route to our `app-routing.module.ts` file. We want to load our `Admin` module asynchronously,
so we'll use the `loadChildren` property in our route config where previously we used the `children` property to include our child routes.
We'll also change our `admin` **path** in our `admin.routing.ts` to an empty path. The `Router` supports
We'll also change our `admin` **path** in our `admin-routing.module.ts` to an empty path. The `Router` supports
*empty path* routes, which we can use for grouping routes together without adding anything additional paths to the URL. Our
users will still visit `/admin` and our `AdminComponent` still serves as our *Routing Component* which contains
our child routes.
+makeTabs(
`router/ts/app/app.routing.ts,
router/ts/app/admin/admin.routing.ts`,
`router/ts/app/app-routing.module.ts,
router/ts/app/admin/admin-routing.module.ts`,
'lazy-load-admin,',
`app.routing.ts (load children),
app/admin/admin.routing.ts (empty path admin)
`app-routing.module.ts (load children),
app/admin/admin-routing.module.ts (empty path admin)
`)
.l-sub-section
:marked
We use the ES2015 `spread` feature to flatten the route arrays of our `adminRoutes` and `loginRoutes`
into our `appRoutes` array to provide a simple array of routes.
:marked
The `loadChildren` property is used by the `Router` to map to our bundle we want to lazy-load, in this case being the `AdminModule`.
@ -2116,10 +2130,10 @@ h3#can-load-guard <i>CanLoad Guard</i>: guarding against loading of feature modu
+makeExcerpt('app/auth-guard.service.ts (can load guard)', '')
:marked
Next, we'll import the `AuthGuard` into our `app.routing.ts` and add the `AuthGuard` to the `canLoad` array for
Next, we'll import the `AuthGuard` into our `app-routing.module.ts` and add the `AuthGuard` to the `canLoad` array for
our `admin` route. Now our `admin` feature area is only loaded when the proper access has been granted.
+makeExcerpt('app/app.routing.ts (can load guard)', 'can-load-guard')
+makeExcerpt('app/app-routing.module.ts (can load guard)', 'can-load-guard')
<a id="final-app"></a>
.l-main-section
@ -2325,4 +2339,4 @@ code-example(format=".", language="bash").
providing the `useHash: true` in an object as the second argument of the `RouterModule.forRoot`
in our `AppModule`.
+makeExcerpt('app/app.module.5.ts (hash URL strategy)', '')
+makeExcerpt('app/app.module.6.ts (hash URL strategy)', '')

2
public/docs/ts/latest/tutorial/_data.json
View File

@ -27,7 +27,7 @@
},
"toh-pt5": {
"title": "Routing",
"intro": "We add the Angular Component Router and learn to navigate among the views",
"intro": "We add the Angular Router and learn to navigate among the views",
"nextable": true
},
"toh-pt6": {

40
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -2,7 +2,7 @@
block includes
include ../_util-fns
- var _appRoutingTsVsAppComp = 'app.routing.ts'
- var _appRoutingTsVsAppComp = 'app.module.ts'
- var _declsVsDirectives = 'declarations'
- var _RoutesVsAtRouteConfig = 'Routes'
- var _RouterModuleVsRouterDirectives = 'RouterModule'
@ -194,7 +194,7 @@ block router-config-intro
### Configure routes
Our application doesn't have any routes yet.
We'll start by creating a configuration file for the application routes.
We'll start by creating a configuration for the application routes.
:marked
*Routes* tell the router which views to display when a user clicks a link or
@ -202,11 +202,12 @@ block router-config-intro
Let's define our first route as a route to the heroes component:
- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.routing.ts'
- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts'
+makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
- var _are = _docsFor == 'dart' ? 'takes' : 'are'
- var _routePathPrefix = _docsFor == 'dart' ? '/' : ''
:marked
The `!{_RoutesVsAtRouteConfig}` !{_are} !{_an} !{_array} of *route definitions*.
We have only one route definition at the moment but rest assured, we'll add more.
@ -224,24 +225,18 @@ block router-config-intro
+ifDocsFor('ts|js')
:marked
We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes.
This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`.
### Make the router available
+makeExcerpt('app/app.routing.1.ts (excerpt)', 'routing-export')
We've setup the initial route configuration. Now we'll add it to our `AppModule`.
We'll add our configured `RouterModule` to the `AppModule` imports !{_array}.
+makeExcerpt('app/app.module.2.ts (app routing)', '')
.l-sub-section
:marked
We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
The `forRoot` method gives us the Router service providers and directives needed for routing.
:marked
### Make the router available
We've setup initial routes in the `app.routing.ts` file. Now we'll add it to our root NgModule.
Import the `routing` constant from `app.routing.ts` and add it the `imports` !{_array} of `AppModule`.
+makeExcerpt('app/app.module.ts', 'routing')
We use the `forRoot` method because we're providing a configured router at the _root_ of the application.
The `forRoot` method gives us the Router service providers and directives needed for routing, and
performs the initial navigation based on the current browser URL.
- var _heroesRoute = _docsFor == 'dart' ? "'Heroes'" : 'heroes'
:marked
@ -319,12 +314,12 @@ block routerLink
Import the dashboard component and
add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.routing.ts'
- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.module.3.ts'
+makeExcerpt(_file + ' (Dashboard route)', 'dashboard')
+ifDocsFor('ts|js')
:marked
Also import and add `DashboardComponent` to our root NgModule's `declarations`.
Also import and add `DashboardComponent` to our `AppModule`'s `declarations`.
+makeExcerpt('app/app.module.ts', 'dashboard')
@ -340,7 +335,7 @@ block redirect-vs-use-as-default
We can use a redirect route to make this happen. Add the following
to our array of route definitions:
+makeExcerpt('app/app.routing.ts','redirect')
+makeExcerpt('app/app.module.3.ts','redirect')
.l-sub-section
:marked
@ -466,7 +461,7 @@ code-example(format='').
Here's the *route definition* we'll use.
- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.module.3.ts'
+makeExcerpt(_file + ' (hero detail)','hero-detail')
:marked
@ -634,7 +629,7 @@ block extract-id
token in the parameterized hero detail route definition we added to
`!{_appRoutingTsVsAppComp}` earlier in the chapter:
- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.module.3.ts'
+makeExcerpt(_file + ' (hero detail)', 'hero-detail')
:marked
@ -864,7 +859,6 @@ block file-tree-end
.file app.component.css
.file app.component.ts
.file app.module.ts
.file app.routing.ts
.file dashboard.component.css
.file dashboard.component.html
.file dashboard.component.ts

2
public/docs/ts/latest/tutorial/toh-pt6.jade
View File

@ -544,7 +544,7 @@ block filetree
.file app.component.ts
.file app.component.css
.file app.module.ts
.file app.routing.ts
.file app-routing.module.ts
.file dashboard.component.css
.file dashboard.component.html
.file dashboard.component.ts