iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

(docs) getting started evolved with some unit-tests for quickstart

This commit is contained in:
Ward Bell 2015-09-09 14:20:43 -07:00 committed by Naomi Black
parent 50e758ba60
commit c44e966278
47 changed files with 645 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -1,4 +1,8 @@
node_modules
bower_components
jspm_packages
typings
*.map
www
.DS_Store
.idea

1
public/docs/_examples/gettingstarted/ts/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
src/**/*.js

10
public/docs/_examples/gettingstarted/ts/README.md Normal file
View File

@ -0,0 +1,10 @@
#Getting Started (TS) for the DevGuide developer
This is the source code for the "Getting Started" Typescrip example code.
There are files here that are *for the audience* and **not to be executed during example development**!
* **package.json** - as the audience will see it; the example reaches up to the site level **node_modules**
and the scripts are not supposed to work here.
* **tsd.json** - as the audience will see it; the example reaches up to the example level typings

37
public/docs/_examples/gettingstarted/ts/app.js
View File

@ -1,37 +0,0 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
// #docregion
// #docregion import
var angular2_1 = require('angular2/angular2');
// #enddocregion
// #docregion class-w-annotations
var AppComponent = (function () {
function AppComponent() {
}
AppComponent = __decorate([
angular2_1.Component({
selector: 'my-app'
}),
angular2_1.View({
template: '<h1 id="output">My First Angular 2 App</h1>'
}),
__metadata('design:paramtypes', [])
], AppComponent);
return AppComponent;
})();
// #enddocregion
// #enddocregion
// #docregion bootstrap
angular2_1.bootstrap(AppComponent);
// #enddocregion
// #enddocregion
//# sourceMappingURL=app.js.map

15
public/docs/_examples/gettingstarted/ts/index.html
View File

@ -1,15 +0,0 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.import('app');
</script>
</body>
</html>

15
public/docs/_examples/gettingstarted/ts/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "ng2-getting-started",
"version": "0.0.1",
"dependencies": {
"angular2": "2.0.0-alpha.35",
"es6-module-loader": "^0.16",
"systemjs": "^0.16",
"traceur": "0.0.91"
},
"scripts": {
"postinstall": "cd src && tsd reinstall -r -o && cd ..",
"tsc": "tsc -p src -w",
"start": "live-server --open=src"
}
}

0
public/docs/_examples/gettingstarted/ts/app.ts → public/docs/_examples/gettingstarted/ts/src/app.ts
View File

0
public/docs/_examples/gettingstarted/ts/dummy.spec.js → public/docs/_examples/gettingstarted/ts/src/dummy.spec.ts
View File

16
public/docs/_examples/gettingstarted/ts/src/index.html Normal file
View File

@ -0,0 +1,16 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.import('app');
</script>
</body>
</html>

9
public/docs/_examples/gettingstarted/ts/src/tsconfig.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}

24
public/docs/_examples/gettingstarted/ts/src/tsd.json Normal file
View File

@ -0,0 +1,24 @@
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"angular2/angular2.d.ts": {
"commit": "cd2e71bb1f0459197e733be66fdeafaec600514d"
},
"es6-promise/es6-promise.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"jasmine/jasmine.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"rx/rx.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"rx/rx-lite.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
}
}
}

1
public/docs/_examples/quickstart/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
src/**/*.js

34
public/docs/_examples/quickstart/app.js
View File

@ -1,34 +0,0 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
// #docregion
// #docregion import
var angular2_1 = require('angular2/angular2');
// #enddocregion
var MyAppComponent = (function () {
function MyAppComponent() {
this.name = 'Alice';
}
MyAppComponent = __decorate([
angular2_1.Component({
selector: 'my-app'
}),
angular2_1.View({
template: '<h1 id="output">Hello {{ name }}</h1>'
}),
__metadata('design:paramtypes', [])
], MyAppComponent);
return MyAppComponent;
})();
// #docregion bootstrap
angular2_1.bootstrap(MyAppComponent);
// #enddocregion
//# sourceMappingURL=app.js.map

1
public/docs/_examples/quickstart/app.js.map
View File

