Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 7ed0fce

Browse files
wardbellwardbell
committed
docs: add IE polyfills to all samples; update QS and Router to explain
closes #712
1 parent c7f58ee commit 7ed0fce

File tree

27 files changed

+158
-24
lines changed

27 files changed

+158
-24
lines changed

‎public/docs/_examples/architecture/ts/app/sales-tax.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {TaxRateService} from './tax-rate.service';
1313
<h2>Sales Tax Calculator</h2>
1414
Amount: <input #amountBox (change)="0">
1515
16-
<div *ngIf=amountBox.value>
16+
<div *ngIf="amountBox.value">
1717
The sales tax is
1818
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
1919
</div>

‎public/docs/_examples/architecture/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<html>
33
<head>
44
<title>Intro to Angular 2</title>
5+
<!-- IE required polyfills, in this exact order -->
6+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
7+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
8+
59
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
610
<script src="node_modules/systemjs/dist/system.src.js"></script>
711
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/attribute-directives/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
<head>
66
<title>Attribute Directives</title>
7+
<!-- IE required polyfills, in this exact order -->
8+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
9+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
10+
711
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
812
<script src="node_modules/systemjs/dist/system.src.js"></script>
913
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/displaying-data/ts/index.1.html

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,25 @@
33

44
<head>
55
<title>Displaying Data</title>
6+
<!-- IE required polyfills, in this exact order -->
7+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
8+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
9+
10+
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
611
<script src="node_modules/systemjs/dist/system.src.js"></script>
12+
<script src="node_modules/rxjs/bundles/Rx.js"></script>
713
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
814
<script>
915
System.config({
10-
packages: {'app': {defaultExtension: 'js'}}
16+
packages: {
17+
app: {
18+
format: 'register',
19+
defaultExtension: 'js'
20+
}
21+
}
1122
});
12-
System.import('app/boot');
23+
System.import('app/boot')
24+
.then(null, console.error.bind(console));
1325
</script>
1426
</head>
1527

‎public/docs/_examples/displaying-data/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33

44
<head>
55
<title>Displaying Data</title>
6+
<!-- IE required polyfills, in this exact order -->
7+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
8+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
9+
610
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
711
<script src="node_modules/systemjs/dist/system.src.js"></script>
812
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/forms/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
<!-- #docregion styles -->
1111
<link rel="stylesheet" href="styles.css">
1212
<!-- #enddocregion styles -->
13+
14+
<!-- IE required polyfills, in this exact order -->
15+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
16+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
1317

1418
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
1519
<script src="node_modules/systemjs/dist/system.src.js"></script>

‎public/docs/_examples/hierarchical-dependency-injection/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33

44
<head>
55
<title>Hierarchical Injectors</title>
6+
<!-- IE required polyfills, in this exact order -->
7+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
8+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
9+
610
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
711
<script src="node_modules/systemjs/dist/system.src.js"></script>
812
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/homepage-hello-world/ts/src/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
<title>Angular 2 QuickStart</title>
77

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

‎public/docs/_examples/homepage-tabs/ts/src/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
88

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

‎public/docs/_examples/homepage-todo/ts/src/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
88

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

‎public/docs/_examples/lifecycle-hooks/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
<head>
66
<title>Angular 2 Lifecycle Hooks</title>
7+
<!-- IE required polyfills, in this exact order -->
8+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
9+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
10+
711
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
812
<script src="node_modules/systemjs/dist/system.src.js"></script>
913
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/pipes/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33

44
<head>
55
<title>Pipes</title>
6+
<!-- IE required polyfills, in this exact order -->
7+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
8+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
9+
610
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
711
<script src="node_modules/systemjs/dist/system.src.js"></script>
812
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/quickstart/ts/index.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
<title>Angular 2 QuickStart</title>
77

