docs(quickstart): setup links to previous QS point to setup.html

Author: wardbell

public/docs/_examples/cb-aot-compiler/e2e-spec.ts

@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
@@ -11,7 +11,7 @@ describe('AOT Compilation', function () {
 
     it('should load page and click button', function (done) {
       let headingSelector = element.all(by.css('h1')).get(0);
-      expect(headingSelector.getText()).toEqual('My First Angular App');
+      expect(headingSelector.getText()).toEqual('Hello Angular!');
 
       expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true);
       expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true);

public/docs/_examples/cb-aot-compiler/ts/app/app.component.html

@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <button (click)="toggleHeading()">Toggle Heading</button>
-<h1 *ngIf="showHeading">My First Angular App</h1>
+<h1 *ngIf="showHeading">Hello Angular!</h1>
 
 <h3>List of Heroes</h3>
 <div *ngFor="let hero of heroes">{{hero}}</div>

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

@@ -10,8 +10,10 @@
       body {color:#369;font-family: Arial,Helvetica,sans-serif;}
     </style>
 
-     <!-- Polyfill for older browsers -->
+    <!-- #docregion polyfills -->
+    <!-- Polyfill for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
+    <!-- #enddocregion polyfills -->
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>

public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade

@@ -137,7 +137,7 @@ table(width="100%")
         in `main.ts`
         and the application's root component (`AppComponent`) in `app.module.ts`.
 
-        For more information see [Quick Start](../quickstart.html).
+        For more information see the [Setup](../guide/setup.html) page.
   tr(style=top)
     td
       :marked

public/docs/ts/latest/cookbook/aot-compiler.jade

@@ -91,8 +91,7 @@ a#compile
   ## Compile with AoT
 
   ### Prepare for offline compilation
-
-  Take the <a href='/docs/ts/latest/quickstart.html'>QuickStart</a> as a starting point.
+  Take the <a href='../guide/setup.html'>Setup</a> as a starting point.
   A few minor changes to the lone `app.component` lead to these two class and html files:
 
 +makeTabs(

public/docs/ts/latest/glossary.jade

@@ -105,10 +105,6 @@ block includes
     :marked
       The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
 
-      That's why we can write this:
-
-    +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
-
     .alert.is-important
       :marked
         Note that you can often achieve this using [Angular modules](#angular-module) instead.
@@ -129,7 +125,8 @@ block includes
 .l-sub-section
   block bootstrap-defn-top
     :marked
-      You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application. For more information, see [QuickStart](!{docsLatest}/quickstart.html).
+      You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application. 
+      For more information, see the [Setup](!{docsLatest}/guide/setup.html).
   :marked
     You can bootstrap multiple apps in the same `index.html`, each with its own top level root.
 

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

@@ -153,7 +153,7 @@
   },
 
   "setup-systemjs-anatomy": {
-    "title": "Setup anatomy",
+    "title": "Setup Anatomy",
     "intro": "Inside the local development environment for SystemJS"
   },
 

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

@@ -28,8 +28,8 @@ a#directive-overview
   1. Structural directives—change the DOM layout by adding and removing DOM elements.
   1. Attribute directives—change the appearance or behavior of an element.
 
-  *Components* are the most common of the three directives. Read more about creating them
-  in step three of [QuickStart](../quickstart.html#root-component).
+  *Components* are the most common of the three directives.
+  You saw a component for the first time in the [QuickStart](../quickstart.html#root-component) example.
 
   *Structural Directives* change the structure of the view. Two examples are [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf)
   in the [Template Syntax](template-syntax.html) page.
@@ -64,9 +64,9 @@ a#write-directive
 
 :marked
   ### Write the directive code
-  Create a new project folder (`attribute-directives`) and follow the steps in [QuickStart](../quickstart.html).
+  Follow the [Setup](setup.html) instructions for creating a new project
+  and name the project folder <ngio-ex path="attribute-directives"></ngio-ex>.
 
-include ../_quickstart_repo
 :marked
   Create the following source file in the indicated folder with the following code:
 +makeExample('app/highlight.directive.1.ts')

public/docs/ts/latest/guide/change-log.jade

@@ -7,6 +7,13 @@ block includes
   The Angular documentation is a living document with continuous improvements.
   This log calls attention to recent significant changes.
 
+  ## QuickStart Rewrite (2016-11-08)
+  The QuickStart is completely rewritten so that it actually is quick.
+  It references a minimal "Hello Angular" app running in Plunker.
+  The new [Setup](setup.html) page tells you how to install a local development environment
+  by downloading (or cloning) the QuickStart github repository.
+  You are no longer asked to copy-and-paste code into setup files that were not explained anyway.
+
   ## Sync with Angular v.2.1.1 (2016-10-21)
   Docs and code samples updated and tested with Angular v.2.1.0 
 

public/docs/ts/latest/guide/displaying-data.jade

@@ -34,11 +34,9 @@ figure.image-display
   is to bind the property name through interpolation.
   With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
 
-  To build an illustrative example, start by creating a new project folder called <ngio-ex path="displaying-data"></ngio-ex>
-  and following the steps in [QuickStart](../quickstart.html).
 
-block quickstart-repo
-  include ../_quickstart_repo
+  Follow the [Setup](setup.html) instructions for creating a new project
+  and name the project folder <ngio-ex path="displaying-data"></ngio-ex>.
 
 :marked
   Then modify the <ngio-ex path="app.component.ts"></ngio-ex> file by
@@ -78,9 +76,8 @@ block quickstart-repo
   Notice that you don't call **new** to create an instance of the `AppComponent` class.
   Angular is creating an instance for you. How?
 
-  The CSS `selector` in the `@Component` !{_decorator} specifies an element named `my-app`.
-  Remember back in [QuickStart](../quickstart.html) that you added the `<my-app>`
-  element to the body of your `index.html` file:
+  The CSS `selector` in the `@Component` !{_decorator} specifies an element named `<my-app>`.
+  That element is a placeholder in the body of your `index.html` file:
 
 +makeExcerpt('index.html', 'body')
 
@@ -276,4 +273,4 @@ block final-code
              displaying-data/ts/app/app.module.ts,
              displaying-data/ts/app/main.ts`,
              'final,,,',
-             'app/app.component.ts, app/hero.ts, app.module.ts, main.ts')
+             'app/app.component.ts, app/hero.ts, app.module.ts, main.ts')

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

@@ -85,9 +85,8 @@ figure.image-display
 
 :marked
   ## Setup
-  Create a new project folder (`angular-forms`) and follow the steps in the [QuickStart](../quickstart.html).
-
-include ../_quickstart_repo
+  Follow the [Setup](setup.html) instructions for creating a new project
+  and name the project folder <ngio-ex path="angular-forms"></ngio-ex>.
 :marked
   ## Create the Hero Model Class
 

public/docs/ts/latest/guide/npm-packages.jade

@@ -18,9 +18,8 @@ include ../_util-fns
 
 :marked
   We recommend a comprehensive starter-set of packages as specified in the `dependencies` and `devDependencies`
-  sections of the QuickStart
-  <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a> file:
-+makeJson('quickstart/ts/package.1.json',{ paths: 'dependencies, devDependencies'}, 'package.json (dependencies)')(format=".") 
+  sections of the <a href="https://docs.npmjs.com/files/package.json" target="_blank">package.json</a> file
+  installed as described during [Setup](setup.html).
 :marked
   You can use other packages but we recommend *this particular set* to start with because (a) they  work well together and 
   (b) they include everything you'll need to build and run the sample applications in this series.

public/docs/ts/latest/guide/template-syntax.jade

@@ -42,10 +42,11 @@ block includes
 .l-main-section
 :marked
   ## HTML
-  HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML:
+  HTML is the language of the Angular template. 
+  The [QuickStart](../quickstart.html) application has a template that is pure HTML:
 
 code-example(language="html" escape="html").
-  <h1>My First Angular App</h1>
+  <h1>Hello Angular!</h1>
 
 :marked
   Almost all HTML syntax is valid template syntax. The `<script>` element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. (In practice, `<script>` is simply ignored.)

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

@@ -169,8 +169,7 @@ table(width="100%")
   A bare minimum of discussion plus the downloadable source code must suffice for now.
 
   There are two fast paths to getting started.
-  1. Start a new project following the instructions in the 
-  [QuickStart github repository](https://github.com/angular/quickstart/blob/master/README.md).
+  1. Start a new project following the instructions in [Setup](setup.html).
 
   1. Start a new project with the 
   [Angular CLI](https://github.com/angular/angular-cli/blob/master/README.md).
@@ -180,13 +179,12 @@ table(width="100%")
   Their artifacts and procedures differ slightly but their essentials are the same 
   and there are no differences in the test code.
 
-  In this chapter, the application and its tests are based on the QuickStart repo.
+  In this chapter, the application and its tests are based on the documentation setup.
 
 .alert.is-helpful
   :marked
-    If your application was based on the QuickStart repository,
+    If your application was based on the [Setup](setup.html) instructions,
     you can skip the rest of this section and get on with your first test.
-    The QuickStart repo provides all necessary setup.
 
 #setup-files
 :marked
@@ -225,7 +223,7 @@ table(width="100%")
         [SystemJS](https://github.com/systemjs/systemjs/blob/master/README.md) 
         loads the application and test files.
         This script tells SystemJS where to find those files and how to load them.
-        It's the same version of `systemjs.config.js` used by QuickStart-based applications.
+        It's the same version of `systemjs.config.js` used by Setup-based applications.
   tr
     td(style="vertical-align: top") <code>systemjs.config.extras.js</code>
     td
@@ -282,7 +280,7 @@ code-example(format="." language="bash").
   Both processes watch pertinent files, write messages to the console, and re-run when they detect changes.
 .l-sub-section
   :marked
-    The QuickStart development path defined the `test` command in the `scripts` section of npm's `package.json`.
+    The documentation setup defines the `test` command in the `scripts` section of npm's `package.json`.
     The Angular CLI has different commands to do the same thing. Adjust accordingly.
 :marked
   After a few moments, karma opens a browser and starts writing to the console.

public/docs/ts/latest/guide/typescript-configuration.jade

@@ -23,8 +23,8 @@ a(id="tsconfig")
     For details about `tsconfig.json`, see the official
     [TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
 :marked
-  We created the following `tsconfig.json` for [QuickStart](../quickstart.html):
-+makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".")
+  We created the following `tsconfig.json` during [Setup](setup.html):
++makeJson('quickstart/ts/tsconfig.json', null, 'tsconfig.json')(format=".")
 :marked
   This file contains options and flags that are essential for Angular applications.
 
@@ -36,24 +36,25 @@ a(id="tsconfig")
   But your choice now can make a difference in larger projects, so it merits discussion.
 
   When the `noImplicitAny` flag is `false` (the default), and if
-  the compiler cannot infer the variable type based on how it's used, the compiler silently defaults the type to `any`. That's what is meant by *implicit `any`*.
-
-  In the QuickStart exercise, the `noImplicitAny` flag is initialized to `false`
-  to make learning TypeScript development easier.
+  the compiler cannot infer the variable type based on how it's used, 
+  the compiler silently defaults the type to `any`. That's what is meant by *implicit `any`*.
 
+  The documentation setup sets the `noImplicitAny` flag to `true`.
   When the `noImplicitAny` flag is `true` and the TypeScript compiler cannot infer
   the type, it still generates the JavaScript files, but it also **reports an error**.
   Many seasoned developers prefer this stricter setting because type checking catches more
   unintentional errors at compile time.
 
   You can set a variable's type to `any` even when the `noImplicitAny` flag is `true`.
 
-  If you set the `noImplicitAny` flag to `true`, you may get *implicit index errors* as well.
+  When the `noImplicitAny` flag is `true, you may get *implicit index errors* as well.
   Most developers feel that *this particular error* is more annoying than helpful.
   You can suppress them with the following additional flag:
 code-example(format=".").
   "suppressImplicitAnyIndexErrors":true
 
+:marked
+  The documentation setup sets this flag to `true` as well.
 
 a(id="typings")
 .l-main-section

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

@@ -433,7 +433,7 @@ figure.image-display
 
 :marked
   Now introduce Angular 2 to the project. Inspired by instructions in
-  [the QuickStart](../quickstart.html), you can selectively copy in material from the
+  [the Setup](setup.html), you can selectively copy in material from the
   <a href="https://github.com/angular/quickstart" target="_blank">QuickStart github repository</a>.
 
   Next, create an `app.module.ts` file and add the following `NgModule` class:
@@ -897,7 +897,7 @@ code-example(format="").
 :marked
   We should also configure the TypeScript compiler so that it can understand our
   project. We'll add a `tsconfig.json` file to the project directory, just like we do
-  in the [Quickstart](../quickstart.html). It instructs the TypeScript compiler how
+  in the documentation [setup](setup.html). It instructs the TypeScript compiler how
   to interpret our source files.
 
 +makeJson('upgrade-phonecat-1-typescript/ts/tsconfig.ng1.json', null, 'tsconfig.json')
@@ -1025,8 +1025,9 @@ code-example(format="").
 .alert.is-important The project also contains some animations, which we are not yet upgrading in this version of the guide. This will change in a later release.
 
 :marked
-  Let's install Angular 2 into the project, along with the SystemJS module loader. Take a look into the
-  [Quickstart](../quickstart.html) guide and get the following configurations from there:
+  Let's install Angular 2 into the project, along with the SystemJS module loader. 
+  Take a look at the results of the [Setup](setup.html) instructions
+  and get the following configurations from there:
 
   * Add Angular 2 and the other new dependencies to `package.json`
   * The SystemJS configuration file `systemjs.config.js` to the project root directory.
@@ -1064,8 +1065,9 @@ code-example(format="").
 +makeExample('upgrade-phonecat-2-hybrid/ts/index.html', 'ng2', 'index.html')
 
 :marked
-  In the `systemjs.config.js` file we got from the Quickstart we also need to make a couple
-  of adjustments because of our project structure. We want to point the browser to the project
+  We also need to make a couple of adjustments 
+  to the `systemjs.config.js` file installed during [setup](setup.html). 
+  We want to point the browser to the project
   root when loading things through SystemJS, instead of using the  `<base>` URL:
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js', 'paths', 'systemjs.config.js')

public/docs/ts/latest/tutorial/toh-pt1.jade

@@ -5,12 +5,9 @@ include ../_util-fns
 
   Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
 
-  Run the <live-example></live-example> for this part.
-
-  Create a folder called `angular-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps
-  which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes.
+  Follow the [Setup](setup.html) instructions for creating a new project
+  and name the project folder <ngio-ex path="angular-forms"></ngio-ex>.
 
-include ../_quickstart_repo
 :marked
   We should have the following structure:
 

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -860,9 +860,7 @@ block css-files
   We can also create styles at the *application level* outside of any component.
 
   Our designers provided some basic styles to apply to elements across the entire app.
-  These correspond to the full set of master styles that we
-  introduced earlier (see
-  [QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
+  These correspond to the full set of master styles that we installed earlier during [setup](../setup.html).
   Here is an excerpt:
 
 +makeExcerpt('styles.css (excerpt)', 'toh')