docs(Dart): sync with TS version of quickstart

chalin · chalin · commit a22b0b6ab54b · 2016-11-18T12:03:02.000-08:00
diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade
@@ -41,8 +41,11 @@ block install-packages
     packages (along with the packages they depend on).
 
   code-example(language="sh" class="code-shell").
-    &gt; <span class="blk">pub get</span>
-    Resolving dependencies...
+    pub get
+
+block create-your-app
+  :marked
+    Let's create a folder to hold our application and add a super-simple Angular component.
 
 block annotation-fields
   :marked
@@ -57,6 +60,10 @@ block create-main
     li a #[b folder named #[code web]]
     li a <b>file named #[code #[+adjExPath('app/main.ts')]]</b> with the following content:
 
+block commentary-on-index-html
+  :marked
+    Note the `<my-app>` tag in the `<body>`, this is *where your app lives!*
+
 block run-app
   p.
     We have a few options for running our app.
@@ -76,9 +83,11 @@ block run-app
     Once the app is running, the browser window should show the following:
 
 block build-app
+  //- Remove details of building from QS for now. (It is too early for these details.)
+  if false
     .alert.is-important
       :marked
-      If you don't see **My First Angular App**, make sure you've entered all the code correctly,
+        If you don't see **Hello Angular!**, make sure you've entered all the code correctly,
         in the [proper folders](#wrap-up),
         and run `pub get`.
 
@@ -160,7 +169,7 @@ block server-watching
 
   .alert.is-important
     :marked
-      Be sure to terminate the `pub serve` process once you stop working on this app.
+      Be sure to terminate your local server once you stop working on this app.
 
 block project-file-structure
   .filetree
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
@@ -4,21 +4,13 @@ block includes
   - var _prereq = 'Node.js and npm'
   - var _angular_browser_uri = '@angular/platform-browser-dynamic'
   - var _angular_core_uri = '@angular/core'
-  - var _stepInit = 3 // Step # after NgModule step
+  - var _stepInit = 4 // Step # after NgModule step
   - var _quickstartSrcURL='https://github.com/angular/quickstart/blob/master/README.md'
 
 //- TS/Dart shared step counter
 - var step = _stepInit
 
-.callout.is-helpful
-  header Don't want #{_Lang}?
-  p.
-    Although you're getting started in #{_Lang}, you can also write Angular applications
-    in JavaScript and #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}. Use the language selector in the
-    left nav to switch development languages for this guide.
-.l-main-section
-h1 Overview
-
++ifDocsFor('ts')
   aside.is-right
     :marked
       The live example link opens the finished application in
@@ -35,16 +27,18 @@ figure.image-display
 :marked
   **Try it out**. Here's a link to a <live-example></live-example>.
 
-  You can also <a href="https://github.com/angular/quickstart/blob/master/README.md" target="_blank">
++ifDocsFor('ts')
+  :marked
+    You can also <a href="!{_quickstartSrcURL}" target="_blank">
     clone the entire QuickStart application</a> from GitHub.
 
-h2 Build this application!
+h1 Build this application!
 
 :marked
   - [Prerequisite](#prereq): Install #{_prereq}.
   - [Step 1](#create-and-configure): Create and configure the project.
-  <span if-docs="ts"><li>[Step 2](#ngmodule): Create your application.</span>
-  - [Step !{step++}](#root-component): Create a component and add it to your application.
+  - [Step 2](#ngmodule): Create your application.
+  <li if-docs="ts">[Step 3](#root-component): Create a component and add it to your application.</li>
   - [Step !{step++}](#main): Start up your application.
   - [Step !{step++}](#index): Define the web page that hosts the application.
   - [Step !{step++}](#build-and-run): Build and run the application.
@@ -54,7 +48,7 @@ h2 Build this application!
 - var step = _stepInit // reinitialize step counter for headers to come
 
 .l-main-section#prereq
-h1 Prerequisite: Install #{_prereq}
+h2 Prerequisite: Install #{_prereq}
 
 block setup-tooling
   :marked
@@ -64,7 +58,7 @@ block setup-tooling
     in a terminal window.
 
 .l-main-section
-h1#create-and-configure Step 1: Create and configure the project
+h2#create-and-configure Step 1: Create and configure the project
 
 - var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'configuration files'
 
@@ -74,7 +68,7 @@ h1#create-and-configure Step 1: Create and configure the project
   * [Create #{_package_and_config_files}](#add-config-files)
   * [#{_Install} packages](#install-packages)
 
-h2 Create the project folder
+h3 Create the project folder
 :marked
   Using a terminal window, create a directory for the project, and change into this
   directory.
@@ -84,7 +78,7 @@ code-example(language="sh" class="code-shell").
   mkdir angular!{_}quickstart
   cd    angular!{_}quickstart
 
-h2#add-config-files Create #{_package_and_config_files}
+h3#add-config-files Create #{_package_and_config_files}
 block package-and-config-files
   - var _tsconfigUri = 'guide/typescript-configuration.html#tsconfig'
 
@@ -130,7 +124,7 @@ block package-and-config-files
       Webpack: an Introduction</a>. Or, learn more about SystemJS configuration in general <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
 
 
-  h2#install-packages #{_Install} packages
+  h3#install-packages #{_Install} packages
 block install-packages
   :marked
     Using npm from the command line, install the packages listed in `package.json` with the command:
@@ -154,22 +148,25 @@ block install-packages
 
 :marked
   You're now ready to write some code!
-+ifDocsFor('ts')
+
 .l-main-section
-  h1#ngmodule Step 2: Create your application
+h2#ngmodule Step 2: Create your application
+
+block create-your-app
   :marked
     You compose Angular applications into closely related blocks of functionality with
     [NgModules](guide/ngmodule.html). Angular itself is split into separate Angular Modules. This
     makes it possible for you to keep payload size small by only importing the parts of Angular
     that your application needs.
 
     Every Angular application has at least one module: the _root module_, named `AppModule` here.
-
+:marked
   **Create #{_an} #{_appDir} subfolder** off the project root directory:
 
 code-example.code-shell.
   mkdir #{_appDir}
 
++ifDocsFor('ts')
   :marked
     Create the file `app/app.module.ts` with the following content:
 
@@ -193,26 +190,27 @@ block install-packages
     [Tour of Heroes Tutorial](./tutorial/).
 
   .l-main-section
-h1#root-component Step !{step++}: Create a component and add it to your application
+  h2#root-component Step 3: Create a component and add it to your application
+
 :marked
   Every Angular application has at least one component: the _root component_, named `AppComponent`
   here.
 
   Components are the basic building blocks of Angular applications. A component controls a portion
   of the screen&mdash;a *view*&mdash;through its associated template.
 
-a#app-component
-p.
-  #[b Create the component file]
-  #[code #[+adjExPath('app/app.component.ts')]] with the following content:
+#app-component
+:marked
+  **Create the component file** <span ngio-ex>app/app.component.ts</span> with the following content:
 
 +makeExample('app/app.component.ts')
 
+- var _decorator_function = _docsFor == 'dart' ? 'annotation' : 'decorator function';
 :marked
   The QuickStart application has the same essential structure as any other Angular component:
 
     * **An import statement**. Importing gives your component access to
-    Angular's core [`@Component` decorator function](../latest/api/core/index/Component-decorator.html).
+    Angular's core [`@Component` !{_decorator_function}](./api/core/index/Component-decorator.html).
     * **A @Component #{_decorator}** that associates *metadata* with the
         `AppComponent` component class:
         
@@ -222,17 +220,18 @@ p.
     * **A component class** that controls the appearance and behavior of a view
     through its template. Here, you only have the root component, `AppComponent`. Since you don't
     need any application logic in the simple QuickStart example, it's empty.
-
++ifDocsFor('ts')
+  :marked
     You *export* the `AppComponent` class so that you can *import* it into the application that you
     just created.
 
     Edit the file `app/app.module.ts` to import your new `AppComponent` and add it in the
     declarations and bootstrap fields in the `NgModule` decorator:
 
-+makeExample('app/app.module.ts', null, title='app/app.module.ts')
+  +makeExample('app/app.module.ts')
 
 .l-main-section
-h1#main Step !{step++}: Start up your application
+h2#main Step !{step++}: Start up your application
 
 block create-main
   :marked
@@ -267,15 +266,15 @@ block create-main
     to that platform.
 
 .l-main-section
-h1#index Step !{step++}: Define the web page that hosts the application
+h2#index Step !{step++}: Define the web page that hosts the application
 :marked
   In the *#{_indexHtmlDir}* folder,
   create an `index.html` file and paste the following lines into it:
 
 +makeExample('index.html')
 
 
-+ifDocsFor('ts')
+block commentary-on-index-html
   :marked
     The noteworthy sections here are:
 
@@ -284,11 +283,12 @@ h1#index Step !{step++}: Define the web page that hosts the application
     * Configuration file for `SystemJS`, and a script
       where you import and run the `app` module which refers to the `main` file that you just
       wrote.
-  * The [`<my-app>`](#my-app) tag in the `<body>` which is *where your app lives!*
+    * The `<my-app>` tag in the `<body>` which is *where your app lives!*
 
 
 :marked
-  ## Add some style
+  ### Add some style
+
   Styles aren't essential, but they're nice, and `index.html` assumes that you have
   a stylesheet called `styles.css`.
 
@@ -303,7 +303,7 @@ h1#index Step !{step++}: Define the web page that hosts the application
     see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).
 
 .l-main-section#build-and-run
-h1 Step !{step++}: Build and run the application
+h2 Step !{step++}: Build and run the application
 block run-app
   :marked
     Open a terminal window and enter this command:
@@ -330,19 +330,19 @@ block build-app
   //- Nothing for ts.
 
 .l-main-section#make-changes
-h1 Step !{step++}: Make some live changes
+h2 Step !{step++}: Make some live changes
 :marked
-  Try changing the message in `app/app.component.ts` to "Hello Again Angular!".
+  Try changing the message in <span ngio-ex>app/app.component.ts</span> to "Hello Again Angular!".
+
 block server-watching
   :marked
     The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript,
     refresh the browser, and display your revised message.
 
-
     Close the terminal window when you're done to terminate both the compiler and the server.
 
 .l-main-section
-h1#wrap-up Wrap up and next steps
+h2#wrap-up Wrap up and next steps
 :marked
   The final project folder structure looks like this:
 block project-file-structure
