iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(router): update developer guide to new v.3 router

Browse Source
This commit is contained in:
Brandon Roberts 2016-06-09 13:00:26 -05:00 committed by Naomi Black
parent 3b4b79aeeb
commit c61d8195f3
55 changed files with 2550 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/docs/_examples/package.json
View File

@ -45,7 +45,7 @@
"devDependencies": { "devDependencies": {
"angular-cli": "^1.0.0-beta.5", "angular-cli": "^1.0.0-beta.5",
"canonical-path": "0.0.2", "canonical-path": "0.0.2",
"concurrently": "^2.0.0", "concurrently": "^2.1.0",
"css-loader": "^0.23.1", "css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1", "extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5", "file-loader": "^0.8.5",
@ -62,7 +62,7 @@
"karma-sourcemap-loader": "^0.3.7", "karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0", "karma-webpack": "^1.7.0",
"lite-server": "^2.2.0", "lite-server": "^2.2.0",
"lodash": "^4.11.1", "lodash": "^4.13.1",
"null-loader": "^0.1.1", "null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7", "phantomjs-prebuilt": "^2.1.7",
"protractor": "^3.3.0", "protractor": "^3.3.0",
@ -71,7 +71,7 @@
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
"ts-loader": "^0.8.2", "ts-loader": "^0.8.2",
"ts-node": "^0.7.3", "ts-node": "^0.7.3",
"typescript": "^1.8.10", "typescript": "^1.9.0-dev.20160409",
"typings": "^1.0.4", "typings": "^1.0.4",
"webpack": "^1.13.0", "webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1", "webpack-dev-server": "^1.14.1",

32
public/docs/_examples/router/ts/app/app.component.1.ts
View File

@ -1,16 +1,14 @@
/* First version */ /* First version */
// #docplaster // #docplaster
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router'; // #docregion import-router
import { ROUTER_DIRECTIVES } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component'; // #enddocregion import-router
import { HeroListComponent } from './hero-list.component';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
// #docregion template // #docregion template
template: ` template: `
<h1>Component Router</h1> <h1>Component Router</h1>
<nav> <nav>
@ -19,24 +17,10 @@ import { HeroListComponent } from './hero-list.component';
</nav> </nav>
<router-outlet></router-outlet> <router-outlet></router-outlet>
`, `,
// #enddocregion template // #enddocregion template
// #docregion directives
directives: [ROUTER_DIRECTIVES] directives: [ROUTER_DIRECTIVES]
// #enddocregion directives
}) })
// #enddocregion
/*
// #docregion route-config
@Component({ ... })
// #enddocregion route-config
*/
// #docregion
// #docregion route-config
@Routes([
// #docregion route-defs
{path: '/crisis-center', component: CrisisListComponent},
{path: '/heroes', component: HeroListComponent},
{path: '*', component: CrisisListComponent}
// #enddocregion route-defs
])
export class AppComponent { } export class AppComponent { }
// #enddocregion route-config
// #enddocregion

30
public/docs/_examples/router/ts/app/app.component.2.ts
View File

@ -2,10 +2,9 @@
// #docplaster // #docplaster
// #docregion // #docregion
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router'; import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
// #enddocregion // #enddocregion
/* /*
// Apparent Milestone 2 imports // Apparent Milestone 2 imports
@ -18,8 +17,6 @@ import { CrisisListComponent } from './crisis-list.component';
// #enddocregion // #enddocregion
*/ */
// Actual Milestone 2 imports // Actual Milestone 2 imports
import { HeroDetailComponent } from './heroes/hero-detail.component.1';
import { HeroListComponent } from './heroes/hero-list.component.1';
import { HeroService } from './heroes/hero.service'; import { HeroService } from './heroes/hero.service';
// #docregion // #docregion
@ -37,28 +34,7 @@ import { HeroService } from './heroes/hero.service';
directives: [ROUTER_DIRECTIVES] directives: [ROUTER_DIRECTIVES]
}) })
// #enddocregion // #enddocregion
/* export class AppComponent {
// #docregion route-config
@Component({ ... })
// #enddocregion route-config
*/
// #docregion
// #docregion route-config
@Routes([
// #docregion route-defs
{path: '/crisis-center', component: CrisisListComponent},
{path: '/heroes', component: HeroListComponent},
// #docregion hero-detail-route
{path: '/hero/:id', component: HeroDetailComponent}
// #enddocregion hero-detail-route
// #enddocregion route-defs
])
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.navigate(['/crisis-center']);
}
} }
// #enddocregion route-config // #enddocregion route-config
// #enddocregion // #enddocregion

64
public/docs/_examples/router/ts/app/app.component.3.ts
View File

@ -1,63 +1,49 @@
/* tslint:disable:no-unused-variable */ /* tslint:disable:no-unused-variable */
// #docplaster // #docplaster
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router'; import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { CrisisCenterComponent } from './crisis-center/crisis-center.component.1';
import { HeroDetailComponent } from './heroes/hero-detail.component.1';
import { HeroListComponent } from './heroes/hero-list.component.1';
import { DialogService } from './dialog.service';
import { HeroService } from './heroes/hero.service'; import { HeroService } from './heroes/hero.service';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
// #enddocregion // #enddocregion
/* Typical link /* Typical link
// #docregion h-anchor // #docregion h-anchor
<a [routerLink]="['/heroes']">Heroes</a> <a [routerLink]="['/heroes']">Heroes</a>
// #enddocregion h-anchor // #enddocregion h-anchor
*/ */
/* Incomplete Crisis Center link when CC lacks a default /* Incomplete Crisis Center link when CC lacks a default
// #docregion cc-anchor-fail // #docregion cc-anchor-fail
// The link now fails with a "non-terminal link" error // The link now fails with a "non-terminal link" error
// #docregion cc-anchor-w-default // #docregion cc-anchor-w-default
<a [routerLink]="['/crisis-center']">Crisis Center</a> <a [routerLink]="['/crisis-center']">Crisis Center</a>
// #enddocregion cc-anchor-w-default // #enddocregion cc-anchor-w-default
// #enddocregion cc-anchor-fail // #enddocregion cc-anchor-fail
*/ */
/* Crisis Center link when CC lacks a default /* Crisis Center link when CC lacks a default
// #docregion cc-anchor-no-default // #docregion cc-anchor-no-default
<a [routerLink]="['/crisis-center/']">Crisis Center</a> <a [routerLink]="['/crisis-center/']">Crisis Center</a>
// #enddocregion cc-anchor-no-default // #enddocregion cc-anchor-no-default
*/ */
/* Crisis Center Detail link /* Crisis Center Detail link
// #docregion Dragon-anchor // #docregion Dragon-anchor
<a [routerLink]="['/crisis-center/1']">Dragon Crisis</a> <a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
// #enddocregion Dragon-anchor // #enddocregion Dragon-anchor
*/ */
// #docregion template // #docregion template
template: ` template: `
<h1 class="title">Component Router</h1> <h1 class="title">Component Router</h1>
<nav> <nav>
<a [routerLink]="['/crisis-center']">Crisis Center</a> <a [routerLink]="['/crisis-center']">Crisis Center</a>
<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a> <a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
<a [routerLink]="['/crisis-center', 2]">Shark Crisis</a> <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
</nav> </nav>
<router-outlet></router-outlet> <router-outlet></router-outlet>
`, `,
// #enddocregion template // #enddocregion template
providers: [DialogService, HeroService], providers: [HeroService],
directives: [ROUTER_DIRECTIVES] directives: [ROUTER_DIRECTIVES]
}) })
@Routes([ export class AppComponent {
{path: '/crisis-center', component: CrisisCenterComponent},
{path: '*', component: CrisisCenterComponent}
])
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.navigate(['/crisis-center']);
}
} }

