docs(style-guide): add testing harness

public/docs/_examples/style-guide/ts/.gitignore

@@ -1 +1,2 @@
 *.js
+!systemjs.custom.js

public/docs/_examples/style-guide/ts/01-01/app/app.component.ts

@@ -7,11 +7,12 @@ import { HeroesComponent } from './heroes/heroes.component';
 import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'toh-app',
   template: `
       <toh-heroes></toh-heroes>
     `,
-  styleUrls: ['app/app.component.css'],
+  styleUrls: ['app.component.css'],
   directives: [HeroesComponent],
   providers: [HeroService]
 })

public/docs/_examples/style-guide/ts/02-07/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+import { HeroComponent } from './heroes/hero.component';
+import { UsersComponent } from './users/users.component';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <toh-hero></toh-hero>
+    <admin-users></admin-users>
+  `,
+  directives: [HeroComponent, UsersComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts

@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  template: '<div>hero component</div>',
+  // #docregion example
   selector: 'toh-hero'
 })
 export class HeroComponent {}

public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts

@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  template: '<div>users component</div>',
+  // #docregion example
   selector: 'admin-users'
 })
 export class UsersComponent {}

public/docs/_examples/style-guide/ts/02-08/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ValidateDirective } from './shared/validate.directive';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidate>',
+  directives: [ValidateDirective]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/03-01/app/app.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ExceptionService } from './shared/exception.service';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>The expected error is {{errorCode}}</div>',
+  providers: [ExceptionService]
+})
+export class AppComponent implements OnInit {
+  errorCode: number;
+
+  constructor(private exceptionService: ExceptionService) { }
+
+  ngOnInit() {
+    this.errorCode = this.exceptionService.getException();
+  }
+}

public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
 
@@ -5,5 +6,9 @@ import { Injectable } from '@angular/core';
 // #docregion example
 export class ExceptionService {
   constructor() { }
+  // #enddocregion example
+  // testing harness
+  getException() { return 42; }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-02/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { HEROES_URL, VILLAIN_URL } from './shared/data.service';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <div>Heroes url: {{heroesUrl}}</div>
+    <div>Villains url: {{villainsUrl}}</div>
+  `,
+})
+export class AppComponent {
+  heroesUrl = HEROES_URL;
+  villainsUrl = VILLAIN_URL;
+}

public/docs/_examples/style-guide/ts/03-03/app/app.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroCollectorService } from './shared/hero-collector.service';
+import { Hero } from './shared/hero.model';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>Our hero is {{hero.name}} and {{hero.power}}</div>',
+  providers: [HeroCollectorService]
+})
+export class AppComponent implements OnInit {
+  hero: Hero;
+
+  constructor(private heroCollectorService: HeroCollectorService) { }
+
+  ngOnInit() {
+    this.hero = this.heroCollectorService.getHero();
+  }
+}

