More updates to Dart stuff

harp.json

@@ -4,7 +4,7 @@
     "description": "Angular is a development platform for building mobile and desktop web applications",
     "siteURL": "http://angular.io",
     "jsLatest": "2.0.0-alpha.11",
-    "dartLatest": "2.0.0-alpha.11",
+    "dartLatest": "2.0.0-alpha.6",
 
     "bios": {
       "misko": {
@@ -160,4 +160,4 @@
       }
     }
   }
-}
+}

public/docs/dart/latest/quickstart.jade

@@ -22,10 +22,6 @@ p.
   p.
     In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies:
 
-  // [PENDING: if the transformer isn't working in time,
-  // remove it and use reflection in Dartium instead.
-  // Perhaps require Dart 1.9.]
-
   pre.prettyprint.linenums
     code.
       name: hello_world
@@ -50,7 +46,14 @@ p.
 
   // PENDING: Create template? Link to pub/pubspec docs?
   // Is browser really needed?
-  // TODO: make this an invisible note.
+
+  p.
+    <b>Note:</b>
+    If you're using Dart 1.9, then your version of angular2
+    will be higher than alpha 6.
+
+  // PENDING: Update once 1.9 is on stable channel.
+  // TODO: Convert the above to a callout.
 
 
 // STEP 2 - Import Angular ##########################
@@ -70,7 +73,8 @@ p.
     Edit <code>web/main.dart</code> to import the angular2 library
     and (for now) two reflection libraries:
 
-  pre.prettyprint.linenums
+  // pre.prettyprint.linenums
+  pre.prettyprint
     code.
       import 'package:angular2/angular2.dart';
 
@@ -78,22 +82,18 @@ p.
       import 'package:angular2/src/reflection/reflection.dart' show reflector;
       import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
 
+  // [PENDING: add line numbers once we can specify where they start]
+
 // STEP 3 - Define a component ##########################
 .l-main-section
 
   h2#section-angular-create-account 3. Define a component
 
   p.
-    A component is a custom HTML element.
+    Update <code>web/main.dart</code>, adding the following code
-    In this step, you create a component that has the tag <b>&lt;my-app></b>.
+    after the imports:
-    The Dart code for a component consists of a class
-    with annotations that describe the component.
 
-  p.
+  pre.prettyprint
-    Update <code>web/main.dart</code> to add the following code,
-    which defines the my-app component:
-
-  pre.prettyprint.linenums
     code.
       @Component(
         selector: 'my-app'
@@ -105,24 +105,31 @@ p.
         String name = 'Alice';
       }
 
-  // TODO: Change or omit line numbers.
+  // [PENDING: add line numbers once we can specify where they start]
+
+  p.
+    The code you just added creates a component—a custom element—that
+    has the tag <b>&lt;my-app></b>.
+    The Dart code for an Angular component consists of a class
+    (the <b>component controller</b>)
+    that has <code>@Component</code> and <code>@Template</code> annotations.
+
+  // PENDING: Is that correct???
+
 
   .l-sub-section
     h3 Annotations
 
     p.
-      The <code>@Component</code> annotation defines the HTML tag for the component.
+      The <code>@Component</code> annotation defines the HTML tag for the component (the <code>selector</code> value).
-      The <code>selector</code> property specifies the tag. The <code>selector</code> property is a CSS selector.
-
-    // [PENDING: that last paragraph needs work!]
 
     p.
-      The <code>@Template</code> annotation defines the template to apply to the
+      The <code>@Template</code> annotation defines the HTML to apply to the
-      component. This component uses an inline template, but external templates are
+      component. This component uses an inline template, but you can also have
-      available as well. To use an external template, specify a <code>url</code> property
+      an external template. To use an external template, specify a <code>url</code> property
       and give it the path to the HTML file.
 
-    pre.prettyprint.linenums
+    pre.prettyprint
       code.
         @Component(
           selector: 'my-app'
@@ -131,11 +138,12 @@ p.
           inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
         )
 
+    // [PENDING: add line numbers once we can specify where they start]
+
     p.
-      The annotations above specify an HTML tag of <code>&lt;my-app&gt;&lt;/my-app&gt;</code>
+      The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
       and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
 