28
public/docs/_examples/router/ts/app/app.component.4.ts Normal file
View File

@ -0,0 +1,28 @@
// #docregion
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { DialogService } from './dialog.service';
import { HeroService } from './heroes/hero.service';
@Component({
selector: 'my-app',
// #docregion template
template: `
<h1 class="title">Component Router</h1>
<nav>
<a [routerLink]="['/crisis-center']">Crisis Center</a>
<a [routerLink]="['/heroes']">Heroes</a>
<a [routerLink]="['/crisis-center/admin']">Crisis Admin</a>
</nav>
<router-outlet></router-outlet>
`,
// #enddocregion template
providers: [
HeroService,
DialogService
],
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}

42
public/docs/_examples/router/ts/app/app.component.5.ts Normal file
View File

@ -0,0 +1,42 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
import { provideRouter, ROUTER_DIRECTIVES } from '@angular/router';
import { routes } from './app.routes';
// #docregion can-deactivate-guard
import { CanDeactivateGuard } from './interfaces';
// #enddocregion can-deactivate-guard
import { DialogService } from './dialog.service';
import { HeroService } from './heroes/hero.service';
// Add these symbols to override the `LocationStrategy`
import { LocationStrategy,
HashLocationStrategy } from '@angular/common';
@Component({
selector: 'my-app',
// #docregion template
template: `
<h1 class="title">Component Router</h1>
<nav>
<a [routerLink]="['/crisis-center']">Crisis Center</a>
<a [routerLink]="['/heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
// #enddocregion template
providers: [
HeroService,
DialogService,
provideRouter(routes),
CanDeactivateGuard,
{ provide: LocationStrategy,
useClass: HashLocationStrategy } // .../#/crisis-center/
],
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}

37
public/docs/_examples/router/ts/app/app.component.ts
View File

@ -1,41 +1,30 @@
// #docplaster // #docplaster
// #docregion // #docregion
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router'; import { ROUTER_DIRECTIVES } from '@angular/router';
import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; import { DialogService } from './dialog.service';
import { HeroListComponent } from './heroes/hero-list.component'; import { HeroService } from './heroes/hero.service';
import { HeroDetailComponent } from './heroes/hero-detail.component';
import { DialogService } from './dialog.service';
import { HeroService } from './heroes/hero.service';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
// #docregion template // #docregion template
template: ` template: `
<h1 class="title">Component Router</h1> <h1 class="title">Component Router</h1>
<nav> <nav>
<a [routerLink]="['/crisis-center']">Crisis Center</a> <a [routerLink]="['/crisis-center']">Crisis Center</a>
<a [routerLink]="['/heroes']">Heroes</a> <a [routerLink]="['/heroes']">Heroes</a>
<a [routerLink]="['/crisis-center/admin']">Crisis Admin</a>
<a [routerLink]="['/login']">Login</a>
</nav> </nav>
<router-outlet></router-outlet> <router-outlet></router-outlet>
`, `,
// #enddocregion template // #enddocregion template
providers: [DialogService, HeroService], providers: [
HeroService,
DialogService
],
directives: [ROUTER_DIRECTIVES] directives: [ROUTER_DIRECTIVES]
}) })
// #docregion routes export class AppComponent {
@Routes([
{path: '/crisis-center', component: CrisisCenterComponent},
{path: '/heroes', component: HeroListComponent},
{path: '/hero/:id', component: HeroDetailComponent},
])
// #enddocregion routes
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.navigate(['/crisis-center']);
}
} }

31
public/docs/_examples/router/ts/app/app.routes.1.ts Normal file
View File

@ -0,0 +1,31 @@
// #docplaster
// #docregion
// #docregion route-config
import { provideRouter, RouterConfig } from '@angular/router';
// #enddocregion route-config
// #enddocregion
// #docregion base-routes
import { HeroListComponent } from './hero-list.component';
import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
import { HeroDetailComponent } from './heroes/hero-detail.component';
// #enddocregion base-routes
// #docregion
// #docregion route-config
export const routes: RouterConfig = [
// #docregion route-defs
{ path: '/crisis-center', component: CrisisCenterComponent },
{ path: '/heroes', component: HeroListComponent },
// #enddocregion route-defs
// #docregion hero-detail-route
{ path: '/hero/:id', component: HeroDetailComponent }
// #enddocregion hero-detail-route
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
// #enddocregion route-config
// #enddocregion

19
public/docs/_examples/router/ts/app/app.routes.2.ts Normal file
View File

@ -0,0 +1,19 @@
// #docplaster
// #docregion
// #docregion route-config
import { provideRouter, RouterConfig } from '@angular/router';
// #enddocregion route-config
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
// #docregion route-config
export const routes: RouterConfig = [
{ path: '/crisis-center', component: CrisisListComponent },
{ path: '/heroes', component: HeroListComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
// #enddocregion route-config

15
public/docs/_examples/router/ts/app/app.routes.3.ts Normal file
View File

@ -0,0 +1,15 @@
// #docplaster
// #docregion
import { provideRouter } from '@angular/router';
import { CrisisListComponent } from './crisis-center/crisis-list.component';
import { HeroesRoutes } from './heroes/heroes.routes';
export const routes = [
...HeroesRoutes,
{ path: '/crisis-center', component: CrisisListComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];

14
public/docs/_examples/router/ts/app/app.routes.4.ts Normal file
View File

@ -0,0 +1,14 @@
// #docregion
import { provideRouter, RouterConfig } from '@angular/router';
import { CrisisCenterRoutes } from './crisis-center/crisis-center.routes';
import { HeroesRoutes } from './heroes/heroes.routes';
export const routes: RouterConfig = [
...HeroesRoutes,
...CrisisCenterRoutes
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];

19
public/docs/_examples/router/ts/app/app.routes.5.ts Normal file
View File

@ -0,0 +1,19 @@
// #docregion
import { provideRouter, RouterConfig } from '@angular/router';
import { CrisisCenterRoutes } from './crisis-center/crisis-center.routes';
import { HeroesRoutes } from './heroes/heroes.routes';
import { LoginRoutes,
AUTH_PROVIDERS } from './login.routes';
export const routes: RouterConfig = [
...HeroesRoutes,
...LoginRoutes,
...CrisisCenterRoutes
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes),
AUTH_PROVIDERS
];

22
public/docs/_examples/router/ts/app/app.routes.ts Normal file
View File

@ -0,0 +1,22 @@
// #docregion
import { provideRouter, RouterConfig } from '@angular/router';
import { CrisisCenterRoutes } from './crisis-center/crisis-center.routes';
import { HeroesRoutes } from './heroes/heroes.routes';
import { LoginRoutes,
AUTH_PROVIDERS } from './login.routes';
import { CanDeactivateGuard } from './interfaces';
export const routes: RouterConfig = [
...HeroesRoutes,
...LoginRoutes,
...CrisisCenterRoutes
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes),
AUTH_PROVIDERS,
CanDeactivateGuard
];

9
public/docs/_examples/router/ts/app/auth.guard.1.ts Normal file
View File

@ -0,0 +1,9 @@
// #docregion
import { CanActivate } from '@angular/router';
export class AuthGuard implements CanActivate {
canActivate() {
console.log('AuthGuard#canActivate called');
return true;
}
}

22
public/docs/_examples/router/ts/app/auth.guard.ts Executable file
View File

@ -0,0 +1,22 @@
// #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(
// Not using but worth knowing about
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) {
if (this.authService.isLoggedIn) { return true; }
this.router.navigate(['/login']);
return false;
}
}

20
public/docs/_examples/router/ts/app/auth.service.ts Executable file
View File

@ -0,0 +1,20 @@
// #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;
login() {
return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
}
logout() {
this.isLoggedIn = false;
}
}

13
public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts Executable file
View File

@ -0,0 +1,13 @@
// #docregion
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
template: `
<h3>CRISIS ADMINISTRATION</h3>
<p>Manage your crises here</p>
`,
directives: [ROUTER_DIRECTIVES]
})
export class CrisisAdminComponent { }

16
public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts
View File

@ -1,9 +1,7 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router'; import { ROUTER_DIRECTIVES } from '@angular/router';
import { CrisisDetailComponent } from './crisis-detail.component.1'; import { CrisisService } from './crisis.service';
import { CrisisListComponent } from './crisis-list.component.1';
import { CrisisService } from './crisis.service';
// #docregion minus-imports // #docregion minus-imports
@Component({ @Component({
@ -16,13 +14,5 @@ import { CrisisService } from './crisis.service';
providers: [CrisisService] providers: [CrisisService]
// #enddocregion providers // #enddocregion providers
}) })
// #docregion route-config
@Routes([
// #docregion default-route
{path: '/', component: CrisisListComponent}, // , useAsDefault: true}, // coming soon
// #enddocregion default-route
{path: '/:id', component: CrisisDetailComponent}
])
// #enddocregion route-config
export class CrisisCenterComponent { } export class CrisisCenterComponent { }
// #enddocregion minus-imports // #enddocregion minus-imports

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

@ -1,10 +1,8 @@
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router'; import { ROUTER_DIRECTIVES } from '@angular/router';
import { CrisisDetailComponent } from './crisis-detail.component'; import { CrisisService } from './crisis.service';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisService } from './crisis.service';
@Component({ @Component({
template: ` template: `
@ -14,9 +12,5 @@ import { CrisisService } from './crisis.service';
directives: [ROUTER_DIRECTIVES], directives: [ROUTER_DIRECTIVES],
providers: [CrisisService] providers: [CrisisService]
}) })
@Routes([
{path: '', component: CrisisListComponent}, // , useAsDefault: true}, // coming soon
{path: '/:id', component: CrisisDetailComponent}
])
export class CrisisCenterComponent { } export class CrisisCenterComponent { }
// #enddocregion // #enddocregion

18
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts Normal file
View File

@ -0,0 +1,18 @@
// #docregion
import { RouterConfig } from '@angular/router';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
// #docregion routes
export const CrisisCenterRoutes: RouterConfig = [
{
path: '/crisis-center',
component: CrisisCenterComponent,
children: [
{ path: '/', component: CrisisListComponent },
{ path: '/:id', component: CrisisDetailComponent }
]
}
];
// #enddocregion routes

22
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts Normal file
View File

@ -0,0 +1,22 @@
// #docregion
import { RouterConfig } from '@angular/router';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
// #docregion routes
export const CrisisCenterRoutes: RouterConfig = [
{
path: '/crisis-center',
component: CrisisCenterComponent,
index: true,
children: [
{ path: '/:id', component: CrisisDetailComponent },
{ path: '/', component: CrisisListComponent,
index: true
}
]
}
];
// #enddocregion routes

48
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts Normal file
View File

@ -0,0 +1,48 @@
// #docplaster
// #docregion
import { RouterConfig } from '@angular/router';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisAdminComponent } from './crisis-admin.component';
import { CanDeactivateGuard } from '../interfaces';
export const CrisisCenterRoutes: RouterConfig = [
{
path: '/crisis-center',
component: CrisisCenterComponent,
index: true,
children: [
// #docregion admin-route-no-guard
{
path: '/admin',
component: CrisisAdminComponent
},
// #enddocregion admin-route-no-guard
{
path: '/:id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard]
},
{
path: '/',
component: CrisisListComponent,
index: true
}
]
}
];
// #enddocregion
/*
// #docregion auth-guard
import { AuthGuard } from '../auth.guard';
{
path: '/admin',
component: CrisisAdminComponent,
canActivate: [AuthGuard]
}
// #enddocregion auth-guard
*/

50
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts Normal file
View File

@ -0,0 +1,50 @@
// #docplaster
// #docregion
import { RouterConfig } from '@angular/router';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisAdminComponent } from './crisis-admin.component';
import { CanDeactivateGuard } from '../interfaces';
import { AuthGuard } from '../auth.guard';
export const CrisisCenterRoutes: RouterConfig = [
{
path: '/crisis-center',
component: CrisisCenterComponent,
index: true,
children: [
{
path: '/admin',
component: CrisisAdminComponent,
canActivate: [AuthGuard]
},
{
path: '/:id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard]
},
// #docregion default-route
{
path: '/',
component: CrisisListComponent,
index: true
}
// #enddocregion default-route
]
}
];
// #enddocregion
/*
// #docregion auth-guard
import { AuthGuard } from '../auth.guard';
{
path: '/admin',
component: CrisisAdminComponent,
canActivate: [AuthGuard]
}
// #enddocregion auth-guard
*/

35
public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts Normal file
View File

@ -0,0 +1,35 @@
// #docregion
import { RouterConfig } from '@angular/router';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisAdminComponent } from './crisis-admin.component';
import { CanDeactivateGuard } from '../interfaces';
import { AuthGuard } from '../auth.guard';
export const CrisisCenterRoutes: RouterConfig = [
{
path: '/crisis-center',
component: CrisisCenterComponent,
index: true,
children: [
// #docregion admin-route
{
path: '/admin',
component: CrisisAdminComponent,
canActivate: [AuthGuard]
},
// #enddocregion admin-route
{
path: '/:id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard]
},
{ path: '/',
component: CrisisListComponent,
index: true
}
]
}
];

95
public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
View File

@ -1,14 +1,15 @@
// #docplaster // #docplaster
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { OnActivate, Router, RouteSegment } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import { Crisis, CrisisService } from './crisis.service'; import { Crisis, CrisisService } from './crisis.service';
// #docregion routerCanDeactivate
// import { CanDeactivate } from '@angular/router';
import { DialogService } from '../dialog.service'; import { DialogService } from '../dialog.service';
// #enddocregion routerCanDeactivate
@Component({ @Component({
// #docregion template // #docregion template
template: ` template: `
@ -29,49 +30,52 @@ import { DialogService } from '../dialog.service';
// #enddocregion template // #enddocregion template
styles: ['input {width: 20em}'] styles: ['input {width: 20em}']
}) })
// #docregion routerCanDeactivate, cancel-save // #docregion cancel-save
export class CrisisDetailComponent implements OnActivate {// , CanDeactivate { export class CrisisDetailComponent implements OnInit, OnDestroy {
crisis: Crisis; crisis: Crisis;
editName: string; editName: string;
// #enddocregion ngOnDestroy
private sub: any;
// #enddocregion ngOnDestroy
// #enddocregion routerCanDeactivate, cancel-save // #enddocregion cancel-save
constructor( constructor(
private service: CrisisService, private service: CrisisService,
private router: Router, private router: Router,
private dialog: DialogService private route: ActivatedRoute,
) { } private dialogService: DialogService
) { }
// #docregion ngOnActivate // #docregion ngOnInit
routerOnActivate(curr: RouteSegment): void { ngOnInit() {
let id = +curr.getParam('id'); this.sub = this.route
this.service.getCrisis(id).then(crisis => { .params
if (crisis) { .subscribe(params => {
this.editName = crisis.name; let id = +params['id'];
this.crisis = crisis; this.service.getCrisis(id)
} else { // id not found .then(crisis => {
this.gotoCrises(); if (crisis) {
} this.editName = crisis.name;
}); this.crisis = crisis;
} else { // id not found
this.gotoCrises();
}
});
});
} }
// #enddocregion ngOnActivate // #enddocregion ngOnInit
// #docregion routerCanDeactivate // #enddocregion ngOnDestroy
// NOT IMPLEMENTED YET ngOnDestroy() {
routerCanDeactivate(): any { if (this.sub) {
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged. this.sub.unsubscribe();
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.dialog.confirm('Discard changes?');
} }
// #enddocregion routerCanDeactivate // #enddocregion ngOnDestroy
// #docregion cancel-save // #docregion cancel-save
cancel() { cancel() {
this.editName = this.crisis.name;
this.gotoCrises(); this.gotoCrises();
} }
@ -81,13 +85,30 @@ export class CrisisDetailComponent implements OnActivate {// , CanDeactivate {
} }
// #enddocregion cancel-save // #enddocregion cancel-save
// #docregion cancel-save-only
canDeactivate(): Observable<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
let p = this.dialogService.confirm('Discard changes?');
let o = Observable.fromPromise(p);
return o;
}
// #enddocregion cancel-save-only
// #docregion gotoCrises // #docregion gotoCrises
gotoCrises() { gotoCrises() {
// Like <a [routerLink]="[/crisis-center/]">Crisis Center</a let crisisId = this.crisis ? this.crisis.id : null;
this.router.navigateByUrl('/crisis-center/'); // absolute url // Pass along the hero id if available
// so that the CrisisListComponent can select that hero.
// Add a totally useless `foo` parameter for kicks.
this.router.navigate(['/crisis-center', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
} }
// #enddocregion gotoCrises // #enddocregion gotoCrises
// #docregion routerCanDeactivate, cancel-save // #docregion cancel-save
} }
// #enddocregion routerCanDeactivate, cancel-save // #enddocregion cancel-save
// #enddocregion // #enddocregion

66
public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
View File

@ -1,7 +1,9 @@
// #docplaster // #docplaster
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { CanDeactivate, OnActivate, Router, RouteSegment } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import { Crisis, CrisisService } from './crisis.service'; import { Crisis, CrisisService } from './crisis.service';
import { DialogService } from '../dialog.service'; import { DialogService } from '../dialog.service';
@ -25,43 +27,42 @@ import { DialogService } from '../dialog.service';
styles: ['input {width: 20em}'] styles: ['input {width: 20em}']
}) })
export class CrisisDetailComponent implements OnActivate, CanDeactivate { export class CrisisDetailComponent implements OnInit, OnDestroy {
crisis: Crisis; crisis: Crisis;
editName: string; editName: string;
private curSegment: RouteSegment; private sub: any;
constructor( constructor(
private service: CrisisService, private service: CrisisService,
private route: ActivatedRoute,
private router: Router, private router: Router,
private dialog: DialogService private dialogService: DialogService
) { } ) { }
routerOnActivate(curr: RouteSegment) { ngOnInit() {
this.curSegment = curr; this.sub = this.route
.params
let id = +curr.getParam('id'); .subscribe(params => {
this.service.getCrisis(id).then(crisis => { let id = +params['id'];
if (crisis) { this.service.getCrisis(id)
this.editName = crisis.name; .then(crisis => {
this.crisis = crisis; if (crisis) {
} else { // id not found this.editName = crisis.name;
this.gotoCrises(); this.crisis = crisis;
} } else { // id not found
}); this.gotoCrises();
}
});
});
} }
routerCanDeactivate(): any { ngOnDestroy() {
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged. if (this.sub) {
if (!this.crisis || this.crisis.name === this.editName) { this.sub.unsubscribe();
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.dialog.confirm('Discard changes?');
} }
cancel() { cancel() {
this.editName = this.crisis.name;
this.gotoCrises(); this.gotoCrises();
} }
@ -70,6 +71,18 @@ export class CrisisDetailComponent implements OnActivate, CanDeactivate {
this.gotoCrises(); this.gotoCrises();
} }
canDeactivate(): Observable<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
let p = this.dialogService.confirm('Discard changes?');
let o = Observable.fromPromise(p);
return o;
}
// #docregion gotoCrises // #docregion gotoCrises
gotoCrises() { gotoCrises() {
let crisisId = this.crisis ? this.crisis.id : null; let crisisId = this.crisis ? this.crisis.id : null;
@ -79,9 +92,6 @@ export class CrisisDetailComponent implements OnActivate, CanDeactivate {
// #docregion gotoCrises-navigate // #docregion gotoCrises-navigate
// Absolute link // Absolute link
this.router.navigate(['/crisis-center', {id: crisisId, foo: 'foo'}]); this.router.navigate(['/crisis-center', {id: crisisId, foo: 'foo'}]);
// Relative link
// this.router.navigate(['../', {id: crisisId, foo: 'foo'}], this.curSegment);
// #enddocregion gotoCrises-navigate // #enddocregion gotoCrises-navigate
} }
// #enddocregion gotoCrises // #enddocregion gotoCrises

26
public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
View File

@ -1,7 +1,7 @@
// #docplaster // #docplaster
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { OnActivate, Router, RouteSegment } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { Crisis, CrisisService } from './crisis.service'; import { Crisis, CrisisService } from './crisis.service';
@ -17,20 +17,34 @@ import { Crisis, CrisisService } from './crisis.service';
`, `,
// #enddocregion template // #enddocregion template
}) })
export class CrisisListComponent implements OnActivate { export class CrisisListComponent implements OnInit, OnDestroy {
crises: Crisis[]; crises: Crisis[];
selectedId: number;
private sub: any;
constructor( constructor(
private service: CrisisService, private service: CrisisService,
private route: ActivatedRoute,
private router: Router) {} private router: Router) {}
routerOnActivate(curr: RouteSegment): void { ngOnInit() {
this.service.getCrises().then(crises => this.crises = crises); this.sub = this.route
.params
.subscribe(params => {
this.selectedId = +params['id'];
this.service.getCrises()
.then(crises => this.crises = crises);
});
}
ngOnDestroy() {
this.sub.unsubscribe();
} }
// #docregion select // #docregion select
onSelect(crisis: Crisis) { onSelect(crisis: Crisis) {
this.router.navigateByUrl( `/crisis-list/${crisis.id}`); // Absolute link
this.router.navigate(['/crisis-center', crisis.id]);
} }
// #enddocregion select // #enddocregion select
} }

34
public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
View File

@ -1,7 +1,7 @@
// #docplaster // #docplaster
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { OnActivate, Router, RouteSegment, RouteTree } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Crisis, CrisisService } from './crisis.service'; import { Crisis, CrisisService } from './crisis.service';
@ -16,28 +16,36 @@ import { Crisis, CrisisService } from './crisis.service';
</ul> </ul>
`, `,
}) })
export class CrisisListComponent implements OnActivate { export class CrisisListComponent implements OnInit, OnDestroy {
crises: Crisis[]; crises: Crisis[];
private currSegment: RouteSegment;
private selectedId: number; private selectedId: number;
private sub: any;
constructor( constructor(
private service: CrisisService, private service: CrisisService,
private route: ActivatedRoute,
private router: Router) { } private router: Router) { }
isSelected(crisis: Crisis) { return crisis.id === this.selectedId; } isSelected(crisis: Crisis) { return crisis.id === this.selectedId; }
routerOnActivate(curr: RouteSegment, prev: RouteSegment, currTree: RouteTree) { ngOnInit() {
this.currSegment = curr; this.sub = this.route
this.selectedId = +currTree.parent(curr).getParam('id'); .params
this.service.getCrises().then(crises => this.crises = crises); .subscribe(params => {
this.selectedId = +params['id'];
this.service.getCrises()
.then(crises => this.crises = crises);
});
}
ngOnDestroy() {
if (this.sub) {
this.sub.unsubscribe();
}
} }
onSelect(crisis: Crisis) { onSelect(crisis: Crisis) {
// Absolute link // Navigate with Absolute link
// this.router.navigate([`/crisis-center`, crisis.id]); this.router.navigate(['/crisis-center', crisis.id]);
// Relative link
this.router.navigate([`./${crisis.id}`], this.currSegment);
} }
} }

4
public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts
View File

@ -1,5 +1,5 @@
// #docplaster // #docplaster
// #docregion
export class Crisis { export class Crisis {
constructor(public id: number, public name: string) { } constructor(public id: number, public name: string) { }
} }
@ -14,7 +14,7 @@ const CRISES = [
let crisesPromise = Promise.resolve(CRISES); let crisesPromise = Promise.resolve(CRISES);
// #docregion // #docregion
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
@Injectable() @Injectable()
export class CrisisService { export class CrisisService {

5
public/docs/_examples/router/ts/app/dialog.service.ts
View File

@ -12,7 +12,8 @@ export class DialogService {
* Returns promise resolving to `true`=confirm or `false`=cancel * Returns promise resolving to `true`=confirm or `false`=cancel
*/ */
confirm(message?: string) { confirm(message?: string) {
return new Promise<boolean>((resolve, reject) => return new Promise<boolean>(resolve => {
resolve(window.confirm(message || 'Is it OK?'))); return resolve(window.confirm(message || 'Is it OK?'));
});
}; };
} }

34
public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
View File

@ -1,6 +1,7 @@
// #docplaster
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { OnActivate, Router, RouteSegment } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Hero, HeroService } from './hero.service'; import { Hero, HeroService } from './hero.service';
@ -21,26 +22,35 @@ import { Hero, HeroService } from './hero.service';
</div> </div>
`, `,
}) })
export class HeroDetailComponent implements OnActivate { export class HeroDetailComponent implements OnInit, OnDestroy {
hero: Hero; hero: Hero;
// #docregion ngOnInit
private sub: any;
// #enddocregion ngOnInit
// #docregion ctor // #docregion ctor
constructor( constructor(
private route: ActivatedRoute,
private router: Router, private router: Router,
private service: HeroService) {} private service: HeroService) {}
// #enddocregion ctor // #enddocregion ctor
// #docregion OnActivate // #docregion ngOnInit
routerOnActivate(curr: RouteSegment): void { ngOnInit() {
let id = +curr.getParam('id'); this.sub = this.route.params.subscribe(params => {
this.service.getHero(id).then(hero => this.hero = hero); let id = +params['id']; // (+) converts string 'id' to a number
this.service.getHero(id).then(hero => this.hero = hero);
});
} }
// #enddocregion OnActivate // #enddocregion ngOnInit
// #docregion ngOnDestroy
ngOnDestroy() {
this.sub.unsubscribe();
}
// #enddocregion ngOnDestroy
// #docregion gotoHeroes // #docregion gotoHeroes
gotoHeroes() { gotoHeroes() { this.router.navigate(['/heroes']); }
// Like <a [routerLink]="['/heroes']">Heroes</a>
this.router.navigate(['/heroes']);
}
// #enddocregion gotoHeroes // #enddocregion gotoHeroes
} }

42
public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts Normal file
View File

@ -0,0 +1,42 @@
// 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 => this.hero = hero);
}
// #enddocregion snapshot
gotoHeroes() { this.router.navigate(['/heroes']); }
}

38
public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
View File

@ -1,6 +1,7 @@
// #docplaster
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { OnActivate, Router, RouteSegment } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { Hero, HeroService } from './hero.service'; import { Hero, HeroService } from './hero.service';
@ -21,30 +22,41 @@ import { Hero, HeroService } from './hero.service';
</div> </div>
`, `,
}) })
export class HeroDetailComponent implements OnActivate { export class HeroDetailComponent implements OnInit, OnDestroy {
hero: Hero; hero: Hero;
// #docregion ngOnInit
private sub: any;
// #enddocregion ngOnInit
// #docregion ctor // #docregion ctor
constructor( constructor(
private route: ActivatedRoute,
private router: Router, private router: Router,
private service: HeroService) {} private service: HeroService) {}
// #enddocregion ctor // #enddocregion ctor
// #docregion ngOnInit
// #docregion OnActivate ngOnInit() {
routerOnActivate(curr: RouteSegment): void { this.sub = this.route.params.subscribe(params => {
let id = +curr.getParam('id'); let id = +params['id']; // (+) converts string 'id' to a number
this.service.getHero(id).then(hero => this.hero = hero); this.service.getHero(id).then(hero => this.hero = hero);
});
} }
// #enddocregion OnActivate // #enddocregion ngOnInit
// #docregion ngOnDestroy
ngOnDestroy() {
this.sub.unsubscribe();
}
// #enddocregion ngOnDestroy
// #docregion gotoHeroes-navigate
gotoHeroes() { gotoHeroes() {
let heroId = this.hero ? this.hero.id : null; let heroId = this.hero ? this.hero.id : null;
// Pass along the hero id if available // Pass along the hero id if available
// so that the HeroList component can select that hero. // so that the HeroList component can select that hero.
// Add a totally useless `foo` parameter for kicks. this.router.navigate(['/heroes'], { queryParams: { id: `${heroId}`, foo: 'foo' } });
// #docregion gotoHeroes-navigate
this.router.navigate([`/heroes`, {id: heroId, foo: 'foo'}]);
// #enddocregion gotoHeroes-navigate
} }
// #enddocregion gotoHeroes-navigate
} }

8
public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
View File

@ -43,7 +43,7 @@ export class HeroListComponent implements OnInit {
// #enddocregion // #enddocregion
/* A link parameters array /* A link parameters array
// #docregion link-parameters-array // #docregion link-parameters-array
['HeroDetail', { id: hero.id }] // {id: 15} ['/hero', hero.id] // { 15 }
// #enddocregion link-parameters-array // #enddocregion link-parameters-array
*/ */

64
public/docs/_examples/router/ts/app/heroes/hero-list.component.2.ts Normal file
View File

@ -0,0 +1,64 @@
// #docplaster
// #docregion
// TODO SOMEDAY: Feature Componetized like CrisisCenter
import { Component, OnInit, OnDestroy } from '@angular/core';
// #docregion import-router
import { Router } 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"
[class.selected]="isSelected(hero)"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
`
// #enddocregion template
})
export class HeroListComponent implements OnInit, OnDestroy {
heroes: Hero[];
// #docregion ctor
private selectedId: number;
private sub: any;
constructor(
private service: HeroService,
private router: Router) {}
// #enddocregion ctor
ngOnInit() {
this.sub = this.router
.routerState
.queryParams
.subscribe(params => {
this.selectedId = +params['id'];
this.service.getHeroes()
.then(heroes => this.heroes = heroes);
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
// #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
}
// #enddocregion

26
public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
View File

@ -1,9 +1,9 @@
// #docplaster // #docplaster
// #docregion // #docregion
// TODO SOMEDAY: Feature Componetized like CrisisCenter // TODO SOMEDAY: Feature Componetized like CrisisCenter
import { Component } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
// #docregion import-router // #docregion import-router
import { OnActivate, Router, RouteSegment, RouteTree } from '@angular/router'; import { Router } from '@angular/router';
// #enddocregion import-router // #enddocregion import-router
import { Hero, HeroService } from './hero.service'; import { Hero, HeroService } from './hero.service';
@ -22,22 +22,34 @@ import { Hero, HeroService } from './hero.service';
` `
// #enddocregion template // #enddocregion template
}) })
export class HeroListComponent implements OnActivate { export class HeroListComponent implements OnInit, OnDestroy {
heroes: Hero[]; heroes: Hero[];
// #docregion ctor // #docregion ctor
private selectedId: number; private selectedId: number;
private sub: any;
constructor( constructor(
private service: HeroService, private service: HeroService,
private router: Router) { } private router: Router) {}
// #enddocregion ctor // #enddocregion ctor
routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: RouteTree, prevTree?: RouteTree): void { ngOnInit() {
this.selectedId = +curr.getParam('id'); this.sub = this.router
this.service.getHeroes().then(heroes => this.heroes = heroes); .routerState
.queryParams
.subscribe(params => {
this.selectedId = +params['id'];
this.service.getHeroes()
.then(heroes => this.heroes = heroes);
});
} }
ngOnDestroy() {
this.sub.unsubscribe();
}
// #enddocregion ctor
// #docregion isSelected // #docregion isSelected
isSelected(hero: Hero) { return hero.id === this.selectedId; } isSelected(hero: Hero) { return hero.id === this.selectedId; }
// #enddocregion isSelected // #enddocregion isSelected

12
public/docs/_examples/router/ts/app/heroes/heroes.routes.ts Normal file
View File

@ -0,0 +1,12 @@
// #docregion
import { RouterConfig } from '@angular/router';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
export const HeroesRoutes: RouterConfig = [
{ path: '/heroes', component: HeroListComponent },
// #docregion hero-detail-route
{ path: '/hero/:id', component: HeroDetailComponent }
// #enddocregion hero-detail-route
];
// #enddocregion

13
public/docs/_examples/router/ts/app/interfaces.ts Normal file
View File

@ -0,0 +1,13 @@
// #docregion
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';
export interface CanComponentDeactivate {
canDeactivate: () => boolean | Observable<boolean>;
}
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate): Observable<boolean> | boolean {
return component.canDeactivate ? component.canDeactivate() : true;
}
}

