docs(guide): add dart version of structural directives

public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart

@@ -0,0 +1,31 @@
+// #docregion
+import 'package:angular2/angular2.dart';
+import 'dart:async';
+
+int nextId = 1;
+
+@Component(
+    selector: 'heavy-loader',
+    template: '<span>heavy loader #{{id}} on duty!</span>')
+class HeavyLoaderComponent implements OnInit, OnDestroy {
+  int id = nextId++;
+  @Input() List<String> logs;
+
+  // Mock todo: get 10,000 rows of data from the server
+  ngOnInit() => _log(
+      "heavy-loader ${id} initialized, loading 10,000 rows of data from the server");
+
+  // Mock todo: clean-up
+  ngOnDestroy() => _log("heavy-loader ${id} destroyed, cleaning up");
+
+  _log(String msg) {
+    logs.add(msg);
+    _tick();
+  }
+
+  /// Triggers the next round of Angular change detection
+  /// after one turn of the JavaScript cycle
+  /// ensuring display of msg added in onDestroy
+  _tick() => new Future(() {});
+}
+// #enddocregion

public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart

@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion
+import 'package:angular2/angular2.dart';
+import 'unless_directive.dart';
+import 'heavy_loader_component.dart';
+
+@Component(
+    selector: 'structural-directives',
+    templateUrl: 'structural_directives_component.html',
+    styles: const ['button { min-width: 100px; }'],
+    directives: const [UnlessDirective, HeavyLoaderComponent])
+class StructuralDirectivesComponent {
+  List<String> heroes = ['Mr. Nice', 'Narco', 'Bombasto'];
+  bool condition = true;
+  bool isVisible = true;
+  List<String> logs = [];
+  String status = 'ready';
+
+  get hero => heroes[0];
+}
+//#enddocregion

public/docs/_examples/structural-directives/dart/lib/structural_directives_component.html

@@ -0,0 +1,109 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<h1>Structural Directives</h1>
+
+<!-- #docregion structural-directives -->
+<!-- #docregion asterisk -->
+<div *ngIf="hero != null">{{hero}}</div>
+<div *ngFor="#hero of heroes">{{hero}}</div>
+<!-- #enddocregion asterisk -->
+<!-- #docregion ngSwitch -->
+<div [ngSwitch]="status">
+  <template [ngSwitchWhen]="'in-mission'">In Mission</template>
+  <template [ngSwitchWhen]="'ready'">Ready</template>
+  <template ngSwitchDefault>Unknown</template>
+</div>
+<!-- #enddocregion ngSwitch -->
+<!-- #enddocregion structural-directives -->
+
+<hr>
+
+<button
+    (click)="condition = !condition"
+    [style.background] = "condition ? 'orangered': 'lightgreen'"
+>
+  Set 'condition' to {{condition ? 'False': 'True'}}
+</button>
+
+<!-- #docregion ngIf -->
+<p *ngIf="condition">
+  condition is true and ngIf is true.
+</p>
+<p *ngIf="!condition">
+  condition is false and ngIf is false.
+</p>
+<!-- #enddocregion ngIf -->
+<!-- #docregion myUnless-->
+<p *myUnless="condition">
+  condition is false and myUnless is true.
+</p>
+
+<p *myUnless="!condition">
+  condition is true and myUnless is false.
+</p>
+<!-- #enddocregion myUnless-->
+
+<hr>
+
+<!-- #docregion message-log -->
+<div><!-- Visibility -->
+  <button (click)="isVisible = !isVisible">show | hide</button>
+  <heavy-loader [style.display]="isVisible ? 'inline' : 'none'" [logs]="logs"></heavy-loader>
+</div>
+
+<div><!-- NgIf -->
+  <button (click)="condition = !condition">if | !if</button>
+  <heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>
+</div>
+
+<h4>heavy-loader log:</h4>
+<div *ngFor="#message of logs">{{message}}</div>
+<!-- #enddocregion message-log -->
+
+<hr>
+
+<!-- #docregion template-tag -->
+<p>
+  Hip!
+</p>
+<template>
+  <p>
+    Hip!
+  </p>
+</template>
+<p>
+  Hooray!
+</p>
+<!-- #enddocregion template-tag -->
+
+<hr>
+
+<!-- #docregion ngIf-template -->
+<!-- Examples (A) and (B) are the same -->
+<!-- (A) *ngIf paragraph -->
+<p *ngIf="condition">
+  Our heroes are true!
+</p>
+
+<!-- (B) [ngIf] with template -->
+<template [ngIf]="condition">
+  <p>
+    Our heroes are true!
+  </p>
+</template>
+<!-- #enddocregion ngIf-template -->
+
+<hr>
+
+<!-- #docregion ngFor-template -->
+<!-- Examples (A) and (B) are the same -->
+
+<!-- (A) *ngFor div -->
+<div *ngFor="#hero of heroes">{{ hero }}</div>
+
+<!-- (B) ngFor with template -->
+<template ngFor #hero [ngForOf]="heroes">
+  <div>{{ hero }}</div>
+</template>
+<!-- #enddocregion ngFor-template -->
+<!-- #enddocregion -->

public/docs/_examples/structural-directives/dart/lib/unless_directive.dart

@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion
+// #docregion unless-declaration
+import 'package:angular2/angular2.dart';
+// #enddocregion unless-declaration
+
+// #docregion unless-declaration
+@Directive(selector: '[myUnless]')
+class UnlessDirective {
+  // #enddocregion unless-declaration
+
+  // #docregion unless-constructor
+  TemplateRef _templateRef;
+  ViewContainerRef _viewContainer;
+
+  UnlessDirective(this._templateRef, this._viewContainer);
+  // #enddocregion unless-constructor
+
+  // #docregion unless-set
+  @Input()
+  set myUnless(bool condition) {
+    if (!condition) {
+      _viewContainer.createEmbeddedView(_templateRef);
+    } else {
+      _viewContainer.clear();
+    }
+  }
+  // #enddocregion unless-set
+  // #docregion unless-declaration
+}
+// #enddocregion unless-declaration
+// #enddocregion

public/docs/_examples/structural-directives/dart/pubspec.yaml

@@ -0,0 +1,14 @@
+name: structural_directives
+description: Structural directives example
+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
+transformers:
+- angular2:
+    platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
+    entry_points: web/main.dart
+- dart_to_js_script_rewriter

public/docs/_examples/structural-directives/dart/web/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html>
+
+<head>
+  <title>Angular 2 Structural Directives</title>
+  <script defer src="main.dart" type="application/dart"></script>
+  <script defer src="packages/browser/dart.js"></script>
+</head>
+
+<body>
+  <structural-directives>Loading...</structural-directives>
+</body>
+
+</html>

public/docs/_examples/structural-directives/dart/web/main.dart

@@ -0,0 +1,7 @@
+// #docregion
+import 'package:angular2/bootstrap.dart';
+import 'package:structural_directives/structural_directives_component.dart';
+
+main() {
+  bootstrap(StructuralDirectivesComponent);
+}