@ -1 +0,0 @@
{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":["MyAppComponent","MyAppComponent.constructor"],"mappings":";;;;;;;;;;;AAEA,AAFA,aAAa;AACb,oBAAoB;AACpB,yBAAyC,mBAAmB,CAAC,CAAA;AAG7D,AAFA,gBAAgB;;IAWfA;QACCC,IAAIA,CAACA,IAAIA,GAAGA,OAAOA,CAACA;IACrBA,CAACA;IAXFD;QAACA,oBAASA,CAACA;YACVA,QAAQA,EAAEA,QAAQA;SAClBA,CAACA;QACDA,eAAIA,CAACA;YACLA,QAAQA,EAAEA,uCAAuCA;SACjDA,CAACA;;uBAODA;IAADA,qBAACA;AAADA,CAACA,AAZD,IAYC;AAGD,AADA,uBAAuB;AACvB,oBAAS,CAAC,cAAc,CAAC,CAAC;AAC1B,gBAAgB"}

11
public/docs/_examples/quickstart/index.html
View File

@ -3,13 +3,14 @@
<head>
<!-- #docregion head -->
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- #enddocregion -->
</head>
<body>
<my-app></my-app>
<script>System.import('app');</script>
<app></app>
<script>System.import('src/app');</script>
</body>
</html>

21
public/docs/_examples/quickstart/package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "ng2-quickstart",
"version": "0.0.1",
"license": "ICS",
"repository": {},
"dependencies": {
"angular2": "2.0.0-alpha.35",
"es6-module-loader": "^0.16",
"systemjs": "^0.16",
"traceur": "0.0.91"
},
"devDependencies": {
"jasmine-core": "^2.3.4",
"zone.js": "^0.5.3"
},
"scripts": {
"postinstall": "cd src && tsd reinstall -r -o && cd ..",
"tsc": "tsc -p src -w",
"start": "live-server"
}
}

68
public/docs/_examples/quickstart/src/app.spec.ts Normal file
View File

@ -0,0 +1,68 @@
///// Boiler Plate ////
import {bind} from 'angular2/angular2';
import {
beforeEachBindings, DebugElement, RootTestComponent as RTC,
// Jasmine overrides
beforeEach, ddescribe, xdescribe, describe, iit, it, xit, //expect,
AsyncTestCompleter, inject, RootTestComponent, TestComponentBuilder,
} from 'angular2/test';
//// Testing this component ////
import {AppComponent} from './app';
describe('AppComponent', () => {
describe('(no DOM)', () => {
it('component has name == "Alice"', () => {
let app = new AppComponent;
expect(app.name).toEqual('Alice');
});
});
describe('(in DOM)', () => {
it('component has name == "Alice"', injectTcb((tcb, done) => {
tcb
.createAsync(AppComponent)
.then((rootTC:RTC) => {
let ac:AppComponent = rootTC.componentInstance;
expect(ac.name).toEqual('Alice');
})
.catch(fail).then(done,done);
}));
it('DOM has name == "Alice"', injectTcb((tcb, done) => {
tcb
.createAsync(AppComponent)
.then((rootTC:RTC) => {
rootTC.detectChanges();
let domName = rootTC.componentViewChildren[0].nativeElement.innerHTML;
expect(domName).toMatch('Alice');
})
.catch(fail).then(done,done);
}));
//rootTC.nativeElement.getElementsByTagName('h1')[0].innerHTML
it('DOM has name == "Alice" (2)', injectTcb((tcb, done) => {
tcb
.createAsync(AppComponent)
.then((rootTC:RTC) => {
rootTC.detectChanges();
let domName = rootTC.nativeElement
// jQuery goes here
.getElementsByTagName('h1')[0].innerHTML;
expect(domName).toMatch('Alice');
})
.catch(fail).then(done,done);
}));
});
});
///////// test.helpers.ts: here for now ////////
function injectTcb(testFn: (tcb: TestComponentBuilder, done: ()=>void) => void) {
return inject([TestComponentBuilder, AsyncTestCompleter], function injectWrapper(tcb: TestComponentBuilder, async: AsyncTestCompleter) {
testFn(tcb, async.done.bind(async));
});
}

6
public/docs/_examples/quickstart/app.ts → public/docs/_examples/quickstart/src/app.ts
View File

