docs(guide/attribute-directives): follow-up to #1654 (#1765)

- Updated Dart code to match TS.
- Ran dartfmt.
- Enabled e2e tests; suites passed:
  - public/docs/_examples/attribute-directives/dart
  - public/docs/_examples/attribute-directives/ts
- Prose copyedits.

Author: chalin

public/docs/_examples/attribute-directives/dart/example-config.json

@@ -2,39 +2,41 @@
 // #docregion full
 import 'package:angular2/core.dart';
 
-@Directive(selector: '[myHighlight]', host: const {
-  '(mouseenter)': 'onMouseEnter()',
-  '(mouseleave)': 'onMouseLeave()'
-})
-// #docregion class-1
+@Directive(selector: '[myHighlight]')
+// #docregion class
 class HighlightDirective {
   String _defaultColor = 'red';
   final dynamic _el;
 
   HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
-  // #enddocregion class-1
+  // #enddocregion class
 
   // #docregion defaultColor
-  @Input() set defaultColor(String colorName) {
+  @Input()
+  set defaultColor(String colorName) {
     _defaultColor = (colorName ?? _defaultColor);
   }
   // #enddocregion defaultColor
-  // #docregion class-1
+  // #docregion class
 
   // #docregion color
-  @Input('myHighlight') String highlightColor;
+  @Input('myHighlight')
+  String highlightColor;
   // #enddocregion color
-  
+
   // #docregion mouse-enter
-  void onMouseEnter() { _highlight(highlightColor ?? _defaultColor); }
+  @HostListener('mouseenter')
+  void onMouseEnter() => _highlight(highlightColor ?? _defaultColor);
+
   // #enddocregion mouse-enter
-  void onMouseLeave() { _highlight(); }
+  @HostListener('mouseleave')
+  void onMouseLeave() => _highlight();
 
   void _highlight([String color]) {
-    if(_el != null) _el.style.backgroundColor = color;
+    if (_el != null) _el.style.backgroundColor = color;
   }
 }
-// #enddocregion class-1
+// #enddocregion class
 // #enddocregion full
 /*
 // #docregion highlight

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

@@ -1,24 +1,29 @@
 // #docregion
 import 'package:angular2/core.dart';
 
-@Directive(selector: '[myHighlight]',
-    // #docregion host
-    host: const {
-      '(mouseenter)': 'onMouseEnter()',
-      '(mouseleave)': 'onMouseLeave()'
-    }
-    // #enddocregion host
-)
+@Directive(selector: '[myHighlight]')
 class HighlightDirective {
   // #docregion ctor
   final dynamic _el;
 
   HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
   // #enddocregion ctor
 
-  // #docregion mouse-methods
-  void onMouseEnter() { _highlight("yellow"); }
-  void onMouseLeave() { _highlight(); }
+  // #docregion mouse-methods, host
+  @HostListener('mouseenter')
+  void onMouseEnter() {
+    // #enddocregion host
+    _highlight('yellow');
+    // #docregion host
+  }
+
+  @HostListener('mouseleave')
+  void onMouseLeave() {
+    // #enddocregion host
+    _highlight();
+    // #docregion host
+  }
+  // #enddocregion host
 
   void _highlight([String color]) {
     if (_el != null) _el.style.backgroundColor = color;

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

@@ -1,5 +1,4 @@
 /* tslint:disable:no-unused-variable */
-// #docplaster
 // #docregion
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
@@ -8,9 +7,9 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 })
 
 export class HighlightDirective {
-
   // #docregion ctor
   private el: HTMLElement;
+
   constructor(el: ElementRef) { this.el = el.nativeElement; }
   // #enddocregion ctor
 

public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts

@@ -5,20 +5,20 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 @Directive({
   selector: '[myHighlight]'
 })
-// #docregion class-1
+// #docregion class
 export class HighlightDirective {
   private _defaultColor = 'red';
   private el: HTMLElement;
 
   constructor(el: ElementRef) { this.el = el.nativeElement; }
-  // #enddocregion class-1
+  // #enddocregion class
 
   // #docregion defaultColor
   @Input() set defaultColor(colorName: string){
     this._defaultColor = colorName || this._defaultColor;
   }
   // #enddocregion defaultColor
-  // #docregion class-1
+  // #docregion class
 
   // #docregion color
   @Input('myHighlight') highlightColor: string;
@@ -37,7 +37,7 @@ export class HighlightDirective {
     this.el.style.backgroundColor = color;
   }
 }
-// #enddocregion class-1
+// #enddocregion class
 // #enddocregion full
 /*
 // #docregion highlight

public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts

@@ -64,7 +64,7 @@ a#write-directive
 include ../_quickstart_repo
 :marked
   Create the following source file in the indicated folder with the given code:
-+makeExample('attribute-directives/ts/app/highlight.directive.1.ts', null, 'app/highlight.directive.ts')
++makeExample('app/highlight.directive.1.ts')
 
 block highlight-directive-1
   :marked
@@ -97,7 +97,7 @@ block highlight-directive-1
 
     We need a prefix of our own, preferably short, and `my` will do for now.
 p
-  | After the `@Directive` metadata comes the directive's controller class, which contains the logic for the directive. 
+  | After the #[code @Directive] metadata comes the directive's controller class, which contains the logic for the directive. 
   +ifDocsFor('ts')
     | We export `HighlightDirective` to make it accessible to other components.
 :marked
@@ -169,13 +169,13 @@ a#respond-to-user
   1. detect when the user hovers into and out of the element,
   2. respond to those actions by setting and clearing the highlight color, respectively.
 
-  We use the `@HostListener` decorator on a method which is called when the event is raised.
+  We apply the `@HostListener` !{_decorator} to methods which are called when an event is raised.
 
 +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','host')(format=".")
 
 .l-sub-section
   :marked
-    The `@HostListener` decorator refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
+    The `@HostListener` !{_decorator} refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
 
     We could have attached event listeners by manipulating the host DOM element directly, but
     there are at least three problems with such an approach:
@@ -184,7 +184,7 @@ a#respond-to-user
     1. We must *detach* our listener when the directive is destroyed to avoid memory leaks.
     1. We'd be talking to DOM API directly which, we learned, is something to avoid.
 
-    Let's roll with the `@HostListener` decorator. 
+    Let's roll with the `@HostListener` !{_decorator}. 
 :marked
   Now we implement the two mouse event handlers:
 +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','mouse-methods')(format=".")
@@ -195,7 +195,7 @@ a#respond-to-user
 +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','ctor')(format=".")
 :marked
   Here's the updated directive:
-+makeExample('attribute-directives/ts/app/highlight.directive.2.ts',null, 'app/highlight.directive.ts')
++makeExample('app/highlight.directive.2.ts')
 :marked
   We run the app and confirm that the background color appears as we move the mouse over the `p` and
   disappears as we move out.
@@ -213,12 +213,12 @@ a#bindings
   We'll extend our directive class with a bindable **input** `highlightColor` property and use it when we highlight text.
 
   Here is the final version of the class:
-+makeExample('attribute-directives/ts/app/highlight.directive.ts', 'class-1', 'app/highlight.directive.ts (class only)')
++makeExcerpt('app/highlight.directive.ts', 'class')
 a#input
 :marked
   The new `highlightColor` property is called an *input* property because data flows from the binding expression into our directive.
   Notice the `@Input()` #{_decorator} applied to the property.
-+makeExample('attribute-directives/ts/app/highlight.directive.ts', 'color')
++makeExcerpt('app/highlight.directive.ts', 'color')
 :marked
   `@Input` adds metadata to the class that makes the `highlightColor` property available for 
   property binding under the `myHighlight` alias. 
@@ -232,25 +232,25 @@ a#input
 
     We could resolve the discrepancy by renaming the property to `myHighlight` and define it as follows:
 
-  +makeExample('attribute-directives/ts/app/highlight.directive.ts', 'highlight')
+  +makeExcerpt('app/highlight.directive.ts', 'highlight', '')
   :marked
     Maybe we don't want that property name inside the directive perhaps because it 
     doesn't express our intention well. 
     We can **alias** the `highlightColor` property with the attribute name by
     passing `myHighlight` into the `@Input` #{_decorator}:
-  +makeExample('attribute-directives/ts/app/highlight.directive.ts', 'color')
+  +makeExcerpt('app/highlight.directive.ts', 'color', '')
 :marked
   Now that we're getting the highlight color as an input, we modify the `onMouseEnter()` method to use
   it instead of the hard-coded color name.
   We also define red as the default color to fallback on in case
   the user neglects to bind with a color.
-+makeExample('attribute-directives/ts/app/highlight.directive.ts', 'mouse-enter')
++makeExcerpt('attribute-directives/ts/app/highlight.directive.ts', 'mouse-enter', '')
 :marked
   Now we'll update our `AppComponent` template to let 
   users pick the highlight color and bind their choice to our directive.
 
   Here is the updated template:
-+makeExample('attribute-directives/ts/app/app.component.html', 'v2')
++makeExcerpt('attribute-directives/ts/app/app.component.html', 'v2', '')
 
 .l-sub-section
   :marked