44
public/docs/_examples/router/ts/app/login.component.ts Executable file
View File

@ -0,0 +1,44 @@
// #docregion
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';
@Component({
selector: 'login',
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) {
// Todo: capture where the user was going and nav there.
// Meanwhile redirect the user to the crisis admin
this.router.navigate(['/crisis-center/admin']);
}
});
}
logout() {
this.authService.logout();
this.setMessage();
}
}

10
public/docs/_examples/router/ts/app/login.routes.ts Normal file
View File

@ -0,0 +1,10 @@
// #docregion
import { AuthGuard } from './auth.guard';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';
export const LoginRoutes = [
{ path: '/login', component: LoginComponent }
];
export const AUTH_PROVIDERS = [AuthGuard, AuthService];

20
public/docs/_examples/router/ts/app/main.1.ts
View File

@ -1,23 +1,25 @@
/* First version */ /* First version */
// #docplaster // #docplaster
// #docregion all // #docregion all
import { bootstrap } from '@angular/platform-browser-dynamic'; // main entry point
import { ROUTER_PROVIDERS } from '@angular/router'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component'; // #enddocregion
// #enddocregion all
/* Can't use AppComponent ... but display as if we can /* Can't use AppComponent ... but display as if we can
// #docregion all // #docregion all
bootstrap(AppComponent, [ bootstrap(AppComponent, [
// #enddocregion all // #enddocregion all
*/ */
// Actually use the v.1 component // Actually use the v.1 component
import { AppComponent as ac } from './app.component.1'; import { AppComponent as ac } from './app.component.ts'; // './app.component.1';
bootstrap(ac, [ bootstrap(ac, [
// #docregion all // #docregion all
ROUTER_PROVIDERS APP_ROUTER_PROVIDERS
]); ])
.catch(err => console.error(err));
// #enddocregion all // #enddocregion all