@ -4,12 +4,12 @@ import {Component, View, bootstrap} from 'angular2/angular2';
// #enddocregion
@Component({
selector: 'my-app'
selector: 'app'
})
@View({
template: '<h1 id="output">Hello {{ name }}</h1>'
})
class MyAppComponent {
export class AppComponent {
name : string;
constructor() {
@ -18,5 +18,5 @@ class MyAppComponent {
}
// #docregion bootstrap
bootstrap(MyAppComponent);
bootstrap(AppComponent);
// #enddocregion

9
public/docs/_examples/quickstart/src/dummy.spec.ts Normal file
View File

@ -0,0 +1,9 @@
describe("Jasmine sample test", function() {
it("1+1 should be 2", function() {
var result = 1 + 1;
expect(result).toBe(2);
});
});

9
public/docs/_examples/quickstart/src/tsconfig.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}

24
public/docs/_examples/quickstart/src/tsd.json Normal file
View File

@ -0,0 +1,24 @@
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"angular2/angular2.d.ts": {
"commit": "cd2e71bb1f0459197e733be66fdeafaec600514d"
},
"es6-promise/es6-promise.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"jasmine/jasmine.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"rx/rx.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"rx/rx-lite.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
}
}
}

55
public/docs/_examples/quickstart/unit-tests.html Normal file
View File

@ -0,0 +1,55 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>QuickStart Tests</title>
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="node_modules/es6-module-loader/dist/es6-module-loader.src.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/test_lib.dev.js"></script>
<script src="node_modules/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="node_modules/zone.js/dist/jasmine-patch.js"></script>
</head>
<body>
<app><!--placeholder--></app>
<script>
(function() {
Error.stackTraceLimit=Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
var imports = [
'src/dummy.spec',
'src/app.spec',
'@empty' // placeholder makes it easier to comment-out specs above
].map(System.import.bind(System));
Promise.all(imports)
.then( function() {
// Must designate a BrowserDomAdapter or else DOM testing bombs
// (e.g. when testing component and call `tcb.createAsync`) for lack of `DOM` object
// Igor's recommended approach based on
// https://github.com/angular/angular/blob/master/test-main.js
//
// TODO: BrowserDomAdapter should be exposed through 'angular2/test' instead
var DomAdapterModule = System.get('angular2/src/dom/browser_adapter');
if (DomAdapterModule) {
DomAdapterModule.BrowserDomAdapter.makeCurrent();
}
})
.then( function() { window.onload();} ) // re-execute Jasmine's buildup
.catch( function(err) { console.log(err);} );
})();
</script>
</body>
</html>

14
public/docs/_examples/tsconfig.json
View File

@ -1,9 +1,9 @@
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}

12
public/docs/_examples/tsd.json
View File

@ -5,20 +5,20 @@
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"angular2/angular2.d.ts": {
"commit": "cd2e71bb1f0459197e733be66fdeafaec600514d"
},
"es6-promise/es6-promise.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"jasmine/jasmine.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"rx/rx.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"rx/rx-lite.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"angular2/angular2.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
},
"jasmine/jasmine.d.ts": {
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
}
}
}

17
public/docs/_fragments/gettingstarted/ts/index.html.md
View File

@ -1,17 +0,0 @@
```
<!DOCTYPE html>
<html>
<head>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.import('app');
</script>
</body>
</html>
```

0
public/docs/_fragments/gettingstarted/ts/app-bootstrap.js.md → public/docs/_fragments/gettingstarted/ts/src/app-bootstrap.js.md
View File

0
public/docs/_fragments/gettingstarted/ts/app-bootstrap.ts.md → public/docs/_fragments/gettingstarted/ts/src/app-bootstrap.ts.md
View File

0
public/docs/_fragments/gettingstarted/ts/app-class-w-annotations.js.md → public/docs/_fragments/gettingstarted/ts/src/app-class-w-annotations.js.md
View File

0
public/docs/_fragments/gettingstarted/ts/app-class-w-annotations.ts.md → public/docs/_fragments/gettingstarted/ts/src/app-class-w-annotations.ts.md
View File

0
public/docs/_fragments/gettingstarted/ts/app-class.ts.md → public/docs/_fragments/gettingstarted/ts/src/app-class.ts.md
View File

0
public/docs/_fragments/gettingstarted/ts/app-import.js.md → public/docs/_fragments/gettingstarted/ts/src/app-import.js.md
View File

0
public/docs/_fragments/gettingstarted/ts/app-import.ts.md → public/docs/_fragments/gettingstarted/ts/src/app-import.ts.md
View File

0
public/docs/_fragments/gettingstarted/ts/app.js.md → public/docs/_fragments/gettingstarted/ts/src/app.js.md
View File

0
public/docs/_fragments/gettingstarted/ts/app.ts.md → public/docs/_fragments/gettingstarted/ts/src/app.ts.md
View File