88
<!-- 1. Load libraries -->
9-
<!-- #docregion libraries -->
9+
<!-- #docregion libraries -->
10+
<!-- #docregion ie-polyfills -->
11+
<!-- IE required polyfills, in this exact order -->
12+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
13+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
14+
<!-- #enddocregion ie-polyfills -->
15+
1016
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
1117
<script src="node_modules/systemjs/dist/system.src.js"></script>
1218
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/router/ts/index.1.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
<!-- #enddocregion base-href -->
88
<title>Router Sample</title>
99
<link rel="stylesheet" href="styles.css">
10+
<!-- #docregion ie-cdn-polyfills -->
11+
<!-- IE required polyfills (from CDN), in this exact order -->
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
14+
<!-- #enddocregion ie-cdn-polyfills -->
15+
1016
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
1117
<script src="node_modules/systemjs/dist/system.src.js"></script>
1218
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/router/ts/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
<!-- #docregion ie-polyfills -->
1414
<!-- IE required polyfills, in this exact order -->
1515
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
16-
<script src="node_modules/systemjs/distsystem-polyfills.js"></script>
17-
<!-- #enddocregion ie-polyfills -->
16+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
17+
<!-- #enddocregion ie-polyfills -->
1818

1919
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
2020
<script src="node_modules/systemjs/dist/system.src.js"></script>

‎public/docs/_examples/structural-directives/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
<head>
66
<title>Angular 2 Structural Directives</title>
7+
<!-- IE required polyfills, in this exact order -->
8+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
9+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
10+
711
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
812
<script src="node_modules/systemjs/dist/system.src.js"></script>
913
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/styleguide/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<!DOCTYPE html>
33
<html>
44
<head>
5+
<!-- IE required polyfills, in this exact order -->
6+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
7+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
8+
59
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
610
<script src="https://jspm.io/system@0.16.js"></script>
711
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>

‎public/docs/_examples/template-syntax/ts/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
<head>
44
<title>Template Syntax</title>
55
<link rel="stylesheet" href="styles.css">
6+
7+
<!-- IE required polyfills, in this exact order -->
8+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
9+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
10+
611
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
712
<script src="node_modules/systemjs/dist/system.src.js"></script>
813
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/toh-1/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<html>
33
<head>
44
<title>Angular 2 QuickStart</title>
5+
<!-- IE required polyfills, in this exact order -->
6+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
7+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
8+
59
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
610
<script src="node_modules/systemjs/dist/system.src.js"></script>
711
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/toh-2/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<html>
33
<head>
44
<title>Angular 2 QuickStart</title>
5+
<!-- IE required polyfills, in this exact order -->
6+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
7+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
8+
59
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
610
<script src="node_modules/systemjs/dist/system.src.js"></script>
711
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/toh-3/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<html>
33
<head>
44
<title>Angular 2 QuickStart</title>
5+
<!-- IE required polyfills, in this exact order -->
6+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
7+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
8+
59
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
610
<script src="node_modules/systemjs/dist/system.src.js"></script>
711
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/toh-4/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<html>
33
<head>
44
<title>Angular 2 QuickStart</title>
5+
<!-- IE required polyfills, in this exact order -->
6+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
7+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
8+
59
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
610
<script src="node_modules/systemjs/dist/system.src.js"></script>
711
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/tutorial/ts/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
<head>
55
<base href="/">
66
<link rel="stylesheet" href="styles.css">
7+
<!-- IE required polyfills, in this exact order -->
8+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
9+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
10+
711
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
812
<script src="node_modules/systemjs/dist/system.src.js"></script>
913
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/_examples/user-input/ts/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
<head>
44
<title>User Input</title>
55
<link rel="stylesheet" href="styles.css">
6+
7+
<!-- IE required polyfills, in this exact order -->
8+
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
9+
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
10+
611
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
712
<script src="node_modules/systemjs/dist/system.src.js"></script>
813
<script src="node_modules/rxjs/bundles/Rx.js"></script>

