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

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,48 +82,51 @@ 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;
-      this.items = emails.map(data => new InboxRecord(data));
+      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);
-      }
+        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;
+@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}]);
 }