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

chore(devguide/ts): to beta.6 + typings + related doc updates

This commit is contained in:
Ward Bell 2016-02-11 15:08:06 -08:00
parent 908c0b2986
commit 3d992384c3
26 changed files with 275 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
gulpfile.js
View File

@ -66,7 +66,7 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
return new Minimatch(excludePattern)
});
var _exampleBoilerplateFiles = ['package.json', 'tsconfig.json', 'karma.conf.js', 'karma-test-shim.js' ];
var _exampleBoilerplateFiles = ['package.json', 'tsconfig.json', 'typings.json', 'karma.conf.js', 'karma-test-shim.js' ];
// --filter may be passed in to filter/select _example app subdir names
// i.e. gulp run-e2e-tests --filter=foo ; would select all example apps with
@ -232,6 +232,14 @@ gulp.task('add-example-boilerplate', function() {
gutil.log("symlinking " + linkPath + ' -> ' + realPath)
fsUtils.addSymlink(realPath, linkPath);
});
realPath = path.join(EXAMPLES_PATH, '/typings');
var typingsPaths = getTypingsPaths(EXAMPLES_PATH);
typingsPaths.forEach(function(linkPath) {
gutil.log("symlinking " + linkPath + ' -> ' + realPath)
fsUtils.addSymlink(realPath, linkPath);
});
copyExampleBoilerplate();
});
@ -257,6 +265,12 @@ gulp.task('remove-example-boilerplate', function() {
nodeModulesPaths.forEach(function(linkPath) {
fsUtils.removeSymlink(linkPath);
});
var typingsPaths = getTypingsPaths(EXAMPLES_PATH);
typingsPaths.forEach(function(linkPath) {
fsUtils.removeSymlink(linkPath);
});
var examplePaths = getExamplePaths(EXAMPLES_PATH);
return deleteFiles(_exampleBoilerplateFiles, examplePaths).then(function() {
var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
@ -507,6 +521,13 @@ function getNodeModulesPaths(basePath) {
return paths;
}
function getTypingsPaths(basePath) {
var paths = getExamplePaths(basePath).map(function(examplePath) {
return path.join(examplePath, "/typings");
});
return paths;
}
function getExamplePaths(basePath, includeBase) {
// includeBase defaults to false
return getPaths(basePath, "example-config.json", includeBase)

1
public/docs/_examples/.gitignore vendored
View File

@ -1,4 +1,5 @@
typings
typings.json
*.js.map
package.json
karma.conf.js

6
public/docs/_examples/homepage-hello-world/ts/index.1.html
View File

@ -12,9 +12,9 @@
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>

6
public/docs/_examples/homepage-tabs/ts/index.1.html
View File

@ -14,9 +14,9 @@
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>

6
public/docs/_examples/homepage-todo/ts/index.1.html
View File

@ -14,9 +14,9 @@
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>

25
public/docs/_examples/package.json
View File

@ -4,6 +4,7 @@
"description": "Master package.json, the superset of all dependencies for all of the _example package.json files.",
"main": "index.js",
"scripts": {
"postinstall": "npm run typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
@ -11,21 +12,22 @@
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"test": "karma start karma.conf.js",
"build-and-test": "npm run tsc && npm run test",
"http-server": "tsc && http-server"
"http-server": "tsc && http-server",
"typings" : "typings"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.3",
"systemjs": "0.19.6",
"angular2": "2.0.0-beta.6",
"systemjs": "0.19.20",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.11",
"zone.js": "0.5.14",
"a2-in-memory-web-api": "^0.1.2",
"a2-in-memory-web-api": "^0.1.5",
"bootstrap": "^3.3.6"
},
@ -33,15 +35,16 @@
"concurrently": "^1.0.0",
"http-server": "^0.8.5",
"jasmine-core": "~2.4.1",
"karma": "^0.12.23",
"karma-chrome-launcher": "^0.1.4",
"karma-cli": "^0.0.4",
"karma-jasmine": "^0.3.6",
"karma": "^0.13.19",
"karma-chrome-launcher": "^0.2.2",
"karma-cli": "^0.1.2",
"karma-jasmine": "^0.3.7",
"lite-server": "^2.0.1",
"live-server": "^0.9.1",
"protractor": "^3.0.0",
"protractor": "^3.1.1",
"rimraf": "^2.5.1",
"typescript": "^1.7.5"
"typescript": "^1.7.5",
"typings":"0.6.8"
},
"repository": { }
}

4
public/docs/_examples/quickstart/js/package.1.json
View File

@ -7,12 +7,12 @@
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.3",
"angular2": "2.0.0-beta.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.11"
"zone.js": "0.5.14"
},
"devDependencies": {
"concurrently": "^1.0.0",

1
public/docs/_examples/quickstart/ts/app/main.ts
View File

@ -1,5 +1,4 @@
// #docregion
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
// #docregion app-component
import {AppComponent} from './app.component'

13
public/docs/_examples/quickstart/ts/package.1.json
View File

@ -2,24 +2,27 @@
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"postinstall": "npm run typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"typings" : "typings"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.3",
"systemjs": "0.19.6",
"angular2": "2.0.0-beta.6",
"systemjs": "0.19.20",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.11"
"zone.js": "0.5.14"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^2.0.1",
"typescript": "^1.7.5"
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}

4
public/docs/_examples/quickstart/ts/tsconfig.1.json
View File

@ -10,6 +10,8 @@
"noImplicitAny": false
},
"exclude": [
"node_modules"
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

5
public/docs/_examples/quickstart/ts/typings.1.json Normal file
View File

@ -0,0 +1,5 @@
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}

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

@ -11,6 +11,8 @@
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules"
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

6
public/docs/_examples/typings.json Normal file
View File

@ -0,0 +1,6 @@
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#dd638012d63e069f2c99d06ef4dcc9616a943ee4"
}
}

