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

Commit c61d819

Browse files
brandonrobertsnaomiblack
brandonroberts
authored and
naomiblack
committed
docs(router): update developer guide to new v.3 router
1 parent 3b4b79a commit c61d819

Some content is hidden

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

55 files changed

+2548
-309
lines changed

‎public/docs/_examples/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
"devDependencies": {
4646
"angular-cli": "^1.0.0-beta.5",
4747
"canonical-path": "0.0.2",
48-
"concurrently": "^2.0.0",
48+
"concurrently": "^2.1.0",
4949
"css-loader": "^0.23.1",
5050
"extract-text-webpack-plugin": "^1.0.1",
5151
"file-loader": "^0.8.5",
@@ -62,7 +62,7 @@
6262
"karma-sourcemap-loader": "^0.3.7",
6363
"karma-webpack": "^1.7.0",
6464
"lite-server": "^2.2.0",
65-
"lodash": "^4.11.1",
65+
"lodash": "^4.13.1",
6666
"null-loader": "^0.1.1",
6767
"phantomjs-prebuilt": "^2.1.7",
6868
"protractor": "^3.3.0",
@@ -71,7 +71,7 @@
7171
"style-loader": "^0.13.1",
7272
"ts-loader": "^0.8.2",
7373
"ts-node": "^0.7.3",
74-
"typescript": "^1.8.10",
74+
"typescript": "^1.9.0-dev.20160409",
7575
"typings": "^1.0.4",
7676
"webpack": "^1.13.0",
7777
"webpack-dev-server": "^1.14.1",

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

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
/* First version */
22
// #docplaster
3-
43
// #docregion
54
import { Component } from '@angular/core';
6-
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
7-
8-
import { CrisisListComponent } from './crisis-list.component';
9-
import { HeroListComponent } from './hero-list.component';
5+
// #docregion import-router
6+
import { ROUTER_DIRECTIVES } from '@angular/router';
7+
// #enddocregion import-router
108

119
@Component({
1210
selector: 'my-app',
13-
// #docregion template
11+
// #docregion template
1412
template: `
1513
<h1>Component Router</h1>
1614
<nav>
@@ -19,24 +17,10 @@ import { HeroListComponent } from './hero-list.component';
1917
</nav>
2018
<router-outlet></router-outlet>
2119
`,
22-
// #enddocregion template
20+
// #enddocregion template
21+
// #docregion directives
2322
directives: [ROUTER_DIRECTIVES]
23+
// #enddocregion directives
2424
})
25-
// #enddocregion
26-
/*
27-
// #docregion route-config
28-
@Component({ ... })
29-
// #enddocregion route-config
30-
*/
31-
// #docregion
32-
// #docregion route-config
33-
@Routes([
34-
// #docregion route-defs
35-
{path: '/crisis-center', component: CrisisListComponent},
36-
{path: '/heroes', component: HeroListComponent},
37-
{path: '*', component: CrisisListComponent}
38-
// #enddocregion route-defs
39-
])
25+
4026
export class AppComponent { }
41-
// #enddocregion route-config
42-
// #enddocregion

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

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
// #docplaster
33

44
// #docregion
5-
import { Component, OnInit } from '@angular/core';
6-
import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router';
5+
import { Component } from '@angular/core';
6+
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
77

8-
import { CrisisListComponent } from './crisis-list.component';
98
// #enddocregion
109
/*
1110
// Apparent Milestone 2 imports
@@ -18,8 +17,6 @@ import { CrisisListComponent } from './crisis-list.component';
1817
// #enddocregion
1918
*/
2019
// Actual Milestone 2 imports
21-
import { HeroDetailComponent } from './heroes/hero-detail.component.1';
22-
import { HeroListComponent } from './heroes/hero-list.component.1';
2320
import { HeroService } from './heroes/hero.service';
2421
// #docregion
2522

@@ -37,28 +34,7 @@ import { HeroService } from './heroes/hero.service';
3734
directives: [ROUTER_DIRECTIVES]
3835
})
3936
// #enddocregion
40-
/*
41-
// #docregion route-config
42-
@Component({ ... })
43-
// #enddocregion route-config
44-
*/
45-
// #docregion
46-
// #docregion route-config
47-
@Routes([
48-
// #docregion route-defs
49-
{path: '/crisis-center', component: CrisisListComponent},
50-
{path: '/heroes', component: HeroListComponent},
51-
// #docregion hero-detail-route
52-
{path: '/hero/:id', component: HeroDetailComponent}
53-
// #enddocregion hero-detail-route
54-
// #enddocregion route-defs
55-
])
56-
export class AppComponent implements OnInit {
57-
constructor(private router: Router) {}
58-
59-
ngOnInit() {
60-
this.router.navigate(['/crisis-center']);
61-
}
37+
export class AppComponent {
6238
}
6339
// #enddocregion route-config
6440
// #enddocregion

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

Lines changed: 25 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,49 @@
11
/* tslint:disable:no-unused-variable */
22
// #docplaster
3-
import { Component, OnInit } from '@angular/core';
4-
import { Router, ROUTER_DIRECTIVES, Routes } from '@angular/router';
3+
import { Component } from '@angular/core';
4+
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
55

6-
import { CrisisCenterComponent } from './crisis-center/crisis-center.component.1';
7-
import { HeroDetailComponent } from './heroes/hero-detail.component.1';
8-
import { HeroListComponent } from './heroes/hero-list.component.1';
9-
10-
import { DialogService } from './dialog.service';
116
import { HeroService } from './heroes/hero.service';
127

138
@Component({
149
selector: 'my-app',
1510
// #enddocregion
1611
/* Typical link
17-
// #docregion h-anchor
18-
<a [routerLink]="['/heroes']">Heroes</a>
19-
// #enddocregion h-anchor
20-
*/
12+
// #docregion h-anchor
13+
<a [routerLink]="['/heroes']">Heroes</a>
14+
// #enddocregion h-anchor
15+
*/
2116
/* Incomplete Crisis Center link when CC lacks a default
22-
// #docregion cc-anchor-fail
23-
// The link now fails with a "non-terminal link" error
24-
// #docregion cc-anchor-w-default
25-
<a [routerLink]="['/crisis-center']">Crisis Center</a>
26-
// #enddocregion cc-anchor-w-default
27-
// #enddocregion cc-anchor-fail
28-
*/
17+
// #docregion cc-anchor-fail
18+
// The link now fails with a "non-terminal link" error
19+
// #docregion cc-anchor-w-default
20+
<a [routerLink]="['/crisis-center']">Crisis Center</a>
21+
// #enddocregion cc-anchor-w-default
22+
// #enddocregion cc-anchor-fail
23+
*/
2924
/* Crisis Center link when CC lacks a default
30-
// #docregion cc-anchor-no-default
31-
<a [routerLink]="['/crisis-center/']">Crisis Center</a>
32-
// #enddocregion cc-anchor-no-default
33-
*/
25+
// #docregion cc-anchor-no-default
26+
<a [routerLink]="['/crisis-center/']">Crisis Center</a>
27+
// #enddocregion cc-anchor-no-default
28+
*/
3429
/* Crisis Center Detail link
35-
// #docregion Dragon-anchor
36-
<a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
37-
// #enddocregion Dragon-anchor
38-
*/
30+
// #docregion Dragon-anchor
31+
<a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
32+
// #enddocregion Dragon-anchor
33+
*/
3934
// #docregion template
4035
template: `
4136
<h1 class="title">Component Router</h1>
4237
<nav>
4338
<a [routerLink]="['/crisis-center']">Crisis Center</a>
44-
<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>
45-
<a [routerLink]="['/crisis-center', 2]">Shark Crisis</a>
39+
<a [routerLink]="['/crisis-center/1']">Dragon Crisis</a>
40+
<a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
4641
</nav>
4742
<router-outlet></router-outlet>
4843
`,
4944
// #enddocregion template
50-
providers: [DialogService, HeroService],
45+
providers: [HeroService],
5146
directives: [ROUTER_DIRECTIVES]
5247
})
53-
@Routes([
54-
{path: '/crisis-center', component: CrisisCenterComponent},
55-
{path: '*', component: CrisisCenterComponent}
56-
])
57-
export class AppComponent implements OnInit {
58-
constructor(private router: Router) {}
59-
60-
ngOnInit() {
61-
this.router.navigate(['/crisis-center']);
62-
}
48+
export class AppComponent {
6349
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
import { ROUTER_DIRECTIVES } from '@angular/router';
4+
5+
import { DialogService } from './dialog.service';
6+
import { HeroService } from './heroes/hero.service';
7+
8+
@Component({
9+
selector: 'my-app',
10+
// #docregion template
11+
template: `
12+
<h1 class="title">Component Router</h1>
13+
<nav>
14+
<a [routerLink]="['/crisis-center']">Crisis Center</a>
15+
<a [routerLink]="['/heroes']">Heroes</a>
16+
<a [routerLink]="['/crisis-center/admin']">Crisis Admin</a>
17+
</nav>
18+
<router-outlet></router-outlet>
19+
`,
20+
// #enddocregion template
21+
providers: [
22+
HeroService,
23+
DialogService
24+
],
25+
directives: [ROUTER_DIRECTIVES]
26+
})
27+
export class AppComponent {
28+
}

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component } from '@angular/core';
4+
5+
import { provideRouter, ROUTER_DIRECTIVES } from '@angular/router';
6+
import { routes } from './app.routes';
7+
// #docregion can-deactivate-guard
8+
import { CanDeactivateGuard } from './interfaces';
9+
// #enddocregion can-deactivate-guard
10+
11+
import { DialogService } from './dialog.service';
12+
import { HeroService } from './heroes/hero.service';
13+
14+
// Add these symbols to override the `LocationStrategy`
15+
import { LocationStrategy,
16+
HashLocationStrategy } from '@angular/common';
17+
18+
19+
@Component({
20+
selector: 'my-app',
21+
// #docregion template
22+
template: `
23+
<h1 class="title">Component Router</h1>
24+
<nav>
25+
<a [routerLink]="['/crisis-center']">Crisis Center</a>
26+
<a [routerLink]="['/heroes']">Heroes</a>
27+
</nav>
28+
<router-outlet></router-outlet>
29+
`,
30+
// #enddocregion template
31+
providers: [
32+
HeroService,
33+
DialogService,
34+
provideRouter(routes),
35+
CanDeactivateGuard,
36+
{ provide: LocationStrategy,
37+
useClass: HashLocationStrategy } // .../#/crisis-center/
38+
],
39+
directives: [ROUTER_DIRECTIVES]
40+
})
41+
export class AppComponent {
42+
}

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

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,30 @@
11
// #docplaster
22
// #docregion
3-
import { Component, OnInit } from '@angular/core';
4-
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
3+
import { Component } from '@angular/core';
4+
import { ROUTER_DIRECTIVES } from '@angular/router';
55

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-
import { DialogService } from './dialog.service';
11-
import { HeroService } from './heroes/hero.service';
6+
import { DialogService } from './dialog.service';
7+
import { HeroService } from './heroes/hero.service';
128

139
@Component({
1410
selector: 'my-app',
15-
// #docregion template
11+
// #docregion template
1612
template: `
1713
<h1 class="title">Component Router</h1>
1814
<nav>
1915
<a [routerLink]="['/crisis-center']">Crisis Center</a>
2016
<a [routerLink]="['/heroes']">Heroes</a>
17+
<a [routerLink]="['/crisis-center/admin']">Crisis Admin</a>
18+
<a [routerLink]="['/login']">Login</a>
2119
</nav>
2220
<router-outlet></router-outlet>
2321
`,
24-
// #enddocregion template
25-
providers: [DialogService, HeroService],
22+
// #enddocregion template
23+
providers: [
24+
HeroService,
25+
DialogService
26+
],
2627
directives: [ROUTER_DIRECTIVES]
2728
})
28-
// #docregion routes
29-
@Routes([
30-
{path: '/crisis-center', component: CrisisCenterComponent},
31-
{path: '/heroes', component: HeroListComponent},
32-
{path: '/hero/:id', component: HeroDetailComponent},
33-
])
34-
// #enddocregion routes
35-
export class AppComponent implements OnInit {
36-
constructor(private router: Router) {}
37-
38-
ngOnInit() {
39-
this.router.navigate(['/crisis-center']);
40-
}
29+
export class AppComponent {
4130
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion route-config
4+
import { provideRouter, RouterConfig } from '@angular/router';
5+
6+
// #enddocregion route-config
7+
// #enddocregion
8+
9+
// #docregion base-routes
10+
import { HeroListComponent } from './hero-list.component';
11+
import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
12+
import { HeroDetailComponent } from './heroes/hero-detail.component';
13+
// #enddocregion base-routes
14+
15+
// #docregion
16+
// #docregion route-config
17+
export const routes: RouterConfig = [
18+
// #docregion route-defs
19+
{ path: '/crisis-center', component: CrisisCenterComponent },
20+
{ path: '/heroes', component: HeroListComponent },
21+
// #enddocregion route-defs
22+
// #docregion hero-detail-route
23+
{ path: '/hero/:id', component: HeroDetailComponent }
24+
// #enddocregion hero-detail-route
25+
];
26+
27+
export const APP_ROUTER_PROVIDERS = [
28+
provideRouter(routes)
29+
];
30+
// #enddocregion route-config
31+
// #enddocregion

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion route-config
4+
import { provideRouter, RouterConfig } from '@angular/router';
5+
6+
// #enddocregion route-config
7+
import { CrisisListComponent } from './crisis-list.component';
8+
import { HeroListComponent } from './hero-list.component';
9+
10+
// #docregion route-config
11+
export const routes: RouterConfig = [
12+
{ path: '/crisis-center', component: CrisisListComponent },
13+
{ path: '/heroes', component: HeroListComponent }
14+
];
15+
16+
export const APP_ROUTER_PROVIDERS = [
17+
provideRouter(routes)
18+
];
19+
// #enddocregion route-config

0 commit comments

Comments
 (0)