16
public/docs/_examples/router/ts/app/main.2.ts
View File

@ -2,30 +2,32 @@
// For Milestone #2 // For Milestone #2
// Also includes digression on HashPathStrategy (not used in the final app) // Also includes digression on HashPathStrategy (not used in the final app)
// #docplaster // #docplaster
// #docregion // #docregion
// main entry point
import { bootstrap } from '@angular/platform-browser-dynamic'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router';
// Add these symbols to override the `LocationStrategy` // Add these symbols to override the `LocationStrategy`
import { LocationStrategy, import { LocationStrategy,
HashLocationStrategy } from '@angular/common'; HashLocationStrategy } from '@angular/common';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
// #enddocregion // #enddocregion
/* Can't use AppComponent ... but display as if we can /* Can't use AppComponent ... but display as if we can
// #docregion // #docregion
bootstrap(AppComponent, [ bootstrap(AppComponent, [
// #enddocregion // #enddocregion
*/ */
// Actually use the v.2 component // Actually use the v.2 component
import { AppComponent as ac } from './app.component.2'; import { AppComponent as ac } from './app.component.ts'; // './app.component.2';
bootstrap(ac, [ bootstrap(ac, [
// #docregion // #docregion
ROUTER_PROVIDERS, APP_ROUTER_PROVIDERS,
{ provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/ { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/
]);
])
.catch(err => console.error(err));
// #enddocregion // #enddocregion

14
public/docs/_examples/router/ts/app/main.3.ts
View File

@ -1,7 +1,11 @@
/* third version */
// #docregion // #docregion
import { bootstrap } from '@angular/platform-browser-dynamic'; // main entry point
import { ROUTER_PROVIDERS } from '@angular/router'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component.3';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component.3'; bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
bootstrap(AppComponent, [ROUTER_PROVIDERS]); ])
.catch(err => console.error(err));

