docs(quickstart): update per @chalin comments in PR #2762

Author: wardbell

public/docs/_examples/quickstart/ts/index.1.html

@@ -10,7 +10,9 @@
     </style>
 
     <!-- Polyfills for older browsers -->
+    <!-- #docregion polyfills -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
+    <!-- #docregion polyfills -->
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>

public/docs/_examples/setup/ts/app/main.ts

@@ -1,7 +1,5 @@
 // #docregion
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule }              from './app.module';
-platformBrowserDynamic().bootstrapModule(AppModule);
-// #enddocregion
 
-/* This file is excluded in plunkers */
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/ts/latest/guide/appmodule.jade

@@ -1,19 +1,20 @@
 include ../_util-fns
 
 :marked
-  An Angular Module class describes how the application parts fit together.
-  Every application has at least one Angular Module at the _root_ level of the app.
+  An Angular module class describes how the application parts fit together.
+  Every application has at least one Angular module, the _root_ module 
+  that you [bootstrap](#main) to launch the application.
   You can call it anything you want. The conventional name is `AppModule`.
 
   Most developers start with a simple `AppModule` and evolve it as the application grows. 
-  Here's a bare-bones `AppModule` from the **QuickStart seed** described on the [setup page](setup.html).
+  Here's a minimal `AppModule` from the **QuickStart seed** described on the [setup page](setup.html).
 +makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.')
 
 :marked
   After the `import` statements, you come to a class adorned with the
   **`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained').
 
-  The `@NgModule` decorator identifies `AppModule` as an Angular Module class (also called an `NgModule` class).
+  The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class).
   `@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
 
   * **_imports_** — the `BrowserModule` that this and every application needs to run in a browser.
@@ -52,7 +53,7 @@ a#imports
     so you can reference them within _this_ file. 
     They have nothing to do with Angular and Angular knows nothing about them.
 
-    The _module's_ `imports` array tells Angular about specific Angular Modules — classes decorated with `@NgModule` —
+    The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` —
     that the application needs to function properly.
 a#declarations
 :marked

public/docs/ts/latest/guide/attribute-directives.jade

@@ -65,7 +65,7 @@ a#write-directive
 :marked
   ### Write the directive code
   Follow the [setup](setup.html) instructions for creating a new project
-  named <ngio-ex path= <ngio-ex path="attribute-directives"></ngio-ex>.
+  named <span ngio-ex>attribute-directives</span>.
 
 :marked
   Create the following source file in the indicated folder with the following code:

public/docs/ts/latest/guide/browser-support.jade

@@ -66,7 +66,7 @@ table
 
   You compensate by loading polyfill scripts ("polyfills") on the host web page (`index.html`)
   that implement missing features in JavaScript.
-+makeExample('quickstart/ts/index.html', 'polyfills')(format='.')
++makeExample('quickstart/ts/index.1.html', 'polyfills')(format='.')
 :marked
   A particular browser may require at least one polyfill to run _any_ Angular application. 
   You may need additional polyfills for specific features.

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

@@ -86,7 +86,7 @@ figure.image-display
 :marked
   ## Setup
   Follow the [setup](setup.html) instructions for creating a new project
-  named <ngio-ex path=<ngio-ex path="angular-forms"></ngio-ex>.
+  named <span ngio-ex>angular-forms</span>.
 
   ## Create the Hero Model Class
 

public/docs/ts/latest/guide/index.jade

@@ -1,7 +1,15 @@
 block includes
   include ../_util-fns
 
-- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
+- var __lang = _docsFor || current.path[1] || 'ts';
+- var guideData = public.docs[__lang].latest.guide._data;
+- var advancedLandingPage = '';
+- for(var page in guideData) {
+-   if (!guideData[page].basics && !guideData[page].hide) { advancedLandingPage = page; break; }
+- }
+- var advancedUrl = './' + advancedLandingPage + '.html'
+
+
 :marked
   This page describes the Angular documentation at a high level.
   If you're new to Angular, you may want to visit "[Learning Angular](learning-angular.html)" first.
@@ -10,7 +18,6 @@ block includes
 
   The documentation is divided into major thematic sections, each
   a collection of pages devoted to that theme.
-  <br clear="all">
 
 block js-alert
 
@@ -41,7 +48,7 @@ table(width="100%")
         A step-by-step, immersive approach to learning Angular that
         introduces the major features of Angular in an application context.
   tr(style=top)
-    td <b><a href="ngmodule.html">Advanced</a></b>  
+    td <b><a href="!{advancedUrl}">Advanced</a></b>
     td
       :marked
         In-depth analysis of Angular features and development practices.
@@ -56,34 +63,25 @@ table(width="100%")
   The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
   You can always get the full source through the #{_liveLink}s.
 
-:marked
   ## Code samples
 
-  Each page includes code snippets that you can reuse in your applications.
-  These snippets are excerpts from a sample application that accompanies the page.
+  Each page includes code snippets from a sample application that accompanies the page.
+  You can reuse these snippets in your applications.
 
-block example-links
-  :marked
-    Look for a link to a running version of that sample near the top of each page,
-    such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
+  Look for a link to a running version of that sample, often near the top of the page,
+  such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
+  The link launches a browser-based, code editor where you can inspect, modify, save, and download the code.
 
-    The link launches a browser-based, code editor where you can inspect, modify, save, and download the code.
-
-:marked
   ## Reference pages
 
-  The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
-
-  The [Glossary](glossary.html) defines terms that Angular developers should know.
-
-  The [Change Log](change-log.html) announces what's new and changed in the documentation..
-
-  The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
+  * The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
+  * The [Glossary](glossary.html) defines terms that Angular developers should know.
+  * The [Change Log](change-log.html) announces what's new and changed in the documentation.
+  * The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
 
   ## Feedback
 
   We welcome feedback! 
 
-  Use the <a href="https://github.com/angular/angular.io" target="_blank" title="angular docs on github">angular.io Github repository</a> for **documentation** issues and pull requests.
-
-  Use the <a href="https://github.com/angular/angular" target="_blank" title="angular source on github">Angular Github repository</a> to report issues with **Angular** itself.
+  * Use the <a href="!{_ngDocRepoURL}" target="_blank" title="angular docs on github">angular.io Github repository</a> for **documentation** issues and pull requests.
+  * Use the <a href="!{_ngRepoURL}" target="_blank" title="angular source on github">Angular Github repository</a> to report issues with **Angular** itself.

public/docs/ts/latest/guide/learning-angular.jade

@@ -1,15 +1,14 @@
 block includes
   include ../_util-fns
 
-- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
 figure
   img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
 :marked
-  Everyone is different. Everyone learns differently.
-  
+  Everyone learns differently.
   You don't have to read the documentation straight through.  Most pages stand on their own.
   Those new to Angular may wish to follow this popular learning path.
-  <br clear="all">
+  <br class="l-clear-left">
+
 :marked
   1. Take the [*Tour of Heroes* tutorial](../tutorial "Tour of Heroes"). 
 

public/docs/ts/latest/guide/setup.jade

@@ -2,19 +2,19 @@ block includes
   include ../_util-fns
 
 :marked
-  # Trying Angular
+  ## Trying Angular
 
   Live coding [Quickstart](../quickstart.html) in the browser is a great way to explore Angular.
   Links on almost every documentation page will open completed samples in the browser where you can
   play with the code, share your changes with friends, and download and run the code on your own machine.
 
-  As much fun as this is
+  As much fun as this is ...
   * you can't ship your app in plunker
   * you aren't always online when writing code
   * transpiling TypeScript in the browser is slow
   * the type support, refactoring, and code completion only work in your local IDE
 
-  # Setup a local development environment
+  ## Setup a local development environment
 
   Fortunately, setting up a new project in your local development environment is quick and easy
   with the [**QuickStart seed**](https://github.com/angular/quickstart "Install the github QuickStart repo"),
@@ -51,9 +51,9 @@ code-example(language="sh" class="code-shell").
 
 .l-main-section
 :marked
-  ## What's different about the QuickStart Seed?
+  ## What's different about the QuickStart seed?
 
-  The QuickStart seed contains the same application as the <live-example><i>live code</i> QuickStart</live-example>.
+  The QuickStart seed contains the same application as the <live-example name="quickstart">QuickStart live example</live-example>.
   But there are _many more files_ in the project folder on your machine, 
   most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
 
@@ -77,7 +77,7 @@ code-example(language="sh" class="code-shell").
   `)(format='.')
 :marked
   The [QuickStart](../quickstart.html "Angular QuickStart") sample only shows the `AppComponent` file.
