fixed all examples to show just the regions we need. and added folder structure a little bit

Author: johnpapa

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

@@ -1,24 +1,16 @@
 // #docregion
-import { Component, OnInit } from 'angular2/core';
+import { Component } from 'angular2/core';
 
-import { Hero }        from './hero.model';
-import { HeroService } from './hero.service';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroService } from './heroes/hero.service';
 
 @Component({
   selector: 'toh-app',
   template: `
-      <pre>{{heroes | json}}</pre>
+      <toh-heroes></toh-heroes>
     `,
   styleUrls: ['app/app.component.css'],
+  directives: [HeroesComponent],
   providers: [HeroService]
 })
-export class AppComponent implements OnInit {
-  heroes: Hero[] = [];
-
-  constructor(private heroService: HeroService) {}
-
-  ngOnInit() {
-    this.heroService.getHeroes()
-      .then(heroes => this.heroes = heroes);
-  }
-}
+export class AppComponent { }

public/docs/_examples/style-guide/ts/01-01/app/hero.component.avoid.ts renamed to public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts

@@ -0,0 +1,22 @@
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+
+import { Hero }        from './hero.model';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'toh-heroes',
+  template: `
+      <pre>{{heroes | json}}</pre>
+    `
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) {}
+
+  ngOnInit() {
+    this.heroService.getHeroes()
+      .then(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/01-01/app/hero.model.ts renamed to public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.model.ts

@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}

public/docs/_examples/style-guide/ts/01-01/app/hero.service.ts renamed to public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts

@@ -1,5 +1,7 @@
 // #docregion
-import { Component } from 'angular2/core';
+import { Component, OnInit } from 'angular2/core';
+
+import { Hero } from './hero.model';
 
 // #docregion example
 @Component({

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

@@ -1,11 +1,6 @@
-// #docplaster
+// #docregion
 /* avoid */
 
-@Component({
-  selector: 'toh-hero-list',
-  template: `...`
-})
-// #docregion example
 export class HeroListComponent implements OnInit {
   heroes: Hero[];
   constructor(private http: Http) {}
@@ -21,4 +16,3 @@ export class HeroListComponent implements OnInit {
     this.getHeros();
   }
 }
-// #enddocregion example

public/docs/_examples/style-guide/ts/01-01/app/mock-heroes.ts renamed to public/docs/_examples/style-guide/ts/01-01/app/heroes/mock-heroes.ts

@@ -1,6 +1,8 @@
 // #docregion
 import { Component, OnInit } from 'angular2/core';
 
+import { Hero, HeroService } from './shared/index';
+
 @Component({
   selector: 'toh-hero-list',
   template: `...`
@@ -11,7 +13,7 @@ export class HeroListComponent implements OnInit {
   constructor(private heroService: HeroService) {}
   getHeros() {
     this.heroes = [];
-    this.heroService.getHeros()
+    this.heroService.getHeroes()
       .subscribe(heroes => this.heroes = heroes);
   }
   ngOnInit() {

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

@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}

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

@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+import { Observable } from 'rxjs/Rx';
+
+import { Hero } from './hero.model.ts';
+
+@Injectable()
+export class HeroService {
+  getHeroes() {
+    let heroes: Hero[] = [];
+    return Observable.of(heroes);
+  }
+}

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

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

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

@@ -1,4 +1,4 @@
-// #docplaster
+// #docregion
 /* avoid */
 
 // #docregion example

public/docs/_examples/style-guide/ts/02-08/app/validate.directive.avoid.ts renamed to public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts

@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}

public/docs/_examples/style-guide/ts/02-08/app/validate.directive.ts renamed to public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts

@@ -1,6 +1,8 @@
 // #docregion
 import { Component } from 'angular2/core';
 
+import { Hero } from './hero.model.ts';
+
 // #docregion example
 @Component({
   selector: 'toh-heroes-list',

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

@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}

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

@@ -2,9 +2,10 @@
 import { Injectable } from 'angular2/core';
 import { Http, Response } from 'angular2/http';
 
-import { Hero } from './hero';
+import { Hero } from './hero.model';
 
 @Injectable()
+// #docregion example
 export class HeroService {
   constructor(private http: Http) { }
 
@@ -13,3 +14,4 @@ export class HeroService {
       .map((response: Response) => <Hero[]>response.json().data);
   }
 }
+// #enddocregion example

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

@@ -2,7 +2,7 @@
 import { Component } from 'angular2/core';
 
 import { HeroListComponent } from './heroes/hero-list.component';
-import { HeroService } from './shared/hero.service';
+import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
   selector: 'toh-app',

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

@@ -2,7 +2,7 @@
 import { Component, OnInit } from 'angular2/core';
 
 import { HeroService } from './shared/hero.service';
-import { Hero } from './shared/hero';
+import { Hero } from './shared/hero.model';
 
 @Component({
   selector: 'toh-heroes',
@@ -16,6 +16,6 @@ export class HeroListComponent implements OnInit {
   constructor(private heroService: HeroService) { }
 
   ngOnInit() {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
   }
 }

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

@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}

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

@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+import { Observable } from 'rxjs/Rx';
+
+import { Hero } from './hero.model.ts';
+
+@Injectable()
+export class HeroService {
+  getHeroes() {
+    let heroes: Hero[] = [];
+    return Observable.of(heroes);
+  }
+}

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

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

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

@@ -3,6 +3,6 @@
 
 export class HeroArena {
   constructor(
-      @Inject(HeroFactory) private heroFactory: HeroFactory,
+      @Inject(HeroService) private heroService: HeroService,
       @Inject(Http) private http: Http) {}
 }

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

@@ -2,13 +2,13 @@
 import { Injectable } from 'angular2/core';
 import { Http } from 'angular2/http';
 
-import { HeroFactory } from './shared';
+import { HeroService } from './shared/index';
 
-@Injectable()
 // #docregion example
+@Injectable()
 export class HeroArena {
   constructor(
-    private heroFactory: HeroFactory,
+    private heroService: HeroService,
     private http: Http) {}
 }
 // #enddocregion example

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

@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}

public/docs/_examples/style-guide/ts/05-12/app/hero-button.component.avoid.ts renamed to public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.avoid.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+import { Observable } from 'rxjs/Rx';
+
+import { Hero } from './hero.model.ts';
+
+@Injectable()
+export class HeroService {
+  getHeroes() {
+    let heroes: Hero[] = [];
+    return Observable.of(heroes);
+  }
+}

public/docs/_examples/style-guide/ts/05-12/app/hero-button.component.ts renamed to public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.ts

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

public/docs/_examples/style-guide/ts/05-13/app/hero-button.component.avoid.ts renamed to public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.avoid.ts

@@ -1,8 +1,6 @@
 // #docregion
 /* avoid */
 
-import { Component } from 'angular2/core';
-
 @Component({
   selector: 'toh-hero-button',
   template: `<button>OK<button>`

public/docs/_examples/style-guide/ts/05-13/app/hero-button.component.ts renamed to public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.ts

@@ -1,6 +1,7 @@
 // #docregion
 import {Component, OnInit} from 'angular2/core';
 
+// #docregion example
 @Component({
   selector: 'toh-hero-button',
   template: `<button>OK<button>`
@@ -10,3 +11,4 @@ export class HeroButtonComponent implements OnInit {
     console.log('The component is initialized');
   }
 }
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-14/app/toast.component.avoid.ts renamed to public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.avoid.ts

@@ -2,8 +2,7 @@
 import { Component } from 'angular2/core';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
 
-import { HeroesComponent, HeroService } from './+heroes';
-import { DashboardComponent } from './+dashboard';
+import { HeroService } from './shared';
 import { NavComponent } from './layout/nav.component';
 
 @Component({