docs(style-guide): add testing harness

Author: Foxandxss

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.css

@@ -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/01-01/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/app.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/heroes/hero.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-07/app/users/users.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/02-08/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/app.component.ts

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

public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.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;
+}