example(router): add an example app for the new router

This commit is contained in:
vsavkin 2016-06-21 23:06:35 -07:00
parent 2eb234bc63
commit ef37d2ae0b
19 changed files with 2555 additions and 134 deletions

View File

@ -18,74 +18,5 @@ describe('routing inbox-app', () => {
waitForElement('.inbox-item-record'); waitForElement('.inbox-item-record');
expect(element.all(by.css('.inbox-item-record')).count()).toEqual(200); expect(element.all(by.css('.inbox-item-record')).count()).toEqual(200);
}); });
it('should build a link which points to the detail page', () => {
browser.get(URL);
waitForElement('#item-15');
expect(element(by.css('#item-15')).getAttribute('href')).toMatch(/#\/detail\/15$/);
element(by.css('#item-15')).click();
waitForElement('#record-id');
expect(browser.getCurrentUrl()).toMatch(/\/detail\/15$/);
});
}); });
describe('drafts view', () => {
var URL = 'all/playground/src/routing/#/drafts';
it('should navigate to the drafts view when the drafts link is clicked', () => {
browser.get(URL);
waitForElement('.inbox-item-record');
element(by.linkText('Drafts')).click();
waitForElement('.page-title');
expect(element(by.css('.page-title')).getText()).toEqual('Drafts');
});
it('should navigate to email details', () => {
browser.get(URL);
element(by.linkText('Drafts')).click();
waitForElement('.inbox-item-record');
expect(element.all(by.css('.inbox-item-record')).count()).toEqual(2);
expect(element(by.css('#item-201')).getAttribute('href')).toMatch(/#\/detail\/201$/);
element(by.css('#item-201')).click();
waitForElement('#record-id');
expect(browser.getCurrentUrl()).toMatch(/\/detail\/201$/);
});
});
describe('detail view', () => {
var URL = 'all/playground/src/routing/';
it('should navigate to the detail view when an email is clicked', () => {
browser.get(URL);
waitForElement('#item-10');
element(by.css('#item-10')).click();
waitForElement('#record-id');
var recordId = element(by.css("#record-id"));
browser.wait(protractor.until.elementTextIs(recordId, "ID: 10"), 5000);
expect(recordId.getText()).toEqual('ID: 10');
});
it('should navigate back to the email inbox page when the back button is clicked', () => {
browser.get(URL);
waitForElement('#item-10');
element(by.css('#item-10')).click();
waitForElement('.back-button');
element(by.css('.back-button')).click();
expect(browser.getCurrentUrl()).toMatch(/\/$/);
});
it('should navigate back to index and sort the page items based on the provided querystring param',
() => {
browser.get(URL);
waitForElement('#item-10');
element(by.css('#item-10')).click();
waitForElement('.sort-button');
element(by.css('.sort-button')).click();
expect(browser.getCurrentUrl()).toMatch(/\/#\?sort=date$/);
waitForElement('.inbox-item-record');
expect(element(by.css(".inbox-item-record > a")).getAttribute("id")).toEqual("item-137");
});
})
}); });

View File

@ -0,0 +1,3 @@
library playground.e2e_test.routing.routing_spec;
main() {}

View File

