docs(quickstart): JS IE Polyfill; change ES6->ES2015

closes #715, incorporates #684
This commit is contained in:
Ward Bell 2016-01-17 22:30:19 -08:00
parent 44f84daadc
commit a01e0cc6e2
4 changed files with 42 additions and 17 deletions

View File

@ -7,6 +7,11 @@
<!-- 1. Load libraries -->
<!-- #docregion libraries -->
<!-- #docregion ie-polyfills -->
<!-- IE required polyfill -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<!-- #enddocregion ie-polyfills -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

View File

@ -247,7 +247,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 load our JavaScript files, paying attention to their order (`boot.js` needs `app.component.js` to be there first).
@ -279,7 +279,7 @@ figure.image-display
.alert.is-helpful
:marked
If you see `Loading...` displayed instead, see the
[Browser ES6 support appendix](#es6support).
[Browser ES2015 support appendix](#es6support).
:marked
### Make some changes
@ -346,18 +346,37 @@ figure.image-display
elaborate some of the points we covered quickly above.
There is no essential material here. Continued reading is for the curious.
<a id="ie-polyfills"></a>
<a id="es6support"></a>
<a id="libraries"></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
the needed functionality.
Try loading the following shim *above* the other scripts in the `index.html`:
### Appendix: Libraries
We loaded the following scripts
+makeExample('quickstart/js/index.html', 'libraries', 'index.html')(format=".")
:marked
We began with an Internet Explorer polyfill.
IE requires a polyfill 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.
code-example(language="html" format=".").
&lt;script src=&quot;node_modules/es6-shim/es6-shim.js&quot;&gt;&lt;/script&gt;
Next are the polyfills for Angular2, `angular2-polyfills.js`,
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
@ -406,7 +425,7 @@ code-example(format="").
<a id="npm-errors"></a>
### Appendix: Npm errors and warnings
All is well if there are no console messages starting with `npm ERR!` *at the end* of an **npm install**.
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.
We often see an `npm WARN` message after a series of `gyp ERR!` messages.
@ -414,7 +433,7 @@ code-example(format="").
If the re-compile fails, the package recovers (typically with a pre-built version)
and everything works.
We are in good shape as long as there are no `npm ERR!` messages at the very end of `npm install`.
Just make sure there are no `npm ERR!` messages at the very end of `npm install`.
.l-main-section
:marked

View File

@ -1443,7 +1443,7 @@ code-example(format=".", language="bash").
.l-main-section
:marked
## Appendix: Internet Explorer polyfills
A routed application relies on ES6 promises and dynamic module loading.
A routed application relies on ES2015 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:

View File

@ -343,6 +343,7 @@ figure.image-display
<a id="ie-polyfills"></a>
<a id="es6support"></a>
<a id="libraries"></a>
.l-main-section
:marked
### Appendix: Libraries
@ -351,7 +352,7 @@ figure.image-display
:marked
We began with Internet Explorer polyfills.
IE requires polyfills to run
an application that relies on ES6 promises and dynamic module loading.
an application that relies on ES2015 promises and dynamic module loading.
Most applications need those capabilities and most applications
should run in Internet Explorer.
.l-sub-section
@ -423,7 +424,7 @@ code-example(format="").
<a id="npm-errors"></a>
### Appendix: Npm errors and warnings
All is well if there are no console messages starting with `npm ERR!` *at the end* of an **npm install**.
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.
We often see an `npm WARN` message after a series of `gyp ERR!` messages.
@ -431,7 +432,7 @@ code-example(format="").
If the re-compile fails, the package recovers (typically with a pre-built version)
and everything works.
We are in good shape as long as there are no `npm ERR!` messages at the very end of `npm install`.
Just make sure there are no `npm ERR!` messages at the very end of `npm install`.
<!-- Move this to the Style Guide when we have one -->
.l-main-section