Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 393987b

Browse files
committed
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.
1 parent 6e3039f commit 393987b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+709
-545
lines changed
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// #docregion import
2+
import {Component} from 'angular2/core';
3+
// #enddocregion import
4+
import {HeroListComponent} from './hero-list.component';
5+
6+
@Component({
7+
selector: 'my-app',
8+
template: '<hero-list></hero-list>',
9+
directives: [HeroListComponent]
10+
})
11+
// #docregion export
12+
export class AppComponent { }
13+
// #enddocregion export

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import {Injectable} from 'angular2/angular2';
1+
import {Injectable} from 'angular2/core';
22
import {Logger} from './logger.service';
33
import {Hero} from './hero';
44

55
@Injectable()
66
export class BackendService {
77
constructor(private _logger: Logger) {}
8-
8+
99
getAll<T>(type: {new(...args:any[]): any }) : any[]{
1010
if (type === Hero) {
1111
// TODO get from the database and return as a promise
1212
return [
13-
new Hero('Windstorm', 'Weather mastery'),
14-
new Hero('Mr. Nice', 'Killing them with kindness'),
13+
new Hero('Windstorm', 'Weather mastery'),
14+
new Hero('Mr. Nice', 'Killing them with kindness'),
1515
new Hero('Magneta', 'Manipulates metalic objects')];
1616
}
1717
let err = new Error('Cannot get object of this type');
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {bootstrap} from 'angular2/platform/browser';
2+
// #docregion import
3+
import {AppComponent} from './app.component';
4+
// #enddocregion import
5+
import {HeroService} from './hero.service';
6+
import {BackendService} from './backend.service';
7+
import {Logger} from './logger.service';
8+
9+
// #docregion bootstrap
10+
bootstrap(AppComponent, [
11+
BackendService, HeroService, Logger
12+
]);
13+
// #enddocregion bootstrap
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<hr>
2+
<h4>{{hero.name}} Detail</h4>
3+
<div>Id: {{hero.id}}</div>
4+
<div>Name:
5+
<!-- #docregion ngModel -->
6+
<input [(ngModel)]="hero.name">
7+
<!-- #enddocregion ngModel -->
8+
</div>
9+
<div>Power:<input [(ngModel)]="hero.power"></div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Input} from 'angular2/angular2';
1+
import {Component, Input} from 'angular2/core';
22
import {Hero} from './hero';
33

44
@Component({
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!--#docregion binding -->
2+
<div>{{hero.name}}</div>
3+
<hero-detail [hero]="selectedHero"></hero-detail>
4+
<div (click)="selectHero(hero)></div>
5+
6+
<!--#enddocregion binding -->
7+
8+
<!--#docregion structural -->
9+
<div *ngFor="#hero of heroes"></div>
10+
<hero-detail *ngIf="selectedHero"></hero-detail>
11+
12+
<!--#enddocregion structural -->
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!-- #docregion -->
2+
<h2>Hero List</h2>
3+
4+
<p><i>Pick a hero from the list</i></p>
5+
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
6+
{{hero.name}}
7+
</div>
8+
9+
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// #docplaster
22

3-
import {Component} from 'angular2/angular2';
3+
import {Component} from 'angular2/core';
44
import {Hero} from './hero';
55
import {HeroDetailComponent} from './hero-detail.component';
66
import {HeroService} from './hero.service'
@@ -12,7 +12,7 @@ import {HeroService} from './hero.service'
1212
selector: 'hero-list',
1313
templateUrl: 'app/hero-list.component.html',
1414
directives: [HeroDetailComponent],
15-
// #docregion providers
15+
// #docregion providers
1616
providers: [HeroService]
1717
})
1818
// #enddocregion providers
@@ -25,7 +25,7 @@ export class HeroesComponent { ... }
2525
// #docregion class
2626
export class HeroListComponent {
2727
// #docregion ctor
28-
constructor(service: HeroService) {
28+
constructor(service: HeroService) {
2929
this.heroes = service.getHeroes();
3030
}
3131
// #enddocregion ctor

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Injectable} from 'angular2/angular2';
1+
import {Injectable} from 'angular2/core';
22
import {Hero} from './hero';
33
import {BackendService} from './backend.service';
44
import {Logger} from './logger.service';
@@ -7,7 +7,7 @@ import {Logger} from './logger.service';
77
@Injectable()
88
export class HeroService {
99
constructor(private _backend: BackendService, private _logger:Logger){}
10-
10+
1111
getHeroes() {
1212
// TODO return as a promise
1313
let heroes = <Hero[]> this._backend.getAll(Hero);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Injectable} from 'angular2/angular2';
1+
import {Injectable} from 'angular2/core';
22

33
@Injectable()
44
export class Logger {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html>
33
<head>
44
<title>Intro to Angular 2</title>
5-
<script src="../node_modules/systemjs/dist/system.src.js"></script>
6-
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
5+
<script src="node_modules/systemjs/dist/system.src.js"></script>
6+
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
77
<script>
88
System.config({
99
packages: {'app': {defaultExtension: 'js'}}
@@ -13,7 +13,7 @@
1313
</head>
1414

1515
<body>
16-
<hero-list>Loading...</hero-list>
16+
<my-app>Loading...</my-app>
1717
</body>
1818

1919
</html>
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
0 info it worked if it ends with ok
2+
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
3+
1 verbose cli 'C:\\Users\\wardb\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
4+
1 verbose cli 'run',
5+
1 verbose cli 'tsc:w' ]
6+
2 info using [email protected]
7+
3 info using [email protected]
8+
4 verbose run-script [ 'pretsc:w', 'tsc:w', 'posttsc:w' ]
9+
5 info pretsc:w [email protected]
10+
6 info tsc:w [email protected]
11+
7 verbose unsafe-perm in lifecycle true
12+
8 info [email protected] Failed to exec tsc:w script
13+
9 verbose stack Error: [email protected] tsc:w: `tsc -w`
14+
9 verbose stack Exit status 3221225786
15+
9 verbose stack at EventEmitter.<anonymous> (C:\Users\wardb\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:214:16)
16+
9 verbose stack at emitTwo (events.js:87:13)
17+
9 verbose stack at EventEmitter.emit (events.js:172:7)
18+
9 verbose stack at ChildProcess.<anonymous> (C:\Users\wardb\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:24:14)
19+
9 verbose stack at emitTwo (events.js:87:13)
20+
9 verbose stack at ChildProcess.emit (events.js:172:7)
21+
9 verbose stack at maybeClose (internal/child_process.js:818:16)
22+
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
23+
10 verbose pkgid [email protected]
24+
11 verbose cwd c:\github\angular.io.ideablade\public\docs\_examples\architecture\ts
25+
12 error Windows_NT 10.0.10586
26+
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"
27+
14 error node v4.2.1
28+
15 error npm v2.14.7
29+
16 error code ELIFECYCLE
30+
17 error [email protected] tsc:w: `tsc -w`
31+
17 error Exit status 3221225786
32+
18 error Failed at the [email protected] tsc:w script 'tsc -w'.
33+
18 error This is most likely a problem with the angular2-template-syntax package,
34+
18 error not with npm itself.
35+
18 error Tell the author that this fails on your system:
36+
18 error tsc -w
37+
18 error You can get their info via:
38+
18 error npm owner ls angular2-template-syntax
39+
18 error There is likely additional logging output above.
40+
19 verbose exit [ 1, true ]
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "angular2-template-syntax",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"tsc": "tsc",
8+
"tsc:w": "tsc -w",
9+
"lite": "lite-server",
10+
"both": "concurrent \"npm run tsc:w\" \"npm run lite\" "
11+
},
12+
"keywords": [],
13+
"author": "",
14+
"license": "ISC"
15+
}
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
{
22
"compilerOptions": {
33
"target": "ES5",
4-
"module": "commonjs",
4+
"module": "system",
5+
"moduleResolution": "node",
56
"sourceMap": true,
67
"emitDecoratorMetadata": true,
78
"experimentalDecorators": true,
89
"removeComments": false,
910
"noImplicitAny": true,
1011
"suppressImplicitAnyIndexErrors": true
11-
}
12+
},
13+
"exclude": [
14+
"node_modules"
15+
]
1216
}

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

Lines changed: 0 additions & 21 deletions
This file was deleted.

public/docs/_examples/intro/ts/src/app/boot.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

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

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 0 additions & 12 deletions
This file was deleted.

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

Lines changed: 0 additions & 8 deletions
This file was deleted.

public/docs/ts/latest/guide/_data.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
"cheatsheet": {
99
"title": "Angular Cheat Sheet"
1010
},
11-
11+
12+
"architecture": {
13+
"title": "Architecture Overview"
14+
},
15+
1216
"displaying-data": {
1317
"title": "Displaying Data",
1418
"intro": "In Angular, we display data by binding component properties to elements in HTML templates using interpolation and other forms of Property Binding."

0 commit comments

Comments
 (0)