@ -0,0 +1,91 @@
import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
function waitForElement(selector: any /** TODO #9100 */) {
var EC = (<any>protractor).ExpectedConditions;
// Waits for the element with id 'abc' to be present on the dom.
browser.wait(EC.presenceOf($(selector)), 20000);
}
describe('deprecated routing inbox-app', () => {
afterEach(verifyNoBrowserErrors);
describe('index view', () => {
var URL = 'all/playground/src/routing_deprecated/';
it('should list out the current collection of items', () => {
browser.get(URL);
waitForElement('.inbox-item-record');
expect(element.all(by.css('.inbox-item-record')).count()).toEqual(200);
});
it('should build a link which points to the detail page', () => {
browser.get(URL);
waitForElement('#item-15');
expect(element(by.css('#item-15')).getAttribute('href')).toMatch(/#\/detail\/15$/);
element(by.css('#item-15')).click();
waitForElement('#record-id');
expect(browser.getCurrentUrl()).toMatch(/\/detail\/15$/);
});
});
describe('drafts view', () => {
var URL = 'all/playground/src/routing_deprecated/#/drafts';
it('should navigate to the drafts view when the drafts link is clicked', () => {
browser.get(URL);
waitForElement('.inbox-item-record');
element(by.linkText('Drafts')).click();
waitForElement('.page-title');
expect(element(by.css('.page-title')).getText()).toEqual('Drafts');
});
it('should navigate to email details', () => {
browser.get(URL);
element(by.linkText('Drafts')).click();
waitForElement('.inbox-item-record');
expect(element.all(by.css('.inbox-item-record')).count()).toEqual(2);
expect(element(by.css('#item-201')).getAttribute('href')).toMatch(/#\/detail\/201$/);
element(by.css('#item-201')).click();
waitForElement('#record-id');
expect(browser.getCurrentUrl()).toMatch(/\/detail\/201$/);
});
});
describe('detail view', () => {
var URL = 'all/playground/src/routing_deprecated/';
it('should navigate to the detail view when an email is clicked', () => {
browser.get(URL);
waitForElement('#item-10');
element(by.css('#item-10')).click();
waitForElement('#record-id');
var recordId = element(by.css("#record-id"));
browser.wait(protractor.until.elementTextIs(recordId, "ID: 10"), 5000);
expect(recordId.getText()).toEqual('ID: 10');
});
it('should navigate back to the email inbox page when the back button is clicked', () => {
browser.get(URL);
waitForElement('#item-10');
element(by.css('#item-10')).click();
waitForElement('.back-button');
element(by.css('.back-button')).click();
expect(browser.getCurrentUrl()).toMatch(/\/$/);
});
it('should navigate back to index and sort the page items based on the provided querystring param',
() => {
browser.get(URL);
waitForElement('#item-10');
element(by.css('#item-10')).click();
waitForElement('.sort-button');
element(by.css('.sort-button')).click();
expect(browser.getCurrentUrl()).toMatch(/\/#\?sort=date$/);
waitForElement('.inbox-item-record');
expect(element(by.css(".inbox-item-record > a")).getAttribute("id")).toEqual("item-137");
});
})
});

View File

@ -26,6 +26,7 @@ declare var System: any;
'@angular/http': '/packages-dist/http/bundles/http.umd.js', '@angular/http': '/packages-dist/http/bundles/http.umd.js',
'@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js', '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js',
'@angular/router-deprecated': '/packages-dist/router-deprecated/bundles/router-deprecated.umd.js', '@angular/router-deprecated': '/packages-dist/router-deprecated/bundles/router-deprecated.umd.js',
'@angular/router': '/packages-dist/router/bundles/router.umd.js',
'@angular/core/src/facade': '/all/@angular/core/src/facade', '@angular/core/src/facade': '/all/@angular/core/src/facade',
'rxjs': location.pathname.replace(/\w+\.html$/i, '') + 'rxjs' 'rxjs': location.pathname.replace(/\w+\.html$/i, '') + 'rxjs'
}, },

View File

@ -4,7 +4,7 @@
<ol class="inbox-list"> <ol class="inbox-list">
<li *ngFor="let item of items" class="inbox-item-record"> <li *ngFor="let item of items" class="inbox-item-record">
<a id="item-{{ item.id }}" <a id="item-{{ item.id }}"
[routerLink]="['/DetailPage', {'id':item.id}]"> [routerLink]="['/detail', item.id]">
{{ item.subject }}</a> {{ item.subject }}</a>
</li> </li>
</ol> </ol>

View File

@ -1,5 +1,5 @@
<inbox-side-menu class="inbox-aside"> <inbox-side-menu class="inbox-aside">
<a [routerLink]="['/Inbox']" class="link" [class.active]="inboxPageActive()">Inbox</a> <a [routerLink]="['/inbox']" class="link" routerLinkActive="active">Inbox</a>
<a [routerLink]="['/Drafts']" class="link" [class.active]="draftsPageActive()">Drafts</a> <a [routerLink]="['/drafts']" class="link" routerLinkActive="active">Drafts</a>
</inbox-side-menu> </inbox-side-menu>
<router-outlet></router-outlet> <router-outlet></router-outlet>

View File

@ -1,18 +1,11 @@
import {Component, Injectable} from '@angular/core'; import {Component, Injectable} from '@angular/core';
import { import {ROUTER_DIRECTIVES, ActivatedRoute, Router} from '@angular/router';
RouterLink,
RouteConfig,
Router,
Route,
RouterOutlet,
RouteParams
} from '@angular/router-deprecated';
import * as db from './data'; import * as db from './data';
import {Location} from '@angular/common'; import {Location} from '@angular/common';
import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async'; import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async';
import {isPresent, DateWrapper} from '@angular/core/src/facade/lang'; import {isPresent, DateWrapper} from '@angular/core/src/facade/lang';
class InboxRecord { export class InboxRecord {
id: string = ''; id: string = '';
subject: string = ''; subject: string = '';
content: string = ''; content: string = '';
@ -57,7 +50,7 @@ class InboxRecord {
} }
@Injectable() @Injectable()
class DbService { export class DbService {
getData(): Promise<any[]> { getData(): Promise<any[]> {
var p = new PromiseCompleter<any[]>(); var p = new PromiseCompleter<any[]>();
p.resolve(db.data); p.resolve(db.data);
@ -89,48 +82,51 @@ class DbService {
} }
@Component( @Component(
{selector: 'inbox-detail', directives: [RouterLink], templateUrl: 'app/inbox-detail.html'}) {selector: 'inbox-detail', directives: ROUTER_DIRECTIVES, templateUrl: 'app/inbox-detail.html'})
class InboxDetailCmp { export class InboxDetailCmp {
record: InboxRecord = new InboxRecord(); private record: InboxRecord = new InboxRecord();
ready: boolean = false; private ready: boolean = false;
constructor(db: DbService, params: RouteParams) { constructor(db: DbService, route: ActivatedRoute) {
var id = params.get('id'); route.params.forEach(p => {
PromiseWrapper.then(db.email(id), (data) => { this.record.setData(data); }); PromiseWrapper.then(db.email(p['id']), (data) => { this.record.setData(data); });
});
} }
} }
@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: [RouterLink]}) @Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: ROUTER_DIRECTIVES})
class InboxCmp { export class InboxCmp {
items: InboxRecord[] = []; private items: InboxRecord[] = [];
ready: boolean = false; private ready: boolean = false;
constructor(public router: Router, db: DbService, params: RouteParams) { constructor(public router: Router, db: DbService, route: ActivatedRoute) {
var sortType = params.get('sort'); route.params.forEach(p => {
var sortEmailsByDate = isPresent(sortType) && sortType == "date"; const sortType = p['sort'];
const sortEmailsByDate = isPresent(sortType) && sortType == "date";
PromiseWrapper.then(db.emails(), (emails: any[]) => { PromiseWrapper.then(db.emails(), (emails: any[]) => {
this.ready = true; this.ready = true;
this.items = emails.map(data => new InboxRecord(data)); this.items = emails.map(data => new InboxRecord(data));
if (sortEmailsByDate) { if (sortEmailsByDate) {
this.items.sort((a: InboxRecord, b: InboxRecord) => this.items.sort((a: InboxRecord, b: InboxRecord) =>
DateWrapper.toMillis(DateWrapper.fromISOString(a.date)) < DateWrapper.toMillis(DateWrapper.fromISOString(a.date)) <
DateWrapper.toMillis(DateWrapper.fromISOString(b.date)) ? DateWrapper.toMillis(DateWrapper.fromISOString(b.date)) ?
-1 : -1 :
1); 1);
} }
});
}); });
} }
} }
@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: [RouterLink]}) @Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: ROUTER_DIRECTIVES})
class DraftsCmp { export class DraftsCmp {
items: InboxRecord[] = []; private items: InboxRecord[] = [];
ready: boolean = false; private ready: boolean = false;
constructor(public router: Router, db: DbService) { constructor(private router: Router, db: DbService) {
PromiseWrapper.then(db.drafts(), (drafts: any[]) => { PromiseWrapper.then(db.drafts(), (drafts: any[]) => {
this.ready = true; this.ready = true;
this.items = drafts.map(data => new InboxRecord(data)); this.items = drafts.map(data => new InboxRecord(data));
@ -138,24 +134,17 @@ class DraftsCmp {
} }
} }
export const ROUTER_CONFIG = [
{path: '', terminal: true, redirectTo: 'inbox'},
{path: 'inbox', component: InboxCmp},
{path: 'drafts', component: DraftsCmp},
{path: 'detail/:id', component: InboxDetailCmp}
];
@Component({ @Component({
selector: 'inbox-app', selector: 'inbox-app',
viewProviders: [DbService], viewProviders: [DbService],
templateUrl: 'app/inbox-app.html', templateUrl: 'app/inbox-app.html',
directives: [RouterOutlet, RouterLink] directives: ROUTER_DIRECTIVES
}) })
@RouteConfig([ export class InboxApp {}
new Route({path: '/', component: InboxCmp, name: 'Inbox'}),
new Route({path: '/drafts', component: DraftsCmp, name: 'Drafts'}),
new Route({path: '/detail/:id', component: InboxDetailCmp, name: 'DetailPage'})
])
export class InboxApp {
router: Router;
location: Location;
constructor(router: Router, location: Location) {
this.router = router;
this.location = location;
}
inboxPageActive() { return this.location.path() == ''; }
draftsPageActive() { return this.location.path() == '/drafts'; }
}

View File

@ -13,12 +13,12 @@
</p> </p>
<span class="btn medium primary"> <span class="btn medium primary">
<a [routerLink]="record.draft ? ['../Drafts'] : ['../Inbox']" class="back-button">Back</a> <a [routerLink]="record.draft ? ['/drafts'] : ['/inbox']" class="back-button">Back</a>
</span> </span>
<hr /> <hr />
<a [routerLink]="['../Inbox', { sort: 'date'} ]" class="sort-button"> <a [routerLink]="['/inbox', { sort: 'date'} ]" class="sort-button">
View Latest Messages View Latest Messages
</a> </a>
</div> </div>

View File

@ -4,7 +4,7 @@
<ol class="inbox-list"> <ol class="inbox-list">
<li *ngFor="let item of items" class="inbox-item-record"> <li *ngFor="let item of items" class="inbox-item-record">
<a id="item-{{ item.id }}" <a id="item-{{ item.id }}"
[routerLink]="['/DetailPage', {'id':item.id}]">{{ item.subject }}</a> [routerLink]="['/detail', item.id]">{{ item.subject }}</a>
</li> </li>
</ol> </ol>
</div> </div>

View File

@ -1,9 +1,8 @@
import {InboxApp} from './app/inbox-app'; import {InboxApp, ROUTER_CONFIG} from './app/inbox-app';
import {bootstrap} from '@angular/platform-browser-dynamic'; import {bootstrap} from '@angular/platform-browser-dynamic';
import {HashLocationStrategy, LocationStrategy} from '@angular/common'; import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; import {provideRouter} from '@angular/router';
export function main() { export function main() {
bootstrap(InboxApp, bootstrap(InboxApp, [provideRouter(ROUTER_CONFIG), {provide: LocationStrategy, useClass: HashLocationStrategy}]);
[ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}]);
} }

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,11 @@
<div>
<h2 class="page-title">Drafts</h2>
<ol class="inbox-list">
<li *ngFor="let item of items" class="inbox-item-record">
<a id="item-{{ item.id }}"
[routerLink]="['/DetailPage', {'id':item.id}]">
{{ item.subject }}</a>
</li>
</ol>
</div>

View File

@ -0,0 +1,5 @@
<inbox-side-menu class="inbox-aside">
<a [routerLink]="['/Inbox']" class="link" [class.active]="inboxPageActive()">Inbox</a>
<a [routerLink]="['/Drafts']" class="link" [class.active]="draftsPageActive()">Drafts</a>
</inbox-side-menu>
<router-outlet></router-outlet>

View File

@ -0,0 +1,161 @@
import {Component, Injectable} from '@angular/core';
import {
RouterLink,
RouteConfig,
Router,
Route,
RouterOutlet,
RouteParams
} from '@angular/router-deprecated';
import * as db from './data';
import {Location} from '@angular/common';
import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async';
import {isPresent, DateWrapper} from '@angular/core/src/facade/lang';
class InboxRecord {
id: string = '';
subject: string = '';
content: string = '';
email: string = '';
firstName: string = '';
lastName: string = '';
date: string;
draft: boolean = false;
constructor(data: {
id: string,
subject: string,
content: string,
email: string,
firstName: string,
lastName: string,
date: string, draft?: boolean
} = null) {
if (isPresent(data)) {
this.setData(data);
}
}
setData(record: {
id: string,
subject: string,
content: string,
email: string,
firstName: string,
lastName: string,
date: string, draft?: boolean
}) {
this.id = record['id'];
this.subject = record['subject'];
this.content = record['content'];
this.email = record['email'];
this.firstName = (record as any /** TODO #9100 */)['first-name'];
this.lastName = (record as any /** TODO #9100 */)['last-name'];
this.date = record['date'];
this.draft = record['draft'] == true;
}
}
@Injectable()
class DbService {
getData(): Promise<any[]> {
var p = new PromiseCompleter<any[]>();
p.resolve(db.data);
return p.promise;
}
drafts(): Promise<any[]> {
return this.getData().then(
(data: any[]): any[] =>
data.filter(record => isPresent(record['draft']) && record['draft'] == true));
}
emails(): Promise<any[]> {
return this.getData().then((data: any[]): any[] =>
data.filter(record => !isPresent(record['draft'])));
}
email(id: any /** TODO #9100 */): Promise<any> {
return PromiseWrapper.then(this.getData(), (data: any[]) => {
for (var i = 0; i < data.length; i++) {
var entry = data[i];
if (entry['id'] == id) {
return entry;
}
}
return null;
});
}
}
@Component(
{selector: 'inbox-detail', directives: [RouterLink], templateUrl: 'app/inbox-detail.html'})
class InboxDetailCmp {
record: InboxRecord = new InboxRecord();
ready: boolean = false;
constructor(db: DbService, params: RouteParams) {
var id = params.get('id');
PromiseWrapper.then(db.email(id), (data) => { this.record.setData(data); });
}
}
@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: [RouterLink]})
class InboxCmp {
items: InboxRecord[] = [];
ready: boolean = false;
constructor(public router: Router, db: DbService, params: RouteParams) {
var sortType = params.get('sort');
var sortEmailsByDate = isPresent(sortType) && sortType == "date";
PromiseWrapper.then(db.emails(), (emails: any[]) => {
this.ready = true;
this.items = emails.map(data => new InboxRecord(data));
if (sortEmailsByDate) {
this.items.sort((a: InboxRecord, b: InboxRecord) =>
DateWrapper.toMillis(DateWrapper.fromISOString(a.date)) <
DateWrapper.toMillis(DateWrapper.fromISOString(b.date)) ?
-1 :
1);
}
});
}
}
@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: [RouterLink]})
class DraftsCmp {
items: InboxRecord[] = [];
ready: boolean = false;
constructor(public router: Router, db: DbService) {
PromiseWrapper.then(db.drafts(), (drafts: any[]) => {
this.ready = true;
this.items = drafts.map(data => new InboxRecord(data));
});
}
}
@Component({
selector: 'inbox-app',
viewProviders: [DbService],
templateUrl: 'app/inbox-app.html',
directives: [RouterOutlet, RouterLink]
})
@RouteConfig([
new Route({path: '/', component: InboxCmp, name: 'Inbox'}),
new Route({path: '/drafts', component: DraftsCmp, name: 'Drafts'}),
new Route({path: '/detail/:id', component: InboxDetailCmp, name: 'DetailPage'})
])
export class InboxApp {
router: Router;
location: Location;
constructor(router: Router, location: Location) {
this.router = router;
this.location = location;
}
inboxPageActive() { return this.location.path() == ''; }
draftsPageActive() { return this.location.path() == '/drafts'; }
}

