docs(toh/dart): convert toh-4 to Dart

public/docs/_examples/toh-4/dart/lib/app_component.dart

@@ -0,0 +1,106 @@
+// #docplaster
+// #docregion
+import 'dart:async';
+
+import 'package:angular2/core.dart';
+
+import 'hero.dart';
+import 'hero_detail_component.dart';
+// #docregion hero-service-import
+import 'hero_service.dart';
+
+// #enddocregion hero-service-import
+
+@Component(
+    selector: 'my-app',
+    template: '''
+      <h1>{{title}}</h1>
+      <h2>My Heroes</h2>
+      <ul class="heroes">
+        <li *ngFor="#hero of heroes"
+          [class.selected]="hero == selectedHero"
+          (click)="onSelect(hero)">
+          <span class="badge">{{hero.id}}</span> {{hero.name}}
+        </li>
+      </ul>
+      <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+    ''',
+    styles: const [
+    '''
+      .selected {
+        background-color: #CFD8DC !important;
+        color: white;
+      }
+      .heroes {
+        margin: 0 0 2em 0;
+        list-style-type: none;
+        padding: 0;
+        width: 10em;
+      }
+      .heroes li {
+        cursor: pointer;
+        position: relative;
+        left: 0;
+        background-color: #EEE;
+        margin: .5em;
+        padding: .3em 0em;
+        height: 1.6em;
+        border-radius: 4px;
+      }
+      .heroes li.selected:hover {
+        color: white;
+      }
+      .heroes li:hover {
+        color: #607D8B;
+        background-color: #EEE;
+        left: .1em;
+      }
+      .heroes .text {
+        position: relative;
+        top: -3px;
+      }
+      .heroes .badge {
+        display: inline-block;
+        font-size: small;
+        color: white;
+        padding: 0.8em 0.7em 0em 0.7em;
+        background-color: #607D8B;
+        line-height: 1em;
+        position: relative;
+        left: -1px;
+        top: -4px;
+        height: 1.8em;
+        margin-right: .8em;
+        border-radius: 4px 0px 0px 4px;
+      }
+   '''
+    ],
+    directives: const [
+      HeroDetailComponent
+    ],
+    providers: const [
+      HeroService
+    ])
+class AppComponent implements OnInit {
+  String title = 'Tour of Heroes';
+  List<Hero> heroes;
+  Hero selectedHero;
+
+  final HeroService _heroService;
+
+  AppComponent(this._heroService);
+
+// #docregion get-heroes
+  getHeroes() async {
+    heroes = await _heroService.getHeroes();
+  }
+// #enddocregion get-heroes
+
+  ngOnInit() {
+    getHeroes();
+  }
+
+  onSelect(Hero hero) {
+    selectedHero = hero;
+  }
+}

public/docs/_examples/toh-4/dart/lib/app_component_1.dart

@@ -0,0 +1,64 @@
+// #docplaster
+// #docregion on-init
+import 'package:angular2/core.dart';
+
+// #enddocregion on-init
+import 'hero.dart';
+import 'hero_detail_component.dart';
+// #docregion hero-service-import
+import 'hero_service_1.dart';
+// #enddocregion hero-service-import
+
+// Testable but never shown
+@Component(
+    selector: 'my-app',
+    template: '''
+    <div *ngFor="#hero of heroes" (click)="onSelect(hero)">
+      {{hero.name}}
+    </div>
+    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+    ''',
+    directives: const [HeroDetailComponent],
+    // #docregion providers
+    providers: const [HeroService])
+// #enddocregion providers
+// #docregion on-init
+class AppComponent implements OnInit {
+  // #enddocregion on-init
+  String title = 'Tour of Heroes';
+  // #docregion heroes-prop
+  List<Hero> heroes;
+  // #enddocregion heroes-prop
+  Hero selectedHero;
+
+  // #docregion new-service
+  HeroService heroService = new HeroService(); // don't do this
+  // #enddocregion new-service
+  // #docregion ctor
+  final HeroService _heroService;
+  AppComponent(this._heroService);
+  // #enddocregion ctor
+  // #docregion getHeroes
+  getHeroes() {
+    //#docregion get-heroes
+    heroes = _heroService.getHeroes();
+    // #enddocregion get-heroes
+  }
+  // #enddocregion getHeroes
+
+  // #docregion ng-on-init
+  // #docregion on-init
+  ngOnInit() {
+    // #enddocregion on-init
+    getHeroes();
+    // #docregion on-init
+  }
+  // #enddocregion on-init
+  // #enddocregion ng-on-init
+
+  onSelect(Hero hero) {
+    selectedHero = hero;
+  }
+  // #docregion on-init
+}
+// #enddocregion on-init

