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

modules/playground/e2e_test/routing/routing_spec.ts

@@ -18,74 +18,5 @@ describe('routing inbox-app', () => {
       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/#/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");
-       });
-  })
-});

modules/playground/e2e_test/routing_deprecated/routing_deprecated_spec.dart

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

modules/playground/e2e_test/routing_deprecated/routing_deprecated_spec.ts

@@ -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");
+       });
+  })
+});

modules/playground/src/bootstrap.ts

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

modules/playground/src/routing/app/drafts.html

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

modules/playground/src/routing/app/inbox-app.html

@@ -1,5 +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>
+  <a [routerLink]="['/inbox']" class="link" routerLinkActive="active">Inbox</a>
+  <a [routerLink]="['/drafts']" class="link" routerLinkActive="active">Drafts</a>
 </inbox-side-menu>
 <router-outlet></router-outlet>

modules/playground/src/routing/app/inbox-app.ts

@@ -1,18 +1,11 @@
 import {Component, Injectable} from '@angular/core';
-import {
-  RouterLink,
-  RouteConfig,
-  Router,
-  Route,
-  RouterOutlet,
-  RouteParams
-} from '@angular/router-deprecated';
+import {ROUTER_DIRECTIVES, ActivatedRoute, Router} from '@angular/router';
 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 {
+export class InboxRecord {
   id: string = '';
   subject: string = '';
   content: string = '';
@@ -57,7 +50,7 @@ class InboxRecord {
 }
 
 @Injectable()
-class DbService {
+export class DbService {
   getData(): Promise<any[]> {
     var p = new PromiseCompleter<any[]>();
     p.resolve(db.data);
@@ -89,25 +82,27 @@ class DbService {
 }
 
 @Component(
-    {selector: 'inbox-detail', directives: [RouterLink], templateUrl: 'app/inbox-detail.html'})
-class InboxDetailCmp {
-  record: InboxRecord = new InboxRecord();
-  ready: boolean = false;
+    {selector: 'inbox-detail', directives: ROUTER_DIRECTIVES, templateUrl: 'app/inbox-detail.html'})
+export class InboxDetailCmp {
+  private record: InboxRecord = new InboxRecord();
+  private ready: boolean = false;
 
-  constructor(db: DbService, params: RouteParams) {
-    var id = params.get('id');
-    PromiseWrapper.then(db.email(id), (data) => { this.record.setData(data); });
+  constructor(db: DbService, route: ActivatedRoute) {
+    route.params.forEach(p => {
+      PromiseWrapper.then(db.email(p['id']), (data) => { this.record.setData(data); });
+    });
   }
 }
 
-@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: [RouterLink]})
-class InboxCmp {
-  items: InboxRecord[] = [];
-  ready: boolean = false;
+@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: ROUTER_DIRECTIVES})
+export class InboxCmp {
+  private items: InboxRecord[] = [];
+  private ready: boolean = false;
 
-  constructor(public router: Router, db: DbService, params: RouteParams) {
-    var sortType = params.get('sort');
-    var sortEmailsByDate = isPresent(sortType) && sortType == "date";
+  constructor(public router: Router, db: DbService, route: ActivatedRoute) {
+    route.params.forEach(p => {
+      const sortType = p['sort'];
+      const sortEmailsByDate = isPresent(sortType) && sortType == "date";
 
       PromiseWrapper.then(db.emails(), (emails: any[]) => {
         this.ready = true;
@@ -121,16 +116,17 @@ class InboxCmp {
               1);
         }
       });
+    });
   }
 }
 
 
-@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: [RouterLink]})
-class DraftsCmp {
-  items: InboxRecord[] = [];
-  ready: boolean = false;
+@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: ROUTER_DIRECTIVES})
+export class DraftsCmp {
+  private items: InboxRecord[] = [];
+  private ready: boolean = false;
 
-  constructor(public router: Router, db: DbService) {
+  constructor(private router: Router, db: DbService) {
     PromiseWrapper.then(db.drafts(), (drafts: any[]) => {
       this.ready = true;
       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({
   selector: 'inbox-app',
   viewProviders: [DbService],
   templateUrl: 'app/inbox-app.html',
-  directives: [RouterOutlet, RouterLink]
+  directives: ROUTER_DIRECTIVES
 })
-@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'; }
-}
+export class InboxApp {}

modules/playground/src/routing/app/inbox-detail.html

@@ -13,12 +13,12 @@
   </p>
 
   <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>
 
   <hr />
 
-  <a [routerLink]="['../Inbox', { sort: 'date'} ]" class="sort-button">
+  <a [routerLink]="['/inbox', { sort: 'date'} ]" class="sort-button">
     View Latest Messages
   </a>
 </div>

modules/playground/src/routing/app/inbox.html

@@ -4,7 +4,7 @@
   <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>
+         [routerLink]="['/detail', item.id]">{{ item.subject }}</a>
     </li>
   </ol>
 </div>

modules/playground/src/routing/index.ts

@@ -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 {HashLocationStrategy, LocationStrategy} from '@angular/common';
-import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
+import {provideRouter} from '@angular/router';
 
 export function main() {
-  bootstrap(InboxApp,
-            [ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}]);
+  bootstrap(InboxApp, [provideRouter(ROUTER_CONFIG), {provide: LocationStrategy, useClass: HashLocationStrategy}]);
 }

modules/playground/src/routing_deprecated/app/drafts.html

@@ -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>

modules/playground/src/routing_deprecated/app/inbox-app.html

@@ -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>

modules/playground/src/routing_deprecated/app/inbox-app.ts

@@ -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'; }
+}

modules/playground/src/routing_deprecated/app/inbox-detail.html

@@ -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>

modules/playground/src/routing_deprecated/app/inbox.html

@@ -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>

modules/playground/src/routing_deprecated/css/app.css

@@ -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;
+}

modules/playground/src/routing_deprecated/index.html

@@ -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>

modules/playground/src/routing_deprecated/index.ts

@@ -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}]);
+}