docs(hierarchical-injectors): use real example code

closes #406

With this change the chapter doesn't use inline
code anymore but instead uses proper runnable
example code.

Author: cburgdorf

public/docs/_examples/hierarchical-dependency-injection/ts/.gitignore

@@ -0,0 +1 @@
+src/**/*.js

public/docs/_examples/hierarchical-dependency-injection/ts/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "angular2-getting-started",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "tsc": "tsc -p src -w",
+    "start": "live-server --open=src"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "angular2": "2.0.0-alpha.46",
+    "systemjs": "0.19.2"
+  },
+  "devDependencies": {
+    "live-server": "^0.8.1",
+    "typescript": "^1.6.2"
+  }
+}

public/docs/_examples/hierarchical-dependency-injection/ts/src/app/edit-item.ts

@@ -0,0 +1,6 @@
+// #docregion
+export class EditItem<T> {
+  editing: boolean
+  constructor (public item: T) {}
+}
+// #docregion

public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-card.component.ts

@@ -0,0 +1,16 @@
+// #docregion
+import {Component, Input} from 'angular2/angular2';
+import {Hero} from './hero';
+
+@Component({
+  selector: 'hero-card',
+  template: `
+    <div>
+      <span>Name:</span>
+      <span>{{hero.name}}</span>
+    </div>`
+})
+export class HeroCardComponent {
+  @Input() hero: Hero;
+}
+// #docregion

public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-editor.component.ts

@@ -0,0 +1,46 @@
+// #docregion
+import {Component, Input, Output, EventEmitter} from 'angular2/angular2';
+import {RestoreService} from './restore-service';
+import {Hero} from './hero';
+
+@Component({
+  selector: 'hero-editor',
+  // #docregion providers
+  providers: [RestoreService],
+  // #enddocregion providers
+  template: `
+    <div>
+      <span>Name:</span>
+      <input [(ng-model)]="hero.name"/>
+      <div>
+        <button (click)="onSaved()">save</button>
+        <button (click)="onCanceled()">cancel</button>
+      </div>
+    </div>`
+})
+
+export class HeroEditorComponent {
+  @Output() canceled = new EventEmitter();
+  @Output() saved = new EventEmitter();
+
+  constructor(private restoreService: RestoreService<Hero>) {}
+
+  @Input()
+  set hero (hero: Hero) {
+    this.restoreService.setItem(hero);
+  }
+
+  get hero () {
+    return this.restoreService.getItem();
+  }
+
+  onSaved () {
+    this.saved.next(this.restoreService.getItem());
+  }
+
+  onCanceled () {
+    this.hero = this.restoreService.restoreItem();
+    this.canceled.next(this.hero);
+  }
+}
+// #enddocregion

public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero.ts

@@ -0,0 +1,6 @@
+// #docregion
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion

public/docs/_examples/hierarchical-dependency-injection/ts/src/app/heroes-list.component.ts

@@ -0,0 +1,53 @@
+// #docregion
+import {Component, bootstrap} from 'angular2/angular2';
+import {EditItem} from './edit-item';
+import {HeroesService} from './heroes-service';
+import {HeroCardComponent} from './hero-card.component';
+import {HeroEditorComponent} from './hero-editor.component';
+import {Hero} from './hero';
+
+@Component({
+  selector: 'heroes-list',
+  template: `
+    <div>
+      <ul>
+        <li *ng-for="#editItem of heroes">
+          <hero-card
+            [hidden]="editItem.editing"
+            [hero]="editItem.item">
+          </hero-card>
+          <button
+            [hidden]="editItem.editing"
+            (click)="editItem.editing = true">
+              edit
+          </button>
+          <hero-editor
+            (saved)="onSaved(editItem, $event)"
+            (canceled)="onCanceled(editItem)"
+            [hidden]="!editItem.editing"
+            [hero]="editItem.item">
+          </hero-editor>
+        </li>
+      </ul>
+    </div>`,
+  directives: [HeroCardComponent, HeroEditorComponent]
+})
+export class HeroesListComponent {
+  heroes: Array<EditItem<Hero>>;
+  constructor(heroesService: HeroesService) {
+    this.heroes = heroesService.getHeroes()
+                               .map(item => new EditItem(item));
+  }
+
+  onSaved (editItem: EditItem<Hero>, updatedHero: Hero) {
+    editItem.item = updatedHero;
+    editItem.editing = false;
+  }
+
+  onCanceled (editItem: EditItem<Hero>) {
+    editItem.editing = false;
+  }
+}
+
+bootstrap(HeroesListComponent, [HeroesService]);
+// #enddocregion

public/docs/_examples/hierarchical-dependency-injection/ts/src/app/heroes-service.ts

@@ -0,0 +1,12 @@
+import {Hero} from './hero';
+
+export class HeroesService {
+  heroes: Array<Hero> = [
+    { name: "RubberMan", power: 'flexibility'},
+    { name: "Tornado", power: 'Weather changer'}
+  ];
+
+  getHeroes () {
+    return this.heroes;
+  }
+}

public/docs/_examples/hierarchical-dependency-injection/ts/src/app/restore-service.ts

@@ -0,0 +1,25 @@
+// #docregion
+export class RestoreService<T> {
+  originalItem: T;
+  currentItem: T;
+
+  setItem (item: T) {
+    this.originalItem = item;
+    this.currentItem = this.clone(item);
+  }
+
+  getItem () :T {
+    return this.currentItem;
+  }
+
+  restoreItem () :T {
+    this.currentItem = this.originalItem;
+    return this.getItem();
+  }
+
+  clone (item: T) :T {
+    // super poor clone implementation
+    return JSON.parse(JSON.stringify(item));
+  }
+}
+// #enddocregion

public/docs/_examples/hierarchical-dependency-injection/ts/src/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <title>Hierarchical Injectors</title>
+    <script src="../node_modules/systemjs/dist/system.src.js"></script>
+    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script>
+      System.config({
+        packages: {'app': {defaultExtension: 'js'}}
+      });
+      System.import('app/heroes-list.component');
+    </script>
+  </head>
+
+  <body>
+    <!-- #docregion heroes-list -->
+    <heroes-list>loading...</heroes-list>
+    <!-- #enddocregion heroes-list -->
+  </body>
+
+</html>