docs(testing): update testing to use toh-5

public/docs/_examples/testing/ts/app/app.component.css

@@ -0,0 +1,31 @@
+/* #docplaster */
+/* #docregion css */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.router-link-active {
+  color: #039be5;
+}
+/* #enddocregion css */

public/docs/_examples/testing/ts/app/app.component.ts

@@ -0,0 +1,59 @@
+// #docplaster
+// #docregion
+import { Component } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+
+import { HeroService } from './hero.service';
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+// #docregion hero-detail-import
+import { HeroDetailComponent } from './hero-detail.component';
+// #enddocregion hero-detail-import
+
+@Component({
+  selector: 'my-app',
+// #docregion template
+  template: `
+    <h1>{{title}}</h1>
+    <nav>
+      <a [routerLink]="['Dashboard']">Dashboard</a>
+      <a [routerLink]="['Heroes']">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+// #enddocregion template
+// #docregion style-urls
+  styleUrls: ['app/app.component.css'],
+// #enddocregion style-urls
+  directives: [ROUTER_DIRECTIVES],
+  providers: [
+    ROUTER_PROVIDERS,
+    HeroService
+  ]
+})
+@RouteConfig([
+// #docregion dashboard-route
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: DashboardComponent,
+    useAsDefault: true
+  },
+// #enddocregion dashboard-route
+// #docregion hero-detail-route
+  {
+    path: '/detail/:id',
+    name: 'HeroDetail',
+    component: HeroDetailComponent
+  },
+// #enddocregion hero-detail-route
+  {
+    path: '/heroes',
+    name: 'Heroes',
+    component: HeroesComponent
+  }
+])
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
+// #enddocregion

public/docs/_examples/testing/ts/app/dashboard.component.css

@@ -0,0 +1,63 @@
+/* #docplaster */
+/* #docregion */
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+	padding: 20px;
+	text-align: center;
+	color: #eee;
+	max-height: 120px;
+	min-width: 120px;
+	background-color: #607D8B;
+	border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+	.module {
+	  font-size: 10px;
+	  max-height: 75px; }
+}
+@media (max-width: 1024px) {
+	.grid {
+	  margin: 0;
+	}
+	.module {
+	  min-width: 60px;
+	}
+}
+/* #enddocregion */

public/docs/_examples/testing/ts/app/dashboard.component.html

@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+<!-- #docregion click -->
+  <div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+<!-- #enddocregion click -->
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>

public/docs/_examples/testing/ts/app/dashboard.component.ts

@@ -0,0 +1,44 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+// #docregion import-router
+import { Router } from 'angular2/router';
+// #enddocregion import-router
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'my-dashboard',
+  // #docregion template-url
+  templateUrl: 'app/dashboard.component.html',
+  // #enddocregion template-url
+  // #docregion css
+  styleUrls: ['app/dashboard.component.css']
+  // #enddocregion css
+})
+// #docregion component
+export class DashboardComponent implements OnInit {
+
+  heroes: Hero[] = [];
+
+// #docregion ctor
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) {
+  }
+// #enddocregion ctor
+
+  ngOnInit() {
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes.slice(1,5));
+  }
+
+  // #docregion goto-detail
+  gotoDetail(hero: Hero) {
+    let link = ['HeroDetail', { id: hero.id }];
+    this._router.navigate(link);
+  }
+  // #enddocregion goto-detail
+}
+// #enddocregion

public/docs/_examples/testing/ts/app/hero-detail.component.css

@@ -1,3 +1,30 @@
-.hero-detail div {padding:0.2em;}
-.hero-detail div input {position: absolute; left:9em; }
-.hero-id {position: absolute; left:7.5em; }
+/* #docregion */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer; cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc; 
+  cursor: auto;
+}

public/docs/_examples/testing/ts/app/hero-detail.component.html

@@ -1,24 +1,14 @@
+<!-- #docplaster -->
 <!-- #docregion -->
-<div class="hero-detail">
-	<!-- #docregion pipe-usage -->
-	<h2>{{hero.name  | initCaps}} is {{userName}}'s current super hero!</h2>
-	<!-- #enddocregion pipe-usage -->
-	<div>
-		<button (click)="onDelete()" [disabled]="!hero">Delete</button>
-		<button (click)="onUpdate()" [disabled]="!hero">Update</button>
-	</div>
-	<div>
-		<label>Id: </label><span class="hero-id">{{hero.id}}</span></div>
-	<div>
-		<label>Name: </label>
-		<input [(ngModel)]="hero.name" placeholder="name">
-	</div>
-		<div>
-		<label>Power: </label>
-		<input [(ngModel)]="hero.power" placeholder="super power">
-	</div>
-		<div>
-		<label>Alter Ego: </label>
-		<input [(ngModel)]="hero.alterEgo" placeholder="alter ego">
-	</div>
-</div>
+<div *ngIf="hero">
+  <h2>{{hero.name}} details!</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="hero.name" placeholder="name" />
+  </div>
+  <!-- #docregion back-button -->
+  <button (click)="goBack()">Back</button>
+  <!-- #enddocregion back-button -->
+</div>