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

docs(quickstart): update to new world

This commit is contained in:
Foxandxss 2016-05-03 17:43:03 +02:00 committed by Ward Bell
parent b4f567458e
commit 81209a1d0b
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/docs/_examples/quickstart/ts/systemjs.config.1.js
View File

@ -1,10 +1,4 @@
// #docregion // #docregion
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
// #docregion
(function(global) { (function(global) {
// map tells the System loader where to look for things // map tells the System loader where to look for things
@ -30,6 +24,7 @@
'@angular/platform-browser', '@angular/platform-browser',
'@angular/platform-browser-dynamic', '@angular/platform-browser-dynamic',
'@angular/router', '@angular/router',
'@angular/router-deprecated',
'@angular/testing', '@angular/testing',
'@angular/upgrade', '@angular/upgrade',
]; ];

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

@ -57,6 +57,7 @@ a(id="devenv")
* add a [tsconfig.json](#tsconfig) to guide the TypeScript compiler * add a [tsconfig.json](#tsconfig) to guide the TypeScript compiler
* add a [typings.json](#typings) that identifies missing TypeScript definition files * add a [typings.json](#typings) that identifies missing TypeScript definition files
* add a [package.json](#package-json) that defines the packages and scripts we need * add a [package.json](#package-json) that defines the packages and scripts we need
* add a [systemjs.config.js](#systemjs) that configures system.js
* install the npm packages and typings files * install the npm packages and typings files
a(id="install-npm") a(id="install-npm")
@ -318,12 +319,13 @@ code-example(format="").
+makeExample('quickstart/ts/index.html', null, 'index.html')(format=".") +makeExample('quickstart/ts/index.html', null, 'index.html')(format=".")
.l-verbose-section .l-verbose-section
:marked :marked
There are three noteworthy sections of HTML There are four noteworthy sections of HTML
1. The JavaScript [libraries](#libraries) 1. The JavaScript [libraries](#libraries)
2. Configuration of [SystemJS](#systemjs) where we also import and run the 2. Configuration file for [SystemJS](#systemjs).
`main` file that we just wrote. //TODO reword this a bit
3. Where we import and run the `main` file that we just wrote.
3. The [&lt;my-app>](#my-app) tag in the `<body>` which is *where our app lives!* 3. The [&lt;my-app>](#my-app) tag in the `<body>` which is *where our app lives!*
@ -333,21 +335,11 @@ code-example(format="").
We loaded the following scripts We loaded the following scripts
+makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".") +makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".")
:marked :marked
We began with Internet Explorer polyfills. We began with es6-shim which monkey patches the global context (window) with essential features of ES2015 (ES6).
IE requires polyfills to run
an application that relies on ES2015 promises and dynamic module loading.
Most applications need those capabilities and most applications
should run in Internet Explorer. //TODO es6-shim are not IE polyfills or they are?
Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`. Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`.
Then the [SystemJS](#systemjs) library for module loading. Then the [SystemJS](#systemjs) library for module loading.
.l-sub-section
:marked
Our QuickStart doesn't use the Reactive Extensions
but any substantial application will want them
when working with observables.
We added the library here in QuickStart so we don't forget later.//TODO this subsection needs to be moved for when we cover the systemjs.config.js
:marked :marked
We'll make different choices as we gain experience and We'll make different choices as we gain experience and
become more concerned about production qualities such as become more concerned about production qualities such as
@ -374,12 +366,27 @@ code-example(format="").
With those cautions in mind, what are we doing in this QuickStart configuration? With those cautions in mind, what are we doing in this QuickStart configuration?
+makeExample('quickstart/ts/systemjs.config.1.js', null, 'systemjs.config.js')(format=".") +makeExample('quickstart/ts/systemjs.config.1.js', null, 'systemjs.config.js')(format=".")
:marked :marked
First, we create a map to tell SystemJS where to look when we import some module.
Then, we give all our packages to SystemJS. That means all the project dependencies and our application package, `app`.
.l-sub-section
:marked
Our QuickStart doesn't use the Reactive Extensions
but any substantial application will want them
when working with observables.
We added the library here in QuickStart so we don't forget later.
:marked
The `app` package tells SystemJS what to do when it sees a request for a
module from the `app/` folder.
Our QuickStart makes such requests when one of its Our QuickStart makes such requests when one of its
application TypeScript files has an import statement like this: application TypeScript files has an import statement like this:
+makeExample('quickstart/ts/app/main.ts', 'app-component', 'main.ts (excerpt)')(format=".") +makeExample('quickstart/ts/app/main.ts', 'app-component', 'main.ts (excerpt)')(format=".")
:marked :marked
Notice that the module name (after `from`) does not mention a filename extension. Notice that the module name (after `from`) does not mention a filename extension.
The `packages:` configuration tells SystemJS to default the extension to 'js', a JavaScript file. In the configuration we tell SystemJS to default the extension to 'js', a JavaScript file.
That makes sense because we transpile TypeScript to JavaScript That makes sense because we transpile TypeScript to JavaScript
<i>before</i> running the application</a>. <i>before</i> running the application</a>.