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

2016-11-21 17:36:16 -08:00
parent a7525721c0
commit ec2e6cb2c7
58 changed files with 859 additions and 568 deletions
@@ -1,5 +1,7 @@
 - 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
@@ -7,13 +9,16 @@ 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
@@ -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\" ",
@@ -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);
@@ -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>
@@ -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",
@@ -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 {}
@@ -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('');
@@ -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
@@ -1 +0,0 @@
-!systemjs.config.1.js
@@ -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'; }
@@ -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 { }
@@ -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);
@@ -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>
@@ -1,9 +1,9 @@
 {
  "description": "QuickStart",
  "files": [
-    "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[1].*"
+    "app/app.component.ts",
+    "index.html"
  ],
+  "open": "app/app.component.ts",
  "tags": ["quickstart"]
-}
+}
@@ -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);
+  });
+
+});
@@ -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"');
+  });
+});
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `<h1>Hello {{name}}</h1>`
+})
+export class AppComponent { name = 'Angular'; }
@@ -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 { }
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule }              from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
@@ -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>
@@ -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"]
+}
@@ -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.

@@ -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": {
@@ -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).
@@ -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": {
@@ -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
@@ -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(
@@ -103,10 +103,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.
@@ -127,7 +123,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.

@@ -2,11 +2,29 @@
  "index": {
    "title": "Documentation Overview",
    "navTitle": "Overview",
-    "description": "How to read and use this documentation",
+    "intro": "How to read and use this documentation",
    "nextable": true,
    "basics": true
  },

+  "setup": {
+    "title": "Setup for local development",
+    "navTitle": "Setup",
+    "intro": "Install the Angular QuickStart seed for faster, more efficient development on your machine",
+    "nextable": true,
+    "hideNextPage": true,
+    "basics": true
+  },
+
+  "learning-angular": {
+    "title": "Learning Angular",
+    "navTitle": "Learning Angular",
+    "intro": "A suggested path through the documentation for Angular newcomers",
+    "nextable": true,
+    "hideNextPage": true,
+    "basics": true
+  },
+
  "architecture": {
    "title": "Architecture Overview",
    "navTitle": "Architecture",
@@ -15,6 +33,15 @@
    "basics": true
  },

+
+  "appmodule": {
+    "title": "AppModule: the root module",
+    "navTitle": "The Root Module",
+    "intro": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\".",
+    "nextable": true,
+    "basics": true
+  },
+
  "displaying-data": {
    "title": "Displaying Data",
    "intro": "Property binding helps show app data in the UI.",
@@ -136,6 +163,11 @@
    "intro": "Developing for content security in Angular applications"
  },

+  "setup-systemjs-anatomy": {
+    "title": "Setup Anatomy",
+    "intro": "Inside the local development environment for SystemJS"
+  },
+
  "structural-directives": {
    "title": "Structural Directives",
    "intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements."
--- a/Show More
+++ b/Show More