docs(guide): add _examples/displaying-data/dart

closes #434

public/docs/_examples/displaying-data/dart/lib/app_component.dart

@@ -0,0 +1,43 @@
+// #docplaster
+// #docregion final
+library displaying_data.app_component;
+
+// #docregion imports
+import 'package:angular2/angular2.dart';
+// #enddocregion imports
+import 'package:displaying_data/hero.dart';
+
+final List<Hero> _heroes = [
+  new Hero(1, 'Windstorm'),
+  new Hero(13, 'Bombasto'),
+  new Hero(15, 'Magneta'),
+  new Hero(20, 'Tornado')
+];
+
+@Component(
+    selector: 'my-app',
+    template: '''
+<h1>{{title}}</h1>
+<h2>My favorite hero is: {{myHero.name}}</h2>
+<p>Heroes:</p>
+<ul>
+  <li *ngFor="#hero of heroes">
+    {{ hero.name }}
+  </li>
+</ul>
+<!--#docregion message-->
+<p *ngIf="heroes.length > 3">There are many heroes!</p>
+<!--#enddocregion message-->
+''')
+class AppComponent {
+  String title = 'Tour of Heroes';
+  List<Hero> heroes = _heroes;
+  Hero myHero = _heroes[0];
+}
+//#enddocregion final
+/*
+// #docregion final
+
+bootstrap(AppComponent);
+//#enddocregion final
+*/

public/docs/_examples/displaying-data/dart/lib/app_component_1.dart

@@ -0,0 +1,17 @@
+// #docregion
+library displaying_data.app_component_1;
+
+import 'package:angular2/angular2.dart';
+
+@Component(
+    selector: 'my-app',
+// #docregion template
+    template: '''
+<h1>{{title}}</h1>
+<h2>My favorite hero is: {{myHero}}</h2>'''
+// #enddocregion template
+    )
+class AppComponent {
+  String title = 'Tour of Heroes';
+  String myHero = 'Windstorm';
+}

public/docs/_examples/displaying-data/dart/lib/app_component_2.dart

@@ -0,0 +1,39 @@
+// #docregion
+library displaying_data.app_component_2;
+
+// #docregion imports
+import 'package:angular2/angular2.dart';
+
+// #enddocregion imports
+
+@Component(
+    selector: 'my-app',
+// #docregion template
+    template: '''
+<h1>{{title}}</h1>
+<h2>My favorite hero is: {{myHero}}</h2>
+<p>Heroes:</p>
+<ul>
+<!-- docregion li-repeater -->
+  <li *ngFor="#hero of heroes">
+    {{ hero }}
+  </li>
+<!-- enddocregion li-repeater -->
+</ul>'''
+// #enddocregion template
+    )
+// #docregion mock-heroes
+const List<String> _heroes = const [
+  'Windstorm',
+  'Bombasto',
+  'Magneta',
+  'Tornado'
+];
+
+class AppComponent {
+  String title = 'Tour of Heroes';
+  List<String> heroes = _heroes;
+  String myHero = _heroes[0];
+}
+// #enddocregion mock-heroes
+// #enddocregion

public/docs/_examples/displaying-data/dart/lib/app_component_3.dart

@@ -0,0 +1,42 @@
+// #docregion
+library displaying_data.app_component_3;
+
+// #docregion imports
+import 'package:angular2/angular2.dart';
+// #enddocregion imports
+// #docregion import-hero
+import 'package:displaying_data/hero.dart';
+
+// #enddocregion import-hero
+
+@Component(
+    selector: 'my-app',
+// #docregion template
+    template: '''
+<h1>{{title}}</h1>
+<h2>My favorite hero is: {{myHero.name}}</h2>
+<p>Heroes:</p>
+<ul>
+  <li *ngFor="#hero of heroes">
+    {{ hero.name }}
+  </li>
+</ul>'''
+// #enddocregion template
+    )
+// #docregion heroes
+final List<Hero> _heroes = [
+  new Hero(1, 'Windstorm'),
+  new Hero(13, 'Bombasto'),
+  new Hero(15, 'Magneta'),
+  new Hero(20, 'Tornado')
+];
+
+// #enddocregion heroes
+// #docregion class
+class AppComponent {
+  String title = 'Tour of Heroes';
+  List<Hero> heroes = _heroes;
+  Hero myHero = _heroes[0];
+}
+// #enddocregion class
+// #enddocregion

public/docs/_examples/displaying-data/dart/lib/app_ctor_component.dart

@@ -0,0 +1,21 @@
+// #docregion
+library displaying_data.app_ctor_component;
+
+import 'package:angular2/angular2.dart';
+
+@Component(
+    selector: 'my-app-ctor',
+    template: '''
+<h1>{{title}} [Ctor version]</h1>
+<h2>My favorite hero is: {{myHero}}</h2>''')
+// #docregion app-ctor
+class AppCtorComponent {
+  String title;
+  String myHero;
+
+  AppCtorComponent() {
+    this.title = 'Tour of Heroes';
+    this.myHero = 'Windstorm';
+  }
+}
+// #enddocregion app-ctor

public/docs/_examples/displaying-data/dart/lib/hero.dart

@@ -0,0 +1,12 @@
+// #docregion
+library displaying_data.hero;
+
+class Hero {
+  // #docregion id-parameter
+  int number;
+  // #enddocregion id-parameter
+  String name;
+
+  Hero(this.number, this.name);
+}
+// #enddocregion

public/docs/_examples/displaying-data/dart/pubspec.yaml

@@ -0,0 +1,11 @@
+name: displaying_data
+description: Displaying Data Example
+version: 0.0.1
+dependencies:
+  angular2: 2.0.0-beta.0
+  browser: ^0.10.0
+transformers:
+- angular2:
+    platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'
+    entry_points: web/main.dart
+

public/docs/_examples/displaying-data/dart/web/index.html

@@ -0,0 +1,14 @@
+<!--#docregion-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Displaying Data</title>
+    <script defer src="main.dart" type="application/dart"></script>
+    <script defer src="packages/browser/dart.js"></script>
+  </head>
+  <body>
+  <!-- #docregion my-app -->
+    <my-app></my-app>
+  <!-- #enddocregion my-app -->
+  </body>
+</html>

public/docs/_examples/displaying-data/dart/web/main.dart

@@ -0,0 +1,14 @@
+// #docregion
+import 'package:angular2/bootstrap.dart';
+//import 'package:displaying_data/app_component_1.dart' as v1;
+//import 'package:displaying_data/app_component_2.dart' as v2;
+//import 'package:displaying_data/app_component_3.dart' as v3;
+import 'package:displaying_data/app_component.dart';
+
+main() {
+// pick one
+//  bootstrap(v1.AppComponent);
+//  bootstrap(v2.AppComponent);
+//  bootstrap(v3.AppComponent);
+  bootstrap(AppComponent);
+}