public/docs/_examples/toh-4/dart/lib/hero.dart

@@ -0,0 +1,6 @@
+class Hero {
+  final int id;
+  String name;
+
+  Hero(this.id, this.name);
+}

public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart

@@ -0,0 +1,20 @@
+import 'package:angular2/core.dart';
+
+import 'hero.dart';
+
+@Component(
+    selector: 'my-hero-detail',
+    template: '''
+      <div *ngIf="hero != null">
+        <h2>{{hero.name}} details!</h2>
+        <div><label>id: </label>{{hero.id}}</div>
+        <div>
+          <label>name: </label>
+          <input [(ngModel)]="hero.name" placeholder="name"/>
+        </div>
+      </div>
+    ''',
+    inputs: const ['hero'])
+class HeroDetailComponent {
+  Hero hero;
+}

public/docs/_examples/toh-4/dart/lib/hero_service.dart

@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion
+import 'dart:async';
+
+import 'package:angular2/core.dart';
+
+import 'hero.dart';
+import 'mock_heroes.dart';
+
+@Injectable()
+class HeroService {
+  //#docregion get-heroes
+  Future<List<Hero>> getHeroes() async => mockHeroes;
+  //#enddocregion get-heroes
+
+  // See the "Take it slow" appendix
+  //#docregion get-heroes-slowly
+  Future<List<Hero>> getHeroesSlowly() {
+    return new Future.delayed(const Duration(seconds: 2), () => mockHeroes);
+  }
+  //#enddocregion get-heroes-slowly
+}
+// #enddocregion

public/docs/_examples/toh-4/dart/lib/hero_service_1.dart

@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion final
+// #docregion empty-class
+import 'package:angular2/core.dart';
+
+// #enddocregion empty-class
+import 'hero.dart';
+import 'mock_heroes.dart';
+
+// #docregion getHeroes-stub
+@Injectable()
+class HeroService {
+// #enddocregion getHeroes-stub
+// #enddocregion empty-class
+// #enddocregion final
+  /*
+// #docregion getHeroes-stub
+  List<Hero> getHeroes() {}
+// #enddocregion getHeroes-stub
+   */
+// #docregion final
+  List<Hero> getHeroes() => mockHeroes;
+// #docregion empty-class
+// #docregion getHeroes-stub
+}
+// #enddocregion getHeroes-stub
+// #enddocregion empty-class
+// #enddocregion final

public/docs/_examples/toh-4/dart/lib/mock_heroes.dart

@@ -0,0 +1,16 @@
+// #docregion
+import 'hero.dart';
+
+final List<Hero> mockHeroes = [
+	new Hero(11, "Mr. Nice"),
+	new Hero(12, "Narco"),
+	new Hero(13, "Bombasto"),
+	new Hero(14, "Celeritas"),
+	new Hero(15, "Magneta"),
+	new Hero(16, "RubberMan"),
+	new Hero(17, "Dynama"),
+	new Hero(18, "Dr IQ"),
+	new Hero(19, "Magma"),
+	new Hero(20, "Tornado")
+];
+// #enddocregion

public/docs/_examples/toh-4/dart/pubspec.yaml

@@ -0,0 +1,15 @@
+name: angular2_tour_of_heroes
+version: 0.0.1
+environment:
+  sdk: '>=1.13.0 <2.0.0'
+dependencies:
+  angular2: 2.0.0-beta.15
+  browser: ^0.10.0
+  dart_to_js_script_rewriter: ^1.0.1
+transformers:
+- angular2:
+    platform_directives:
+    - package:angular2/common.dart#COMMON_DIRECTIVES
+    platform_pipes:
+     - package:angular2/common.dart#COMMON_PIPES
+    entry_points: web/main.dart

public/docs/_examples/toh-4/dart/web/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script defer src="main.dart" type="application/dart"></script>
+    <script defer src="packages/browser/dart.js"></script>
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>

public/docs/_examples/toh-4/dart/web/main.dart

@@ -0,0 +1,9 @@
+// #docregion pt1
+import 'package:angular2/platform/browser.dart';
+
+import 'package:angular2_tour_of_heroes/app_component.dart';
+
+main() {
+  bootstrap(AppComponent);
+}
+// #enddocregion pt1

public/docs/_examples/toh-4/dart/web/main_1.dart

@@ -0,0 +1,9 @@
+// #docregion pt1
+import 'package:angular2/platform/browser.dart';
+
+import 'package:angular2_tour_of_heroes/app_component_1.dart';
+
+main() {
+  bootstrap(AppComponent);
+}
+// #enddocregion pt1