6
public/docs/js/latest/guide/forms.jade
View File

@ -608,7 +608,6 @@ figure.image-display
.filetree
.file angular2-forms
.children
.file node_modules
.file app
.children
.file app.component.js
@ -616,9 +615,12 @@ figure.image-display
.file hero-form.component.html
.file hero-form.component.js
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file styles.cs
.file tsconfig.json
.file typings.json
:marked
Here’s the final version of the source:

5
public/docs/ts/latest/guide/forms.jade
View File

@ -668,7 +668,6 @@ figure.image-display
.filetree
.file angular2-forms
.children
.file node_modules
.file app
.children
.file app.component.ts
@ -676,10 +675,12 @@ figure.image-display
.file hero-form.component.html
.file hero-form.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file styles.css
.file tsconfig.json
.file typings.json
:marked
Here’s the final version of the source:

17
public/docs/ts/latest/guide/router.jade
View File

@ -432,8 +432,6 @@ figure.image-display
Our starter app's structure looks like this:
.filetree
.file router-sample
.children
.file node_modules
.children
.file app
.children
@ -441,10 +439,13 @@ figure.image-display
.file crisis-list.component.ts
.file hero-list.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file styles.css
.file tsconfig.json
.file package.json
.file typings.json
:marked
Here are the files discussed in this milestone
+makeTabs(
@ -654,7 +655,6 @@ code-example(format="." language="bash").
.filetree
.file router-sample
.children
.file node_modules
.file app
.children
.file heroes
@ -665,10 +665,13 @@ code-example(format="." language="bash").
.file hero-list.component.ts
.file hero.service.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file styles.css
.file tsconfig.json
.file package.json
.file typings.json
:marked
<a id="heroes-app-code"></a>
### The Heroes App code
@ -1184,7 +1187,6 @@ code-example(format="." language="bash").
.filetree
.file router-sample
.children
.file node_modules
.file app
.children
.file crisis-center/...
@ -1192,10 +1194,13 @@ code-example(format="." language="bash").
.file app.component.ts
.file dialog.service.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file styles.css
.file tsconfig.json
.file typings.json
:marked
The top level application files are
+makeTabs(

2
public/docs/ts/latest/guide/server-communication.jade
View File

@ -464,7 +464,7 @@ figure.image-display
.l-sub-section
:marked
We often use the [async pipe](pipes.html#async-pipe) in read-only components where the component has no need to interact with the data.
We couldn't us the pipe in the `HeroListComponent` because the "add hero" feature pushes newly created heroes into the list.
We couldn't use the pipe in the `HeroListComponent` because the "add hero" feature pushes newly created heroes into the list.
:marked
## Our wasteful app

163
public/docs/ts/latest/quickstart.jade
View File

@ -56,14 +56,37 @@ figure.image-display
:marked
## Development Environment
We'll need a place to stand (the application project folder), some libraries,
some TypeScript configuration and the TypeScript-aware editor of your choice.
We'll need a place to stand (the application project folder),
some TypeScript configuration, and some libraries for development and runtime.
### Create a new project folder
code-example(format="").
mkdir angular2-quickstart
cd angular2-quickstart
:marked
### Configure TypeScript
We must guide the TypeScript compiler with very specific settings.
Add a **tsconfig.json** file to the project folder and copy/paste the following:
+makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".")
.l-sub-section
:marked
We explore the `tsconfig.json` in an [appendix below](#tsconfig)
:marked
### TypeScript Typings
Many JavaScript libraries extend the JavaScript environment with features and syntax
that the TypeScript compiler doesn't recognize natively. We teach it about these capabilities with
[TypeScript type definition files](http://www.typescriptlang.org/Handbook#writing-dts-files)
&mdash; *d.ts files* &mdash; which we identify in a `typings.json` file.
Add a **typings.json** file to the project folder and copy/paste the following:
+makeJson('quickstart/ts/typings.1.json', null, 'typings.json')(format=".")
.l-sub-section
:marked
We go a little deeper into *typings* in an [appendix below](#typings)
:marked
### Add the libraries we need
@ -91,16 +114,6 @@ code-example(format="").
:marked
Scary <span style="color:red; font-weight: bold">error messages in red</span> may appear **during** install.
Ignore them. The install will succeed. See the [appendix below](#npm-errors) for more information.
:marked
### Configure TypeScript
We must guide the TypeScript compiler with very specific settings.
Add a **tsconfig.json** file to the project folder and copy/paste the following:
+makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".")
.l-sub-section
:marked
We explore the `tsconfig.json` in an [appendix below](#tsconfig)
:marked
**We're all set.** Let's write some code.
@ -210,8 +223,6 @@ code-example(format="").
We import both. Then we call `bootstrap`, passing in the **root component type**,
`AppComponent`.
The `<reference>` tag tells TypeScript how to find the typings for browser shims used by Angular.
.l-sub-section
:marked
Learn why we import `bootstrap` from `angular2/platform/browser`
@ -295,14 +306,16 @@ figure.image-display
.filetree
.file angular2-quickstart
.children
.file node_modules
.file app
.children
.file app.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
.file typings.json
:marked
And here are the files:
+makeTabs(`
@ -310,9 +323,10 @@ figure.image-display
quickstart/ts/app/main.ts,
quickstart/ts/index.html,
quickstart/ts/package.1.json,
quickstart/ts/tsconfig.1.json
quickstart/ts/tsconfig.1.json,
quickstart/ts/typings.1.json
`,null,
`app/app.component.ts, app/main.ts, index.html,package.json, tsconfig.json`)
`app/app.component.ts, app/main.ts, index.html,package.json, tsconfig.json, typings.json`)
:marked
.l-main-section
@ -349,7 +363,7 @@ figure.image-display
<a id="libraries"></a>
.l-main-section
:marked
### Appendix: Libraries
## Appendix: Libraries
We loaded the following scripts
+makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".")
:marked
@ -382,7 +396,7 @@ figure.image-display
.l-main-section
:marked
<a id="package-json"></a>
### Appendix: package.json
## Appendix: package.json
[npm](https://docs.npmjs.com/) is a popular package manager and Angular application developers rely on it
to acquire and manage the libraries their apps require.
@ -425,7 +439,7 @@ code-example(format="").
.l-main-section
:marked
<a id="npm-errors"></a>
### Appendix: Npm errors and warnings
## Appendix: Npm errors and warnings
All is well if there are no console messages starting with `npm ERR!` *at the end* of **npm install**.
There might be a few `npm WARN` messages along the way &mdash; and that is perfectly fine.
@ -441,7 +455,7 @@ code-example(format="").
.l-main-section
:marked
<a id="tsconfig"></a>
### Appendix: TypeScript configuration
## Appendix: TypeScript configuration
We added a TypeScript configuration file (`tsconfig.json`) to our project to
guide the compiler as it generates JavaScript files.
Get details about `tsconfig.json` from the official
@ -478,10 +492,99 @@ code-example(format="").
"suppressImplicitAnyIndexErrors":true
```
<a id="typings"></a>
.l-main-section
:marked
## Appendix: TypeScript Typings
Many libraries such as jQuery, the Jasmine testing library, and Angular itself,
add material to the JavaScript environment that the TypeScript compiler doesn't recognize.
When the compiler doesn't recognize something, it throws an error.
We use [TypeScript type definition files](http://www.typescriptlang.org/Handbook#writing-dts-files)
&mdash; *d.ts files* &mdash; to tell the compiler about the libraries we load.
TypeScript-aware editors leverage these same definition files to display type information about library features.
Many libraries include their definition files in their npm packages where both the TypeScript compiler and editors
can find them. Angular is one such library.
Peek into the `node_modules/angular2/` folder to see several `...d.ts` files that describe parts of Angular.
**We do nothing to get *typings* files for library packages with bundled *d.ts* files.**
Sadly, many libraries &mdash; jQuery, Jasmine, and Lodash among them &mdash; do *not* include `d.ts` files in their npm packages.
Fortunately, either their authors or community contributors have created separate *d.ts* files for these libraries and
published them in well-known locations.
The *typings* tool can find and fetch these files for us.
We installed the [typings](https://github.com/typings/typings/blob/master/README.md) tool
with npm (find it in the `package.json`) and added an npm script
to run that tool automatically after *npm* installation completes.
+makeJson('quickstart/ts/package.1.json', {paths: 'scripts.postinstall'}, 'tsconfig.json (postinstall)')(format=".")
:marked
This *typings* tool command installs the *d.ts* files that we identified in `typings.json`:
+makeJson('quickstart/ts/typings.1.json', null, 'typings.json')(format=".")
:marked
We identified only one *typings* file in this QuickStart, the *d.ts* file for
[es6-shim](https://github.com/paulmillr/es6-shim/blob/master/README.md) that brings ES2015/ES6
capabilities to our ES5 browsers.
QuickStart itself doesn't need this shim but many of the documentation samples do
and most of us would be disappointed if typical ES2015 features didn't work out-of-the-box.
We can also run the *typings* tool ourselves. The following command lists the locally installed typings files.
code-example(format="").
npm run typings list
:marked
The following command installs the typings file for the Jasmine test library and updates the `typings.config`
so we that we get it automatically the next time.
code-example(format="").
npm run typings install -- jasmine --ambient --save
.l-sub-section
:marked
Learn about the features of the *typings* tool at its [site on github](https://github.com/typings/typings/blob/master/README.md).
:marked
#### Typing file collisions
The TypeScript compiler does not tolerate redefinition of a type. For example, it throws an error if it's given two definitions for
the `Promise` type.
Double definitions are common. In fact, the `typings` tool deliberately creates
duplicate sets of typings (for reasons best explained elsewhere).
Look in the project structure for the *typings folder* where we should find something like:
.filetree
.file typings
.children
.file browser
.children
.file ambient
.children
.file es6-shim
.children
.file es6-shim.d.ts
.children
.file main
.children
.file ambient
.children
.file es6-shim
.children
.file es6-shim.d.ts
.children
.file browser.d.ts
.file main.d.ts
:marked
The `es6-shim` typings are duplicated and the `browser.d.ts` and `main.d.ts` have overlapping content.
We must tell the compiler to ignore one or the other.
We removed the `main` set from consideration in the `exclude` section of our `tsconfig.json` file:
+makeJson('quickstart/ts/tsconfig.1.json', {paths: 'exclude'}, 'tsconfig.json (exclude)')(format=".")
:marked
.l-main-section
:marked
<a id="systemjs"></a>
### Appendix: SystemJS Configuration
## Appendix: SystemJS Configuration
The QuickStart uses [SystemJS](https://github.com/systemjs/systemjs) to load application
and library modules.
@ -544,9 +647,9 @@ code-example(format="").
.l-main-section
:marked
<a id="main"></a>
### Appendix: ***main.ts***
## Appendix: **main.ts**
#### Bootstrapping is platform-specific
### Bootstrapping is platform-specific
We import the `bootstrap` function from `angular2/platform/browser`,
not `angular2/core`. There's a good reason.
@ -564,7 +667,7 @@ code-example(format="").
These targets require a different kind of bootstrap function that we'd import from a different library.
#### Why do we create a separate ***main.ts*** file?
### Why do we create a separate ***main.ts*** file?
The *main.ts* file is tiny. This is just a QuickStart.
We could have folded its few lines into the `app.component` file
@ -577,14 +680,14 @@ code-example(format="").
1. Separation of concerns
1. We learned about import and export
#### It's easy
### It's easy
Sure it's an extra step and an extra file. How hard is that in the scheme of things?
We'll see that a separate `main.ts` is beneficial for *most* apps
even if it isn't critical for the QuickStart.
Let's develop good habits now while the cost is low.
#### Testability
### Testability
We should be thinking about testability from the beginning
even if we know we'll never test the QuickStart.
@ -597,21 +700,21 @@ code-example(format="").
Relocating the `bootstrap` function to `main.ts` eliminates this spurious error
and leaves us with a clean component module file.
#### Reusability
### Reusability
We refactor, rename, and relocate files as our application evolves.
We can't do any of those things while the file calls `bootstrap`.
We can't move it.
We can't reuse the component in another application.
We can't pre-render the component on the server for better performance.
#### Separation of concerns
### Separation of concerns
A component's responsibility is to present and manage a view.
Launching the application has nothing to do with view management.
That's a separate concern. The friction we're encountering in testing and reuse
stems from this unnecessary mix of responsibilities.
#### Import/Export
### Import/Export
While writing a separate `main.ts` file we learned an essential Angular skill:
how to export from one module and import into another.

14
public/docs/ts/latest/testing/first-app-tests.jade
View File

@ -6,7 +6,7 @@ include ../../../../_includes/_util-fns
- to test one of our application classes
- why we prefer our test files to be next to their corresponding source files
- to run tests with an `npm` command
- load the test file with systemJS
- load the test file with SystemJS
.callout.is-helpful
header Prior Knowledge
@ -240,7 +240,7 @@ code-example(format="" language="html").
.l-main-section
:marked
## Load tests with systemjs
## Load tests with SystemJS
The immediate cause of the error is the `export` statement in `hero.ts`.
That error was there all along.
@ -254,8 +254,8 @@ code-example(format="" language="html").
We add module loading support in four steps:
1. add the *systemjs* module management library
1. configure *systemjs* to look for JavaScript files by default
1. add the *SystemJS* module management library
1. configure *SystemJS* to look for JavaScript files by default
1. import our test files
1. tell Jasmine to run the imported tests
@ -268,7 +268,7 @@ code-example(format="" language="html").
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script>
// #2. Configure systemjs to use the .js extension
// #2. Configure SystemJS to use the .js extension
// for imports from the app folder
System.config({
packages: {
@ -304,7 +304,7 @@ figure.image-display
Without that default, it would translate an import statement such as `import {Hero} from './hero'` to a request for the file named `hero`.
Not `hero.js`. Just plain `hero`. Our server error with "404 - not found" because it doesn't have a file of that name.
Once configured with a default extension of 'js',&nbsp; Systemjs requests `hero.js` which *does* exist and is promptly returned by our server.
Once configured with a default extension of 'js',&nbsp; SystemJS requests `hero.js` which *does* exist and is promptly returned by our server.
### Asynchronous System.import
The call to `System.import` shouldn't surprise us but it's asynchronous nature might.
@ -319,7 +319,7 @@ figure.image-display
The browser raises the `load` event when it finishes loading all scripts.
But we're not loading test scripts inline anymore.
We're using the systemjs module loader and it won't be done until long after the browser raised the `load` event.
We're using the SystemJS module loader and it won't be done until long after the browser raised the `load` event.
Meanwhile, Jasmine started and ran to completion … with no tests to evaluate … before the import completed.
So we must wait until the import completes and only then call the window `onLoad` handler.

4
public/docs/ts/latest/tutorial/toh-pt1.jade
View File

@ -16,14 +16,16 @@ include ../../../../_includes/_util-fns
.filetree
.file angular2-tour-of-heroes
.children
.file node_modules
.file app
.children
.file app.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
.file typings.json
:marked
## Keep the app transpiling and running
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing

4
public/docs/ts/latest/tutorial/toh-pt2.jade
View File

@ -22,14 +22,16 @@ include ../../../../_includes/_util-fns
.filetree
.file angular2-tour-of-heroes
.children
.file node_modules
.file app
.children
.file app.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
.file typings.json
:marked
### Keep the app transpiling and running
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing

8
public/docs/ts/latest/tutorial/toh-pt3.jade
View File

@ -14,14 +14,16 @@ include ../../../../_includes/_util-fns
.filetree
.file angular2-tour-of-heroes
.children
.file node_modules
.file app
.children
.file app.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
.file typings.json
:marked
### Keep the app transpiling and running
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
@ -206,16 +208,18 @@ code-example(format=".")
.filetree
.file angular2-tour-of-heroes
.children
.file node_modules
.file app
.children
.file app.component.ts
.file hero.ts
.file hero-detail.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
.file typings.json
:marked
Here are the code files we discussed in this chapter.

8
public/docs/ts/latest/tutorial/toh-pt4.jade
View File

@ -27,16 +27,18 @@ include ../../../../_includes/_util-fns
.filetree
.file angular2-tour-of-heroes
.children
.file node_modules
.file app
.children
.file app.component.ts
.file hero.ts
.file hero-detail.component.ts
.file main.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
.file typings.json
:marked
### Keep the app transpiling and running
Open a terminal/console window.
@ -322,7 +324,6 @@ code-example(format="." language="html").
.filetree
.file angular2-tour-of-heroes
.children
.file node_modules
.file app
.children
.file app.component.ts
@ -331,9 +332,12 @@ code-example(format="." language="html").
.file hero.service.ts
.file main.ts
.file mock-heroes.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
.file typings.json
:marked
Here are the code files we discussed in this chapter.

9
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -35,7 +35,6 @@ figure.image-display
.filetree
.file angular2-tour-of-heroes
.children
.file node_modules
.file app
.children
.file app.component.ts
@ -44,9 +43,12 @@ figure.image-display
.file hero.service.ts
.file main.ts
.file mock-heroes.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file tsconfig.json
.file typings.json
:marked
### Keep the app transpiling and running
Open a terminal/console window and enter the following command to
@ -641,7 +643,6 @@ figure.image-display
.filetree
.file angular2-tour-of-heroes
.children
.file node_modules
.file app
.children
.file app.component.ts
@ -659,10 +660,12 @@ figure.image-display
.file heroes.component.ts
.file main.ts
.file mock-heroes.ts
.file node_modules ...
.file typings ...
.file index.html
.file package.json
.file styles.css
.file tsconfig.json
.file typings.json
:marked
.l-main-section

18
tools/plunker-builder/indexHtmlTranslator.js
View File

@ -39,42 +39,42 @@ var _rxData = [
{
pattern: 'script',
from: 'node_modules/angular2/bundles/angular2.dev.js',
to: 'https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js'
to: 'https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js'
},
{
pattern: 'script',
from: 'node_modules/angular2/bundles/angular2-all.umd.js',
to: 'https://code.angularjs.org/2.0.0-beta.3/angular2-all.umd.dev.js'
to: 'https://code.angularjs.org/2.0.0-beta.6/angular2-all.umd.dev.js'
},
{
pattern: 'script',
from: 'node_modules/angular2/bundles/angular2-polyfills.js',
to: 'https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js'
to: 'https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js'
},
{
pattern: 'script',
from: 'node_modules/rxjs/bundles/Rx.js',
to: 'https://code.angularjs.org/2.0.0-beta.3/Rx.js'
to: 'https://code.angularjs.org/2.0.0-beta.6/Rx.js'
},
{
pattern: 'script',
from: 'node_modules/rxjs/bundles/Rx.umd.js',
to: 'https://code.angularjs.org/2.0.0-beta.3/Rx.umd.js'
to: 'https://code.angularjs.org/2.0.0-beta.6/Rx.umd.js'
},
{
pattern: 'script',
from: 'node_modules/angular2/bundles/router.dev.js',
to: 'https://code.angularjs.org/2.0.0-beta.3/router.dev.js'
to: 'https://code.angularjs.org/2.0.0-beta.6/router.dev.js'
},
{
pattern: 'script',
from: 'node_modules/angular2/bundles/http.dev.js',
to: 'https://code.angularjs.org/2.0.0-beta.3/http.dev.js'
to: 'https://code.angularjs.org/2.0.0-beta.6/http.dev.js'
},
{
pattern: 'script',
from: 'node_modules/angular2/bundles/testing.dev.js',
to: 'https://code.angularjs.org/2.0.0-beta.3/testing.dev.js'
to: 'https://code.angularjs.org/2.0.0-beta.6/testing.dev.js'
},
{
pattern: 'script',
@ -84,7 +84,7 @@ var _rxData = [
{
pattern: 'script',
from: 'node_modules/systemjs/dist/system-polyfills.js',
to: 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js'
to: 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js'
},
{
pattern: 'script',

1
tools/plunker-builder/plunkerBuilder.js
View File

@ -109,6 +109,7 @@ function initConfigAndCollectFileNames(configFileName) {
// var defaultExcludes = [ '!**/node_modules/**','!**/typings/**','!**/tsconfig.json', '!**/*plnkr.json', '!**/*plnkr.html', '!**/*plnkr.no-link.html' ];
var defaultExcludes = [
'!**/typings/**',
'!**/typings.json',
'!**/tsconfig.json',
'!**/*plnkr.*',
'!**/package.json',