Revert "[WIP] docs(quickstart): QuickStart reboot (#2762)"

This reverts commit 8ccc33e.

Author: wardbell

public/_includes/_next-item.jade

@@ -1,24 +1,19 @@
 - var currentPage = false
 - var nextPage = false
-- var hideNextPage = false;
-
 - var data = public.docs[current.path[1]][current.path[2]][current.path[3]]._data
 
 for page, slug in data
 
   // CHECK IF CURRENT PAGE IS SET, THEN SET NEXT PAGE
   if currentPage
     if !nextPage && page.nextable && !page.hide
-      if !hideNextPage
-        .l-sub-section
-          h3 Next Step
-          a(href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html") #{page.title}
+      .l-sub-section
+        h3 Next Step
+        a(href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html") #{page.title}
 
       //NEXT PAGE HAS NOW BEEN SET
       - var nextPage = true
 
-  - hideNextPage = page.hideNextPage
-
   // SET CURRENT PAGE FLAG WHEN YOU PASS IT
   if current.path[4] == slug
     - var currentPage = true

public/docs/_examples/_boilerplate/package.json

@@ -1,7 +1,6 @@
 {
   "name": "angular-examples",
   "version": "1.0.0",
-  "private": true,
   "description": "Example package.json, only contains needed scripts for examples. See _examples/package.json for master package.json.",
   "scripts": {
     "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",

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('Hello Angular');
+      expect(headingSelector.getText()).toEqual('My First Angular App');
 
       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">Hello Angular</h1>
+<h1 *ngIf="showHeading">My First Angular App</h1>
 
 <h3>List of Heroes</h3>
 <div *ngFor="let hero of heroes">{{hero}}</div>

public/docs/_examples/package.json

@@ -1,7 +1,6 @@
 {
   "name": "angular-examples-master",
   "version": "1.0.0",
-  "private": true,
   "description": "Master package.json, the superset of all dependencies for all of the _example package.json files. See _boilerplate/package.json for example npm scripts.",
   "scripts": {
     "protractor": "protractor",

public/docs/_examples/quickstart/dart/lib/app_component.dart

@@ -5,7 +5,7 @@ import 'package:angular2/core.dart';
 // #docregion metadata
 @Component(
     selector: 'my-app',
-    template: '<h1>Hello Angular</h1>')
+    template: '<h1>Hello Angular!</h1>')
 // #enddocregion metadata
 // #docregion class
 class AppComponent {}

public/docs/_examples/quickstart/e2e-spec.ts

@@ -4,7 +4,7 @@ import { browser, element, by } from 'protractor';
 
 describe('QuickStart E2E Tests', function () {
 
-  let expectedMsg = 'Hello Angular';
+  let expectedMsg = 'Hello Angular!';
 
   beforeEach(function () {
     browser.get('');

public/docs/_examples/quickstart/js/app/app.component.js

@@ -10,7 +10,7 @@
     ng.core.Component({
       // #enddocregion ng-namespace-funcs
       selector: 'my-app',
-      template: '<h1>Hello Angular</h1>'
+      template: '<h1>Hello Angular!</h1>'
     // #docregion ng-namespace-funcs
     })
     // #enddocregion component

public/docs/_examples/quickstart/ts/.gitignore

@@ -0,0 +1 @@
+!systemjs.config.1.js

public/docs/_examples/quickstart/ts/app/app.component.ts

@@ -1,8 +1,14 @@
 // #docregion
+// #docregion import
 import { Component } from '@angular/core';
+// #enddocregion import
 
+// #docregion metadata
 @Component({
   selector: 'my-app',
-  template: `<h1>Hello {{name}}</h1>`
+  template: '<h1>Hello Angular!</h1>'
 })
-export class AppComponent { name = 'Angular'; }
+// #enddocregion metadata
+// #docregion class
+export class AppComponent { }
+// #enddocregion class

public/docs/_examples/setup/ts/app/app.module.ts renamed to public/docs/_examples/quickstart/ts/app/app.module.1.ts

@@ -1,11 +1,8 @@
 // #docregion
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent }  from './app.component';
 
 @NgModule({
-  imports:      [ BrowserModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  imports:      [ BrowserModule ]
 })
 export class AppModule { }

public/docs/_examples/quickstart/ts/app/app.module.ts

@@ -1,11 +1,13 @@
 // #docregion
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent }  from './app.component';
+
+import { AppComponent }   from './app.component';
 
 @NgModule({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
+
 export class AppModule { }

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

@@ -1,5 +1,9 @@
+// #docregion
+// #docregion import
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app.module';
+// #enddocregion import
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+const platform = platformBrowserDynamic();
+platform.bootstrapModule(AppModule);

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

@@ -1,36 +1,37 @@
 <!DOCTYPE html>
+<!-- #docregion -->
 <html>
   <head>
-    <title>Hello Angular</title>
+    <title>Angular QuickStart</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
-    </style>
+    <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfills for older browsers -->
+    <!-- 1. Load libraries -->
+    <!-- #docregion libraries -->
     <!-- #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>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <!-- #enddocregion libraries -->
 
-    <!-- #docregion autobootstrap-->
-    <script> window.autoBootstrap = true; </script>
-    <!-- #enddocregion autobootstrap-->
-
+    <!-- 2. Configure SystemJS -->
+    <!-- #docregion systemjs -->
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app').catch(function(err){ console.error(err); });
     </script>
+    <!-- #enddocregion systemjs -->
   </head>
 
+  <!-- 3. Display the application -->
+  <!-- #docregion my-app -->
   <body>
-    <!-- #docregion my-app-->
-    <my-app>Loading AppComponent content here ...</my-app>
-    <!-- #enddocregion my-app-->
+    <my-app>Loading...</my-app>
   </body>
-
+  <!-- #enddocregion my-app -->
 </html>

public/docs/_examples/quickstart/ts/plnkr.json

@@ -1,9 +1,9 @@
 {
   "description": "QuickStart",
   "files": [
-    "app/app.component.ts",
-    "index.html"
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
   ],
-  "open": "app/app.component.ts",
   "tags": ["quickstart"]
-}
+}

public/docs/_examples/setup/e2e-spec.ts

@@ -208,7 +208,7 @@ code-example(format="").
 :marked
   The `template` property holds the component's companion template.
   A template is a form of HTML that tells Angular how to render a view.
-  Our template is a single line of HTML announcing "Hello Angular".
+  Our template is a single line of HTML announcing "Hello Angular!".
 
   Now we need something to tell Angular to load this component.
 

public/docs/_examples/setup/ts/app/app.component.spec.ts

@@ -19,8 +19,8 @@
     "icon": "query-builder",
     "title": "Quickstart",
     "subtitle": "TypeScript",
-    "description": "Discover Angular",
-    "banner": "Discover Angular in a live-coding environment."
+    "description": "Get up and running with Angular",
+    "banner": "This QuickStart guide demonstrates how to build and run a simple Angular application."
   },
 
   "tutorial": {

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

@@ -199,7 +199,7 @@ h3#component-decorator @Component decorator
 +makeExample('src/app/cli-quickstart.component.html', null, 'src/app/cli-quickstart.component.html')(format='.')
 :marked
   The `{{title}}` is an _interpolation_ binding that causes Angular to display the component's
-  `title` property. After out edit, Angular displays "Hello Angular".
+  `title` property. After out edit, Angular displays "Hello Angular!".
   We'll learn more about data binding as we read through the documentation.
 
   The **styleUrls** array specifies the location(s) of the component's private CSS style file(s).

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

@@ -2,7 +2,7 @@
   "index": {
     "title": "Cookbook",
     "navTitle": "Overview",
-    "intro": "A collection of recipes for common Angular application scenarios"
+    "description": "A collection of recipes for common Angular application scenarios"
   },
 
   "aot-compiler": {

public/docs/_examples/setup/ts/example-config.json

@@ -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 the [Setup](../guide/setup.html) page.
+        For more information see [Quick Start](../quickstart.html).
   tr(style=top)
     td
       :marked

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

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