docs(quickstart): edit Dart & TS QuickStarts

Author: kwalrath

public/docs/dart/latest/quickstart.jade

@@ -7,22 +7,22 @@ block includes
   - var _angular_browser_uri = 'package:angular2/platform/browser.dart'
   - var _angular_core_uri = 'package:angular2/core.dart'
   - var _appDir = 'lib'
+  - var _anAppDir = 'a lib'
   - var _indexHtmlDir = 'web'
 
 block setup-tooling
   :marked
     Install the **[Dart SDK](https://www.dartlang.org/downloads/)**,
     if not already on your machine, and any tools you like to use with Dart.
-    The Dart SDK includes **[pub][pub]**, the Dart package manager, that we
-    will be using shortly.
+    The Dart SDK includes tools such as **[pub][pub]**, the Dart package manager.
     If you don't have a favorite Dart editor already, try
     [WebStorm][WS], which comes with a Dart plugin.
     You can also download [Dart plugins for other IDEs and editors][DT].
 
     [WS]: https://confluence.jetbrains.com/display/WI/Getting+started+with+Dart
     [DT]: https://www.dartlang.org/tools
     [pub]: https://www.dartlang.org/tools/pub
-    
+
 block download-source
   // exclude this section from Dart
 
@@ -57,8 +57,8 @@ block create-main
     Now we need something to tell Angular to load the root component.
     Create:
   ul
-    li a #[b folder named #[code web]], and inside it
-    li the file #[code #[+adjExPath('app/main.ts')]] with the following content:
+    li a #[b folder named #[code web]]
+    li a file named #[code #[+adjExPath('app/main.ts')]] with the following content:
 
 block index-html-commentary-for-ts
   //- N/A
@@ -76,7 +76,7 @@ block run-app
     and then run it by visiting <b><code>http://localhost:8080</code></b> in any modern browser.
     Pub serve generates JavaScript on the fly,
     which can take a while when you first visit the page.
-    Pub serve also runs in <b><i>watch mode</i></b>, and will re-compile and subsequently serve
+    Pub serve also runs in <b><i>watch mode</i></b>, and will recompile and subsequently serve
     and changed assets.
   p.
     Once the app is running, you should see the following in your browser
@@ -85,7 +85,7 @@ block run-app
 block build-app
   .alert.is-important
     :marked
-      If you don't see that, make sure you've entered all the code correctly,
+      If you don't see **My First Angular 2 App**, make sure you've entered all the code correctly,
       in the [proper folders](#wrap-up),
       and run `pub get`.
 
@@ -105,6 +105,11 @@ block build-app
     - var stylePattern = { pnk: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)/gm, otl: /(dependencies:)|(transformers:)/g };
     +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
 
+    .alert.is-important
+      :marked
+        The `dart_to_js_script_rewriter` transformer must be
+        **after** the `angular2` transformer in `pubspec.yaml`.
+
     p.
       Then compile your Dart code to JavaScript,
       using <code>pub build</code>.
@@ -115,7 +120,7 @@ block build-app
 
     p.
       The generated JavaScript appears, along with supporting files,
-      under the <code>build</code> directory.
+      under a directory named <code>build</code>.
     p.
       When you generate JavaScript for an Angular app,
       be sure to use the Angular transformer.
@@ -148,30 +153,39 @@ block build-app
         (<code>entry_points</code> in <code>pubspec.yaml</code>)
         so that they don't use mirrors.
 
-block server-watching  
+block server-watching
   :marked
-    Pub serve is watching and 
-    should detect the change, recompile the Dart into JavaScript,
-    refresh the browser, and display the revised message.
-    It's a nifty way to develop an application!
+    To see the new version, just reload the page.
 
-    Ensure that you terminate the `pub serve` process once you are done.
+  .alert.is-important
+    :marked
+      Be sure to terminate the `pub serve` process once you stop working on this app.
 
 block project-file-structure
   .filetree
     .file angular2-quickstart
     .children
-      .file build ...
       .file lib
       .children
         .file app_component.dart
       .file pubspec.yaml
       .file web
       .children
         .file index.html
-        .file main.ts
+        .file main.dart
         .file styles.css
 
+  .l-verbose-section
+    :marked
+      This figure doesn't show generated files and directories.
+      For example, a `pubspec.lock` file
+      specifies versions and other identifying information for
+      the packages that our app depends on.
+      The `pub build` command creates a `build` directory
+      containing the JavaScript version of our app.
+      Pub, IDEs, and other tools might create
+      other directories and dotfiles.
+
 block project-files
   +makeTabs(`
       quickstart/ts/app/app.component.ts,
@@ -180,10 +194,10 @@ block project-files
       quickstart/dart/pubspec.yaml,
       quickstart/ts/styles.1.css`
     ,null,
-    `app/app.component.ts, 
-    app/main.ts, 
+    `app/app.component.ts,
+    app/main.ts,
     index.html,
-    pubspec.yaml, 
+    pubspec.yaml,
     styles.css`)
 
 block what-next-ts-overhead