feat(router): adds an example app using the new router

modules/playground/pubspec.yaml

@@ -30,6 +30,7 @@ transformers:
         - web/src/person_management/index.dart
         - web/src/relative_assets/index.dart
         - web/src/routing/index.dart
+        - web/src/alt_routing/index.dart
         - web/src/sourcemap/index.dart
         - web/src/svg/index.dart
         - web/src/template_driven_forms/index.dart

modules/playground/src/alt_routing/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/alt_routing/drafts.html

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

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

@@ -0,0 +1,5 @@
+<inbox-side-menu class="inbox-aside">
+  <a [routerLink]="['/']" 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/alt_routing/inbox-app.ts

@@ -0,0 +1,165 @@
+import {Component, Injectable} from 'angular2/core';
+import {
+  Routes,
+  Route,
+  Router,
+  ROUTER_DIRECTIVES,
+  ROUTER_PROVIDERS,
+  OnActivate,
+  RouteSegment,
+  Tree
+} from 'angular2/alt_router';
+import * as db from './data';
+import {Location} from 'angular2/platform/common';
+import {PromiseWrapper} from 'angular2/src/facade/async';
+import {isPresent, DateWrapper} from 'angular2/src/facade/lang';
+import {PromiseCompleter} from 'angular2/src/facade/promise';
+
+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['first-name'];
+    this.lastName = record['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): 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: ROUTER_DIRECTIVES, templateUrl: 'inbox-detail.html'})
+class InboxDetailCmp implements OnActivate {
+  record: InboxRecord = new InboxRecord();
+  ready: boolean = false;
+
+  constructor(private _db: DbService) {}
+
+  routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: Tree<RouteSegment>,
+                   prevTree?: Tree<RouteSegment>): void {
+    let id = curr.getParam("id");
+    this._db.email(id).then(data => this.record.setData(data));
+  }
+}
+
+@Component({selector: 'inbox', templateUrl: 'inbox.html', directives: ROUTER_DIRECTIVES})
+class InboxCmp implements OnActivate {
+  items: InboxRecord[] = [];
+  ready: boolean = false;
+
+  constructor(private _db: DbService) {}
+
+  routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: Tree<RouteSegment>,
+                   prevTree?: Tree<RouteSegment>): void {
+    var sortType = curr.getParam('sort');
+    var sortEmailsByDate = isPresent(sortType) && sortType == "date";
+
+    PromiseWrapper.then(this._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: 'drafts.html', directives: ROUTER_DIRECTIVES})
+class DraftsCmp {
+  items: InboxRecord[] = [];
+  ready: boolean = false;
+
+  constructor(db: DbService) {
+    PromiseWrapper.then(db.drafts(), (drafts: any[]) => {
+      this.ready = true;
+      this.items = drafts.map(data => new InboxRecord(data));
+    });
+  }
+}
+
+@Component({
+  selector: 'inbox-app',
+  providers: [DbService, ROUTER_PROVIDERS],
+  templateUrl: 'inbox-app.html',
+  directives: ROUTER_DIRECTIVES,
+})
+@Routes([
+  new Route({path: '/', component: InboxCmp}),
+  new Route({path: '/drafts', component: DraftsCmp}),
+  new Route({path: '/detail/:id', component: InboxDetailCmp})
+])
+export class InboxApp {
+  constructor(private _location: Location) {}
+  inboxPageActive() { return this._location.path() == ''; }
+  draftsPageActive() { return this._location.path() == '/drafts'; }
+}

modules/playground/src/alt_routing/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'] : ['/']" class="back-button">Back</a>
+  </span>
+
+  <hr />
+
+  <a [routerLink]="['/', { sort: 'date'} ]" class="sort-button">
+    View Latest Messages
+  </a>
+</div>

modules/playground/src/alt_routing/inbox.html

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

modules/playground/src/alt_routing/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="/playground/src/alt_routing/">
+<body>
+  <inbox-app>
+    Loading...
+  </inbox-app>
+
+  $SCRIPTS$
+</body>
+</html>

modules/playground/src/alt_routing/index.ts

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

scripts/ci/build_dart_ddc.sh

@@ -64,6 +64,7 @@ $DART_SDK/bin/dart $DDC_DIR/bin/dartdevc.dart \
   src/person_management/index.dart \
   src/relative_assets/index.dart \
   src/routing/index.dart \
+  src/alt_routing/index.dart \
   src/sourcemap/index.dart \
   src/svg/index.dart \
   src/template_driven_forms/index.dart \

tools/broccoli/trees/browser_tree.ts

@@ -51,6 +51,7 @@ const kServedPaths = [
   'playground/src/key_events',
   'playground/src/relative_assets',
   'playground/src/routing',
+  'playground/src/alt_routing',
   'playground/src/sourcemap',
   'playground/src/svg',
   'playground/src/todo',