docs(aio): update migrated content from anguar.io
This commit is contained in:
Peter Bacon Darwin
committed by
Pete Bacon Darwin
Pete Bacon Darwin
parent
ff82756415
commit
fd72fad8fd
@ -0,0 +1,9 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<p>Dashboard</p>
|
||||
`
|
||||
})
|
||||
export class AdminDashboardComponent { }
|
||||
@ -0,0 +1,33 @@
|
||||
// #docregion
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<p>Dashboard</p>
|
||||
|
||||
<p>Session ID: {{ sessionId | async }}</p>
|
||||
<a id="anchor"></a>
|
||||
<p>Token: {{ token | async }}</p>
|
||||
`
|
||||
})
|
||||
export class AdminDashboardComponent implements OnInit {
|
||||
sessionId: Observable<string>;
|
||||
token: Observable<string>;
|
||||
|
||||
constructor(private route: ActivatedRoute) {}
|
||||
|
||||
ngOnInit() {
|
||||
// Capture the session ID if available
|
||||
this.sessionId = this.route
|
||||
.queryParams
|
||||
.map(params => params['session_id'] || 'None');
|
||||
|
||||
// Capture the fragment if available
|
||||
this.token = this.route
|
||||
.fragment
|
||||
.map(fragment => fragment || 'None');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
// #docregion
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
import { SelectivePreloadingStrategy } from '../selective-preloading-strategy';
|
||||
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<p>Dashboard</p>
|
||||
|
||||
<p>Session ID: {{ sessionId | async }}</p>
|
||||
<a id="anchor"></a>
|
||||
<p>Token: {{ token | async }}</p>
|
||||
|
||||
Preloaded Modules
|
||||
<ul>
|
||||
<li *ngFor="let module of modules">{{ module }}</li>
|
||||
</ul>
|
||||
`
|
||||
})
|
||||
export class AdminDashboardComponent implements OnInit {
|
||||
sessionId: Observable<string>;
|
||||
token: Observable<string>;
|
||||
modules: string[];
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private preloadStrategy: SelectivePreloadingStrategy
|
||||
) {
|
||||
this.modules = preloadStrategy.preloadedModules;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// Capture the session ID if available
|
||||
this.sessionId = this.route
|
||||
.queryParams
|
||||
.map(params => params['session_id'] || 'None');
|
||||
|
||||
// Capture the fragment if available
|
||||
this.token = this.route
|
||||
.fragment
|
||||
.map(fragment => fragment || 'None');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(adminRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class AdminRoutingModule {}
|
||||
// #enddocregion admin-routes
|
||||
// #enddocregion
|
||||
@ -0,0 +1,44 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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: 'admin',
|
||||
component: AdminComponent,
|
||||
canActivate: [AuthGuard],
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
children: [
|
||||
{ path: 'crises', component: ManageCrisesComponent },
|
||||
{ path: 'heroes', component: ManageHeroesComponent },
|
||||
{ path: '', component: AdminDashboardComponent }
|
||||
],
|
||||
// #enddocregion admin-route
|
||||
canActivateChild: [AuthGuard]
|
||||
// #docregion admin-route
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(adminRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class AdminRoutingModule {}
|
||||
// #enddocregion
|
||||
@ -0,0 +1,43 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(adminRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class AdminRoutingModule {}
|
||||
// #enddocregion
|
||||
@ -0,0 +1,41 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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';
|
||||
|
||||
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 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(adminRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class AdminRoutingModule {}
|
||||
// #enddocregion
|
||||
17
aio/content/examples/router/src/app/admin/admin.component.ts
Normal file
17
aio/content/examples/router/src/app/admin/admin.component.ts
Normal file
@ -0,0 +1,17 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h3>ADMIN</h3>
|
||||
<nav>
|
||||
<a routerLink="./" routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{ exact: true }">Dashboard</a>
|
||||
<a routerLink="./crises" routerLinkActive="active">Manage Crises</a>
|
||||
<a routerLink="./heroes" routerLinkActive="active">Manage Heroes</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
`
|
||||
})
|
||||
export class AdminComponent {
|
||||
}
|
||||
24
aio/content/examples/router/src/app/admin/admin.module.ts
Normal file
24
aio/content/examples/router/src/app/admin/admin.module.ts
Normal file
@ -0,0 +1,24 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { AdminComponent } from './admin.component';
|
||||
import { AdminDashboardComponent } from './admin-dashboard.component';
|
||||
import { ManageCrisesComponent } from './manage-crises.component';
|
||||
import { ManageHeroesComponent } from './manage-heroes.component';
|
||||
|
||||
import { AdminRoutingModule } from './admin-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
AdminRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
AdminComponent,
|
||||
AdminDashboardComponent,
|
||||
ManageCrisesComponent,
|
||||
ManageHeroesComponent
|
||||
]
|
||||
})
|
||||
export class AdminModule {}
|
||||
@ -0,0 +1,9 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<p>Manage your crises here</p>
|
||||
`
|
||||
})
|
||||
export class ManageCrisesComponent { }
|
||||
@ -0,0 +1,9 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<p>Manage your heroes here</p>
|
||||
`
|
||||
})
|
||||
export class ManageHeroesComponent { }
|
||||
26
aio/content/examples/router/src/app/animations.ts
Normal file
26
aio/content/examples/router/src/app/animations.ts
Normal file
@ -0,0 +1,26 @@
|
||||
// #docregion
|
||||
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
|
||||
|
||||
// Component transition animations
|
||||
export const slideInDownAnimation: AnimationEntryMetadata =
|
||||
trigger('routeAnimation', [
|
||||
state('*',
|
||||
style({
|
||||
opacity: 1,
|
||||
transform: 'translateX(0)'
|
||||
})
|
||||
),
|
||||
transition(':enter', [
|
||||
style({
|
||||
opacity: 0,
|
||||
transform: 'translateX(-100%)'
|
||||
}),
|
||||
animate('0.2s ease-in')
|
||||
]),
|
||||
transition(':leave', [
|
||||
animate('0.5s ease-out', style({
|
||||
opacity: 0,
|
||||
transform: 'translateY(100%)'
|
||||
}))
|
||||
])
|
||||
]);
|
||||
26
aio/content/examples/router/src/app/app-routing.module.1.ts
Normal file
26
aio/content/examples/router/src/app/app-routing.module.1.ts
Normal file
@ -0,0 +1,26 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { CrisisListComponent } from './crisis-list.component';
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
// #docregion appRoutes
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'crisis-center', component: CrisisListComponent },
|
||||
{ path: 'heroes', component: HeroListComponent },
|
||||
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
// #enddocregion appRoutes
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(appRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
24
aio/content/examples/router/src/app/app-routing.module.2.ts
Normal file
24
aio/content/examples/router/src/app/app-routing.module.2.ts
Normal file
@ -0,0 +1,24 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { CrisisListComponent } from './crisis-list.component';
|
||||
// import { HeroListComponent } from './hero-list.component'; // <-- delete this line
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'crisis-center', component: CrisisListComponent },
|
||||
// { path: 'heroes', component: HeroListComponent }, // <-- delete this line
|
||||
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(appRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
31
aio/content/examples/router/src/app/app-routing.module.3.ts
Normal file
31
aio/content/examples/router/src/app/app-routing.module.3.ts
Normal file
@ -0,0 +1,31 @@
|
||||
// #docplaster
|
||||
// #docregion , v3
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { ComposeMessageComponent } from './compose-message.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
// #enddocregion v3
|
||||
// #docregion compose
|
||||
{
|
||||
path: 'compose',
|
||||
component: ComposeMessageComponent,
|
||||
outlet: 'popup'
|
||||
},
|
||||
// #enddocregion compose
|
||||
// #docregion v3
|
||||
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(appRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
30
aio/content/examples/router/src/app/app-routing.module.4.ts
Normal file
30
aio/content/examples/router/src/app/app-routing.module.4.ts
Normal file
@ -0,0 +1,30 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { ComposeMessageComponent } from './compose-message.component';
|
||||
import { CanDeactivateGuard } from './can-deactivate-guard.service';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{
|
||||
path: 'compose',
|
||||
component: ComposeMessageComponent,
|
||||
outlet: 'popup'
|
||||
},
|
||||
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(appRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
],
|
||||
providers: [
|
||||
CanDeactivateGuard
|
||||
]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
45
aio/content/examples/router/src/app/app-routing.module.5.ts
Normal file
45
aio/content/examples/router/src/app/app-routing.module.5.ts
Normal file
@ -0,0 +1,45 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
// #docregion import-router
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
// #enddocregion import-router
|
||||
|
||||
import { ComposeMessageComponent } from './compose-message.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
import { CanDeactivateGuard } from './can-deactivate-guard.service';
|
||||
import { AuthGuard } from './auth-guard.service';
|
||||
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{
|
||||
path: 'compose',
|
||||
component: ComposeMessageComponent,
|
||||
outlet: 'popup'
|
||||
},
|
||||
// #docregion admin, admin-1
|
||||
{
|
||||
path: 'admin',
|
||||
loadChildren: 'app/admin/admin.module#AdminModule',
|
||||
// #enddocregion admin-1
|
||||
canLoad: [AuthGuard]
|
||||
// #docregion admin-1
|
||||
},
|
||||
// #enddocregion admin, admin-1
|
||||
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(appRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
],
|
||||
providers: [
|
||||
CanDeactivateGuard
|
||||
]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
54
aio/content/examples/router/src/app/app-routing.module.6.ts
Normal file
54
aio/content/examples/router/src/app/app-routing.module.6.ts
Normal file
@ -0,0 +1,54 @@
|
||||
// #docplaster
|
||||
// #docregion, preload-v1
|
||||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
RouterModule, Routes,
|
||||
// #enddocregion preload-v1
|
||||
PreloadAllModules
|
||||
// #docregion preload-v1
|
||||
} from '@angular/router';
|
||||
|
||||
import { ComposeMessageComponent } from './compose-message.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
import { CanDeactivateGuard } from './can-deactivate-guard.service';
|
||||
import { AuthGuard } from './auth-guard.service';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{
|
||||
path: 'compose',
|
||||
component: ComposeMessageComponent,
|
||||
outlet: 'popup'
|
||||
},
|
||||
{
|
||||
path: 'admin',
|
||||
loadChildren: 'app/admin/admin.module#AdminModule',
|
||||
canLoad: [AuthGuard]
|
||||
},
|
||||
{
|
||||
path: 'crisis-center',
|
||||
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
|
||||
},
|
||||
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
// #docregion forRoot
|
||||
RouterModule.forRoot(
|
||||
appRoutes
|
||||
// #enddocregion preload-v1
|
||||
, { preloadingStrategy: PreloadAllModules }
|
||||
// #docregion preload-v1
|
||||
)
|
||||
// #enddocregion forRoot
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
],
|
||||
providers: [
|
||||
CanDeactivateGuard
|
||||
]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
50
aio/content/examples/router/src/app/app-routing.module.ts
Normal file
50
aio/content/examples/router/src/app/app-routing.module.ts
Normal file
@ -0,0 +1,50 @@
|
||||
// #docplaster
|
||||
// #docregion, preload-v1
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { ComposeMessageComponent } from './compose-message.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
import { CanDeactivateGuard } from './can-deactivate-guard.service';
|
||||
import { AuthGuard } from './auth-guard.service';
|
||||
import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{
|
||||
path: 'compose',
|
||||
component: ComposeMessageComponent,
|
||||
outlet: 'popup'
|
||||
},
|
||||
{
|
||||
path: 'admin',
|
||||
loadChildren: 'app/admin/admin.module#AdminModule',
|
||||
canLoad: [AuthGuard]
|
||||
},
|
||||
// #docregion preload-v2
|
||||
{
|
||||
path: 'crisis-center',
|
||||
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
|
||||
data: { preload: true }
|
||||
},
|
||||
// #enddocregion preload-v2
|
||||
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(
|
||||
appRoutes,
|
||||
{ preloadingStrategy: SelectivePreloadingStrategy }
|
||||
)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
],
|
||||
providers: [
|
||||
CanDeactivateGuard,
|
||||
SelectivePreloadingStrategy
|
||||
]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
18
aio/content/examples/router/src/app/app.component.1.ts
Normal file
18
aio/content/examples/router/src/app/app.component.1.ts
Normal file
@ -0,0 +1,18 @@
|
||||
/* First version */
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
// #docregion template
|
||||
template: `
|
||||
<h1>Angular Router</h1>
|
||||
<nav>
|
||||
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
|
||||
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
export class AppComponent { }
|
||||
16
aio/content/examples/router/src/app/app.component.2.ts
Normal file
16
aio/content/examples/router/src/app/app.component.2.ts
Normal file
@ -0,0 +1,16 @@
|
||||
/* Second Heroes version */
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: `
|
||||
<h1>Angular Router</h1>
|
||||
<nav>
|
||||
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
|
||||
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
`
|
||||
})
|
||||
export class AppComponent { }
|
||||
48
aio/content/examples/router/src/app/app.component.3.ts
Normal file
48
aio/content/examples/router/src/app/app.component.3.ts
Normal file
@ -0,0 +1,48 @@
|
||||
/* tslint:disable:no-unused-variable */
|
||||
// #docplaster
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
/* Typical link
|
||||
// #docregion h-anchor
|
||||
<a [routerLink]="['/heroes']">Heroes</a>
|
||||
// #enddocregion h-anchor
|
||||
*/
|
||||
/* Incomplete Crisis Center link when CC lacks a default
|
||||
// #docregion cc-anchor-fail
|
||||
// The link now fails with a "non-terminal link" error
|
||||
// #docregion cc-anchor-w-default
|
||||
<a [routerLink]="['/crisis-center']">Crisis Center</a>
|
||||
// #enddocregion cc-anchor-w-default
|
||||
// #enddocregion cc-anchor-fail
|
||||
*/
|
||||
/* Crisis Center link when CC lacks a default
|
||||
// #docregion cc-anchor-no-default
|
||||
<a [routerLink]="['/crisis-center/']">Crisis Center</a>
|
||||
// #enddocregion cc-anchor-no-default
|
||||
*/
|
||||
/* Crisis Center Detail link
|
||||
// #docregion Dragon-anchor
|
||||
<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>
|
||||
// #enddocregion Dragon-anchor
|
||||
*/
|
||||
/* Crisis Center link with optional query params
|
||||
// #docregion cc-query-params
|
||||
<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
|
||||
// #enddocregion cc-query-params
|
||||
*/
|
||||
// #docregion template
|
||||
template: `
|
||||
<h1 class="title">Angular Router</h1>
|
||||
<nav>
|
||||
<a [routerLink]="['/crisis-center']">Crisis Center</a>
|
||||
<a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
|
||||
<a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
export class AppComponent { }
|
||||
23
aio/content/examples/router/src/app/app.component.4.ts
Normal file
23
aio/content/examples/router/src/app/app.component.4.ts
Normal file
@ -0,0 +1,23 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
// #docregion template
|
||||
template: `
|
||||
<h1 class="title">Angular Router</h1>
|
||||
<nav>
|
||||
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
|
||||
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
|
||||
// #docregion contact-link
|
||||
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
|
||||
// #enddocregion contact-link
|
||||
</nav>
|
||||
// #docregion outlets
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet name="popup"></router-outlet>
|
||||
// #enddocregion outlets
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
export class AppComponent { }
|
||||
20
aio/content/examples/router/src/app/app.component.5.ts
Normal file
20
aio/content/examples/router/src/app/app.component.5.ts
Normal file
@ -0,0 +1,20 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
// #docregion template
|
||||
template: `
|
||||
<h1 class="title">Angular Router</h1>
|
||||
<nav>
|
||||
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
|
||||
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
|
||||
<a routerLink="/admin" routerLinkActive="active">Admin</a>
|
||||
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet name="popup"></router-outlet>
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
export class AppComponent { }
|
||||
23
aio/content/examples/router/src/app/app.component.ts
Normal file
23
aio/content/examples/router/src/app/app.component.ts
Normal file
@ -0,0 +1,23 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
// #docregion template
|
||||
template: `
|
||||
<h1 class="title">Angular Router</h1>
|
||||
<nav>
|
||||
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
|
||||
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
|
||||
<a routerLink="/admin" routerLinkActive="active">Admin</a>
|
||||
<a routerLink="/login" routerLinkActive="active">Login</a>
|
||||
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet name="popup"></router-outlet>
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
export class AppComponent {
|
||||
}
|
||||
41
aio/content/examples/router/src/app/app.module.0.ts
Normal file
41
aio/content/examples/router/src/app/app.module.0.ts
Normal file
@ -0,0 +1,41 @@
|
||||
// NEVER USED. For docs only. Should compile though
|
||||
// #docplaster
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
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';
|
||||
|
||||
// #docregion
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'crisis-center', component: CrisisListComponent },
|
||||
{ path: 'hero/:id', component: HeroDetailComponent },
|
||||
{
|
||||
path: 'heroes',
|
||||
component: HeroListComponent,
|
||||
data: { title: 'Heroes List' }
|
||||
},
|
||||
{ path: '',
|
||||
redirectTo: '/heroes',
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forRoot(appRoutes)
|
||||
// other imports here
|
||||
],
|
||||
// #enddocregion
|
||||
/*
|
||||
// #docregion
|
||||
...
|
||||
})
|
||||
export class AppModule { }
|
||||
// #enddocregion
|
||||
*/
|
||||
})
|
||||
export class AppModule0 { }
|
||||
49
aio/content/examples/router/src/app/app.module.1.ts
Normal file
49
aio/content/examples/router/src/app/app.module.1.ts
Normal file
@ -0,0 +1,49 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion first-config
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
// #docregion import-router
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
// #enddocregion import-router
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { CrisisListComponent } from './crisis-list.component';
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
// #enddocregion first-config
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
// #docregion first-config
|
||||
|
||||
// #docregion appRoutes
|
||||
const appRoutes: Routes = [
|
||||
{ path: 'crisis-center', component: CrisisListComponent },
|
||||
{ path: 'heroes', component: HeroListComponent },
|
||||
// #enddocregion first-config
|
||||
|
||||
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
|
||||
// #docregion wildcard
|
||||
{ path: '**', component: PageNotFoundComponent }
|
||||
// #enddocregion wildcard
|
||||
// #docregion first-config
|
||||
];
|
||||
// #enddocregion appRoutes
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
RouterModule.forRoot(appRoutes)
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroListComponent,
|
||||
CrisisListComponent,
|
||||
// #enddocregion first-config
|
||||
PageNotFoundComponent
|
||||
// #docregion first-config
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
// #enddocregion
|
||||
31
aio/content/examples/router/src/app/app.module.2.ts
Normal file
31
aio/content/examples/router/src/app/app.module.2.ts
Normal file
@ -0,0 +1,31 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion hero-import
|
||||
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 { CrisisListComponent } from './crisis-list.component';
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroListComponent,
|
||||
CrisisListComponent,
|
||||
PageNotFoundComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
// #enddocregion hero-import
|
||||
export class AppModule { }
|
||||
// #enddocregion
|
||||
29
aio/content/examples/router/src/app/app.module.3.ts
Normal file
29
aio/content/examples/router/src/app/app.module.3.ts
Normal file
@ -0,0 +1,29 @@
|
||||
// #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 { CrisisListComponent } from './crisis-list.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
@NgModule({
|
||||
// #docregion module-imports
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HeroesModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
// #enddocregion module-imports
|
||||
declarations: [
|
||||
AppComponent,
|
||||
CrisisListComponent,
|
||||
PageNotFoundComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
46
aio/content/examples/router/src/app/app.module.4.ts
Normal file
46
aio/content/examples/router/src/app/app.module.4.ts
Normal file
@ -0,0 +1,46 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion crisis-center-module, admin-module
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { HeroesModule } from './heroes/heroes.module';
|
||||
import { CrisisCenterModule } from './crisis-center/crisis-center.module';
|
||||
// #enddocregion crisis-center-module, admin-module
|
||||
import { ComposeMessageComponent } from './compose-message.component';
|
||||
// #docregion admin-module
|
||||
import { AdminModule } from './admin/admin.module';
|
||||
// #docregion crisis-center-module
|
||||
|
||||
import { DialogService } from './dialog.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
HeroesModule,
|
||||
CrisisCenterModule,
|
||||
// #enddocregion crisis-center-module
|
||||
AdminModule,
|
||||
// #docregion crisis-center-module
|
||||
AppRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
// #enddocregion admin-module, crisis-center-module
|
||||
ComposeMessageComponent,
|
||||
// #docregion admin-module, crisis-center-module
|
||||
PageNotFoundComponent
|
||||
],
|
||||
providers: [
|
||||
DialogService
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
// #enddocregion
|
||||
38
aio/content/examples/router/src/app/app.module.5.ts
Normal file
38
aio/content/examples/router/src/app/app.module.5.ts
Normal file
@ -0,0 +1,38 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
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 { ComposeMessageComponent } from './compose-message.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
import { AdminModule } from './admin/admin.module';
|
||||
import { DialogService } from './dialog.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
HeroesModule,
|
||||
CrisisCenterModule,
|
||||
AdminModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ComposeMessageComponent,
|
||||
PageNotFoundComponent
|
||||
],
|
||||
providers: [
|
||||
DialogService
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
29
aio/content/examples/router/src/app/app.module.6.ts
Normal file
29
aio/content/examples/router/src/app/app.module.6.ts
Normal file
@ -0,0 +1,29 @@
|
||||
// #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';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
const routes: Routes = [
|
||||
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
PageNotFoundComponent
|
||||
],
|
||||
providers: [
|
||||
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
38
aio/content/examples/router/src/app/app.module.7.ts
Normal file
38
aio/content/examples/router/src/app/app.module.7.ts
Normal file
@ -0,0 +1,38 @@
|
||||
// #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 { ComposeMessageComponent } from './compose-message.component';
|
||||
import { LoginRoutingModule } from './login-routing.module';
|
||||
import { LoginComponent } from './login.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
import { DialogService } from './dialog.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HeroesModule,
|
||||
CrisisCenterModule,
|
||||
LoginRoutingModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ComposeMessageComponent,
|
||||
LoginComponent,
|
||||
PageNotFoundComponent
|
||||
],
|
||||
providers: [
|
||||
DialogService
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
56
aio/content/examples/router/src/app/app.module.ts
Normal file
56
aio/content/examples/router/src/app/app.module.ts
Normal file
@ -0,0 +1,56 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
// #docregion animations-module
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
// #enddocregion animations-module
|
||||
// #docregion inspect-config
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
// #enddocregion inspect-config
|
||||
import { AppComponent } from './app.component';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
|
||||
import { HeroesModule } from './heroes/heroes.module';
|
||||
import { ComposeMessageComponent } from './compose-message.component';
|
||||
import { LoginRoutingModule } from './login-routing.module';
|
||||
import { LoginComponent } from './login.component';
|
||||
import { PageNotFoundComponent } from './not-found.component';
|
||||
|
||||
import { DialogService } from './dialog.service';
|
||||
|
||||
// #docregion animations-module
|
||||
@NgModule({
|
||||
imports: [
|
||||
// #enddocregion animations-module
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HeroesModule,
|
||||
LoginRoutingModule,
|
||||
AppRoutingModule,
|
||||
// #docregion animations-module
|
||||
BrowserAnimationsModule
|
||||
// #enddocregion animations-module
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ComposeMessageComponent,
|
||||
LoginComponent,
|
||||
PageNotFoundComponent
|
||||
],
|
||||
providers: [
|
||||
DialogService
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
// #docregion inspect-config
|
||||
export class AppModule {
|
||||
// Diagnostic only: inspect router configuration
|
||||
constructor(router: Router) {
|
||||
console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
|
||||
}
|
||||
}
|
||||
// #enddocregion inspect-config
|
||||
11
aio/content/examples/router/src/app/auth-guard.service.1.ts
Normal file
11
aio/content/examples/router/src/app/auth-guard.service.1.ts
Normal file
@ -0,0 +1,11 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { CanActivate } from '@angular/router';
|
||||
|
||||
@Injectable()
|
||||
export class AuthGuard implements CanActivate {
|
||||
canActivate() {
|
||||
console.log('AuthGuard#canActivate called');
|
||||
return true;
|
||||
}
|
||||
}
|
||||
37
aio/content/examples/router/src/app/auth-guard.service.2.ts
Normal file
37
aio/content/examples/router/src/app/auth-guard.service.2.ts
Normal file
@ -0,0 +1,37 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import {
|
||||
CanActivate, Router,
|
||||
ActivatedRouteSnapshot,
|
||||
RouterStateSnapshot
|
||||
} from '@angular/router';
|
||||
import { AuthService } from './auth.service';
|
||||
|
||||
@Injectable()
|
||||
export class AuthGuard implements CanActivate {
|
||||
constructor(private authService: AuthService, private router: Router) {}
|
||||
|
||||
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
|
||||
let url: string = state.url;
|
||||
|
||||
return this.checkLogin(url);
|
||||
}
|
||||
|
||||
checkLogin(url: string): boolean {
|
||||
if (this.authService.isLoggedIn) { return true; }
|
||||
|
||||
// Store the attempted URL for redirecting
|
||||
this.authService.redirectUrl = url;
|
||||
|
||||
// Navigate to the login page with extras
|
||||
this.router.navigate(['/login']);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
/*
|
||||
// #docregion can-load-interface
|
||||
export class AuthGuard implements CanActivate, CanLoad {
|
||||
// #enddocregion can-load-interface
|
||||
*/
|
||||
39
aio/content/examples/router/src/app/auth-guard.service.3.ts
Normal file
39
aio/content/examples/router/src/app/auth-guard.service.3.ts
Normal file
@ -0,0 +1,39 @@
|
||||
// #docregion
|
||||
// #docregion can-activate-child
|
||||
import { Injectable } from '@angular/core';
|
||||
import {
|
||||
CanActivate, Router,
|
||||
ActivatedRouteSnapshot,
|
||||
RouterStateSnapshot,
|
||||
CanActivateChild
|
||||
} from '@angular/router';
|
||||
import { AuthService } from './auth.service';
|
||||
|
||||
@Injectable()
|
||||
export class AuthGuard implements CanActivate, CanActivateChild {
|
||||
constructor(private authService: AuthService, private router: Router) {}
|
||||
|
||||
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
|
||||
let url: string = state.url;
|
||||
|
||||
return this.checkLogin(url);
|
||||
}
|
||||
|
||||
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
|
||||
return this.canActivate(route, state);
|
||||
}
|
||||
|
||||
// #enddocregion can-activate-child
|
||||
checkLogin(url: string): boolean {
|
||||
if (this.authService.isLoggedIn) { return true; }
|
||||
|
||||
// Store the attempted URL for redirecting
|
||||
this.authService.redirectUrl = url;
|
||||
|
||||
// Navigate to the login page
|
||||
this.router.navigate(['/login']);
|
||||
return false;
|
||||
}
|
||||
// #docregion can-activate-child
|
||||
}
|
||||
// #enddocregion
|
||||
47
aio/content/examples/router/src/app/auth-guard.service.4.ts
Normal file
47
aio/content/examples/router/src/app/auth-guard.service.4.ts
Normal file
@ -0,0 +1,47 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import {
|
||||
CanActivate, Router,
|
||||
ActivatedRouteSnapshot,
|
||||
RouterStateSnapshot,
|
||||
CanActivateChild,
|
||||
NavigationExtras
|
||||
} from '@angular/router';
|
||||
import { AuthService } from './auth.service';
|
||||
|
||||
@Injectable()
|
||||
export class AuthGuard implements CanActivate, CanActivateChild {
|
||||
constructor(private authService: AuthService, private router: Router) {}
|
||||
|
||||
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
|
||||
let url: string = state.url;
|
||||
|
||||
return this.checkLogin(url);
|
||||
}
|
||||
|
||||
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
|
||||
return this.canActivate(route, state);
|
||||
}
|
||||
|
||||
checkLogin(url: string): boolean {
|
||||
if (this.authService.isLoggedIn) { return true; }
|
||||
|
||||
// Store the attempted URL for redirecting
|
||||
this.authService.redirectUrl = url;
|
||||
|
||||
// Create a dummy session id
|
||||
let sessionId = 123456789;
|
||||
|
||||
// Set our navigation extras object
|
||||
// that contains our global query params and fragment
|
||||
let navigationExtras: NavigationExtras = {
|
||||
queryParams: { 'session_id': sessionId },
|
||||
fragment: 'anchor'
|
||||
};
|
||||
|
||||
// Navigate to the login page with extras
|
||||
this.router.navigate(['/login'], navigationExtras);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
56
aio/content/examples/router/src/app/auth-guard.service.ts
Normal file
56
aio/content/examples/router/src/app/auth-guard.service.ts
Normal file
@ -0,0 +1,56 @@
|
||||
// #docplaster
|
||||
import { Injectable } from '@angular/core';
|
||||
import {
|
||||
CanActivate, Router,
|
||||
ActivatedRouteSnapshot,
|
||||
RouterStateSnapshot,
|
||||
CanActivateChild,
|
||||
NavigationExtras,
|
||||
CanLoad, Route
|
||||
} from '@angular/router';
|
||||
import { AuthService } from './auth.service';
|
||||
|
||||
@Injectable()
|
||||
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
|
||||
constructor(private authService: AuthService, private router: Router) {}
|
||||
|
||||
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
|
||||
let url: string = state.url;
|
||||
|
||||
return this.checkLogin(url);
|
||||
}
|
||||
|
||||
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
|
||||
return this.canActivate(route, state);
|
||||
}
|
||||
|
||||
// #docregion, canLoad
|
||||
canLoad(route: Route): boolean {
|
||||
let url = `/${route.path}`;
|
||||
|
||||
return this.checkLogin(url);
|
||||
}
|
||||
// #enddocregion canLoad
|
||||
|
||||
checkLogin(url: string): boolean {
|
||||
if (this.authService.isLoggedIn) { return true; }
|
||||
|
||||
// Store the attempted URL for redirecting
|
||||
this.authService.redirectUrl = url;
|
||||
|
||||
// Create a dummy session id
|
||||
let sessionId = 123456789;
|
||||
|
||||
// Set our navigation extras object
|
||||
// that contains our global query params and fragment
|
||||
let navigationExtras: NavigationExtras = {
|
||||
queryParams: { 'session_id': sessionId },
|
||||
fragment: 'anchor'
|
||||
};
|
||||
|
||||
// Navigate to the login page with extras
|
||||
this.router.navigate(['/login'], navigationExtras);
|
||||
return false;
|
||||
}
|
||||
// #docregion admin-can-load
|
||||
}
|
||||
23
aio/content/examples/router/src/app/auth.service.ts
Normal file
23
aio/content/examples/router/src/app/auth.service.ts
Normal file
@ -0,0 +1,23 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/observable/of';
|
||||
import 'rxjs/add/operator/do';
|
||||
import 'rxjs/add/operator/delay';
|
||||
|
||||
@Injectable()
|
||||
export class AuthService {
|
||||
isLoggedIn: boolean = false;
|
||||
|
||||
// store the URL so we can redirect after logging in
|
||||
redirectUrl: string;
|
||||
|
||||
login(): Observable<boolean> {
|
||||
return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
this.isLoggedIn = false;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { CanDeactivate,
|
||||
ActivatedRouteSnapshot,
|
||||
RouterStateSnapshot } from '@angular/router';
|
||||
|
||||
import { CrisisDetailComponent } from './crisis-center/crisis-detail.component';
|
||||
|
||||
@Injectable()
|
||||
export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent> {
|
||||
|
||||
canDeactivate(
|
||||
component: CrisisDetailComponent,
|
||||
route: ActivatedRouteSnapshot,
|
||||
state: RouterStateSnapshot
|
||||
): Promise<boolean> | boolean {
|
||||
// Get the Crisis Center ID
|
||||
console.log(route.params['id']);
|
||||
|
||||
// Get the current URL
|
||||
console.log(state.url);
|
||||
|
||||
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
|
||||
if (!component.crisis || component.crisis.name === component.editName) {
|
||||
return true;
|
||||
}
|
||||
// Otherwise ask the user with the dialog service and return its
|
||||
// promise which resolves to true or false when the user decides
|
||||
return component.dialogService.confirm('Discard changes?');
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { CanDeactivate } from '@angular/router';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
export interface CanComponentDeactivate {
|
||||
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
|
||||
canDeactivate(component: CanComponentDeactivate) {
|
||||
return component.canDeactivate ? component.canDeactivate() : true;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<!-- #docregion -->
|
||||
<h3>Contact Crisis Center</h3>
|
||||
<div *ngIf="details">
|
||||
{{ details }}
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label>Message: </label>
|
||||
</div>
|
||||
<div>
|
||||
<textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<p *ngIf="!sending">
|
||||
<button (click)="send()">Send</button>
|
||||
<button (click)="cancel()">Cancel</button>
|
||||
</p>
|
||||
@ -0,0 +1,43 @@
|
||||
// #docregion
|
||||
import { Component, HostBinding } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { slideInDownAnimation } from './animations';
|
||||
|
||||
@Component({
|
||||
templateUrl: './compose-message.component.html',
|
||||
styles: [ ':host { position: relative; bottom: 10%; }' ],
|
||||
animations: [ slideInDownAnimation ]
|
||||
})
|
||||
export class ComposeMessageComponent {
|
||||
@HostBinding('@routeAnimation') routeAnimation = true;
|
||||
@HostBinding('style.display') display = 'block';
|
||||
@HostBinding('style.position') position = 'absolute';
|
||||
|
||||
details: string;
|
||||
sending: boolean = false;
|
||||
|
||||
constructor(private router: Router) {}
|
||||
|
||||
send() {
|
||||
this.sending = true;
|
||||
this.details = 'Sending Message...';
|
||||
|
||||
setTimeout(() => {
|
||||
this.sending = false;
|
||||
this.closePopup();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.closePopup();
|
||||
}
|
||||
|
||||
// #docregion closePopup
|
||||
closePopup() {
|
||||
// Providing a `null` value to the named outlet
|
||||
// clears the contents of the named outlet
|
||||
this.router.navigate([{ outlets: { popup: null }}]);
|
||||
}
|
||||
// #enddocregion closePopup
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
// #docregion
|
||||
// #docplaster
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
// #docregion minus-imports
|
||||
@Component({
|
||||
template: `
|
||||
<p>Welcome to the Crisis Center</p>
|
||||
`
|
||||
})
|
||||
export class CrisisCenterHomeComponent { }
|
||||
// #enddocregion minus-imports
|
||||
// #enddocregion
|
||||
@ -0,0 +1,44 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(crisisCenterRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class CrisisCenterRoutingModule { }
|
||||
// #enddocregion
|
||||
@ -0,0 +1,72 @@
|
||||
// #docplaster
|
||||
// #docregion routes
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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-resolver
|
||||
import { CrisisDetailResolver } from './crisis-detail-resolver.service';
|
||||
|
||||
// #enddocregion crisis-detail-resolver
|
||||
// #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-resolver
|
||||
resolve: {
|
||||
crisis: CrisisDetailResolver
|
||||
}
|
||||
// #enddocregion crisis-detail-resolver
|
||||
// #docregion routes
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: CrisisCenterHomeComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// #enddocregion routes
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(crisisCenterRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class CrisisCenterRoutingModule { }
|
||||
@ -0,0 +1,52 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(crisisCenterRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class CrisisCenterRoutingModule { }
|
||||
// #enddocregion
|
||||
@ -0,0 +1,65 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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-resolver
|
||||
import { CrisisDetailResolver } from './crisis-detail-resolver.service';
|
||||
|
||||
// #enddocregion crisis-detail-resolver
|
||||
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: CrisisDetailResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: CrisisCenterHomeComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// #docregion crisis-detail-resolver
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(crisisCenterRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
],
|
||||
providers: [
|
||||
CrisisDetailResolver
|
||||
]
|
||||
})
|
||||
export class CrisisCenterRoutingModule { }
|
||||
// #enddocregion crisis-detail-resolver
|
||||
// #enddocregion
|
||||
@ -0,0 +1,53 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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';
|
||||
import { CrisisDetailResolver } from './crisis-detail-resolver.service';
|
||||
|
||||
const crisisCenterRoutes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: CrisisCenterComponent,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: CrisisListComponent,
|
||||
children: [
|
||||
{
|
||||
path: ':id',
|
||||
component: CrisisDetailComponent,
|
||||
canDeactivate: [CanDeactivateGuard],
|
||||
resolve: {
|
||||
crisis: CrisisDetailResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: CrisisCenterHomeComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(crisisCenterRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
],
|
||||
providers: [
|
||||
CrisisDetailResolver
|
||||
]
|
||||
})
|
||||
export class CrisisCenterRoutingModule { }
|
||||
// #enddocregion
|
||||
@ -0,0 +1,14 @@
|
||||
// #docregion
|
||||
// #docplaster
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
// #docregion minus-imports
|
||||
@Component({
|
||||
template: `
|
||||
<h2>CRISIS CENTER</h2>
|
||||
<router-outlet></router-outlet>
|
||||
`
|
||||
})
|
||||
export class CrisisCenterComponent { }
|
||||
// #enddocregion minus-imports
|
||||
// #enddocregion
|
||||
@ -0,0 +1,36 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
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 { CrisisCenterRoutingModule } from './crisis-center-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
CrisisCenterRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
CrisisCenterComponent,
|
||||
CrisisListComponent,
|
||||
CrisisCenterHomeComponent,
|
||||
CrisisDetailComponent
|
||||
],
|
||||
|
||||
// #docregion providers
|
||||
providers: [
|
||||
CrisisService
|
||||
]
|
||||
// #enddocregion providers
|
||||
})
|
||||
export class CrisisCenterModule {}
|
||||
// #enddocregion
|
||||
@ -0,0 +1,35 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
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 { CrisisCenterRoutingModule } from './crisis-center-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
CrisisCenterRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
CrisisCenterComponent,
|
||||
CrisisListComponent,
|
||||
CrisisCenterHomeComponent,
|
||||
CrisisDetailComponent
|
||||
],
|
||||
providers: [
|
||||
CrisisService
|
||||
]
|
||||
})
|
||||
// #docregion crisis-center-module-export
|
||||
export class CrisisCenterModule {}
|
||||
// #enddocregion crisis-center-module-export
|
||||
// #enddocregion
|
||||
@ -0,0 +1,24 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Router, Resolve, RouterStateSnapshot,
|
||||
ActivatedRouteSnapshot } from '@angular/router';
|
||||
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
|
||||
@Injectable()
|
||||
export class CrisisDetailResolver implements Resolve<Crisis> {
|
||||
constructor(private cs: CrisisService, private router: Router) {}
|
||||
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
|
||||
let id = route.params['id'];
|
||||
|
||||
return this.cs.getCrisis(id).then(crisis => {
|
||||
if (crisis) {
|
||||
return crisis;
|
||||
} else { // id not found
|
||||
this.router.navigate(['/crisis-center']);
|
||||
return null;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
import { Component, OnInit, HostBinding } from '@angular/core';
|
||||
import { ActivatedRoute, Router, Params } from '@angular/router';
|
||||
|
||||
import { slideInDownAnimation } from '../animations';
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
import { DialogService } from '../dialog.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<div *ngIf="crisis">
|
||||
<h3>"{{ editName }}"</h3>
|
||||
<div>
|
||||
<label>Id: </label>{{ crisis.id }}</div>
|
||||
<div>
|
||||
<label>Name: </label>
|
||||
<input [(ngModel)]="editName" placeholder="name"/>
|
||||
</div>
|
||||
<p>
|
||||
<button (click)="save()">Save</button>
|
||||
<button (click)="cancel()">Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
styles: ['input {width: 20em}'],
|
||||
animations: [ slideInDownAnimation ]
|
||||
})
|
||||
export class CrisisDetailComponent implements OnInit {
|
||||
@HostBinding('@routeAnimation') routeAnimation = true;
|
||||
@HostBinding('style.display') display = 'block';
|
||||
@HostBinding('style.position') position = 'absolute';
|
||||
|
||||
crisis: Crisis;
|
||||
editName: string;
|
||||
|
||||
constructor(
|
||||
private service: CrisisService,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
public dialogService: DialogService
|
||||
) {}
|
||||
|
||||
// #docregion ngOnInit
|
||||
ngOnInit() {
|
||||
this.route.params
|
||||
.switchMap((params: Params) => this.service.getCrisis(params['id']))
|
||||
.subscribe((crisis: Crisis) => {
|
||||
if (crisis) {
|
||||
this.editName = crisis.name;
|
||||
this.crisis = crisis;
|
||||
} else { // id not found
|
||||
this.gotoCrises();
|
||||
}
|
||||
});
|
||||
}
|
||||
// #enddocregion ngOnInit
|
||||
|
||||
cancel() {
|
||||
this.gotoCrises();
|
||||
}
|
||||
|
||||
save() {
|
||||
this.crisis.name = this.editName;
|
||||
this.gotoCrises();
|
||||
}
|
||||
|
||||
canDeactivate(): Promise<boolean> | boolean {
|
||||
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
|
||||
if (!this.crisis || this.crisis.name === this.editName) {
|
||||
return true;
|
||||
}
|
||||
// Otherwise ask the user with the dialog service and return its
|
||||
// promise which resolves to true or false when the user decides
|
||||
return this.dialogService.confirm('Discard changes?');
|
||||
}
|
||||
|
||||
gotoCrises() {
|
||||
let crisisId = this.crisis ? this.crisis.id : null;
|
||||
// Pass along the crisis id if available
|
||||
// so that the CrisisListComponent can select that crisis.
|
||||
// Add a totally useless `foo` parameter for kicks.
|
||||
// Relative navigation back to the crises
|
||||
this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, OnInit, HostBinding } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
|
||||
import { slideInDownAnimation } from '../animations';
|
||||
import { Crisis } from './crisis.service';
|
||||
import { DialogService } from '../dialog.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<div *ngIf="crisis">
|
||||
<h3>"{{ editName }}"</h3>
|
||||
<div>
|
||||
<label>Id: </label>{{ crisis.id }}</div>
|
||||
<div>
|
||||
<label>Name: </label>
|
||||
<input [(ngModel)]="editName" placeholder="name"/>
|
||||
</div>
|
||||
<p>
|
||||
<button (click)="save()">Save</button>
|
||||
<button (click)="cancel()">Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
styles: ['input {width: 20em}'],
|
||||
animations: [ slideInDownAnimation ]
|
||||
})
|
||||
export class CrisisDetailComponent implements OnInit {
|
||||
@HostBinding('@routeAnimation') routeAnimation = true;
|
||||
@HostBinding('style.display') display = 'block';
|
||||
@HostBinding('style.position') position = 'absolute';
|
||||
|
||||
crisis: Crisis;
|
||||
editName: string;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
public dialogService: DialogService
|
||||
) {}
|
||||
|
||||
// #docregion ngOnInit
|
||||
ngOnInit() {
|
||||
this.route.data
|
||||
.subscribe((data: { crisis: Crisis }) => {
|
||||
this.editName = data.crisis.name;
|
||||
this.crisis = data.crisis;
|
||||
});
|
||||
}
|
||||
// #enddocregion ngOnInit
|
||||
|
||||
// #docregion cancel-save
|
||||
cancel() {
|
||||
this.gotoCrises();
|
||||
}
|
||||
|
||||
save() {
|
||||
this.crisis.name = this.editName;
|
||||
this.gotoCrises();
|
||||
}
|
||||
// #enddocregion cancel-save
|
||||
|
||||
// #docregion canDeactivate
|
||||
canDeactivate(): Promise<boolean> | boolean {
|
||||
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
|
||||
if (!this.crisis || this.crisis.name === this.editName) {
|
||||
return true;
|
||||
}
|
||||
// Otherwise ask the user with the dialog service and return its
|
||||
// promise which resolves to true or false when the user decides
|
||||
return this.dialogService.confirm('Discard changes?');
|
||||
}
|
||||
// #enddocregion canDeactivate
|
||||
|
||||
gotoCrises() {
|
||||
let crisisId = this.crisis ? this.crisis.id : null;
|
||||
// Pass along the crisis id if available
|
||||
// so that the CrisisListComponent can select that crisis.
|
||||
// Add a totally useless `foo` parameter for kicks.
|
||||
// #docregion gotoCrises-navigate
|
||||
// Relative navigation back to the crises
|
||||
this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
|
||||
// #enddocregion gotoCrises-navigate
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import 'rxjs/add/operator/do';
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router, Params } from '@angular/router';
|
||||
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
@Component({
|
||||
// #docregion relative-navigation-router-link
|
||||
template: `
|
||||
<ul class="items">
|
||||
<li *ngFor="let crisis of crises | async">
|
||||
<a [routerLink]="[crisis.id]"
|
||||
[class.selected]="isSelected(crisis)">
|
||||
<span class="badge">{{ crisis.id }}</span>
|
||||
{{ crisis.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>`
|
||||
// #enddocregion relative-navigation-router-link
|
||||
})
|
||||
export class CrisisListComponent implements OnInit {
|
||||
crises: Observable<Crisis[]>;
|
||||
selectedId: number;
|
||||
|
||||
constructor(
|
||||
private service: CrisisService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.crises = this.route.params
|
||||
.switchMap((params: Params) => {
|
||||
this.selectedId = +params['id'];
|
||||
return this.service.getCrises();
|
||||
});
|
||||
}
|
||||
|
||||
isSelected(crisis: Crisis) {
|
||||
return crisis.id === this.selectedId;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
// #docregion
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router, Params } from '@angular/router';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
import { Crisis, CrisisService } from './crisis.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<ul class="items">
|
||||
<li *ngFor="let crisis of crises | async"
|
||||
(click)="onSelect(crisis)"
|
||||
[class.selected]="isSelected(crisis)">
|
||||
<span class="badge">{{ crisis.id }}</span>
|
||||
{{ crisis.name }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
`
|
||||
})
|
||||
export class CrisisListComponent implements OnInit {
|
||||
crises: Observable<Crisis[]>;
|
||||
selectedId: number;
|
||||
|
||||
// #docregion ctor
|
||||
constructor(
|
||||
private service: CrisisService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) {}
|
||||
// #enddocregion ctor
|
||||
|
||||
isSelected(crisis: Crisis) {
|
||||
return crisis.id === this.selectedId;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.crises = this.route.params
|
||||
.switchMap((params: Params) => {
|
||||
this.selectedId = +params['id'];
|
||||
return this.service.getCrises();
|
||||
});
|
||||
}
|
||||
|
||||
// #docregion onSelect
|
||||
onSelect(crisis: Crisis) {
|
||||
this.selectedId = crisis.id;
|
||||
|
||||
// Navigate with relative link
|
||||
this.router.navigate([crisis.id], { relativeTo: this.route });
|
||||
}
|
||||
// #enddocregion onSelect
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
// #docplaster
|
||||
// #docregion , mock-crises
|
||||
export class Crisis {
|
||||
constructor(public id: number, public name: string) { }
|
||||
}
|
||||
|
||||
const CRISES = [
|
||||
new Crisis(1, 'Dragon Burning Cities'),
|
||||
new Crisis(2, 'Sky Rains Great White Sharks'),
|
||||
new Crisis(3, 'Giant Asteroid Heading For Earth'),
|
||||
new Crisis(4, 'Procrastinators Meeting Delayed Again'),
|
||||
];
|
||||
// #enddocregion mock-crises
|
||||
|
||||
let crisesPromise = Promise.resolve(CRISES);
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class CrisisService {
|
||||
|
||||
static nextCrisisId = 100;
|
||||
|
||||
getCrises() { return crisesPromise; }
|
||||
|
||||
getCrisis(id: number | string) {
|
||||
return crisesPromise
|
||||
.then(crises => crises.find(crisis => crisis.id === +id));
|
||||
}
|
||||
|
||||
// #enddocregion
|
||||
addCrisis(name: string) {
|
||||
name = name.trim();
|
||||
if (name) {
|
||||
let crisis = new Crisis(CrisisService.nextCrisisId++, name);
|
||||
crisesPromise.then(crises => crises.push(crisis));
|
||||
}
|
||||
}
|
||||
// #docregion
|
||||
}
|
||||
10
aio/content/examples/router/src/app/crisis-list.component.ts
Normal file
10
aio/content/examples/router/src/app/crisis-list.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
// Initial empty version
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h2>CRISIS CENTER</h2>
|
||||
<p>Get your crisis here</p>`
|
||||
})
|
||||
export class CrisisListComponent { }
|
||||
19
aio/content/examples/router/src/app/dialog.service.ts
Normal file
19
aio/content/examples/router/src/app/dialog.service.ts
Normal file
@ -0,0 +1,19 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
/**
|
||||
* Async modal dialog service
|
||||
* DialogService makes this app easier to test by faking this service.
|
||||
* TODO: better modal implementation that doesn't use window.confirm
|
||||
*/
|
||||
@Injectable()
|
||||
export class DialogService {
|
||||
/**
|
||||
* Ask user to confirm an action. `message` explains the action and choices.
|
||||
* Returns promise resolving to `true`=confirm or `false`=cancel
|
||||
*/
|
||||
confirm(message?: string) {
|
||||
return new Promise<boolean>(resolve => {
|
||||
return resolve(window.confirm(message || 'Is it OK?'));
|
||||
});
|
||||
};
|
||||
}
|
||||
13
aio/content/examples/router/src/app/hero-list.component.ts
Normal file
13
aio/content/examples/router/src/app/hero-list.component.ts
Normal file
@ -0,0 +1,13 @@
|
||||
/// Initial empty version
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h2>HEROES</h2>
|
||||
<p>Get your heroes here</p>
|
||||
|
||||
<button routerLink="/sidekicks">Go to sidekicks</button>
|
||||
`
|
||||
})
|
||||
export class HeroListComponent { }
|
||||
@ -0,0 +1,55 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion rxjs-operator-import
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
// #enddocregion rxjs-operator-import
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
// #docregion imports
|
||||
import { Router, ActivatedRoute, Params } from '@angular/router';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Hero, HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h2>HEROES</h2>
|
||||
<div *ngIf="hero">
|
||||
<h3>"{{ hero.name }}"</h3>
|
||||
<div>
|
||||
<label>Id: </label>{{ hero.id }}</div>
|
||||
<div>
|
||||
<label>Name: </label>
|
||||
<input [(ngModel)]="hero.name" placeholder="name"/>
|
||||
</div>
|
||||
<p>
|
||||
<button (click)="gotoHeroes()">Back</button>
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
hero: Hero;
|
||||
|
||||
// #docregion ctor
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private service: HeroService
|
||||
) {}
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion ngOnInit
|
||||
ngOnInit() {
|
||||
this.route.params
|
||||
// (+) converts string 'id' to a number
|
||||
.switchMap((params: Params) => this.service.getHero(+params['id']))
|
||||
.subscribe((hero: Hero) => this.hero = hero);
|
||||
}
|
||||
// #enddocregion ngOnInit
|
||||
|
||||
// #docregion gotoHeroes
|
||||
gotoHeroes() {
|
||||
this.router.navigate(['/heroes']);
|
||||
}
|
||||
// #enddocregion gotoHeroes
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
// Snapshot version
|
||||
// #docregion
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
|
||||
import { Hero, HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h2>HEROES</h2>
|
||||
<div *ngIf="hero">
|
||||
<h3>"{{ hero.name }}"</h3>
|
||||
<div>
|
||||
<label>Id: </label>{{ hero.id }}</div>
|
||||
<div>
|
||||
<label>Name: </label>
|
||||
<input [(ngModel)]="hero.name" placeholder="name"/>
|
||||
</div>
|
||||
<p>
|
||||
<button (click)="gotoHeroes()">Back</button>
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
hero: Hero;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private service: HeroService
|
||||
) {}
|
||||
|
||||
// #docregion snapshot
|
||||
ngOnInit() {
|
||||
// (+) converts string 'id' to a number
|
||||
let id = +this.route.snapshot.params['id'];
|
||||
|
||||
this.service.getHero(id)
|
||||
.then((hero: Hero) => this.hero = hero);
|
||||
}
|
||||
// #enddocregion snapshot
|
||||
|
||||
gotoHeroes() {
|
||||
this.router.navigate(['/heroes']);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion rxjs-operator-import
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
// #enddocregion rxjs-operator-import
|
||||
import { Component, OnInit, HostBinding } from '@angular/core';
|
||||
import { Router, ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { slideInDownAnimation } from '../animations';
|
||||
|
||||
import { Hero, HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h2>HEROES</h2>
|
||||
<div *ngIf="hero">
|
||||
<h3>"{{ hero.name }}"</h3>
|
||||
<div>
|
||||
<label>Id: </label>{{ hero.id }}</div>
|
||||
<div>
|
||||
<label>Name: </label>
|
||||
<input [(ngModel)]="hero.name" placeholder="name"/>
|
||||
</div>
|
||||
<p>
|
||||
<button (click)="gotoHeroes()">Back</button>
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
animations: [ slideInDownAnimation ]
|
||||
})
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
// #docregion host-bindings
|
||||
@HostBinding('@routeAnimation') routeAnimation = true;
|
||||
@HostBinding('style.display') display = 'block';
|
||||
@HostBinding('style.position') position = 'absolute';
|
||||
// #enddocregion host-bindings
|
||||
|
||||
hero: Hero;
|
||||
|
||||
// #docregion ctor
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private service: HeroService
|
||||
) {}
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion ngOnInit
|
||||
ngOnInit() {
|
||||
this.route.params
|
||||
// (+) converts string 'id' to a number
|
||||
.switchMap((params: Params) => this.service.getHero(+params['id']))
|
||||
.subscribe((hero: Hero) => this.hero = hero);
|
||||
}
|
||||
// #enddocregion ngOnInit
|
||||
|
||||
// #docregion gotoHeroes
|
||||
gotoHeroes() {
|
||||
let heroId = this.hero ? this.hero.id : null;
|
||||
// Pass along the hero id if available
|
||||
// so that the HeroList component can select that hero.
|
||||
// Include a junk 'foo' property for fun.
|
||||
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
|
||||
}
|
||||
// #enddocregion gotoHeroes
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// TODO SOMEDAY: Feature Componetized like HeroCenter
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Hero, HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
// #docregion template
|
||||
template: `
|
||||
<h2>HEROES</h2>
|
||||
<ul class="items">
|
||||
<li *ngFor="let hero of heroes | async"
|
||||
(click)="onSelect(hero)">
|
||||
<span class="badge">{{ hero.id }}</span> {{ hero.name }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button routerLink="/sidekicks">Go to sidekicks</button>
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
export class HeroListComponent implements OnInit {
|
||||
heroes: Promise<Hero[]>;
|
||||
|
||||
// #docregion ctor
|
||||
constructor(
|
||||
private router: Router,
|
||||
private service: HeroService
|
||||
) {}
|
||||
// #enddocregion ctor
|
||||
|
||||
ngOnInit() {
|
||||
this.heroes = this.service.getHeroes();
|
||||
}
|
||||
|
||||
// #docregion select
|
||||
onSelect(hero: Hero) {
|
||||
// #docregion nav-to-detail
|
||||
this.router.navigate(['/hero', hero.id]);
|
||||
// #enddocregion nav-to-detail
|
||||
}
|
||||
// #enddocregion select
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
/* A link parameters array
|
||||
// #docregion link-parameters-array
|
||||
['/hero', hero.id] // { 15 }
|
||||
// #enddocregion link-parameters-array
|
||||
*/
|
||||
@ -0,0 +1,63 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// TODO SOMEDAY: Feature Componetized like CrisisCenter
|
||||
// #docregion rxjs-imports
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
// #enddocregion rxjs-imports
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
// #docregion import-router
|
||||
import { Router, ActivatedRoute, Params } from '@angular/router';
|
||||
// #enddocregion import-router
|
||||
|
||||
import { Hero, HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
// #docregion template
|
||||
template: `
|
||||
<h2>HEROES</h2>
|
||||
<ul class="items">
|
||||
<li *ngFor="let hero of heroes | async"
|
||||
[class.selected]="isSelected(hero)"
|
||||
(click)="onSelect(hero)">
|
||||
<span class="badge">{{ hero.id }}</span> {{ hero.name }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button routerLink="/sidekicks">Go to sidekicks</button>
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
// #docregion ctor
|
||||
export class HeroListComponent implements OnInit {
|
||||
heroes: Observable<Hero[]>;
|
||||
|
||||
private selectedId: number;
|
||||
|
||||
constructor(
|
||||
private service: HeroService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.heroes = this.route.params
|
||||
.switchMap((params: Params) => {
|
||||
this.selectedId = +params['id'];
|
||||
return this.service.getHeroes();
|
||||
});
|
||||
}
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion isSelected
|
||||
isSelected(hero: Hero) { return hero.id === this.selectedId; }
|
||||
// #enddocregion isSelected
|
||||
|
||||
// #docregion select
|
||||
onSelect(hero: Hero) {
|
||||
this.router.navigate(['/hero', hero.id]);
|
||||
}
|
||||
// #enddocregion select
|
||||
// #docregion ctor
|
||||
}
|
||||
// #enddocregion
|
||||
27
aio/content/examples/router/src/app/heroes/hero.service.ts
Normal file
27
aio/content/examples/router/src/app/heroes/hero.service.ts
Normal file
@ -0,0 +1,27 @@
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
export class Hero {
|
||||
constructor(public id: number, public name: string) { }
|
||||
}
|
||||
|
||||
let HEROES = [
|
||||
new Hero(11, 'Mr. Nice'),
|
||||
new Hero(12, 'Narco'),
|
||||
new Hero(13, 'Bombasto'),
|
||||
new Hero(14, 'Celeritas'),
|
||||
new Hero(15, 'Magneta'),
|
||||
new Hero(16, 'RubberMan')
|
||||
];
|
||||
|
||||
let heroesPromise = Promise.resolve(HEROES);
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
getHeroes() { return heroesPromise; }
|
||||
|
||||
getHero(id: number | string) {
|
||||
return heroesPromise
|
||||
.then(heroes => heroes.find(hero => hero.id === +id));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } 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
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(heroesRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class HeroRoutingModule { }
|
||||
// #enddocregion
|
||||
33
aio/content/examples/router/src/app/heroes/heroes.module.ts
Normal file
33
aio/content/examples/router/src/app/heroes/heroes.module.ts
Normal file
@ -0,0 +1,33 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion v1
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
// #enddocregion v1
|
||||
import { HeroRoutingModule } from './heroes-routing.module';
|
||||
|
||||
// #docregion v1
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
// #enddocregion v1
|
||||
HeroRoutingModule
|
||||
// #docregion v1
|
||||
],
|
||||
declarations: [
|
||||
HeroListComponent,
|
||||
HeroDetailComponent
|
||||
],
|
||||
providers: [ HeroService ]
|
||||
})
|
||||
export class HeroesModule {}
|
||||
// #enddocregion v1
|
||||
// #enddocregion
|
||||
24
aio/content/examples/router/src/app/login-routing.module.ts
Normal file
24
aio/content/examples/router/src/app/login-routing.module.ts
Normal file
@ -0,0 +1,24 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { AuthGuard } from './auth-guard.service';
|
||||
import { AuthService } from './auth.service';
|
||||
import { LoginComponent } from './login.component';
|
||||
|
||||
const loginRoutes: Routes = [
|
||||
{ path: 'login', component: LoginComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild(loginRoutes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule
|
||||
],
|
||||
providers: [
|
||||
AuthGuard,
|
||||
AuthService
|
||||
]
|
||||
})
|
||||
export class LoginRoutingModule {}
|
||||
46
aio/content/examples/router/src/app/login.component.1.ts
Normal file
46
aio/content/examples/router/src/app/login.component.1.ts
Normal file
@ -0,0 +1,46 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { AuthService } from './auth.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h2>LOGIN</h2>
|
||||
<p>{{message}}</p>
|
||||
<p>
|
||||
<button (click)="login()" *ngIf="!authService.isLoggedIn">Login</button>
|
||||
<button (click)="logout()" *ngIf="authService.isLoggedIn">Logout</button>
|
||||
</p>`
|
||||
})
|
||||
export class LoginComponent {
|
||||
message: string;
|
||||
|
||||
constructor(public authService: AuthService, public router: Router) {
|
||||
this.setMessage();
|
||||
}
|
||||
|
||||
setMessage() {
|
||||
this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
|
||||
}
|
||||
|
||||
login() {
|
||||
this.message = 'Trying to log in ...';
|
||||
|
||||
this.authService.login().subscribe(() => {
|
||||
this.setMessage();
|
||||
if (this.authService.isLoggedIn) {
|
||||
// Get the redirect URL from our auth service
|
||||
// If no redirect has been set, use the default
|
||||
let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin';
|
||||
|
||||
// Redirect the user
|
||||
this.router.navigate([redirect]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.authService.logout();
|
||||
this.setMessage();
|
||||
}
|
||||
}
|
||||
56
aio/content/examples/router/src/app/login.component.ts
Normal file
56
aio/content/examples/router/src/app/login.component.ts
Normal file
@ -0,0 +1,56 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { Router,
|
||||
NavigationExtras } from '@angular/router';
|
||||
import { AuthService } from './auth.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h2>LOGIN</h2>
|
||||
<p>{{message}}</p>
|
||||
<p>
|
||||
<button (click)="login()" *ngIf="!authService.isLoggedIn">Login</button>
|
||||
<button (click)="logout()" *ngIf="authService.isLoggedIn">Logout</button>
|
||||
</p>`
|
||||
})
|
||||
export class LoginComponent {
|
||||
message: string;
|
||||
|
||||
constructor(public authService: AuthService, public router: Router) {
|
||||
this.setMessage();
|
||||
}
|
||||
|
||||
setMessage() {
|
||||
this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
|
||||
}
|
||||
|
||||
login() {
|
||||
this.message = 'Trying to log in ...';
|
||||
|
||||
this.authService.login().subscribe(() => {
|
||||
this.setMessage();
|
||||
if (this.authService.isLoggedIn) {
|
||||
// Get the redirect URL from our auth service
|
||||
// If no redirect has been set, use the default
|
||||
let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/admin';
|
||||
|
||||
// #docregion preserve
|
||||
// Set our navigation extras object
|
||||
// that passes on our global query params and fragment
|
||||
let navigationExtras: NavigationExtras = {
|
||||
preserveQueryParams: true,
|
||||
preserveFragment: true
|
||||
};
|
||||
|
||||
// Redirect the user
|
||||
this.router.navigate([redirect], navigationExtras);
|
||||
// #enddocregion preserve
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.authService.logout();
|
||||
this.setMessage();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
template: '<h2>Page not found</h2>'
|
||||
})
|
||||
export class PageNotFoundComponent {}
|
||||
@ -0,0 +1,24 @@
|
||||
// #docregion
|
||||
import 'rxjs/add/observable/of';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { PreloadingStrategy, Route } from '@angular/router';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
@Injectable()
|
||||
export class SelectivePreloadingStrategy implements PreloadingStrategy {
|
||||
preloadedModules: string[] = [];
|
||||
|
||||
preload(route: Route, load: () => Observable<any>): Observable<any> {
|
||||
if (route.data && route.data['preload']) {
|
||||
// add the route path to the preloaded module array
|
||||
this.preloadedModules.push(route.path);
|
||||
|
||||
// log the route path to the console
|
||||
console.log('Preloaded: ' + route.path);
|
||||
|
||||
return load();
|
||||
} else {
|
||||
return Observable.of(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
32
aio/content/examples/router/src/index.html
Normal file
32
aio/content/examples/router/src/index.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<!-- Set the base href -->
|
||||
<!-- #docregion base-href -->
|
||||
<base href="/">
|
||||
<!-- #enddocregion base-href -->
|
||||
<title>Angular Router</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfills -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('main.js')
|
||||
.catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!-- #enddocregion -->
|
||||
6
aio/content/examples/router/src/main.ts
Normal file
6
aio/content/examples/router/src/main.ts
Normal file
@ -0,0 +1,6 @@
|
||||
// #docregion
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
Reference in New Issue
Block a user