-  it creates the equivalent of `app.module.ts` and `main.ts` internally _for that example only_
+  It creates the equivalent of `app.module.ts` and `main.ts` internally _for that example only_
   so the reader can discover Angular without distraction.
 
   All other guides and cookbooks expect you to have defined these three files explicitly. 
@@ -94,24 +94,24 @@ table(width="100%")
     td <code>app.component.ts</code>
     td
       :marked
-        Defines the same `AppComponent` as the same as one in the [QuickStart](../quickstart.html).
+        Defines the same `AppComponent` as the one in the [QuickStart](../quickstart.html).
         It is the **root** component of what will become a tree of nested components
         as the application evolves. 
   tr
     td <code>app.module.ts</code>
     td
       :marked
-        Defines the `AppModule`, the [root module](appmodule.html) that tells Angular how to assemble the application.
+        Defines `AppModule`, the [root module](appmodule.html) that tells Angular how to assemble the application.
         Right now it declares only the `AppComponent`. 
-        Soon there will be more components to talk about. 
+        Soon there will be more components to declare. 
   tr
     td <code>main.ts</code>
     td
       :marked
-        Compiles the application with the JiT compiler
+        Compiles the application with the [JiT compiler](../glossary.html#jit)
         and [bootstraps](appmodule.html#main) the application to run in the browser.
         That's a reasonable choice for the development of most projects and
-        it's the only viable choice for a sample running in the _live-coding_ environment.
+        it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
         You'll learn about alternative compiling and deployment options later in the documentation.
 
 .l-main-section

public/docs/ts/latest/quickstart.jade

@@ -22,6 +22,7 @@ include _util-fns
   The message starts with "Hello" and ends with `{{name}}` 
   which is an Angular [interpolation binding](guide/displaying-data.html) expression.
   At runtime, Angular replaces `{{name}}` with the value of the component's `name` property. 
+  
   Change the component class's `name` property from `'Angular'` to `'World'` and see what happens.
 
   Binding is one of many Angular features you'll discover in this documentation.
@@ -36,7 +37,10 @@ a#typescript
 :marked
   ## TypeScript
   This example is written in <a href="http://www.typescriptlang.org/" target="_blank" title="TypeScript">TypeScript</a>,
-  a strongly-typed, super-set of the latest JavaScript. 
-  TypeScript turns into JavaScript that runs on any modern browser.
+  a typed super-set of the latest JavaScript. 
+  TypeScript compiles into JavaScript that runs on any modern browser.
   Most developers find it delightful which is why most Angular developers write applications in TypeScript.
-  You can write your application in [other versions of JavaScript](cookbook/ts-to-js.html) if you prefer.
+  You can write your application in 
+  [other versions of JavaScript](cookbook/ts-to-js.html "TypeScript to JavaScript") or 
+  <a href="" target="_blank" title="Dart">Dart</a> if you prefer.
+// will be https://github.com/angular/dart/latest when published