13
public/docs/_examples/router/ts/app/main.ts
View File

@ -1,7 +1,10 @@
// #docregion // #docregion
import { bootstrap } from '@angular/platform-browser-dynamic'; // main entry point
import { ROUTER_PROVIDERS } from '@angular/router'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component'; bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
bootstrap(AppComponent, [ROUTER_PROVIDERS]); ])
.catch(err => console.error(err));

4
public/docs/_examples/router/ts/index.1.html
View File

@ -3,7 +3,7 @@
<html> <html>
<head> <head>
<!-- #docregion base-href --> <!-- #docregion base-href -->
<base href="/"> <base href=".">
<!-- #enddocregion base-href --> <!-- #enddocregion base-href -->
<title>Router Sample v.1</title> <title>Router Sample v.1</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -20,7 +20,7 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app/main.1') // <----- ONLY CHANGE System.import('app/main.1') // <----- ONLY CHANGE
.then(null, console.error.bind(console)); .catch(function(err){ console.error(err); });
</script> </script>
</head> </head>

4
public/docs/_examples/router/ts/index.2.html
View File

@ -2,7 +2,7 @@
<!-- #docregion --> <!-- #docregion -->
<html> <html>
<head> <head>
<base href="/"> <base href=".">
<title>Router Sample v.2</title> <title>Router Sample v.2</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -18,7 +18,7 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app/main.2') // <----- ONLY CHANGE System.import('app/main.2') // <----- ONLY CHANGE
.then(null, console.error.bind(console)); .catch(function(err){ console.error(err); });
</script> </script>
</head> </head>

