docs: split intro into separate chapters, shuffle code, update to alph52

closes #483
A major refactoring of the intro chapters includes text revision
and the addition of "module" as an 8th "basic building block".
Incorporates John Papa feedback.

Author: wardbell

public/docs/_examples/intro/ts/.gitignore renamed to public/docs/_examples/architecture/ts/.gitignore

@@ -0,0 +1,13 @@
+// #docregion import
+import {Component} from 'angular2/core';
+// #enddocregion import
+import {HeroListComponent} from './hero-list.component';
+
+@Component({
+  selector: 'my-app',
+  template: '<hero-list></hero-list>',
+  directives: [HeroListComponent]
+})
+// #docregion export
+export class AppComponent { }
+// #enddocregion export

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

@@ -1,17 +1,17 @@
-import {Injectable} from 'angular2/angular2';
+import {Injectable} from 'angular2/core';
 import {Logger} from './logger.service';
 import {Hero} from './hero';
 
 @Injectable()
 export class BackendService {
   constructor(private _logger: Logger) {}
-  
+
   getAll<T>(type: {new(...args:any[]): any }) : any[]{
     if (type === Hero) {
       // TODO get from the database and return as a promise
       return [
-        new Hero('Windstorm', 'Weather mastery'), 
-        new Hero('Mr. Nice', 'Killing them with kindness'), 
+        new Hero('Windstorm', 'Weather mastery'),
+        new Hero('Mr. Nice', 'Killing them with kindness'),
         new Hero('Magneta', 'Manipulates metalic objects')];
     }
     let err = new Error('Cannot get object of this type');

public/docs/_examples/intro/ts/src/app/backend.service.ts renamed to public/docs/_examples/architecture/ts/app/backend.service.ts

@@ -0,0 +1,13 @@
+import {bootstrap}      from 'angular2/platform/browser';
+// #docregion import
+import {AppComponent} from './app.component';
+// #enddocregion import
+import {HeroService}    from './hero.service';
+import {BackendService} from './backend.service';
+import {Logger}         from './logger.service';
+
+// #docregion bootstrap
+bootstrap(AppComponent, [
+  BackendService, HeroService, Logger
+]);
+// #enddocregion bootstrap

public/docs/_examples/architecture/ts/app/boot.ts

@@ -0,0 +1,9 @@
+<hr>
+<h4>{{hero.name}} Detail</h4>
+<div>Id: {{hero.id}}</div>
+<div>Name:
+<!-- #docregion ngModel -->
+<input [(ngModel)]="hero.name">
+<!-- #enddocregion ngModel -->
+</div>
+<div>Power:<input [(ngModel)]="hero.power"></div>

public/docs/_examples/architecture/ts/app/hero-detail.component.html

@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/angular2';
+import {Component, Input} from 'angular2/core';
 import {Hero} from './hero';
 
 @Component({

public/docs/_examples/intro/ts/src/app/hero-detail.component.ts renamed to public/docs/_examples/architecture/ts/app/hero-detail.component.ts

@@ -0,0 +1,12 @@
+<!--#docregion binding  -->
+<div>{{hero.name}}</div>
+<hero-detail [hero]="selectedHero"></hero-detail>
+<div (click)="selectHero(hero)></div>
+
+<!--#enddocregion binding -->
+
+<!--#docregion structural  -->
+<div *ngFor="#hero of heroes"></div>
+<hero-detail *ngIf="selectedHero"></hero-detail>
+
+<!--#enddocregion structural -->

public/docs/_examples/architecture/ts/app/hero-list.component.1.html

@@ -0,0 +1,9 @@
+<!-- #docregion -->
+<h2>Hero List</h2>
+
+<p><i>Pick a hero from the list</i></p>
+<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
+  {{hero.name}}
+</div>
+
+<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

public/docs/_examples/architecture/ts/app/hero-list.component.html

@@ -1,6 +1,6 @@
 // #docplaster
 
-import {Component} from 'angular2/angular2';
+import {Component} from 'angular2/core';
 import {Hero} from './hero';
 import {HeroDetailComponent} from './hero-detail.component';
 import {HeroService} from './hero.service'
@@ -12,7 +12,7 @@ import {HeroService} from './hero.service'
   selector:    'hero-list',
   templateUrl: 'app/hero-list.component.html',
   directives:  [HeroDetailComponent],
-// #docregion providers  
+// #docregion providers
   providers:   [HeroService]
 })
 // #enddocregion providers
@@ -25,7 +25,7 @@ export class HeroesComponent { ... }
 // #docregion class
 export class HeroListComponent {
 // #docregion ctor
-  constructor(service: HeroService) { 
+  constructor(service: HeroService) {
     this.heroes = service.getHeroes();
   }
 // #enddocregion ctor

public/docs/_examples/intro/ts/src/app/hero-list.component.ts renamed to public/docs/_examples/architecture/ts/app/hero-list.component.ts

@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/angular2';
+import {Injectable} from 'angular2/core';
 import {Hero} from './hero';
 import {BackendService} from './backend.service';
 import {Logger} from './logger.service';
@@ -7,7 +7,7 @@ import {Logger} from './logger.service';
 @Injectable()
 export class HeroService {
   constructor(private _backend: BackendService, private _logger:Logger){}
-  
+
   getHeroes() {
     // TODO return as a promise
     let heroes = <Hero[]> this._backend.getAll(Hero);

public/docs/_examples/intro/ts/src/app/hero.service.ts renamed to public/docs/_examples/architecture/ts/app/hero.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/angular2';
+import {Injectable} from 'angular2/core';
 
 @Injectable()
 export class Logger {

public/docs/_examples/intro/ts/src/app/hero.ts renamed to public/docs/_examples/architecture/ts/app/hero.ts

@@ -2,8 +2,8 @@
 <html>
   <head>
     <title>Intro to Angular 2</title>
-    <script src="../node_modules/systemjs/dist/system.src.js"></script>
-    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
     <script>
       System.config({
         packages: {'app': {defaultExtension: 'js'}}
@@ -13,7 +13,7 @@
   </head>
 
   <body>
-    <hero-list>Loading...</hero-list>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>

public/docs/_examples/intro/ts/src/app/logger.service.ts renamed to public/docs/_examples/architecture/ts/app/logger.service.ts

@@ -0,0 +1,40 @@
+0 info it worked if it ends with ok
+1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
+1 verbose cli   'C:\\Users\\wardb\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
+1 verbose cli   'run',
+1 verbose cli   'tsc:w' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose run-script [ 'pretsc:w', 'tsc:w', 'posttsc:w' ]
+5 info pretsc:w [email protected]
+6 info tsc:w [email protected]
+7 verbose unsafe-perm in lifecycle true
+8 info [email protected] Failed to exec tsc:w script
+9 verbose stack Error: [email protected] tsc:w: `tsc -w`
+9 verbose stack Exit status 3221225786
+9 verbose stack     at EventEmitter.<anonymous> (C:\Users\wardb\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:214:16)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at EventEmitter.emit (events.js:172:7)
+9 verbose stack     at ChildProcess.<anonymous> (C:\Users\wardb\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:24:14)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at ChildProcess.emit (events.js:172:7)
+9 verbose stack     at maybeClose (internal/child_process.js:818:16)
+9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
+10 verbose pkgid [email protected]
+11 verbose cwd c:\github\angular.io.ideablade\public\docs\_examples\architecture\ts
+12 error Windows_NT 10.0.10586
+13 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\wardb\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "tsc:w"
+14 error node v4.2.1
+15 error npm  v2.14.7
+16 error code ELIFECYCLE
+17 error [email protected] tsc:w: `tsc -w`
+17 error Exit status 3221225786
+18 error Failed at the [email protected] tsc:w script 'tsc -w'.
+18 error This is most likely a problem with the angular2-template-syntax package,
+18 error not with npm itself.
+18 error Tell the author that this fails on your system:
+18 error     tsc -w
+18 error You can get their info via:
+18 error     npm owner ls angular2-template-syntax
+18 error There is likely additional logging output above.
+19 verbose exit [ 1, true ]

public/docs/_examples/intro/ts/src/index.html renamed to public/docs/_examples/architecture/ts/index.html

@@ -0,0 +1,15 @@
+{
+  "name": "angular2-template-syntax",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "lite": "lite-server",
+    "both": "concurrent \"npm run tsc:w\" \"npm run lite\" "
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

public/docs/_examples/architecture/ts/npm-debug.log.77ba9bb88f1c7e91ec20f862c16decc7

@@ -1,12 +1,16 @@
 {
   "compilerOptions": {
     "target": "ES5",
-    "module": "commonjs",
+    "module": "system",
+    "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true
-  }
+  },
+  "exclude": [
+    "node_modules"
+  ]
 }

public/docs/_examples/architecture/ts/package.json

@@ -8,7 +8,11 @@
   "cheatsheet": {
     "title": "Angular Cheat Sheet"
   },
-
+  
+  "architecture": {
+    "title": "Architecture Overview"
+  },
+  
   "displaying-data": {
     "title": "Displaying Data",
     "intro": "In Angular, we display data by binding component properties to elements in HTML templates using interpolation and other forms of Property Binding."