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

Commit 0c1d7ca

Browse files
wardbellnaomiblack
wardbell
authored and
naomiblack
committed
docs(router): new chapter
Ward and Jeremy Todo: EXCLUDE Old router doc for reference while re-writing
1 parent b05acd3 commit 0c1d7ca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2684
-9
lines changed

‎public/docs/_examples/router/ts/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/*.js

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

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/* First version */
2+
// #docplaster
3+
4+
// #docregion
5+
import {Component} from 'angular2/core';
6+
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
7+
8+
import {CrisisListComponent} from './crisis-list.component';
9+
import {HeroListComponent} from './hero-list.component';
10+
11+
@Component({
12+
selector: 'my-app',
13+
// #docregion template
14+
template: `
15+
<h1>Component Router</h1>
16+
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
17+
<a [routerLink]="['Heroes']">Heroes</a>
18+
<router-outlet></router-outlet>
19+
`,
20+
// #enddocregion template
21+
directives: [ROUTER_DIRECTIVES]
22+
})
23+
// #enddocregion
24+
/*
25+
// #docregion route-config
26+
@Component({ ... })
27+
// #enddocregion route-config
28+
*/
29+
// #docregion
30+
// #docregion route-config
31+
@RouteConfig([
32+
// #docregion route-defs
33+
{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
34+
{path:'/heroes', name: 'Heroes', component: HeroListComponent}
35+
// #enddocregion route-defs
36+
])
37+
export class AppComponent { }
38+
// #enddocregion route-config
39+
// #enddocregion

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* Second Heroes version */
2+
// #docplaster
3+
4+
// #docregion
5+
import {Component} from 'angular2/core';
6+
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
7+
8+
import {CrisisListComponent} from './crisis-list.component';
9+
// #docregion hero-import
10+
import {HeroListComponent} from './heroes/hero-list.component';
11+
import {HeroDetailComponent} from './heroes/hero-detail.component';
12+
// #enddocregion hero-import
13+
14+
@Component({
15+
selector: 'my-app',
16+
template: `
17+
<h1>Component Router</h1>
18+
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
19+
<a [routerLink]="['Heroes']">Heroes</a>
20+
<router-outlet></router-outlet>
21+
`,
22+
directives: [ROUTER_DIRECTIVES]
23+
})
24+
// #enddocregion
25+
/*
26+
// #docregion route-config
27+
@Component({ ... })
28+
// #enddocregion route-config
29+
*/
30+
// #docregion
31+
// #docregion route-config
32+
@RouteConfig([
33+
// #docregion route-defs
34+
{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
35+
{path:'/heroes', name: 'Heroes', component: HeroListComponent},
36+
// #docregion hero-detail-route
37+
{path:'/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}
38+
// #enddocregion hero-detail-route
39+
// #enddocregion route-defs
40+
])
41+
export class AppComponent { }
42+
// #enddocregion route-config
43+
// #enddocregion

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

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// #docplaster
2+
// #docregion
3+
import {Component} from 'angular2/core';
4+
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
5+
6+
import {CrisisCenterComponent} from './crisis-center/crisis-center.component';
7+
import {HeroListComponent} from './heroes/hero-list.component';
8+
import {HeroDetailComponent} from './heroes/hero-detail.component';
9+
10+
@Component({
11+
selector: 'my-app',
12+
// #docregion template
13+
template: `
14+
<h1 class="title">Component Router</h1>
15+
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
16+
<a [routerLink]="['Heroes']">Heroes</a>
17+
<router-outlet></router-outlet>
18+
`,
19+
// #enddocregion template
20+
directives: [ROUTER_DIRECTIVES]
21+
})
22+
// #docregion route-config
23+
@RouteConfig([
24+
25+
// #docregion route-config-cc
26+
{ // Crisis Center child route
27+
path: '/crisis-center/...',
28+
name: 'CrisisCenter',
29+
component: CrisisCenterComponent,
30+
useAsDefault: true
31+
},
32+
// #enddocregion route-config-cc
33+
34+
{path: '/heroes', name: 'Heroes', component: HeroListComponent},
35+
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
36+
{path: '/*other', redirectTo: ['Heroes']},
37+
])
38+
// #enddocregion route-config
39+
export class AppComponent { }

‎public/docs/_examples/router/ts/app/boot.1.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/* First version */
2+
// #docplaster
3+
4+
// #docregion all
5+
import {AppComponent} from './app.component';
6+
import {bootstrap} from 'angular2/platform/browser';
7+
import {ROUTER_PROVIDERS} from 'angular2/router';
8+
9+
// #enddocregion all
10+
11+
/* Can't use AppComponent ... but display as if we can
12+
// #docregion all
13+
bootstrap(AppComponent, [
14+
// #enddocregion all
15+
*/
16+
17+
// Actually use the v.1 component
18+
import {AppComponent as ac} from './app.component.1';
19+
bootstrap(ac, [
20+
// #docregion all
21+
ROUTER_PROVIDERS,
22+
]);
23+
// #enddocregion all

‎public/docs/_examples/router/ts/app/boot.2.ts

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* Second version */
2+
// For Milestone #2
3+
// Also includes digression on HashPathStrategy (not used in the final app)
4+
// #docplaster
5+
6+
// #docregion v2
7+
// #docregion hash-strategy
8+
import {bootstrap} from 'angular2/platform/browser';
9+
import {ROUTER_PROVIDERS} from 'angular2/router';
10+
import {AppComponent} from './app.component';
11+
// #enddocregion hash-strategy
12+
import {HeroService} from './heroes/hero.service';
13+
// #enddocregion v2
14+
15+
// #docregion hash-strategy
16+
17+
// Add these symbols to register a `LocationStrategy`
18+
import {provide} from 'angular2/core';
19+
import {LocationStrategy,
20+
HashLocationStrategy} from 'angular2/router';
21+
// #enddocregion hash-strategy
22+
23+
/* Can't use AppComponent ... but display as if we can
24+
// #docregion v2,hash-strategy
25+
26+
bootstrap(AppComponent, [
27+
// #enddocregion v2,hash-strategy
28+
*/
29+
30+
// Actually use the v.2 component
31+
import {AppComponent as ac} from './app.component.2';
32+
33+
bootstrap(ac, [
34+
// #docregion hash-strategy
35+
36+
provide(LocationStrategy,
37+
{useClass: HashLocationStrategy}), // ~/src/#/crisis-center/
38+
39+
// #enddocregion hash-strategy
40+
// #docregion v2
41+
HeroService,
42+
// #docregion hash-strategy
43+
ROUTER_PROVIDERS
44+
]);
45+
// #enddocregion hash-strategy
46+
// #enddocregion v2
47+

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// #docregion
2+
import {bootstrap} from 'angular2/platform/browser';
3+
import {ROUTER_PROVIDERS} from 'angular2/router';
4+
5+
import {AppComponent} from './app.component';
6+
import {DialogService} from './dialog.service';
7+
import {HeroService} from './heroes/hero.service';
8+
9+
bootstrap(AppComponent, [
10+
ROUTER_PROVIDERS,
11+
DialogService,
12+
HeroService
13+
]);

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

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {Component} from 'angular2/core';
2+
import {Crisis, CrisisService} from './crisis.service';
3+
import {DialogService} from '../dialog.service';
4+
import {CanDeactivate, ComponentInstruction, Router} from 'angular2/router';
5+
6+
@Component({
7+
template: `
8+
<h2>"{{editName}}"</h2>
9+
<div>
10+
<label>Name: </label>
11+
<input [(ngModel)]="editName" placeholder="name"/>
12+
</div>
13+
<button (click)="save()">Save</button>
14+
<button (click)="cancel()">Cancel</button>
15+
`,
16+
styles: ['input {width: 20em}']
17+
})
18+
export class AddCrisisComponent implements CanDeactivate {
19+
public editName: string;
20+
21+
constructor(
22+
private _service: CrisisService,
23+
private _router: Router,
24+
private _dialog: DialogService) { }
25+
26+
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
27+
return !!this.editName.trim() ||
28+
this._dialog.confirm('Discard changes?');
29+
}
30+
31+
cancel() { this.gotoCrises(); }
32+
33+
save() {
34+
this._service.addCrisis(this.editName);
35+
this.gotoCrises();
36+
}
37+
38+
gotoCrises() {
39+
this._router.navigate(['CrisisCenter']);
40+
}
41+
}

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// #docregion
2+
import {Component} from 'angular2/core';
3+
import {RouteConfig, RouterOutlet} from 'angular2/router';
4+
5+
import {CrisisListComponent} from './crisis-list.component';
6+
import {CrisisDetailComponent} from './crisis-detail.component';
7+
import {CrisisService} from './crisis.service';
8+
9+
// #docregion minus-imports
10+
@Component({
11+
template: `
12+
<h2>CRISIS CENTER</h2>
13+
<router-outlet></router-outlet>
14+
`,
15+
directives: [RouterOutlet],
16+
// #docregion providers
17+
providers: [CrisisService]
18+
// #enddocregion providers
19+
})
20+
// #docregion route-config
21+
@RouteConfig([
22+
{path:'/', name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true},
23+
{path:'/list/:id', name: 'CrisisList', component: CrisisListComponent},
24+
{path:'/:id', name: 'CrisisDetail', component: CrisisDetailComponent}
25+
])
26+
// #enddocregion route-config
27+
export class CrisisCenterComponent { }
28+
// #enddocregion minus-imports
29+
// #enddocregion

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

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
// #docplaster
2+
3+
// #docregion
4+
import {Component, OnInit} from 'angular2/core';
5+
import {Crisis, CrisisService} from './crisis.service';
6+
import {RouteParams, Router} from 'angular2/router';
7+
// #docregion ngCanDeactivate
8+
import {CanDeactivate, ComponentInstruction} from 'angular2/router';
9+
import {DialogService} from '../dialog.service';
10+
11+
// #enddocregion ngCanDeactivate
12+
13+
@Component({
14+
// #docregion template
15+
template: `
16+
<div *ngIf="crisis">
17+
<h3>"{{editName}}"</h3>
18+
<div>
19+
<label>Id: </label>{{crisis.id}}</div>
20+
<div>
21+
<label>Name: </label>
22+
<input [(ngModel)]="editName" placeholder="name"/>
23+
</div>
24+
<button (click)="save()">Save</button>
25+
<button (click)="cancel()">Cancel</button>
26+
</div>
27+
`,
28+
// #enddocregion template
29+
styles: ['input {width: 20em}']
30+
})
31+
// #docregion ngCanDeactivate, cancel-save
32+
export class CrisisDetailComponent implements OnInit, CanDeactivate {
33+
34+
public crisis: Crisis;
35+
public editName: string;
36+
37+
// #enddocregion ngCanDeactivate, cancel-save
38+
constructor(
39+
private _service: CrisisService,
40+
private _router: Router,
41+
private _routeParams: RouteParams,
42+
private _dialog: DialogService
43+
) { }
44+
45+
// #docregion ngOnInit
46+
ngOnInit() {
47+
let id = +this._routeParams.get('id');
48+
this._service.getCrisis(id).then(crisis => {
49+
if (crisis) {
50+
this.editName = crisis.name;
51+
this.crisis = crisis;
52+
} else { // id not found
53+
this.gotoCrises();
54+
}
55+
});
56+
}
57+
// #enddocregion ngOnInit
58+
59+
// #docregion canDeactivate
60+
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
61+
return !this.crisis ||
62+
this.crisis.name === this.editName ||
63+
this._dialog.confirm('Discard changes?');
64+
}
65+
// #enddocregion canDeactivate
66+
67+
// #docregion cancel-save
68+
cancel() {
69+
this.editName = this.crisis.name;
70+
this.gotoCrises();
71+
}
72+
73+
save() {
74+
this.crisis.name = this.editName;
75+
this.gotoCrises();
76+
}
77+
// #enddocregion cancel-save
78+
79+
// #docregion gotoCrises
80+
gotoCrises() {
81+
let route =
82+
['CrisisList', {id: this.crisis ? this.crisis.id : null} ]
83+
84+
this._router.navigate(route);
85+
}
86+
// #enddocregion gotoCrises
87+
// #docregion ngCanDeactivate, cancel-save
88+
}
89+
// #enddocregion ngCanDeactivate, cancel-save
90+
// #enddocregion

0 commit comments

Comments
 (0)