4
public/docs/_examples/router/ts/index.3.html
View File

@ -2,7 +2,7 @@
<!-- #docregion --> <!-- #docregion -->
<html> <html>
<head> <head>
<base href="/"> <base href=".">
<title>Router Sample v.3</title> <title>Router Sample v.3</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -18,7 +18,7 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app/main.3') // <----- ONLY CHANGE System.import('app/main.3') // <----- ONLY CHANGE
.then(null, console.error.bind(console)); .catch(function(err){ console.error(err); });
</script> </script>
</head> </head>

5
public/docs/_examples/router/ts/index.html
View File

@ -4,7 +4,7 @@
<html> <html>
<head> <head>
<!-- Set the base href --> <!-- Set the base href -->
<base href="/"> <base href=".">
<title>Router Sample</title> <title>Router Sample</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -19,7 +19,8 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app').catch(function(err){ console.error(err); }); System.import('app')
.catch(function(err){ console.error(err); });
</script> </script>
</head> </head>

4
public/docs/_examples/router/ts/plnkr.json
View File

@ -3,10 +3,10 @@
"files":[ "files":[
"!**/*.d.ts", "!**/*.d.ts",
"!**/*.js", "!**/*.js",
"!**/*.[1,2,3].*", "!**/*.[1,2,3,4,5].*",
"!app/crisis-list.component.ts", "!app/crisis-list.component.ts",
"!app/hero-list.component.ts", "!app/hero-list.component.ts",
"!app/crisis-center/add-crisis.component.ts" "!app/crisis-center/add-crisis.component.ts"
], ],
"tags": ["router"] "tags": ["router"]
} }

