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

docs: add IE polyfills to all samples; update QS and Router to explain

Browse Source 
closes #712
This commit is contained in:
Ward Bell 2016-01-17 19:59:34 -08:00
parent c7f58ee459
commit 7ed0fce10d
27 changed files with 158 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/_examples/architecture/ts/app/sales-tax.component.ts
View File

@ -13,7 +13,7 @@ import {TaxRateService} from './tax-rate.service';
<h2>Sales Tax Calculator</h2>
Amount: <input #amountBox (change)="0">
<div *ngIf=amountBox.value>
<div *ngIf="amountBox.value">
The sales tax is
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
</div>

4
public/docs/_examples/architecture/ts/index.html
View File

@ -2,6 +2,10 @@
<html>
<head>
<title>Intro to Angular 2</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/attribute-directives/ts/index.html
View File

@ -4,6 +4,10 @@
<head>
<title>Attribute Directives</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

16
public/docs/_examples/displaying-data/ts/index.1.html
View File

@ -3,13 +3,25 @@
<head>
<title>Displaying Data</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {'app': {defaultExtension: 'js'}}
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot');
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>

4
public/docs/_examples/displaying-data/ts/index.html
View File

@ -3,6 +3,10 @@
<head>
<title>Displaying Data</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/forms/ts/index.html
View File

@ -11,6 +11,10 @@
<link rel="stylesheet" href="styles.css">
<!-- #enddocregion styles -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/hierarchical-dependency-injection/ts/index.html
View File

@ -3,6 +3,10 @@
<head>
<title>Hierarchical Injectors</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/homepage-hello-world/ts/src/index.html
View File

@ -6,6 +6,10 @@
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>

4
public/docs/_examples/homepage-tabs/ts/src/index.html
View File

@ -7,6 +7,10 @@
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries -->
<!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>

4
public/docs/_examples/homepage-todo/ts/src/index.html
View File

@ -7,6 +7,10 @@
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries -->
<!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>

4
public/docs/_examples/lifecycle-hooks/ts/index.html
View File

@ -4,6 +4,10 @@
<head>
<title>Angular 2 Lifecycle Hooks</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/pipes/ts/index.html
View File

@ -3,6 +3,10 @@
<head>
<title>Pipes</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

6
public/docs/_examples/quickstart/ts/index.html
View File

@ -7,6 +7,12 @@
<!-- 1. Load libraries -->
<!-- #docregion libraries -->
<!-- #docregion ie-polyfills -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<!-- #enddocregion ie-polyfills -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

6
public/docs/_examples/router/ts/index.1.html
View File

@ -7,6 +7,12 @@
<!-- #enddocregion base-href -->
<title>Router Sample</title>
<link rel="stylesheet" href="styles.css">
<!-- #docregion ie-cdn-polyfills -->
<!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<!-- #enddocregion ie-cdn-polyfills -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

2
public/docs/_examples/router/ts/index.html
View File

@ -13,7 +13,7 @@
<!-- #docregion ie-polyfills -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/distsystem-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<!-- #enddocregion ie-polyfills -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

4
public/docs/_examples/structural-directives/ts/index.html
View File

@ -4,6 +4,10 @@
<head>
<title>Angular 2 Structural Directives</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/styleguide/ts/index.html
View File

@ -2,6 +2,10 @@
<!DOCTYPE html>
<html>
<head>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<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>

5
public/docs/_examples/template-syntax/ts/index.html
View File

@ -3,6 +3,11 @@
<head>
<title>Template Syntax</title>
<link rel="stylesheet" href="styles.css">
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/toh-1/ts/index.html
View File

@ -2,6 +2,10 @@
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/toh-2/ts/index.html
View File

@ -2,6 +2,10 @@
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/toh-3/ts/index.html
View File

@ -2,6 +2,10 @@
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/toh-4/ts/index.html
View File

@ -2,6 +2,10 @@
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

4
public/docs/_examples/tutorial/ts/index.html
View File

@ -4,6 +4,10 @@
<head>
<base href="/">
<link rel="stylesheet" href="styles.css">
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

5
public/docs/_examples/user-input/ts/index.html
View File

