docs(guide): update Dart forms example & text

closes #654

public/docs/_examples/forms/dart/lib/hero_form_component.dart

@@ -15,21 +15,19 @@ const List<String> _powers = const [
 
 @Component(
     selector: 'hero-form',
-    templateUrl: 'hero_form_component.html',
-    // Soon specifying directives here will be unnecessary.
-    directives: const [CORE_DIRECTIVES, FORM_DIRECTIVES])
+    templateUrl: 'hero_form_component.html')
 class HeroFormComponent {
   List<String> get powers => _powers;
 // #docregion submitted
   bool submitted = false;
 // #enddocregion submitted
   Hero model = new Hero(18, 'Dr IQ', _powers[0], 'Chuck Overstreet');
-// #docregion submitted
 // #enddocregion no-todo
   // TODO: Remove this when we're done
   String get diagnostic => 'DIAGNOSTIC: $model';
 // #docregion no-todo
 
+// #docregion submitted
   onSubmit() {
     submitted = true;
   }

public/docs/_examples/forms/dart/lib/hero_form_component.html

@@ -1,4 +1,4 @@
-<!-- #docplaster ... all of the form ... -->
+<!-- #docplaster ... -->
 <!-- #docregion -->
 <div class="container">
   <!-- #docregion edit-div -->

public/docs/_examples/forms/dart/pubspec.yaml

@@ -3,9 +3,12 @@ name: hero_form
 description: Form example
 version: 0.0.1
 dependencies:
-  angular2: 2.0.0-alpha.52
+  angular2: 2.0.0-beta.0
   browser: ^0.10.0
 transformers:
 - angular2:
+    platform_directives:
+    - 'package:angular2/common.dart#CORE_DIRECTIVES'
+    - 'package:angular2/common.dart#FORM_DIRECTIVES'
     entry_points: web/main.dart
 

public/docs/dart/latest/guide/forms.jade

@@ -95,6 +95,12 @@ figure.image-display
 
 +makeTabs('forms/dart/pubspec.yaml, forms/dart/web/index.html, forms/dart/web/main.dart', ',initial,', 'pubspec.yaml, web/index.html, web/main.dart')
 
+.l-sub-section
+  :marked
+    Note the `platform_directives` entry in `pubspec.yaml`.
+    It imports core directives and, more importantly for this chapter,
+    **form directives**.
+
 :marked
   So that the code can run,
   let's create a stub for the `<hero-form>` component.
@@ -150,9 +156,8 @@ figure.image-display
 +makeExample('forms/dart/lib/hero_form_component.dart', null, 'lib/hero_form_component.dart')
 
 :marked
-  There’s nothing special about this component, nothing to distinguish it from any component we've written before,
-  nothing form-specific about it ... except, perhaps, the tell-tale `FORM_DIRECTIVES` import.
-  [PENDING: Soon that import shouldn't be necessary.]
+  There’s nothing special about this component, nothing form-specific,
+  nothing to distinguish it from any component we've written before.
 
   Understanding this component requires only the Angular 2 concepts covered in previous chapters.
 
@@ -314,7 +319,7 @@ figure.image-display
   The diagnostic near the top of the form
   confirms that our changes to the values are reflected in the model.
 
-  ** We're done with the diagnostic binding. Delete it now.**
+  **Delete the diagnostic binding.** It has served its purpose.
 
 
 .l-sub-section
@@ -337,7 +342,7 @@ figure.image-display
 
     In fact, we can break the `NgModel` binding into its two separate modes
     as in this rewrite of the Name `<input>` binding:
-  +makeExample('forms/dart/lib/hero_form_component_ngmodelchange.html', 'ngModel-3')(format=".")
+  +makeExample('forms/dart/lib/hero_form_component_ngmodelchange.html', 'ngModel-3', 'lib/hero_form_component.html (excerpt)')(format=".")
 
   :marked
     <br>The property binding should feel familiar. The event binding might seem strange.
@@ -429,7 +434,7 @@ figure.image-display
   named **spy**
   to the Name `<input>` tag and use the spy to display those classes.
 
-+makeExample('forms/dart/lib/hero_form_component_spy.html', 'ngControl-2')(format=".")
++makeExample('forms/dart/lib/hero_form_component_spy.html', 'ngControl-2', 'lib/hero_form_component.html (excerpt)')(format=".")
 
 :marked
   Now run the app, and look at the Name input box.
@@ -548,7 +553,7 @@ figure.image-display
   A "form submit" is meaningless at the moment. To make it meaningful,
   we'll update the `<form>` tag with another Angular directive, `NgSubmit`,
   and bind it to the `HeroFormComponent.onSubmit()` method:
-+makeExample('forms/dart/lib/hero_form_component.html', 'ngSubmit')(format=".")
++makeExample('forms/dart/lib/hero_form_component.html', 'ngSubmit', 'lib/hero_form_component.html (excerpt)')(format=".")
 
 :marked
   We slipped in something extra there at the end!  We defined a
@@ -561,7 +566,7 @@ figure.image-display
   We'll bind the form's overall validity via
   the `heroForm` variable to the button's `disabled` property
   using an event binding. Here's the code:
-+makeExample('forms/dart/lib/hero_form_component.html', 'submit-button')(format=".")
++makeExample('forms/dart/lib/hero_form_component.html', 'submit-button', 'lib/hero_form_component.html (excerpt)')(format=".")
 :marked
   If we run the application now, we find that the button is enabled.
   It doesn't do anything useful yet but it's alive.
@@ -596,7 +601,7 @@ figure.image-display
   Start by wrapping the form in a `<div>` and binding
   its `hidden` property to the `HeroFormComponent.submitted` property.
 
-+makeExample('forms/dart/lib/hero_form_component.html', 'edit-div')(format=".")
++makeExample('forms/dart/lib/hero_form_component.html', 'edit-div', 'lib/hero_form_component.html (excerpt)')(format=".")
 
 :marked
   The main form is visible from the start because the
@@ -610,7 +615,7 @@ figure.image-display
 
   Now the app needs to show something else while the form is in the submitted state.
   Add the following block of HTML below the `<div>` wrapper we just wrote:
-+makeExample('forms/dart/lib/hero_form_component.html', 'submitted')(format=".")
++makeExample('forms/dart/lib/hero_form_component.html', 'submitted', 'lib/hero_form_component.html (excerpt)')(format=".")
 
 :marked
   There's our hero again, displayed read-only with interpolation bindings.