public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
@@ -9,5 +10,16 @@ export class HeroCollectorService {
   hero: Hero;
 
   constructor() { }
+  // #enddocregion example
+  // testing harness
+  getHero() {
+    this.hero = {
+      name: 'RubberMan',
+      power: 'He is so elastic'
+    };
+
+    return this.hero;
+  }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-04/app/app.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from './shared/toast/toast.service';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <button (click)="show()">Show toast</button>
+    <button (click)="hide()">Hide toast</button>
+  `,
+  providers: [ToastService]
+})
+export class AppComponent implements OnInit {
+  constructor(private toastService: ToastService) { }
+
+  hide() {
+    this.toastService.hide();
+  }
+
+  show() {
+    this.toastService.show();
+  }
+
+  ngOnInit() {
+    this.toastService.activate('Hello style-guide!');
+  }
+}

public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
@@ -21,5 +22,11 @@ export class ToastService {
   private log() {
     console.log(this.message);
   }
+  // #enddocregion example
+  // testing harness
+  activate(message: string) {
+    this.message = message;
+  }
+  // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts

@@ -19,7 +19,7 @@ export class HeroService {
   ) { }
 
   getHero(id: number) {
-    return this.http.get(`api/heroes/${id}`)
+    return this.http.get(`app/heroes/${id}`)
       .map((res: Response) => res.json().data);
   }
 

public/docs/_examples/style-guide/ts/03-05/app/app.component.html

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

public/docs/_examples/style-guide/ts/03-05/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './+heroes/shared/hero.service';
+import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { Hero } from './+heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/03-06/app/app.component.html

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

public/docs/_examples/style-guide/ts/03-06/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './+heroes/shared/hero.service';
+import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { Hero } from './+heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html

@@ -0,0 +1 @@
+<div>This is heroes component</div>

public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts

@@ -15,12 +15,13 @@ import {
 
 @Component({
   // #enddocregion example
+  moduleId: module.id,
   providers: [EntityService, ExceptionService, SpinnerService, ToastService],
   directives: [FilterTextComponent],
   pipes: [InitCapsPipe],
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'app/+heroes/heroes.component.html'
+  templateUrl: 'heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
   // #enddocregion example

public/docs/_examples/style-guide/ts/04-10/app/app.component.ts

@@ -6,8 +6,8 @@ import { HeroesComponent } from './+heroes/index';
 // #enddocregion example
 
 @Component({
-  selector: 'toh-app',
-  template: '<div>app</div>',
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
   directives: [HeroesComponent]
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/04-14/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroesComponent } from './heroes/heroes.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
+  directives: [HeroesComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html

@@ -2,7 +2,7 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="#hero of heroes">
+    <li *ngFor="let hero of heroes">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>

public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts

@@ -7,6 +7,7 @@ import { Logger } from '../shared/logger.service';
 // #enddocregion example
 
 @Component({
+  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html',
   styleUrls:  ['heroes.component.css'],

public/docs/_examples/style-guide/ts/05-02/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,10 +1,15 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  selector: 'tohHeroButton'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'tohHeroButton',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html

@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts

@@ -1,9 +1,14 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  selector: 'toh-hero-button'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'toh-hero-button',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-03/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,10 +1,15 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  selector: '[tohHeroButton]'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: '[tohHeroButton]',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html

@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts

@@ -1,9 +1,14 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  selector: 'toh-hero-button'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'toh-hero-button',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-04/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroesComponent } from './heroes/heroes.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
+  directives: [HeroesComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
 
@@ -5,6 +6,9 @@ import { Hero } from './shared/hero.model';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html',
   styleUrls:  ['heroes.component.css']

public/docs/_examples/style-guide/ts/05-12/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-button></toh-hero-button>',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-13/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-14/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ToastComponent } from './shared/toast/toast.component';
+
+@Component({
+  selector: 'sg-app',
+  template: `<my-toast></my-toast>`,
+  directives: [ToastComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-15/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { HeroListComponent } from './heroes/hero-list/hero-list.component';
+import { HeroService } from './heroes/shared';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>',
+  directives: [HeroListComponent],
+  providers: [HeroService]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts

@@ -1,3 +1,3 @@
 // #docregion
-export * from './hero.model.ts';
-export * from './hero.service.ts';
+export * from './hero.model';
+export * from './hero.service';

public/docs/_examples/style-guide/ts/05-16/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroComponent } from './heroes/hero.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-17/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroListComponent } from './heroes/hero-list/hero-list.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>',
+  directives: [HeroListComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
@@ -20,6 +21,13 @@ export class HeroListComponent {
   heroes: Hero[];
   totalPowers: number;
 
+  // #enddocregion example
+  // testing harness
+  constructor() {
+    this.heroes = [];
+  }
+
+  // #docregion example
   get avgPower() {
     return this.totalPowers / this.heroes.length;
   }

public/docs/_examples/style-guide/ts/06-01/app/app.component.html

@@ -1,2 +1,2 @@
 <!-- #docregion -->
-<div [tohHighlight]>Bombasta</div>
+<div tohHighlight>Bombasta</div>

public/docs/_examples/style-guide/ts/06-01/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HighlightDirective } from './shared/highlight.directive';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HighlightDirective]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/06-03/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ValidatorDirective } from './shared/validate.directive';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidator>',
+  directives: [ValidatorDirective]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/07-01/app/app.component.html

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>

public/docs/_examples/style-guide/ts/07-01/app/app.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './heroes/shared/hero.service';
+import { Hero } from './heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/07-04/app/app.component.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HeroArena, HeroService, Hero } from './heroes/shared';
+
+@Component({
+  selector: 'toh-app',
+  template: '<pre>{{heroes | json}}</pre>',
+  providers: [HeroArena, HeroService]
+})
+export class AppComponent {
+  heroes: Hero[] = [];
+
+  constructor(private heroArena: HeroArena) { }
+
+  ngOnInit() {
+    this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts

@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
@@ -10,5 +11,11 @@ export class HeroArena {
   constructor(
     private heroService: HeroService,
     private http: Http) {}
+    // #enddocregion example
+    // test harness
+    getParticipants() {
+      return this.heroService.getHeroes();
+    }
+    // #docregion example
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts

@@ -1,3 +1,4 @@
 // #docregion
 export * from './hero.model';
 export * from './hero.service';
+export * from './hero-arena.service';

public/docs/_examples/style-guide/ts/09-01/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-button></toh-hero-button>',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }

public/docs/_examples/style-guide/ts/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

public/docs/_examples/style-guide/ts/app/app.component.ts

@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+
+import { AppComponent as S0101 } from '../01-01/app/app.component';
+import { AppComponent as S0207 } from '../02-07/app/app.component';
+import { AppComponent as S0208 } from '../02-08/app/app.component';
+import { AppComponent as S0301 } from '../03-01/app/app.component';
+import { AppComponent as S0302 } from '../03-02/app/app.component';
+import { AppComponent as S0303 } from '../03-03/app/app.component';
+import { AppComponent as S0304 } from '../03-04/app/app.component';
+import { AppComponent as S0305 } from '../03-05/app/app.component';
+import { AppComponent as S0306 } from '../03-06/app/app.component';
+import { AppComponent as S0410 } from '../04-10/app/app.component';
+import { AppComponent as S0414 } from '../04-14/app/app.component';
+import { AppComponent as S0502 } from '../05-02/app/app.component';
+import { AppComponent as S0503 } from '../05-03/app/app.component';
+import { AppComponent as S0504 } from '../05-04/app/app.component';
+import { AppComponent as S0512 } from '../05-12/app/app.component';
+import { AppComponent as S0513 } from '../05-13/app/app.component';
+import { AppComponent as S0514 } from '../05-14/app/app.component';
+import { AppComponent as S0515 } from '../05-15/app/app.component';
+import { AppComponent as S0516 } from '../05-16/app/app.component';
+import { AppComponent as S0517 } from '../05-17/app/app.component';
+import { AppComponent as S0601 } from '../06-01/app/app.component';
+import { AppComponent as S0603 } from '../06-03/app/app.component';
+import { AppComponent as S0701 } from '../07-01/app/app.component';
+import { AppComponent as S0703 } from '../07-03/app/app.component';
+import { AppComponent as S0704 } from '../07-04/app/app.component';
+import { AppComponent as S0901 } from '../09-01/app/app.component';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: 'app/app.component.html',
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  { path: '/01-01', name: '01-01', component: S0101 },
+  { path: '/02-07', name: '02-07', component: S0207 },
+  { path: '/02-08', name: '02-08', component: S0208 },
+  { path: '/03-01', name: '03-01', component: S0301 },
+  { path: '/03-02', name: '03-02', component: S0302 },
+  { path: '/03-03', name: '03-03', component: S0303 },
+  { path: '/03-04', name: '03-04', component: S0304 },
+  { path: '/03-05', name: '03-05', component: S0305 },
+  { path: '/03-06', name: '03-06', component: S0306 },
+  { path: '/04-10', name: '04-10', component: S0410 },
+  { path: '/04-14', name: '04-14', component: S0414 },
+  { path: '/05-02', name: '05-02', component: S0502 },
+  { path: '/05-03', name: '05-03', component: S0503 },
+  { path: '/05-04', name: '05-04', component: S0504 },
+  { path: '/05-12', name: '05-12', component: S0512 },
+  { path: '/05-13', name: '05-13', component: S0513 },
+  { path: '/05-14', name: '05-14', component: S0514 },
+  { path: '/05-15', name: '05-15', component: S0515 },
+  { path: '/05-16', name: '05-16', component: S0516 },
+  { path: '/05-17', name: '05-17', component: S0517 },
+  { path: '/06-01', name: '06-01', component: S0601 },
+  { path: '/06-03', name: '06-03', component: S0603 },
+  { path: '/07-01', name: '07-01', component: S0701 },
+  { path: '/07-03', name: '07-03', component: S0703 },
+  { path: '/07-04', name: '07-04', component: S0704 },
+  { path: '/09-01', name: '09-01', component: S0901 },
+
+])
+export class AppComponent { }

public/docs/_examples/style-guide/ts/app/hero-data.ts

@@ -0,0 +1,11 @@
+export class HeroData {
+  createDb() {
+    let heroes = [
+      { id: '1', name: 'Windstorm' },
+      { id: '2', name: 'Bombasto' },
+      { id: '3', name: 'Magneta' },
+      { id: '4', name: 'Tornado' }
+    ];
+    return {heroes};
+  }
+}

public/docs/_examples/style-guide/ts/app/main.ts

@@ -0,0 +1,15 @@
+import { bootstrap }        from '@angular/platform-browser-dynamic';
+import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { XHRBackend, HTTP_PROVIDERS } from '@angular/http';
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api/core';
+import 'rxjs/add/operator/map';
+
+import { HeroData } from './hero-data';
+import { AppComponent }     from './app.component';
+
+bootstrap(AppComponent, [
+  ROUTER_PROVIDERS,
+  HTTP_PROVIDERS,
+  { provide: XHRBackend, useClass: InMemoryBackendService },
+  { provide: SEED_DATA,  useClass: HeroData }
+  ]);

public/docs/_examples/style-guide/ts/index.html

@@ -17,6 +17,7 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
+    <script src="systemjs.custom.js"></script>
     <script>
       System.import('app').catch(function(err){ console.error(err); });
     </script>

public/docs/_examples/style-guide/ts/systemjs.custom.js

@@ -0,0 +1,44 @@
+(function(global) {
+  // extra local packages
+  var packageNames = [
+    '01-01',
+    '02-07',
+    '02-08',
+    '03-01',
+    '03-02',
+    '03-03',
+    '03-04',
+    '03-05', '03-05/app/shared', '03-05/app/shared/spinner', '03-05/app/shared/toast',
+    '03-06', '03-06/app/shared', '03-06/app/shared/spinner', '03-06/app/shared/toast',
+    '04-10', '04-10/app/shared', '04-10/app/+heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast',
+      '04-10/app/shared/filter-text', '04-10/app/shared/modal', '04-10/app/shared/nav',
+    '04-14',
+    '05-02',
+    '05-03',
+    '05-04',
+    '05-12',
+    '05-13',
+    '05-14',
+    '05-15', '05-15/app/heroes/shared',
+    '05-16',
+    '05-17',
+    '06-01',
+    '06-03',
+    '07-01',
+    '07-03',
+    '07-04', '07-04/app/heroes/shared',
+    '09-01'
+  ];
+
+  var packages = {};
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+
+  var config = {
+    packages: packages
+  }
+
+  System.config(config);
+
+})(this);