docs(guide/attributes-directives): Dart version of sample

#closes #451

public/docs/_examples/attribute-directives/dart/lib/app_component.dart

@@ -0,0 +1,13 @@
+// #docregion
+library attribute_directives.app_component;
+
+import 'package:angular2/angular2.dart';
+import 'package:attribute_directives/highlight_directive.dart';
+
+@Component(
+    selector: 'my-app',
+    templateUrl: 'app_component.html',
+    directives: const [Highlight])
+class AppComponent {
+  String color;
+}

public/docs/_examples/attribute-directives/dart/lib/app_component.html

@@ -0,0 +1,20 @@
+<!-- #docregion -->
+<!-- #docregion v2 -->
+<h1>My First Attribute Directive</h1>
+<h4>Pick a highlight color</h4>
+<div>
+  <input type="radio" name="colors" (click)="color='lightgreen'">Green
+  <input type="radio" name="colors" (click)="color='yellow'">Yellow
+  <input type="radio" name="colors" (click)="color='cyan'">Cyan
+</div>
+<!-- #docregion span -->
+<p><span [my-highlight]="color">Highlight me!</span></p>
+<!-- #enddocregion span -->
+<!-- #enddocregion v2 -->
+
+<!-- #docregion defaultColor -->
+<p><span [my-highlight]="color" [default-color]="'violet'">
+Highlight me too!
+</span></p>
+<!-- #enddocregion defaultColor -->
+<!-- #enddocregion -->

public/docs/_examples/attribute-directives/dart/lib/app_component_1.html

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<h1>My First Attribute Directive</h1>
+<span my-highlight>Highlight me!</span>

public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart

@@ -0,0 +1,55 @@
+// #docplaster
+// #docregion full
+library attribute_directives.highlight_directive;
+
+import 'package:angular2/angular2.dart';
+
+@Directive(selector: '[my-highlight]', host: const {
+  '(mouseenter)': 'onMouseEnter()',
+  '(mouseleave)': 'onMouseLeave()'
+})
+// #docregion class-1
+class Highlight {
+  // #enddocregion class-1
+// #enddocregion full
+  /*
+// #docregion highlight
+  @Input() myHighlight: string;
+// #enddocregion highlight
+  */
+// #docregion full
+// #docregion class-1
+// #docregion color
+  @Input('my-highlight') String highlightColor;
+// #enddocregion color
+
+  String _defaultColor = 'red';
+  // #enddocregion class-1
+  // #docregion defaultColor
+  @Input() set defaultColor(String colorName) {
+    _defaultColor = (colorName ?? _defaultColor);
+  }
+  // #enddocregion defaultColor
+// #docregion class-1
+
+  final Renderer _renderer;
+  final ElementRef _element;
+
+// #docregion mouse-enter
+  onMouseEnter() {
+    _highlight(highlightColor ?? _defaultColor);
+  }
+
+// #enddocregion mouse-enter
+  onMouseLeave() {
+    _highlight(null);
+  }
+
+  void _highlight(String color) {
+    _renderer.setElementStyle(_element, 'background-color', color);
+  }
+
+  Highlight(this._element, this._renderer);
+}
+// #enddocregion class-1
+// #enddocregion full

public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart

@@ -0,0 +1,12 @@
+// #docregion
+library attribute_directives.highlight_directive;
+
+import 'package:angular2/angular2.dart';
+
+@Directive(selector: '[my-highlight]')
+class Highlight {
+  Highlight(ElementRef element, Renderer renderer) {
+    //el.nativeElement.style.backgroundColor = 'yellow';
+    renderer.setElementStyle(element, 'background-color', 'yellow');
+  }
+}

public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart

@@ -0,0 +1,35 @@
+// #docregion
+library attribute_directives.highlight_directive;
+
+import 'package:angular2/angular2.dart';
+
+@Directive(selector: '[my-highlight]',
+// #docregion host
+    host: const {
+      '(mouseenter)': 'onMouseEnter()',
+      '(mouseleave)': 'onMouseLeave()'
+    }
+// #enddocregion host
+    )
+class Highlight {
+  final Renderer _renderer;
+  final ElementRef _element;
+// #docregion mouse-methods
+  onMouseEnter() {
+    _highlight("yellow");
+  }
+
+  onMouseLeave() {
+    _highlight(null);
+  }
+  // #enddocregion mouse-methods
+
+  void _highlight(String color) {
+    _renderer.setElementStyle(_element, 'background-color', color);
+  }
+
+// #docregion ctor
+  Highlight(this._element, this._renderer);
+// #enddocregion ctor
+}
+// #enddocregion

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

@@ -0,0 +1,10 @@
+name: attribute_directives
+description: Attribute Directives
+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/attribute-directives/dart/web/index.html

@@ -0,0 +1,13 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Attribute Directives</title>
+    <link rel="stylesheet" href="style.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/attribute-directives/dart/web/main.dart

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