18
public/docs/_fragments/gettingstarted/ts/src/index.html.md Normal file
View File

@ -0,0 +1,18 @@
```
<!DOCTYPE html>
<html>
<head>
<script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.import('app');
</script>
</body>
</html>
```

3
public/docs/_fragments/quickstart/app-bootstrap.js.md
View File

@ -1,3 +0,0 @@
```
angular2_1.bootstrap(MyAppComponent);
```

3
public/docs/_fragments/quickstart/app-bootstrap.ts.md
View File

@ -1,3 +0,0 @@
```
bootstrap(MyAppComponent);
```

3
public/docs/_fragments/quickstart/app-import.js.md
View File

@ -1,3 +0,0 @@
```
var angular2_1 = require('angular2/angular2');
```

20
public/docs/_fragments/quickstart/app.js.md
View File

@ -1,20 +0,0 @@
```
var angular2_1 = require('angular2/angular2');
var MyAppComponent = (function () {
function MyAppComponent() {
this.name = 'Alice';
}
MyAppComponent = __decorate([
angular2_1.Component({
selector: 'my-app'
}),
angular2_1.View({
template: '<h1 id="output">Hello {{ name }}</h1>'
}),
__metadata('design:paramtypes', [])
], MyAppComponent);
return MyAppComponent;
})();
angular2_1.bootstrap(MyAppComponent);
//# sourceMappingURL=app.js.map
```

7
public/docs/_fragments/quickstart/index-head.html.md
View File

@ -1,6 +1,7 @@
```
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
```

11
public/docs/_fragments/quickstart/index.html.md
View File

@ -2,13 +2,14 @@
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>System.import('app');</script>
<app></app>
<script>System.import('src/app');</script>
</body>
</html>
```

3
public/docs/_fragments/quickstart/src/app-bootstrap.ts.md Normal file
View File

@ -0,0 +1,3 @@
```
bootstrap(AppComponent);
```

0
public/docs/_fragments/quickstart/app-import.ts.md → public/docs/_fragments/quickstart/src/app-import.ts.md
View File

6
public/docs/_fragments/quickstart/app.ts.md → public/docs/_fragments/quickstart/src/app.ts.md
View File

@ -2,12 +2,12 @@
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'my-app'
selector: 'app'
})
@View({
template: '<h1 id="output">Hello {{ name }}</h1>'
})
class MyAppComponent {
export class AppComponent {
name : string;
constructor() {
@ -15,6 +15,6 @@ class MyAppComponent {
}
}
bootstrap(MyAppComponent);
bootstrap(AppComponent);
```

56
public/docs/_fragments/quickstart/unit-tests.html.md Normal file
View File

@ -0,0 +1,56 @@
```
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>QuickStart Tests</title>
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="node_modules/es6-module-loader/dist/es6-module-loader.src.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/test_lib.dev.js"></script>
<script src="node_modules/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="node_modules/zone.js/dist/jasmine-patch.js"></script>
</head>
<body>
<app><!--placeholder--></app>
<script>
(function() {
Error.stackTraceLimit=Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
var imports = [
'src/dummy.spec',
'src/app.spec',
'@empty' // placeholder makes it easier to comment-out specs above
].map(System.import.bind(System));
Promise.all(imports)
.then( function() {
// Must designate a BrowserDomAdapter or else DOM testing bombs
// (e.g. when testing component and call `tcb.createAsync`) for lack of `DOM` object
// Igor's recommended approach based on
// https://github.com/angular/angular/blob/master/test-main.js
//
// TODO: BrowserDomAdapter should be exposed through 'angular2/test' instead
var DomAdapterModule = System.get('angular2/src/dom/browser_adapter');
if (DomAdapterModule) {
DomAdapterModule.BrowserDomAdapter.makeCurrent();
}
})
.then( function() { window.onload();} ) // re-execute Jasmine's buildup
.catch( function(err) { console.log(err);} );
})();
</script>
</body>
</html>
```

256
public/docs/js/latest/guide/gettingStarted.jade
View File

