docs(style-guide): add A2 styleguide - v1

Author: johnpapa

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

@@ -0,0 +1,29 @@
+// #docplaster
+
+// #docregion
+/* recommended */
+
+// app.component.ts
+import { Component, OnInit } from 'angular2/core';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'my-app',
+  template: `
+      <pre>{{heroes | json}}</pre>  
+    `,
+  styleUrls: ['app/app.component.css'],
+  providers: [HeroService]
+})
+export class AppComponent implements OnInit{
+  heroes: Hero[] = [];
+
+  constructor(private _heroService: HeroService) {}
+
+  ngOnInit() {
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes);
+  }
+}

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

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

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

@@ -0,0 +1,14 @@
+// #docplaster
+
+// #docregion
+/* recommended */
+
+import { Injectable } from 'angular2/core';
+import { HEROES } from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+  getHeroes() {
+    return Promise.resolve(HEROES);
+  }
+}

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

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

public/docs/_examples/style-guide/ts/001/app/placeholder.ts

@@ -0,0 +1,93 @@
+// #docplaster
+
+// #docregion 001-1
+  /* avoid */
+  import { bootstrap } from 'angular2/platform/browser';
+  import { Component, OnInit } from 'angular2/core';
+
+  @Component({
+    selector: 'my-app',
+    template: `
+        <h1>{{title}}</h1>
+        <pre>{{heroes | json}}</pre>  
+      `,
+    styleUrls: ['app/app.component.css']
+  })
+  export class AppComponent implements OnInit{
+    title = 'Tour of Heroes';
+
+    heroes: Hero[] = [];
+
+    ngOnInit() {
+      getHeroes().then(heroes => this.heroes = heroes);
+    }
+  }
+
+  bootstrap(AppComponent, []);
+
+  function getHeroes() {
+    return // some promise of data;
+  }  
+// #enddocregion 001-1
+
+
+// #docregion 001-2
+  /* recommended */
+
+  // main.ts
+  import { bootstrap } from 'angular2/platform/browser';
+  import { AppComponent } from './app.component';
+
+  bootstrap(AppComponent, []);
+  /* recommended */
+
+  // app.component.ts
+  import { Component, OnInit } from 'angular2/core';
+
+  import { Hero } from './hero';
+  import { HeroService } from './hero.service';
+
+  @Component({
+    selector: 'my-app',
+    template: `
+        <pre>{{heroes | json}}</pre>  
+      `,
+    styleUrls: ['app/app.component.css'],
+    providers: [HeroService]
+  })
+  export class AppComponent implements OnInit{
+    heroes: Hero[] = [];
+
+    constructor(private _heroService: HeroService) {}
+
+    ngOnInit() {
+      this._heroService.getHeroes()
+        .then(heroes => this.heroes = heroes);
+    }
+  }
+// #enddocregion 001-2
+
+// #docregion 001-3
+  /* recommended */
+
+  // hero.service.ts
+  import { Injectable } from 'angular2/core';
+  import { HEROES } from './mock-heroes';
+
+  @Injectable()
+  export class HeroService {
+    getHeroes() {
+      return Promise.resolve(HEROES);
+    }
+  }
+// #enddocregion 001-3
+
+// #docregion 001-4
+  /* recommended */
+
+  // hero.ts
+  export class Hero {
+    id: number;
+    name: string;
+  }
+// #enddocregion 001-4

public/docs/_examples/router/ts/example-config.json renamed to public/docs/_examples/style-guide/ts/example-config.json

@@ -7,7 +7,7 @@
     <base href="/">
     <!-- #enddocregion base-href -->
 
-    <title>Router Sample</title>
+    <title>Style Guide Sample</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 

public/docs/_examples/router/ts/index.html renamed to public/docs/_examples/style-guide/ts/index.html

@@ -0,0 +1,8 @@
+{
+  "description": "Style Guide",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["style guide, styleguide"]
+}

public/docs/_examples/style-guide/ts/plnkr.json

@@ -103,7 +103,13 @@
     "title": "Structural Directives",
     "intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."
   },
-
+  
+  "style-guide": {
+    "title": "Style Guide",
+    "intro": "Write Angular 2 with style.",
+    "hide": true
+  },
+  
   "testing": {
     "title": "Testing",
     "intro": "Techniques and practices for testing an Angular 2 app",

public/docs/dart/latest/guide/_data.json

@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")