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

Author: wardbell

public/_includes/_next-item.jade

@@ -1,19 +1,24 @@
 - 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
-      .l-sub-section
-        h3 Next Step
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html") #{page.title}
+      if !hideNextPage
+        .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,6 +1,7 @@
 {
   "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('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/package.json

@@ -1,6 +1,7 @@
 {
   "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

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

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

@@ -1,13 +1,11 @@
 // #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/app.module.ts

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('QuickStart E2E Tests', function () {
+
+  let expectedMsg = 'Hello Angular';
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it(`should display: ${expectedMsg}`, function () {
+    expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
+  });
+
+});

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

@@ -0,0 +1,35 @@
+/* tslint:disable:no-unused-variable */
+import { AppComponent } from './app.component';
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By }           from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+////////  SPECS  /////////////
+describe('AppComponent', function () {
+  let de: DebugElement;
+  let comp: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(async(() => {
+   TestBed.configureTestingModule({
+      declarations: [ AppComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    comp = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('h1'));
+  });
+
+  it('should create component', () => expect(comp).toBeDefined() );
+
+  it('should have expected <h1> text', () => {
+    fixture.detectChanges();
+    const h1 = de.nativeElement;
+    expect(h1.innerText).toMatch(/angular/i,
+      '<h1> should say something about "Angular"');
+  });
+});

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html>
+  <head>
+    <title>Hello Angular</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <style>
+      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
+    </style>
+
+    <!-- Polyfills for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <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>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <!-- #docregion my-app-->
+    <my-app><!-- content managed by Angular --></my-app>
+    <!-- #enddocregion my-app-->
+  </body>
+
+</html>

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

@@ -0,0 +1,11 @@
+{
+  "description": "QuickStart Setup",
+  "files": [
+    "app/app.component.ts",
+    "app/app.module.ts",
+    "app/main.ts",
+    "index.html"
+  ],
+  "open": "app/app.component.ts",
+  "tags": ["quickstart setup"]
+}

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

@@ -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/plnkr.json

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

public/docs/js/latest/quickstart.jade

@@ -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/ts/latest/_data.json

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

public/docs/ts/latest/cli-quickstart.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/_data.json

@@ -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(