@ -1,130 +1,200 @@
include ../_util-fns
include ../../../../_includes/_util-fns
:markdown
Let's start from zero and build a simple Angular 2 application in JavaScript.
.callout.is-helpful
header Don't want JavaScript?
:markdown
Although we're getting started in JavaScript, you can also write Angular 2 apps
in TypeScript and Dart by selecting either of those languages from the combo-box in the banner.
:markdown
We'll do it in four short steps
1. Create a new project folder and an *index.html*
1. Write the root component for our application in *app.js*
1. Bootstrap the app
1. Run it
.l-main-section
:markdown
## Install Angular2
There are four steps to create any Angular app:
## Create a project folder and an *index.html*
1. Create an entry point HTML file where users will start
1. Load the Angular library at the top of the file
1. Make a root component for your application
1. Bootstrap Angular
You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
If you don't already have an HTTP server, you can install one using <code>npm install -g http-server</code>. (If that results in an access error, then you might need to use <code><b>sudo</b> npm ...</code>.)
For example:
Create a new folder to hold our application project, perhaps like this:
pre.prettyprint.lang-bash
code.
# From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html
code mkdir firstNgApp && cd firstNgApp
.callout.is-helpful
header Typescript vs ES5
:markdown
Although we work through the examples in TypeScript, you can also use
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
version. Note that in ES5, you'd want to name your files `.js` rather than
`.ts`.
Then add a new `index.html` file to the project folder and enter the following HTML
.l-main-section
:markdown
## Create an entry point
Create an `index.html` file and add the Angular library tags and a `main.ts` file where
you'll build your first component.
+makeExample('gettingstarted', 'js/index.html', 'index.html')(format="")
In the `<body>`, add an element called `<my-app>` that will be the root of your
application.
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
- var tsStyles = { pnk: [ /script (src=.*quot)/g, /System\.(import)/g] }
- var jsStyles = { otl: /script src=(&quot.*&quot)/g }
+makeTabs('gettingstarted', 'ts/index.html,js/index.html', 'TypeScript, JavaScript', [ tsStyles, jsStyles ])
.callout.is-helpful
header Don't use code.angularjs.org in a live app
:markdown
This example serves the Angular library from <a href="http://code.angularjs.org">code.angularjs.org</a>. This is
fine for examples, but you'd want to serve it yourself or use a CDN for real deployment.
.l-main-section
:markdown
## Set up the starting component
In `main.ts`, create a class called `AppComponent`, configure it to bind to the
`<my-app>` element in `index.html`, and call Angular's `bootstrap()` to kick
it all off like this:
+makeTabs("gettingstarted", "ts/main.ts, js/main.js", "TypeScript, JavaScript",
{ otl: [ /(AppComponent)/g, /(my-app)/g ],
pnk: / (\w*:)/g } )
.callout.is-helpful
header Annotations vs Decorators
.l-sub-section
:markdown
If you are transpiling using a tool that translates the `@` symbols to
annotations (for example Traceur), you will need to import the annotation versions of
Component and View. That can be easily achieved using
`import {ComponentAnnotation as Component, ViewAnnotation as View}`.
Our app loads two script files in the `<head>` element:
>***angular.js***, the Angular 2 library.
>***app.js***, the application JavaScript which we're about to write.
In the `<body>`, there's an element called `<my-app>`. This is a placeholder for the *root* of our
application. Angular will display our application content here.
.l-main-section
:markdown
## Write the *app* component
Create an *app.js* file with the following content:
+makeExample('gettingstarted', 'js/app-class-w-annotations.js')
:markdown
When we step back and squint, we see that
we're creating a visual component named **`appComponent`** by chaining three methods
originating in the global Angular namespace object called, **`ng`**.
```
var appComponent = ng
.Component({...})
.View({...})
.Class({...})
```
The **`Component`** method tells Angular that this is a component
controlling the element named "my-app".
+makeExample('gettingstarted', 'js/app-component.js')
:markdown
You may remember we added such an element to our *index.html* above.
The **`View`** method identifies the HTML template
that defines the visual appearance of the component.
+makeExample('gettingstarted', 'js/app-view.js')
:markdown
We're writing the HTML template inline
in this example. Later we'll move the HTML to a view template file and
assign the template's filename to the `templateUrl`.
We'll prefer that practice for all but the most trivial templates.
The **`Class`** method is where we implement the component itself,
giving it properties and methods that bind to the view and whatever
behavior is appropriate for this part of the UI.
+makeExample('gettingstarted', 'js/app-class.js')
:markdown
This component has the minimum implementation:
a *no-op* constructor function that does nothing because there is nothing to do.
We'll see more interesting component classes in future examples.
.l-main-section
:markdown
## Run it!
Open `index.html` through your web server and you should see:
We need a file server to serve the static assets of our application (*index.html* and *app.js*).
If you have python on your machine, you're in luck: python ships with a basic static file server.
Open a terminal window and enter:
pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000
:markdown
then point a browser to http://localhost:8000 which should display our simple text message:
figure.image-display
img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")
:markdown
**If you don't have python**, you may have to install a server.
You might prefer one of the many node-based static servers such as
[http-server](https:/github.com/nodeapps/http-server "http-server"),
[superstatic](https://www.npmjs.com/package/superstatic "superstatic"), or
[live-server](https://www.npmjs.com/package/live-server "live-server").
:markdown
For this example we'll use **live-server** because it performs a live reload by default and it's
fun to watch the browser update as we make changes.
Open a terminal (or Windows/Linux command line) and enter:
pre.prettyprint.lang-bash
code npm install -g live-server
.callout.is-helpful
:markdown
Install [**node** and **npm**](https://docs.npmjs.com/getting-started/installing-node "Installing Node.js and updating npm")
first if you haven't already. They're indispensible front-end developer tools.
:markdown
After it finishes installing, start the server on port 8000
pre.prettyprint.lang-bash
code live-server --port=8000
:markdown
**live-server** loads the browser for us and refreshes the page as we make
changes to the application.
.l-main-section
:markdown
## Explanations
## Add TypeScript Type Definition Files (optional)
This basic Angular app contains the structure for any app you'll build.
"*Wait*", you say, "*we're writing in JavaScript, not TypeScript!*".
Indeed we are. But code editors (such as [Visual Studio Code](https://code.visualstudio.com/) and
[Web Storm](https://www.jetbrains.com/webstorm/features/))
can improve the JavaScript development experience by providing type information and
displaying API documentation ("intellisense") based on TypeScript type definition files.
.l-sub-section
:markdown
### It's all a tree
We can download type definitions files for third-party libraries such as Angular
from the [DefinitelyTyped](http://definitelytyped.org/) repository using the
[**tsd package manager**](https://www.npmjs.com/package/tsd "TSD Package Manager").
You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top
level container for the rest of your application. You've named this one `AppComponent`, but there's
nothing special about the name and you can use whatever makes sense to you.
If you haven't already installed the *tsd*, do it now
with an npm command entered in a terminal or command window.
The root component's job is to give a location in the `index.html` file where your application will
render through its element, in this case `<my-app>`. There is also nothing special about this
element name; you can pick it as you like.
pre.prettyprint.lang-bash
code npm install -g tsd
The root component loads the initial template for the application that will load other components to perform
whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of
these in the following pages.
:markdown
Now let's download and install the core set of type definitions files for Angular development
in the root directory of our application.
.l-sub-section
:markdown
### @Component and @View annotations
pre.prettyprint.lang-bash
code tsd query angular2 es6-promise rx rx-lite jasmine --action install --save
A component annotation describes details about the component. An annotation can be identified by its at-sign (`@`).
:markdown
We'll find a ***typings*** folder in the root directory
with subfolders for each of the five downloaded type definition files (angular, es6-promise, rx, rx-lite, jasmine).
Type definition files have names ending in ***d.ts***.
There's also a summary ***tsd.d.ts*** file containing references to each of them.
The `@Component` annotation defines the HTML tag for the component by specifying the component's CSS selector.
Check your editor's documentation for instructions on using the *tsd.d.ts* file to
light up type checking and intellisense for these libraries.
The `@View` annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
.l-main-section
:markdown
## It's all a tree
.l-sub-section
:markdown
### import vs. window.angular
We can think of Angular apps as a tree of components.
The main difference between the ES5 and TypeScript versions is the loading of modules.
The `AppComponent` that we've been talking about acts as the top
level container - the root of the tree - for the rest of our application.
There's nothing special about the `AppComponent` name and we can use whatever makes sense to us.
**TypeScript**<br/>
TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app.
We've pinned the root component to an element in the `index.html` file where our application will
render its view. The element is called `<my-app>` but there is nothing special about this
name either.
**Javascript**<br/>
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
The *root component* loads the initial template for the application.
That template could load other components such as menu bars, views, and forms
that display information and respond to user gestures.
+makeTabs('gettingstarted', 'ts/main-import.ts', 'TypeScript')
And these components could load yet more components until the browser page became a deep tree
of nested functionality.
+makeExample('gettingstarted/js', 'main-bootstrap.js', 'JavaScript')
We'll walk through examples of these scenarios in the following pages.

163
public/docs/ts/latest/guide/gettingStarted.jade
View File

@ -10,9 +10,11 @@ include ../../../../_includes/_util-fns
in JavaScript and Dart by selecting either of those languages from the combo-box in the banner.
:markdown
We'll do it in seven short steps
We'll do it in short steps
1. Install the prerequisites for Angular TypeScript development
1. Create a new project folder and configure TypeScript
1. Create an application folder
1. Install the npm packages our app needs
1. Prepare for TypeScript compilation
1. Create an *index.html*
1. Write the root component for our application in *app.ts*
1. Bootstrap the app
@ -41,18 +43,7 @@ include ../../../../_includes/_util-fns
code npm install -g tsd
:markdown
Install a node **static server** to serve the static files of our application.
.alert.is-helpful
:markdown
You can skip this step if you've got python on your machine because python ships with a static server.
Or you can install one of the many node-based static servers such as
[http-server](https:/github.com/nodeapps/http-server "http-server"),
[superstatic](https://www.npmjs.com/package/superstatic "superstatic"), or
[live-server](https://www.npmjs.com/package/live-server "live-server").
:markdown
Install a node **static server** to serve our application.
We'll use **live-server** for this example because it performs a live reload by default and it's
fun to watch the browser update as we make changes.
@ -61,7 +52,7 @@ include ../../../../_includes/_util-fns
.l-main-section
:markdown
## Create a project folder and configure TypeScript
## Create the application folder
Create a new folder to hold our application project, perhaps like this:
@ -69,60 +60,110 @@ include ../../../../_includes/_util-fns
code mkdir firstNgApp && cd firstNgApp
:markdown
We'll refer to this as our application's **root folder**.
.l-main-section
:markdown
## Install npm packages
Our application will need some 3rd party JavaScript files:
>***angular.js***, the Angular 2 library.
>***es6-module-loader***, a "shim" that enables today's browsers load files
using the latest "ES6" JavaScript syntax.
>***system.js***, a third-party open-source library that adds module loading functionality to our browser.
>***traceur-runtime.js*** to transpile the TypeScript-generated JavaScript into the version of Javascript
our browser understands (the version known as "ES5").
For our little "GettingStarted" app, we could just install these packages
with four npm commands.
In our real apps, we'd take an extra minute to create a *package.json* configuration file.
This is a more robust, less error-prone approach, that we can maintain as our application evolves.
Create this **package.json** file in the root folder:
```
{
"name": "getting-started",
"version": "0.0.1",
"dependencies": {
"angular2": "2.0.0-alpha.35",
"es6-module-loader": "^0.16",
"systemjs": "^0.16",
"traceur": "0.0.91"
}
}
```
Now we install our script packages with one command
pre.prettyprint.lang-bash
code npm install
.l-main-section
:markdown
## Prepare for TypeScript Compilation
We're done at the root level of our application.
We'll build the rest of the application in a subfolder called *src*.
Let's make that folder and go there.
pre.prettyprint.lang-bash
code mkdir src && cd src
:markdown
We have one last preparation step before we start coding.
We prefer writing TypeScript apps in an editor that understands TypeScript,
an editor such as [Visual Studio Code](https://code.visualstudio.com/) or
[Web Storm](https://www.jetbrains.com/webstorm/features/).
We should tell that editor how to compile TypeScript to JavaScript
with a configuration file named **tsconfig.json**.
We need to tell that editor how to interpret our TypeScript
which we do with a configuration file named **tsconfig.json**.
This configuration file also simplifies the TypeScript compilation command we'll run later in this story.
Create *tsconfig.json* now with the following JSON content:
```json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
}
```
.l-main-section
:markdown
## Create an *index.html*
Add a new `index.html` file to the project folder and enter the following HTML
+makeExample('gettingstarted', 'ts/index.html', 'index.html')
+makeExample('gettingstarted', 'ts/src/index.html', 'index.html')
.l-sub-section
:markdown
Our app loads three script files in the `<head>` element:
Notice in the `<head>` element that we're loading the scripts we installed earlier with npm.
>***traceur-runtime.js*** to transpile the TypeScript-generated JavaScript into the version of Javascript
our browser understands (the version known as "ES5").
>***system.js***, a third-party open-source library that adds module loading functionality to our browser.
>***angular.js***, the Angular 2 library.
In the `<body>`, there's an element called `<my-app>`. This is a placeholder for the *root* of our
There's an element called `<app>` in the `<body>`. This is a placeholder for the *root* of our
application. Angular will display our application content here.
The final inline script tells *system.js* to load another JavaScript file named "app".
We haven't written that file yet; let's do so now.
.l-main-section
:markdown
## Write the *app* component
Create an *app.ts* file and add an empty class called `AppComponent` as follows:
+makeExample('gettingstarted', 'ts/app-class.ts')
+makeExample('gettingstarted', 'ts/src/app-class.ts')
:markdown
We won't ask this class to do anything. It's just an empty, meaningless class until we tell
@ -130,13 +171,13 @@ include ../../../../_includes/_util-fns
We import the `component` and `view` *annotations* that we need from the Angular library at the top of the file:
+makeExample('gettingstarted', 'ts/app-import.ts')
+makeExample('gettingstarted', 'ts/src/app-import.ts')
:markdown
Then we apply those annotations to the `AppComponent` class by writing the following lines
just above the class definition:
+makeExample('gettingstarted', 'ts/app-class-w-annotations.ts')
+makeExample('gettingstarted', 'ts/src/app-class-w-annotations.ts')
.l-sub-section
:markdown
@ -160,12 +201,12 @@ include ../../../../_includes/_util-fns
with an instance of the `AppComponent` class as the root component.
We call this "bootstrapping the app".
+makeExample('gettingstarted', 'ts/app-bootstrap.ts')
+makeExample('gettingstarted', 'ts/src/app-bootstrap.ts')
:markdown
Here is the complete *app.ts*
+makeExample('gettingstarted', 'ts/app.ts', 'app.ts')
+makeExample('gettingstarted', 'ts/src/app.ts', 'app.ts')
.l-main-section
@ -175,43 +216,47 @@ include ../../../../_includes/_util-fns
We've written our app in TypeScript but the browser only understands JavaScript.
We must run the TypeScript compiler to produce JavaScript for the browser.
Open a terminal window in the root of the code director and enter:
Open a terminal window in the **root of the application folder** (not *src*) and enter:
pre.prettyprint.lang-bash
code tsc
code tsc -p src -w
:markdown
After it runs we should find the generated *app.js* file in the project folder and also an *app.map.js* file that
After it runs we should find the generated *app.js* file in the *src* folder and also an *app.map.js* file that
helps debuggers navigate between the JavaScript and the TypeScript source.
We gave *tsc* the watch option (`-w`). It will watch for changes to our *.ts* files and
recompile them automatically. Leave it running in this terminal window.
.l-main-section
:markdown
## Run it!
Now we can see this app in action by serving the files we created with a local web server.
Now we are ready to see this app in action.
Open a another terminal window in the root of the code directory and launch the server.
If we have python installed on our machine, we can run a basic HTTP server:
Open a another terminal window in the **root of the application folder** (not *src*) and
launch a node static server such as the *live-server* we recommended earlier:
pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000
code live-server --open src
:markdown
then point a browser to http://localhost:8000 which should display our simple text message:
**live-server** loads the browser for us, serves the HTML and JavaScript files, and we should see it display our
application message:
figure.image-display
img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")
:markdown
Alternatively, we might run with a node server such as the *live-server* we recommended earlier:
### Make some changes
**live-server** detects changes to our files and refreshes the browser page for us automatically.
pre.prettyprint.lang-bash
code live-server --port=8000
Try changing the message to "My SECOND Angular 2 app".
:markdown
**live-server** loads the browser for us and refreshes the page as we make
changes to the application. *Check it out!*
The TypeScript compiler running in the first terminal window is watching our source code. It recompiles and produces
the revised *app.js*. The *live-server* sees that change and reloads the browser.
Pretty nice!
.l-main-section
:markdown
@ -228,14 +273,14 @@ include ../../../../_includes/_util-fns
that we installed earlier.
Let's download and install the core set of type definitions files for Angular development
in the root directory of our application.
in the ***src* folder** of our application.
pre.prettyprint.lang-bash
code tsd query angular2 es6-promise rx rx-lite jasmine --action install --save
code tsd install angular2 es6-promise rx rx-lite --save
:markdown
We'll find a ***typings*** folder in the root directory
with subfolders for each of the five downloaded type definition files (angular, es6-promise, rx, rx-lite, jasmine).
We'll find a new ***typings*** folder
with subfolders for each of the downloaded type definition files (angular, es6-promise, rx, and rx-lite).
Type definition files have names ending in ***d.ts***.
There's also a summary ***tsd.d.ts*** file containing references to each of them.