‎public/docs/ts/latest/guide/router.jade

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,9 @@ figure.image-display
277277
the Angular core script.
278278
<a id="base-href"></a>
279279
+makeExample('router/ts/index.html','router-lib')(format=".")
280+
.l-sub-section
281+
:marked
282+
Internet Explorer requires additional polyfill libraries as described [below](#ie-polyfills)
280283
:marked
281284
<a id="base-href"></a>
282285
### Set the *&lt;base href>*
@@ -291,7 +294,7 @@ figure.image-display
291294
We must **add a [&lt;base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag**
292295
to the `index.html` to make `pushState` routing work.
293296
The browser also needs the base `href` value to prefix *relative* URLs when downloading and linking to
294-
css files, scripts, and image.
297+
css files, scripts, and images.
295298

296299
Add the base element just after the `<head>` tag.
297300
If the `app` folder is the application root, as it is for our application,
@@ -1435,3 +1438,17 @@ code-example(format=".", language="bash").
14351438
Then *override* the default strategy defined in `ROUTE_PROVIDERS` by
14361439
providing the `HashLocationStrategy` later in the `bootstrap` providers array argument:
14371440
+makeExample('router/ts/app/boot.2.ts','', 'boot.ts (hash URL strategy)')
1441+
1442+
<a id="ie-polyfills"></a>
1443+
.l-main-section
1444+
:marked
1445+
## Appendix: Internet Explorer polyfills
1446+
A routed application relies on ES6 promises and dynamic module loading.
1447+
IE needs help with that.
1448+
Make sure the following polyfill libraries are loaded in the `index.html`
1449+
***above*** the Angular polyfill:
1450+
+makeExample('router/ts/index.html','ie-polyfills')(format=".")
1451+
:marked
1452+
We could substitute the following libraries from a CDN:
1453+
+makeExample('router/ts/index.1.html','ie-cdn-polyfills')(format=".")
1454+
:marked

‎public/docs/ts/latest/quickstart.jade

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ code-example(format="").
235235
:marked
236236
There are three noteworthy sections of HTML:
237237

238-
1. We load the JavaScript libraries we need. `angular2-polyfills.js` and `Rx.js` are needed by Angular 2.<br/>
238+
1. We load the JavaScript libraries we need; learn about them [below](#libraries).
239239

240240
2. We configure something called `System` and ask it to import the
241241
boot file we just wrote.
@@ -273,11 +273,6 @@ figure.image-display
273273
:marked
274274
Congratulations! We are in business.
275275

276-
.alert.is-helpful
277-
:marked
278-
If you see `Loading...` displayed instead, see the
279-
[Browser ES6 support appendix](#es6support).
280-
:marked
281276
### Make some changes
282277

283278
Try changing the message to "My SECOND Angular 2 app".
@@ -345,20 +340,40 @@ figure.image-display
345340
elaborate on some of the points we covered quickly above.
346341

347342
There is no essential material here. Continued reading is for the curious.
348-
343+
344+
<a id="ie-polyfills"></a>
345+
<a id="es6support"></a>
349346
.l-main-section
350347
:marked
351-
<a id="es6support"></a>
352-
### Appendix: Browser ES6 support
353-
Angular 2 relies on some ES2015 features, most of them found in modern
354-
browsers. Some browsers (including IE 11) require a shim to support the
355-
needed functionality.
356-
Try loading the following shim *above* the other scripts in the `index.html`:
357-
358-
code-example(language="html" format=".").
359-
&lt;script src=&quot;node_modules/es6-shim/es6-shim.js&quot;&gt;&lt;/script&gt;
348+
### Appendix: Libraries
349+
We loaded the following scripts
350+
+makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".")
351+
:marked
352+
We began with Internet Explorer polyfills.
353+
IE requires polyfills to run
354+
an application that relies on ES6 promises and dynamic module loading.
355+
Most applications need those capabilities and most applications
356+
should run in Internet Explorer.
357+
.l-sub-section
358+
:marked
359+
We can substitute the following libraries from a CDN:
360+
+makeExample('router/ts/index.1.html','ie-cdn-polyfills')(format=".")
361+
:marked
362+
Next are the polyfills for Angular2, `angular2-polyfills.js`.
363+
Then the [SystemJS library](#systemjs) for module loading,
364+
followed by the Reactive Extensions RxJS library.
365+
.l-sub-section
366+
:marked
367+
Our QuickStart doesn't use the Reactive Extensions
368+
but any substantial application will want them
369+
when working with observables.
370+
We added the library here in QuickStart so we don't forget later.
360371
:marked
372+
Finally, we loaded the web development version of Angular 2 itself.
361373

374+
We'll make different choices as we gain experience and
375+
become more concerned about production qualities such as
376+
load times and memory footprint.
362377

363378
.l-main-section
364379
:marked

0 commit comments

Comments
 (0)