docs(quickstart): reboot edition

Author: wardbell

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

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html>
+  <head>
+    <title>Hello Angular</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>
+
+    <!-- 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>
+
+    <!-- #docregion no-app-module-->
+    <script> window.noAppModule = true; </script>
+    <!-- #enddocregion no-app-module-->
+
+    <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/quickstart/ts/index.1.html

@@ -1,37 +1,27 @@
 <!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 -->
-    <!-- #docregion polyfills -->
-     <!-- Polyfill for older browsers -->
+    <!-- Polyfills 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 -->
     <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>
+    <my-app><!-- content managed by Angular --></my-app>
   </body>
-  <!-- #enddocregion my-app -->
+
 </html>

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

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

public/docs/_examples/quickstart/ts/package.1.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/quickstart/ts/plnkr.json

@@ -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/quickstart/ts/systemjs.config.1.js

@@ -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/quickstart/ts/tsconfig.1.json

@@ -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/setup/e2e-spec.ts

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