3
public/docs/_examples/systemjs.config.js
View File

@ -48,6 +48,9 @@
// Add package entries for angular packages // Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig); ngPackageNames.forEach(setPackageConfig);
// No umd for router yet
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
var config = { var config = {
map: map, map: map,
packages: packages packages: packages

8
public/docs/_examples/systemjs.config.plunker.js
View File

@ -6,16 +6,18 @@
(function(global) { (function(global) {
var ngVer = '@2.0.0-rc.2'; // lock in the angular package version; do not let it float to current! var ngVer = '@2.0.0-rc.2'; // lock in the angular package version; do not let it float to current!
var routerVer = '@3.0.0-alpha.3'; // lock router version
//map tells the System loader where to look for things //map tells the System loader where to look for things
var map = { var map = {
'app': 'app', 'app': 'app',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version '@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest 'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6', 'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js', 'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js', 'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
}; };
//packages tells the System loader how to load when no filename and/or no extension //packages tells the System loader how to load when no filename and/or no extension
@ -32,7 +34,6 @@
'http', 'http',
'platform-browser', 'platform-browser',
'platform-browser-dynamic', 'platform-browser-dynamic',
'router',
'router-deprecated', 'router-deprecated',
'upgrade', 'upgrade',
]; ];
@ -53,6 +54,9 @@
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}); });
// No umd for router yet
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
var config = { var config = {
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts', transpiler: 'ts',

2
public/docs/_examples/testing/ts/app/app.component.spec.ts
View File

@ -1,7 +1,7 @@
/* tslint:disable:no-unused-variable */ /* tslint:disable:no-unused-variable */
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core'; import { DebugElement } from '@angular/core';
import { import {

2
public/docs/_examples/typings.json
View File

@ -2,6 +2,6 @@
"globalDependencies": { "globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654", "core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446", "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515" "node": "registry:dt/node#6.0.0+20160608110640"
} }
} }

3
public/docs/ts/latest/guide/_data.json
View File

@ -112,8 +112,7 @@
"router": { "router": {
"title": "Routing & Navigation", "title": "Routing & Navigation",
"intro": "Discover the basics of screen navigation with the Angular 2 Component Router.", "intro": "Discover the basics of screen navigation with the Angular 2 Component Router."
"hide": true
}, },
"structural-directives": { "structural-directives": {

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

File diff suppressed because it is too large Load Diff