docs(dart): convert toh-3 to Dart

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

@@ -0,0 +1,102 @@
+//#docregion
+import 'package:angular2/core.dart';
+
+// #docregion hero-import
+import 'hero.dart';
+// #enddocregion hero-import
+// #docregion hero-detail-import
+import 'hero_detail_component.dart';
+// #enddocregion hero-detail-import
+
+@Component(
+    selector: 'my-app',
+// #docregion hero-detail-template
+    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>
+    ''',
+// #enddocregion hero-detail-template
+    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;
+      }
+    '''
+    ],
+// #docregion directives
+    directives: const [
+      HeroDetailComponent
+    ])
+// #enddocregion directives
+class AppComponent {
+  final String title = 'Tour of Heroes';
+  final List<Hero> heroes = mockHeroes;
+  Hero selectedHero;
+
+  onSelect(Hero hero) {
+    selectedHero = hero;
+  }
+}
+
+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")
+];

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

@@ -0,0 +1,8 @@
+// #docregion
+class Hero {
+  final int id;
+  String name;
+
+  Hero(this.id, this.name);
+}
+// #enddocregion

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

@@ -0,0 +1,39 @@
+// #docplaster
+// #docregion
+// #docregion v1
+import 'package:angular2/core.dart';
+
+// #enddocregion v1
+// #docregion hero-import
+import 'hero.dart';
+// #enddocregion hero-import
+
+// #docregion v1
+@Component(
+    selector: 'my-hero-detail',
+// #enddocregion v1
+    // #docregion template
+    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>
+  '''
+    // #enddocregion template
+// #docregion v1
+    )
+class HeroDetailComponent {
+// #enddocregion v1
+// #docregion inputs
+  @Input()
+// #docregion hero
+  Hero hero;
+// #enddocregion hero
+// #enddocregion inputs
+// #docregion v1
+}
+// #enddocregion v1

public/docs/_examples/toh-3/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.14
+  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-3/dart/web/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Angular 2 Tour of Heroes</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <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-3/dart/web/main.dart

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

public/docs/dart/latest/tutorial/toh-pt2.jade

@@ -35,7 +35,7 @@ include ../_util-fns
       .file main.dart
     .file pubspec.yaml
 :marked
-  ### Keep the app transpiling and running
+  ### Keep the app compiling and running
   We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing
 
 code-example(format="." language="bash").