View File

@ -0,0 +1,24 @@
<div>
<h2 class="page-title">{{ record.subject }}</h2>
<ul>
<li id="record-id">ID: {{ record.id }}</li>
<li id="record-name">Name: {{ record.firstName }} {{ record.lastName }}</li>
<li id="record-email">Email: {{ record.email }}</li>
<li id="record-date">Date: {{ record.date }}</li>
</ul>
<p>
{{ record.content }}
</p>
<span class="btn medium primary">
<a [routerLink]="record.draft ? ['../Drafts'] : ['../Inbox']" class="back-button">Back</a>
</span>
<hr />
<a [routerLink]="['../Inbox', { sort: 'date'} ]" class="sort-button">
View Latest Messages
</a>
</div>

View File

@ -0,0 +1,10 @@
<div>
<h2 class="page-title">Inbox</h2>
<ol class="inbox-list">
<li *ngFor="let item of items" class="inbox-item-record">
<a id="item-{{ item.id }}"
[routerLink]="['/DetailPage', {'id':item.id}]">{{ item.subject }}</a>
</li>
</ol>
</div>

View File

@ -0,0 +1,57 @@
body {
background:#eee;
color:black;
}
.inbox-list,
.inbox-list li {
list-style:none;
padding:0;
margin:0;
}
.inbox-list a {
padding:5px;
display:block;
}
inbox, drafts, inbox-side-menu {
display:block;
}
inbox-side-menu .link {
display:block;
text-align:center;
padding:1em;
}
inbox-side-menu .link.active {
background:white;
}
inbox-side-menu .link:hover {
background:#eee;
}
inbox-side-menu {
position:fixed;
left:0;
top:0;
bottom:0;
width:200px;
background:#ddd;
}
inbox-side-menu a {
display: block;
}
inbox, drafts, inbox-detail {
padding:1em;
margin-left:200px;
}
inbox-detail {
display:block;
margin-left:200px;
}

View File

@ -0,0 +1,14 @@
<!doctype html>
<html>
<title>Routing Example</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/css/gumby.css" />
<link rel="stylesheet" type="text/css" href="./css/app.css" />
<base href="/all/playground/src/routing_deprecated/">
<body>
<inbox-app>
Loading...
</inbox-app>
<script src="../bootstrap.js"></script>
</body>
</html>

View File

@ -0,0 +1,9 @@
import {InboxApp} from './app/inbox-app';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
export function main() {
bootstrap(InboxApp,
[ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}]);
}