@ -3,6 +3,11 @@
<head>
<title>User Input</title>
<link rel="stylesheet" href="styles.css">
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>

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

@ -277,6 +277,9 @@ figure.image-display
the Angular core script.
<a id="base-href"></a>
+makeExample('router/ts/index.html','router-lib')(format=".")
.l-sub-section
:marked
Internet Explorer requires additional polyfill libraries as described [below](#ie-polyfills)
:marked
<a id="base-href"></a>
### Set the *&lt;base href>*
@ -291,7 +294,7 @@ figure.image-display
We must **add a [&lt;base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag**
to the `index.html` to make `pushState` routing work.
The browser also needs the base `href` value to prefix *relative* URLs when downloading and linking to
css files, scripts, and image.
css files, scripts, and images.
Add the base element just after the `<head>` tag.
If the `app` folder is the application root, as it is for our application,
@ -1435,3 +1438,17 @@ code-example(format=".", language="bash").
Then *override* the default strategy defined in `ROUTE_PROVIDERS` by
providing the `HashLocationStrategy` later in the `bootstrap` providers array argument:
+makeExample('router/ts/app/boot.2.ts','', 'boot.ts (hash URL strategy)')
<a id="ie-polyfills"></a>
.l-main-section
:marked
## Appendix: Internet Explorer polyfills
A routed application relies on ES6 promises and dynamic module loading.
IE needs help with that.
Make sure the following polyfill libraries are loaded in the `index.html`
***above*** the Angular polyfill:
+makeExample('router/ts/index.html','ie-polyfills')(format=".")
:marked
We could substitute the following libraries from a CDN:
+makeExample('router/ts/index.1.html','ie-cdn-polyfills')(format=".")
:marked

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

@ -235,7 +235,7 @@ code-example(format="").
:marked
There are three noteworthy sections of HTML:
1. We load the JavaScript libraries we need. `angular2-polyfills.js` and `Rx.js` are needed by Angular 2.<br/>
1. We load the JavaScript libraries we need; learn about them [below](#libraries).
2. We configure something called `System` and ask it to import the
boot file we just wrote.
@ -273,11 +273,6 @@ figure.image-display
:marked
Congratulations! We are in business.
.alert.is-helpful
:marked
If you see `Loading...` displayed instead, see the
[Browser ES6 support appendix](#es6support).
:marked
### Make some changes
Try changing the message to "My SECOND Angular 2 app".
@ -346,19 +341,39 @@ figure.image-display
There is no essential material here. Continued reading is for the curious.
<a id="ie-polyfills"></a>
<a id="es6support"></a>
.l-main-section
:marked
<a id="es6support"></a>
### Appendix: Browser ES6 support
Angular 2 relies on some ES2015 features, most of them found in modern
browsers. Some browsers (including IE 11) require a shim to support the
needed functionality.
Try loading the following shim *above* the other scripts in the `index.html`:
code-example(language="html" format=".").
&lt;script src=&quot;node_modules/es6-shim/es6-shim.js&quot;&gt;&lt;/script&gt;
### Appendix: Libraries
We loaded the following scripts
+makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".")
:marked
We began with Internet Explorer polyfills.
IE requires polyfills to run
an application that relies on ES6 promises and dynamic module loading.
Most applications need those capabilities and most applications
should run in Internet Explorer.
.l-sub-section
:marked
We can substitute the following libraries from a CDN:
+makeExample('router/ts/index.1.html','ie-cdn-polyfills')(format=".")
:marked
Next are the polyfills for Angular2, `angular2-polyfills.js`.
Then the [SystemJS library](#systemjs) for module loading,
followed by the Reactive Extensions RxJS library.
.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
Finally, we loaded the web development version of Angular 2 itself.
We'll make different choices as we gain experience and
become more concerned about production qualities such as
load times and memory footprint.
.l-main-section
:marked

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

@ -85,7 +85,7 @@ var _rxData = [
},
{
pattern: 'script',
from: 'node_modules/systemjs/distsystem-polyfills.js',
from: 'node_modules/systemjs/dist/system-polyfills.js',
to: 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js'
},
{