docs(toh/dart): convert toh-2 to dart

public/docs/_examples/toh-2/dart-snippets/app_component_snippets_pt2.dart

@@ -0,0 +1,69 @@
+// #docregion ng-for
+<li *ngFor="#hero of heroes">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion ng-for
+
+// #docregion heroes-styled
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="#hero of heroes">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+// #enddocregion heroes-styled
+
+// #docregion selectedHero-click
+<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion selectedHero-click
+
+// #docregion selectedHero-details
+<h2>{{selectedHero.name}} details!</h2>
+<div><label>id: </label>{{selectedHero.id}}</div>
+<div>
+    <label>name: </label>
+    <input [(ngModel)]="selectedHero.name" placeholder="name">
+</div>
+// #enddocregion selectedHero-details
+
+// #docregion ng-if
+<div *ngIf="selectedHero != null">
+  <h2>{{selectedHero.name}} details!</h2>
+  <div><label>id: </label>{{selectedHero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="selectedHero.name" placeholder="name">
+  </div>
+</div>
+// #enddocregion ng-if
+
+// #docregion hero-array-1
+final List<Hero> heroes = mockHeroes;
+// #enddocregion hero-array-1
+
+// #docregion heroes-template-1
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li>
+    <!-- each hero goes here -->
+  </li>
+</ul>
+// #enddocregion heroes-template-1
+
+// #docregion heroes-ngfor-1
+<li *ngFor="#hero of heroes">
+// #enddocregion heroes-ngfor-1
+
+// #docregion class-selected-1
+[class.selected]="hero == selectedHero"
+// #enddocregion class-selected-1
+
+// #docregion class-selected-2
+<li *ngFor="#hero of heroes"
+  [class.selected]="hero == selectedHero"
+  (click)="onSelect(hero)">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+// #enddocregion class-selected-2

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

@@ -0,0 +1,114 @@
+// #docregion pt2
+import 'package:angular2/core.dart';
+
+class Hero {
+  final int id;
+  String name;
+
+  Hero(this.id, this.name);
+}
+
+@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>
+      <div *ngIf="selectedHero != null">
+        <h2>{{selectedHero.name}} details!</h2>
+        <div><label>id: </label>{{selectedHero.id}}</div>
+        <div>
+          <label>name: </label>
+          <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+        </div>
+      </div>
+    ''',
+// #docregion styles-1
+    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;
+      }
+    '''
+    ])
+// #enddocregion styles-1
+class AppComponent {
+  final String title = 'Tour of Heroes';
+  final List<Hero> heroes = mockHeroes;
+// #docregion selected-hero-1
+  Hero selectedHero;
+// #enddocregion selected-hero-1
+
+// #docregion on-select-1
+  onSelect(Hero hero) {
+    selectedHero = hero;
+  }
+// #enddocregion on-select-1
+}
+// #enddocregion pt2
+
+// #docregion hero-array
+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 hero-array
+
+// #enddocregion pt2

public/docs/_examples/toh-2/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.1
+  browser: ^0.10.0
+  dart_to_js_script_rewriter: ^0.1.0+4
+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-2/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-2/dart/web/main.dart

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