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

Commit 2ccdd86

Browse files
committed
docs(router): samples and doc for new router (phase 1)
1 parent f513ee8 commit 2ccdd86

Some content is hidden

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

69 files changed

+2953
-490
lines changed

public/docs/_examples/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@angular/http": "2.0.0-rc.0",
2626
"@angular/platform-browser": "2.0.0-rc.0",
2727
"@angular/platform-browser-dynamic": "2.0.0-rc.0",
28+
"@angular/router": "2.0.0-rc.0",
2829
"@angular/router-deprecated": "2.0.0-rc.0",
2930
"@angular/upgrade": "2.0.0-rc.0",
3031

public/docs/_examples/quickstart/js/package.1.json

+14-6
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,22 @@
77
},
88
"license": "ISC",
99
"dependencies": {
10-
"@angular/common": "2.0.0-rc.0",
11-
"@angular/compiler": "2.0.0-rc.0",
12-
"@angular/core": "2.0.0-rc.0",
13-
"@angular/platform-browser": "2.0.0-rc.0",
14-
"@angular/platform-browser-dynamic": "2.0.0-rc.0",
10+
"@angular/common": "2.0.0-rc.0",
11+
"@angular/compiler": "2.0.0-rc.0",
12+
"@angular/core": "2.0.0-rc.0",
13+
"@angular/http": "2.0.0-rc.0",
14+
"@angular/platform-browser": "2.0.0-rc.0",
15+
"@angular/platform-browser-dynamic": "2.0.0-rc.0",
16+
"@angular/router": "2.0.0-rc.0",
17+
"@angular/router-deprecated": "2.0.0-rc.0",
18+
"@angular/upgrade": "2.0.0-rc.0",
19+
1520
"reflect-metadata": "0.1.3",
1621
"rxjs": "5.0.0-beta.6",
17-
"zone.js": "0.6.12"
22+
"zone.js": "0.6.12",
23+
24+
"angular2-in-memory-web-api": "0.0.6",
25+
"bootstrap": "^3.3.6"
1826
},
1927
"devDependencies": {
2028
"concurrently": "^2.0.0",

public/docs/_examples/quickstart/ts/package.1.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@angular/http": "2.0.0-rc.0",
1818
"@angular/platform-browser": "2.0.0-rc.0",
1919
"@angular/platform-browser-dynamic": "2.0.0-rc.0",
20+
"@angular/router": "2.0.0-rc.0",
2021
"@angular/router-deprecated": "2.0.0-rc.0",
2122
"@angular/upgrade": "2.0.0-rc.0",
2223

@@ -26,7 +27,7 @@
2627
"rxjs": "5.0.0-beta.6",
2728
"zone.js": "^0.6.12",
2829

29-
"angular2-in-memory-web-api": "0.0.5",
30+
"angular2-in-memory-web-api": "0.0.6",
3031
"bootstrap": "^3.3.6"
3132
},
3233
"devDependencies": {
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
describe('Router', function () {
2+
3+
beforeAll(function () {
4+
browser.get('');
5+
});
6+
7+
function getPageStruct() {
8+
hrefEles = element.all(by.css('my-app a'));
9+
10+
return {
11+
hrefs: hrefEles,
12+
routerParent: element(by.css('my-app > undefined')),
13+
routerTitle: element(by.css('my-app > undefined > h2')),
14+
15+
crisisHref: hrefEles.get(0),
16+
crisisList: element.all(by.css('my-app > undefined > undefined li')),
17+
crisisDetail: element(by.css('my-app > undefined > undefined > div')),
18+
crisisDetailTitle: element(by.css('my-app > undefined > undefined > div > h3')),
19+
20+
heroesHref: hrefEles.get(1),
21+
heroesList: element.all(by.css('my-app > undefined li')),
22+
heroDetail: element(by.css('my-app > undefined > div')),
23+
heroDetailTitle: element(by.css('my-app > undefined > div > h3')),
24+
25+
}
26+
}
27+
28+
it('should be able to see the start screen', function () {
29+
var page = getPageStruct();
30+
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
31+
expect(page.crisisHref.getText()).toEqual("Crisis Center");
32+
expect(page.heroesHref.getText()).toEqual("Heroes");
33+
});
34+
35+
it('should be able to see crises center items', function () {
36+
var page = getPageStruct();
37+
expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries at start");
38+
});
39+
40+
it('should be able to see hero items', function () {
41+
var page = getPageStruct();
42+
page.heroesHref.click().then(function() {
43+
expect(page.routerTitle.getText()).toContain('HEROES');
44+
expect(page.heroesList.count()).toBe(6, "should be 6 heroes");
45+
});
46+
});
47+
48+
it('should be able to toggle the views', function () {
49+
var page = getPageStruct();
50+
page.crisisHref.click().then(function() {
51+
expect(page.crisisList.count()).toBe(4, "should be 4 crisis center entries");
52+
return page.heroesHref.click();
53+
}).then(function() {
54+
expect(page.heroesList.count()).toBe(6, "should be 6 heroes");
55+
});
56+
});
57+
58+
it('should be able to edit and save details from the crisis center view', function () {
59+
crisisCenterEdit(2, true);
60+
});
61+
62+
it('should be able to edit and cancel details from the crisis center view', function () {
63+
crisisCenterEdit(3, false);
64+
});
65+
66+
it('should be able to edit and save details from the heroes view', function () {
67+
var page = getPageStruct();
68+
var heroEle, heroText;
69+
page.heroesHref.click().then(function() {
70+
heroEle = page.heroesList.get(4);
71+
return heroEle.getText();
72+
}).then(function(text) {
73+
expect(text.length).toBeGreaterThan(0, 'should have some text');
74+
// remove leading id from text
75+
heroText = text.substr(text.indexOf(' ')).trim();
76+
return heroEle.click();
77+
}).then(function() {
78+
expect(page.heroesList.count()).toBe(0, "should no longer see crisis center entries");
79+
expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
80+
expect(page.heroDetailTitle.getText()).toContain(heroText);
81+
var inputEle = page.heroDetail.element(by.css('input'));
82+
return sendKeys(inputEle, '-foo');
83+
}).then(function() {
84+
expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
85+
var buttonEle = page.heroDetail.element(by.css('button'));
86+
return buttonEle.click();
87+
}).then(function() {
88+
expect(heroEle.getText()).toContain(heroText + '-foo');
89+
})
90+
});
91+
92+
function crisisCenterEdit(index, shouldSave) {
93+
var page = getPageStruct();
94+
var crisisEle, crisisText;
95+
page.crisisHref.click().then(function () {
96+
crisisEle = page.crisisList.get(index);
97+
return crisisEle.getText();
98+
}).then(function (text) {
99+
expect(text.length).toBeGreaterThan(0, 'should have some text');
100+
// remove leading id from text
101+
crisisText = text.substr(text.indexOf(' ')).trim();
102+
return crisisEle.click();
103+
}).then(function () {
104+
expect(page.crisisList.count()).toBe(0, "should no longer see crisis center entries");
105+
expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
106+
expect(page.crisisDetailTitle.getText()).toContain(crisisText);
107+
var inputEle = page.crisisDetail.element(by.css('input'));
108+
return sendKeys(inputEle, '-foo');
109+
}).then(function () {
110+
expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo');
111+
var buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel'));
112+
return buttonEle.click();
113+
}).then(function () {
114+
if (shouldSave) {
115+
expect(crisisEle.getText()).toContain(crisisText + '-foo');
116+
} else {
117+
expect(crisisEle.getText()).not.toContain(crisisText + '-foo');
118+
}
119+
});
120+
}
121+
122+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* First version */
2+
// #docplaster
3+
4+
// #docregion
5+
import { Component } from '@angular/core';
6+
// #docregion import-router
7+
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
8+
// #enddocregion import-router
9+
10+
import { CrisisListComponent } from './crisis-list.component';
11+
import { HeroListComponent } from './hero-list.component';
12+
13+
@Component({
14+
selector: 'my-app',
15+
// #docregion template
16+
template: `
17+
<h1>Component Router</h1>
18+
<nav>
19+
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
20+
<a [routerLink]="['Heroes']">Heroes</a>
21+
</nav>
22+
<router-outlet></router-outlet>
23+
`,
24+
// #enddocregion template
25+
directives: [ROUTER_DIRECTIVES]
26+
})
27+
// #enddocregion
28+
/*
29+
// #docregion route-config
30+
@Component({ ... })
31+
// #enddocregion route-config
32+
*/
33+
// #docregion
34+
// #docregion route-config
35+
@RouteConfig([
36+
// #docregion route-defs
37+
{path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
38+
{path: '/heroes', name: 'Heroes', component: HeroListComponent}
39+
// #enddocregion route-defs
40+
])
41+
export class AppComponent { }
42+
// #enddocregion route-config
43+
// #enddocregion
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* Second Heroes version */
2+
// #docplaster
3+
4+
// #docregion
5+
import {Component} from '@angular/core';
6+
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
7+
8+
import {CrisisListComponent} from './crisis-list.component';
9+
// #enddocregion
10+
/*
11+
// Apparent Milestone 2 imports
12+
// #docregion
13+
// #docregion hero-import
14+
import {HeroListComponent} from './heroes/hero-list.component';
15+
import {HeroDetailComponent} from './heroes/hero-detail.component';
16+
import {HeroService} from './heroes/hero.service';
17+
// #enddocregion hero-import
18+
// #enddocregion
19+
*/
20+
// Actual Milestone 2 imports
21+
import {HeroListComponent} from './heroes/hero-list.component.1';
22+
import {HeroDetailComponent} from './heroes/hero-detail.component.1';
23+
import {HeroService} from './heroes/hero.service';
24+
// #docregion
25+
26+
@Component({
27+
selector: 'my-app',
28+
template: `
29+
<h1>Component Router</h1>
30+
<nav>
31+
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
32+
<a [routerLink]="['Heroes']">Heroes</a>
33+
</nav>
34+
<router-outlet></router-outlet>
35+
`,
36+
providers: [HeroService],
37+
directives: [ROUTER_DIRECTIVES]
38+
})
39+
// #enddocregion
40+
/*
41+
// #docregion route-config
42+
@Component({ ... })
43+
// #enddocregion route-config
44+
*/
45+
// #docregion
46+
// #docregion route-config
47+
@RouteConfig([
48+
// #docregion route-defs
49+
{path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
50+
{path: '/heroes', name: 'Heroes', component: HeroListComponent},
51+
// #docregion hero-detail-route
52+
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}
53+
// #enddocregion hero-detail-route
54+
// #enddocregion route-defs
55+
])
56+
export class AppComponent { }
57+
// #enddocregion route-config
58+
// #enddocregion
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// #docplaster
2+
import {Component} from '@angular/core';
3+
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
4+
5+
import {CrisisCenterComponent} from './crisis-center/crisis-center.component.1';
6+
7+
import {DialogService} from './dialog.service';
8+
import {HeroService} from './heroes/hero.service';
9+
10+
@Component({
11+
selector: 'my-app',
12+
// #enddocregion
13+
/* Typical link
14+
// #docregion h-anchor
15+
<a [routerLink]="['Heroes']">Heroes</a>
16+
// #enddocregion h-anchor
17+
*/
18+
/* Incomplete Crisis Center link when CC lacks a default
19+
// #docregion cc-anchor-fail
20+
// The link now fails with a "non-terminal link" error
21+
// #docregion cc-anchor-w-default
22+
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
23+
// #enddocregion cc-anchor-w-default
24+
// #enddocregion cc-anchor-fail
25+
*/
26+
/* Crisis Center link when CC lacks a default
27+
// #docregion cc-anchor-no-default
28+
<a [routerLink]="['CrisisCenter', 'CrisisList']">Crisis Center</a>
29+
// #enddocregion cc-anchor-no-default
30+
*/
31+
/* Crisis Center Detail link
32+
// #docregion Dragon-anchor
33+
<a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Dragon Crisis</a>
34+
// #enddocregion Dragon-anchor
35+
*/
36+
// #docregion template
37+
template: `
38+
<h1 class="title">Component Router</h1>
39+
<nav>
40+
<a [routerLink]="['CrisisCenter', 'CrisisList']">Crisis Center</a>
41+
<a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:1}]">Dragon Crisis</a>
42+
<a [routerLink]="['CrisisCenter', 'CrisisDetail', {id:2}]">Shark Crisis</a>
43+
</nav>
44+
<router-outlet></router-outlet>
45+
`,
46+
// #enddocregion template
47+
providers: [DialogService, HeroService],
48+
directives: [ROUTER_DIRECTIVES]
49+
})
50+
@RouteConfig([
51+
{path: '/crisis-center/...', name: 'CrisisCenter', component: CrisisCenterComponent},
52+
])
53+
export class AppComponent { }
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// #docplaster
2+
// #docregion
3+
import {Component} from '@angular/core';
4+
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
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+
import {DialogService} from './dialog.service';
11+
import {HeroService} from './heroes/hero.service';
12+
13+
@Component({
14+
selector: 'my-app',
15+
// #docregion template
16+
template: `
17+
<h1 class="title">Component Router</h1>
18+
<nav>
19+
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
20+
<a [routerLink]="['Heroes']">Heroes</a>
21+
</nav>
22+
<router-outlet></router-outlet>
23+
`,
24+
// #enddocregion template
25+
providers: [DialogService, HeroService],
26+
directives: [ROUTER_DIRECTIVES]
27+
})
28+
// #docregion route-config
29+
@RouteConfig([
30+
31+
// #docregion route-config-cc
32+
{ // Crisis Center child route
33+
path: '/crisis-center/...',
34+
name: 'CrisisCenter',
35+
component: CrisisCenterComponent,
36+
useAsDefault: true
37+
},
38+
// #enddocregion route-config-cc
39+
40+
{path: '/heroes', name: 'Heroes', component: HeroListComponent},
41+
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
42+
])
43+
// #enddocregion route-config
44+
export class AppComponent { }

0 commit comments

Comments
 (0)