docs(tutorial): add dart version of toh tutorial

public/docs/_examples/tutorial/dart/.gitignore

@@ -0,0 +1,22 @@
+# Files and directories created by pub
+.packages
+.pub/
+build/
+packages
+pubspec.lock # (Remove this pattern if you wish to check in your lock file)
+
+# Files created by dart2js
+*.dart.js
+*.part.js
+*.js.deps
+*.js.map
+*.info.json
+
+# Directory created by dartdoc
+doc/api/
+
+# JetBrains IDEs
+.idea/
+*.iml
+*.ipr
+*.iws

public/docs/_examples/tutorial/dart/lib/app_component.css

@@ -0,0 +1,28 @@
+a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+a:visited, a:link {
+  color: #607D8B;
+}
+a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+a.router-link-active {
+  color: #039be5;
+}
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}

public/docs/_examples/tutorial/dart/lib/app_component.dart

@@ -0,0 +1,32 @@
+import 'package:angular2/core.dart';
+import 'package:angular2/router.dart';
+
+import 'heroes_component.dart';
+import 'hero_detail_component.dart';
+import 'dashboard_component.dart';
+import 'hero_service.dart';
+
+@Component(
+    selector: 'my-app',
+    template: '''
+    <h1>{{title}}</h1>
+    <a [routerLink]="['Dashboard']">Dashboard</a>
+    <a [routerLink]="['Heroes']">Heroes</a>
+    <router-outlet></router-outlet>
+    ''',
+    styleUrls: const ['app_component.css'],
+    directives: const [ROUTER_DIRECTIVES],
+    providers: const [HeroService])
+@RouteConfig(const [
+  const Route(
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: DashboardComponent,
+      useAsDefault: true),
+  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent),
+  const Route(
+      path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent)
+])
+class AppComponent {
+  final String title = 'Tour of Heroes';
+}

public/docs/_examples/tutorial/dart/lib/dashboard_component.css

@@ -0,0 +1,60 @@
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0 0em;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+	padding: 20px;
+	text-align: center;
+	color: #eee;
+	max-height: 120px;
+	min-width: 120px;
+	background-color: #607D8B;
+	border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+	.module {
+	  font-size: 10px;
+	  max-height: 75px; }
+}
+@media (max-width: 1024px) {
+	.grid {
+	  margin: 0;
+	}
+	.module {
+	  min-width: 60px;
+	}
+}

public/docs/_examples/tutorial/dart/lib/dashboard_component.dart

@@ -0,0 +1,31 @@
+import 'package:angular2/core.dart';
+import 'package:angular2/router.dart';
+
+import 'hero.dart';
+import 'hero_service.dart';
+
+@Component(
+    selector: 'my-dashboard',
+    templateUrl: 'dashboard_component.html',
+    styleUrls: const ['dashboard_component.css'])
+class DashboardComponent implements OnInit {
+  List<Hero> heroes = [];
+
+  final HeroService _heroService;
+  final Router _router;
+  DashboardComponent(this._heroService, this._router);
+
+  ngOnInit() async {
+    _heroService
+        .getHeroes()
+        .then((heroes) => this.heroes = heroes.sublist(1, 5));
+  }
+
+  gotoDetail(Hero hero) {
+    _router.navigate([
+      'HeroDetail',
+      {'id': hero.id}
+    ]);
+  }
+}
+

public/docs/_examples/tutorial/dart/lib/dashboard_component.html

@@ -0,0 +1,8 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+	<div *ngFor="#hero of heroes" class="col-1-4" (click)="gotoDetail(hero)">
+		<div class="module hero">
+			<h4>{{hero.name}}</h4>
+		</div>
+	</div>
+</div>

public/docs/_examples/tutorial/dart/lib/hero.dart

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

public/docs/_examples/tutorial/dart/lib/hero_detail_component.css

@@ -0,0 +1,24 @@
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer; cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}

public/docs/_examples/tutorial/dart/lib/hero_detail_component.dart

@@ -0,0 +1,30 @@
+import 'dart:html';
+
+import 'package:angular2/core.dart';
+import 'package:angular2/router.dart';
+
+import 'hero.dart';
+import 'hero_service.dart';
+
+@Component(
+    selector: 'my-hero-detail',
+    templateUrl: 'hero_detail_component.html',
+    styleUrls: const ['hero_detail_component.css'])
+class HeroDetailComponent implements OnInit {
+  @Input() Hero hero;
+
+  final HeroService _heroService;
+  final RouteParams _routeParams;
+
+  HeroDetailComponent(this._heroService, this._routeParams);
+
+  ngOnInit() async {
+    int id = _routeParams.params['id'] as int;
+    hero ??= await _heroService.getHero(id);
+  }
+
+  goBack() {
+    window.history.back();
+  }
+}
+

public/docs/_examples/tutorial/dart/lib/hero_detail_component.html

@@ -0,0 +1,10 @@
+<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>
+	<button (click)="goBack()">Back</button>
+</div>

public/docs/_examples/tutorial/dart/lib/hero_service.dart

@@ -0,0 +1,21 @@
+import 'dart:async';
+
+import 'package:angular2/angular2.dart';
+
+import 'hero.dart';
+import 'mock_heroes.dart';
+
+@Injectable()
+class HeroService {
+  Future<List<Hero>> getHeroes() => new Future(() => mockHeroes);
+
+  Future<List<Hero>> getHeroesSlowly() {
+    return new Future.delayed(const Duration(seconds: 2), () => mockHeroes);
+  }
+
+	Future<Hero> getHero(int id) async {
+    List<Hero> heroes = await getHeroes();
+    return heroes.firstWhere((h) => h.id == id);
+	}
+}
+

public/docs/_examples/tutorial/dart/lib/heroes_component.css

@@ -0,0 +1,58 @@
+.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:hover {
+  color: #607D8B;
+  background-color: #EEE;
+  left: .1em;
+}
+.heroes li.selected:hover {
+  color: white;
+}
+.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;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}

public/docs/_examples/tutorial/dart/lib/heroes_component.dart

@@ -0,0 +1,40 @@
+import 'package:angular2/core.dart';
+import 'package:angular2/router.dart';
+
+import 'hero_service.dart';
+import 'hero_detail_component.dart';
+import 'hero.dart';
+
+@Component(
+    selector: 'my-heroes',
+    templateUrl: 'heroes_component.html',
+    styleUrls: const ['heroes_component.css'],
+    directives: const [HeroDetailComponent])
+class HeroesComponent implements OnInit {
+  List<Hero> heroes;
+  Hero selectedHero;
+
+  final HeroService _heroService;
+  final Router _router;
+
+  HeroesComponent(this._heroService, this._router);
+
+  getHeroes() async {
+    heroes = await _heroService.getHeroes();
+  }
+
+  gotoDetail() {
+    _router.navigate([
+      'HeroDetail',
+      {'id': selectedHero.id}
+    ]);
+  }
+
+  ngOnInit() {
+    getHeroes();
+  }
+
+  onSelect(Hero hero) {
+    selectedHero = hero;
+  }
+}