-    // TODO: In the preceding paragraph, that should be rendered as {{ name }}, like in the listing.
 
   .l-sub-section
     h3 The template and the component controller
@@ -144,9 +152,10 @@ p.
       A template has access to all the public properties and methods
       of its component controller.
       The template above binds to a <code>name</code> property through
-      the double-mustache syntax (<code ng-non-bindable>{{ }}</code>).
+      the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
-      The body of the constructor assigns "Alice" to the name property. When the
+      The component controller assigns "Alice" to the name property. When the
-      template renders, Alice appears instead of <code ng-non-bindable>{{ name }}</code>.
+      template renders, "Hello Alice" appears instead of
+      <span ng-non-bindable>"Hello {{ name }}"</span>.
 
 
     // [PENDING: Do we really want to use the term "component controller"?
@@ -154,28 +163,23 @@ p.
     // In the original text, what does "the backing" mean, and is it
     // important that we keep it?]
 
-    pre.prettyprint.linenums
+    pre.prettyprint
       code.
         class AppComponent {
           String name = 'Alice';
         }
 
+    // [PENDING: add line numbers once we can specify where they start]
+
+
 // STEP 4 - Bootstrap ##########################
 .l-main-section
   h2#section-transpile 4. Bootstrap
 
   p.
-    At the bottom of <code>web/main.dart</code>,
+    Add the following code to the bottom of <code>web/main.dart</code>:
-    add a <code>main()</code> function
-    that calls Angular's <code>bootstrap()</code> function.
-    The argument to <code>bootstrap()</code> is the name of the app class
-    you defined above.
 
-  p.
+  pre.prettyprint
-    For now, you also need to set the value of
-    <code>reflector.reflectionCapabilities</code>.
-
-  pre.prettyprint.linenums
     code.
       main() {
         // Temporarily needed.
@@ -184,7 +188,20 @@ p.
         bootstrap(AppComponent);
       }
 
-  // [PENDING: change/remove line numbers. They should start at 12.]
+  // [PENDING: add line numbers once we can specify where they start]
+
+  p.
+    This code adds a <code>main()</code> function
+    that calls Angular's <code>bootstrap()</code> function.
+    The argument to <code>bootstrap()</code> is the name of the app class
+    you defined above.
+
+  p.
+    Setting the value of
+    <code>reflector.reflectionCapabilities</code>
+    is a temporary workaround
+    that you can remove once Angular's transformer is available.
+
 
 // STEP 5 - Declare the HTML ##########################
 .l-main-section
@@ -211,8 +228,6 @@ p.
           &lt;/body>
         &lt;/html>
 
-  // [PENDING: When I select a bunch of code, it looks like I select the line #s too, making me fear that they'll get copied. But pasting doesn't include them. Can we fix that?]
-
 // STEP 6 - Build and run ##########################
 .l-main-section
 
@@ -225,14 +240,13 @@ p.
     right-click <code>web/index.html</code>,
     and choose <b>Open in Dartium</b>.
 
-  // TODO: screenshot?
+  // TODO: screenshot? embedded app?
 
   p.
     Another option is to build and serve the app using <code>pub serve</code>,
-    and then to run it by visiting http://localhost:8080/index.html in a browser.
+    and then run it by visiting http://localhost:8080/index.html in a browser.
     The JavaScript generated using this option is large, for now;
-    it'll be much better soon, when a transformer becomes available
+    it'll be much better soon, when Angular's transformer becomes available.
-    to convert the reflection code from dynamic to static code.
 
   // [PENDING: Update when transformer is working!]
 
@@ -241,6 +255,14 @@ p.
   h2#section-transpile Great job! Next step...
 
   p.
-    Learn some template syntax for extra credit.
+    To try out the latest Angular 2 APIs,
+    first download the <b>Dev channel</b> of Dart from the
+    <a href="https://www.dartlang.org/tools/download-archive/">Dart
+    Download Archive</a>.
 
-  // [PENDING: really?]
+  p.
+    Once you have the Dart Dev channel, use <b>pub upgrade</b>
+    to get the latest version of Angular 2.
+
+
+  // [PENDING: really?] Perhaps point to dartlang.org.