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> <h2>Sales Tax Calculator</h2>
Amount: <input #amountBox (change)="0"> Amount: <input #amountBox (change)="0">
<div *ngIf=amountBox.value> <div *ngIf="amountBox.value">
The sales tax is The sales tax is
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }} {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
</div> </div>

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

@ -2,6 +2,10 @@
<html> <html>
<head> <head>
<title>Intro to Angular 2</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -4,6 +4,10 @@
<head> <head>
<title>Attribute Directives</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -3,13 +3,25 @@
<head> <head>
<title>Displaying Data</title> <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/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 src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script> <script>
System.config({ 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> </script>
</head> </head>

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

@ -3,6 +3,10 @@
<head> <head>
<title>Displaying Data</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -10,6 +10,10 @@
<!-- #docregion styles --> <!-- #docregion styles -->
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<!-- #enddocregion styles --> <!-- #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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script>

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

@ -3,6 +3,10 @@
<head> <head>
<title>Hierarchical Injectors</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/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> <title>Angular 2 QuickStart</title>
<!-- 1. Load libraries --> <!-- 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://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/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.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"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries --> <!-- 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://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/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.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"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries --> <!-- 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://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/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.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> <head>
<title>Angular 2 Lifecycle Hooks</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -3,6 +3,10 @@
<head> <head>
<title>Pipes</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -6,7 +6,13 @@
<title>Angular 2 QuickStart</title> <title>Angular 2 QuickStart</title>
<!-- 1. Load libraries --> <!-- 1. Load libraries -->
<!-- #docregion 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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -7,6 +7,12 @@
<!-- #enddocregion base-href --> <!-- #enddocregion base-href -->
<title>Router Sample</title> <title>Router Sample</title>
<link rel="stylesheet" href="styles.css"> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

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

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

@ -4,6 +4,10 @@
<head> <head>
<title>Angular 2 Structural Directives</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -2,6 +2,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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://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://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.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> <head>
<title>Template Syntax</title> <title>Template Syntax</title>
<link rel="stylesheet" href="styles.css"> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -2,6 +2,10 @@
<html> <html>
<head> <head>
<title>Angular 2 QuickStart</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -2,6 +2,10 @@
<html> <html>
<head> <head>
<title>Angular 2 QuickStart</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -2,6 +2,10 @@
<html> <html>
<head> <head>
<title>Angular 2 QuickStart</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -2,6 +2,10 @@
<html> <html>
<head> <head>
<title>Angular 2 QuickStart</title> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -4,6 +4,10 @@
<head> <head>
<base href="/"> <base href="/">
<link rel="stylesheet" href="styles.css"> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/rxjs/bundles/Rx.js"></script>

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

@ -3,6 +3,11 @@
<head> <head>
<title>User Input</title> <title>User Input</title>
<link rel="stylesheet" href="styles.css"> <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/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.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/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. the Angular core script.
<a id="base-href"></a> <a id="base-href"></a>
+makeExample('router/ts/index.html','router-lib')(format=".") +makeExample('router/ts/index.html','router-lib')(format=".")
.l-sub-section
:marked
Internet Explorer requires additional polyfill libraries as described [below](#ie-polyfills)
:marked :marked
<a id="base-href"></a> <a id="base-href"></a>
### Set the *&lt;base href>* ### 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** 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. 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 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. Add the base element just after the `<head>` tag.
If the `app` folder is the application root, as it is for our application, 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 Then *override* the default strategy defined in `ROUTE_PROVIDERS` by
providing the `HashLocationStrategy` later in the `bootstrap` providers array argument: providing the `HashLocationStrategy` later in the `bootstrap` providers array argument:
+makeExample('router/ts/app/boot.2.ts','', 'boot.ts (hash URL strategy)') +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

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

@ -235,7 +235,7 @@ code-example(format="").
:marked :marked
There are three noteworthy sections of HTML: 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 2. We configure something called `System` and ask it to import the
boot file we just wrote. boot file we just wrote.
@ -273,11 +273,6 @@ figure.image-display
:marked :marked
Congratulations! We are in business. 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 ### Make some changes
Try changing the message to "My SECOND Angular 2 app". Try changing the message to "My SECOND Angular 2 app".
@ -345,20 +340,40 @@ figure.image-display
elaborate on some of the points we covered quickly above. elaborate on some of the points we covered quickly above.
There is no essential material here. Continued reading is for the curious. There is no essential material here. Continued reading is for the curious.
<a id="ie-polyfills"></a>
<a id="es6support"></a>
.l-main-section .l-main-section
:marked :marked
<a id="es6support"></a> ### Appendix: Libraries
### Appendix: Browser ES6 support We loaded the following scripts
Angular 2 relies on some ES2015 features, most of them found in modern +makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".")
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;
:marked :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 .l-main-section
:marked :marked

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

@ -85,7 +85,7 @@ var _rxData = [
}, },
{ {
pattern: 'script', 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' to: 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js'
}, },
{ {