docs(style-guide): add style-guide - v.4

Author: johnpapa

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

@@ -1,12 +1,10 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
-// app.component.ts
+/**
+ * The root AppComponent
+ */
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero } from './hero';
+import { Hero }        from './hero.model';
 import { HeroService } from './hero.service';
 
 @Component({
@@ -17,7 +15,7 @@ import { HeroService } from './hero.service';
   styleUrls: ['app/app.component.css'],
   providers: [HeroService]
 })
-export class AppComponent implements OnInit{
+export class AppComponent implements OnInit {
   heroes: Hero[] = [];
 
   constructor(private heroService: HeroService) {}

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

@@ -1,8 +1,7 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
+/**
+ * The Hero Model
+ */
 export class Hero {
   id: number;
   name: string;

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

@@ -1,10 +1,9 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
+/**
+ * The Data Access Service for heroes
+ */
 import { Injectable } from 'angular2/core';
-import { HEROES } from './mock-heroes';
+import { HEROES }     from './mock-heroes';
 
 @Injectable()
 export class HeroService {

public/docs/_examples/style-guide/ts/01-01/app/kitchen-sink.ts

@@ -0,0 +1,42 @@
+// #docregion
+/**
+ * Everything in one file ... it's all here!
+ * AVOID THIS PATTERN
+ */
+import { bootstrap } from 'angular2/platform/browser';
+import { Component, OnInit } from 'angular2/core';
+
+class Hero {
+  id: number;
+  name: string;
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+      <h1>{{title}}</h1>
+      <pre>{{heroes | json}}</pre>
+    `,
+  styleUrls: ['app/app.component.css']
+})
+class AppComponent implements OnInit{
+  title = 'Tour of Heroes';
+
+  heroes: Hero[] = [];
+
+  ngOnInit() {
+    getHeroes().then(heroes => this.heroes = heroes);
+  }
+}
+
+bootstrap(AppComponent, []);
+
+const HEROES: Hero[] = [
+   {id: 1, name: 'Bombasto'},
+   {id: 2, name: 'Tornado'},
+   {id: 3, name: 'Magneta'},
+];
+
+function getHeroes(): Promise<Hero[]> {
+  return Promise.resolve(HEROES); // TODO: get hero data from the server;
+}

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

@@ -1,9 +1,8 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
-import { bootstrap } from 'angular2/platform/browser';
+/**
+ * Application bootstrapping
+ */
+import { bootstrap }    from 'angular2/platform/browser';
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent, []);

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

@@ -0,0 +1,11 @@
+// #docregion
+/**
+ * Mock heroes until we can get real data
+ */
+import { Hero } from './hero.model';
+
+export const HEROES: Hero[] = [
+   {id: 1, name: 'Bombasto'},
+   {id: 2, name: 'Tornado'},
+   {id: 3, name: 'Magneta'},
+];