docs(dart/setup): make Dart setup more Darty

Author: kwalrath

public/docs/dart/latest/guide/_data.json

@@ -8,9 +8,9 @@
   },
 
   "setup": {
-    "title": "Setup for local development",
+    "title": "Setup for Development",
     "navTitle": "Setup",
-    "intro": "Install the Angular QuickStart seed for faster, more efficient development on your machine",
+    "intro": "How to use Dart tools to create and run Angular apps",
     "nextable": true,
     "hideNextPage": true,
     "basics": true

public/docs/dart/latest/guide/images/create-ng2-project.png

@@ -1,58 +1,161 @@
-extends ../../../ts/_cache/guide/setup.jade
-
-block includes
-  include ../_util-fns
-  - var _prereq = 'the Dart SDK';
-  - var _playground = 'repository';
-  - var _Install = 'Get';
-  //- npm/pub commands
-  - var _install = 'get';
-  - var _start = 'serve';
-
-block qs-seed
-  :marked
-    The <live-example name="quickstart">QuickStart project</live-example> can 
-    conveniently be used to seed new projects. It contains the following core files:
-
-block core-files
-  +makeTabs(`
-      quickstart/ts/app/app.component.ts,
-      quickstart/ts/app/main.ts,
-      quickstart/ts/index.html,
-      quickstart/dart/pubspec.yaml,
-      quickstart/ts/styles.css`,
-    ',,,,quickstart',
-    `app/app.component.ts,
-    app/main.ts,
-    index.html,
-    pubspec.yaml,
-    styles.css (excerpt)`)
+include ../_util-fns
 
-  :marked
-    These files are organized as follows:
+a#develop-locally
+:marked
+  Setting up a new Angular project is quick and easy,
+  using everyday Dart tools.
+
+.l-main-section#sdk
+:marked
+  ## Prerequisites: Dart SDK & Dartium
+
+  If you don't already have the **Dart SDK** and **Dartium**, get them.
+  We recommend using the WebStorm IDE, as well.
+
+  [Get Started](https://webdev.dartlang.org/guides/get-started) tells you how to get the tools.
+
+
+a#webstorm
+:marked
+  ## Creating a project in WebStorm
+
+  Using WebStorm to create an app is simple, once you complete some one-time setup.
+
+  1. Launch WebStorm.
+  1. If you haven't already done so,
+  [configure Dart support in WebStorm](https://webdev.dartlang.org/tools/webstorm#configuring-dart-support).
+  1. Choose **Create New Project** from the welcome screen,
+  or **File > New > Project...** from the menu.  A dialog appears.
+  1. Select **Dart** from the list on the left.
+  1. Set the location and template:
+     1. In the **Location** input field, check that
+        the project folder is where you want it.
+     1. Also in the **Location** field,
+        change the name of the project from `untitled` to whatever you choose, such as `angular_quickstart`.
+    1. Make sure that **Generate sample content** is checked.
+    1. Select **Angular QuickStart Example** from the list.
+    <br>
+    The form should look similar to the following:
+    <br>
+    <img src="images/create-ng2-project.png" alt="A screenshot of the New Project dialog, with the specified selections" style="border:1px solid">
+  1. Click **Create**.
+
+  WebStorm takes several seconds to analyze the sources and do other housekeeping.
+  This only happens once. After that, you'll be able to use WebStorm for the usual IDE tasks,
+  including running the app.
+
+  For more information on using WebStorm, see
+  [Installing and Using WebStorm](https://webdev.dartlang.org/tools/webstorm).
+
+
+a#cli
+:marked
+  ## Using a template from the command line
 
-  .filetree
-    .file angular_quickstart
+  [Stagehand](http://stagehand.pub/) gives you
+  command-line access to the same templates that WebStorm uses.
+  Assuming the Dart SDK and
+  [pub cache `bin` directory](https://www.dartlang.org/tools/pub/cmd/pub-global#running-a-script-from-your-path)
+  are in your path, here's how you use Stagehand to create an Angular project.
+
+  1. Install or update stagehand:
+  <br>
+  `pub global activate stagehand`
+  1. Create a directory for your project:
+  <br>
+  `mkdir angular_quickstart; cd angular_quickstart`
+  1. Use Stagehand with the appropriate template to create a skeleton app:
+  <br>
+  `stagehand web-angular-quickstart`
+   <br>
+   **Note:** 
+   Examples in this guide and tutorial are based on the QuickStart example,
+   which is in the `web-angular-quickstart` template.
+   A more general-purpose template is `web-angular`.
+  1. Get the app's dependencies: <br>
+     `pub get`
+  1. Run the app: <br>
+     `pub serve`
+
+
+.l-main-section#seed
+:marked
+  ## What's in the QuickStart example?
+
+  The <live-example name="quickstart">QuickStart example</live-example>
+  contains the following core files:
+
++makeTabs(`
+    quickstart/ts/app/app.component.ts,
+    quickstart/ts/app/main.ts,
+    quickstart/ts/index.html,
+    quickstart/ts/styles.css,
+    quickstart/dart/pubspec.yaml`,
+  ',,,quickstart,',
+  `app/app.component.ts,
+  app/main.ts,
+  index.html,
+  styles.css (excerpt),
+  pubspec.yaml`)
+
+:marked
+  These files are organized as follows:
+
+.filetree
+  .file angular_quickstart
+  .children
+    .file lib
+    .children
+      .file app_component.dart
+    .file web
     .children
-      .file lib
-      .children
-        .file app_component.dart
-      .file pubspec.yaml
-      .file web
-      .children
-        .file index.html
-        .file main.dart
-        .file styles.css
-
-block install-tooling
+      .file main.dart
+      .file index.html
+      .file styles.css
+    .file pubspec.yaml
+
+:marked
+  All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows.
+
+style td, th {vertical-align: top}
+table(width="100%")
+  col(width="20%")
+  col(width="80%")
+  tr
+    th File
+    th Purpose
+  tr
+    td <code>lib/app_component.dart</code>
+    td
+      :marked
+        Defines `<my-app>`, the **root** component of what will become a tree of nested components
+        as the application evolves. 
+  tr
+    td <code>web/main.dart</code>
+    td
+      :marked
+        Bootstraps the application to run in the browser.
+  tr
+    td <code>web/index.html</code>
+    td
+      :marked
+        Contains the `<my-app>` tag in its `<body>`.
+        This is where the app lives!
+  tr
+    td <code>web/styles.css</code>
+    td
+      :marked
+        A set of styles used throughout the app.
+  tr
+    td <code>pubspec.yaml</code>
+    td
+      :marked
+        The file that describes this Dart package (the app) and its dependencies.
+        For example, it specifies the **angular2** and **browser** packages as dependencies,
+        as well as the **angular2** transformer.
+
+.l-sub-section
   :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 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/
+    ### Next step
+
+    If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).