docs(quickstart): JS IE Polyfill; change ES6->ES2015
closes #715, incorporates #684
This commit is contained in:
parent
44f84daadc
commit
a01e0cc6e2
@ -7,6 +7,11 @@
|
|||||||
|
|
||||||
<!-- 1. Load libraries -->
|
<!-- 1. Load libraries -->
|
||||||
<!-- #docregion 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/angular2/bundles/angular2-polyfills.js"></script>
|
||||||
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
|
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
|
||||||
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
|
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
|
||||||
|
@ -247,7 +247,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 load our JavaScript files, paying attention to their order (`boot.js` needs `app.component.js` to be there first).
|
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
|
.alert.is-helpful
|
||||||
:marked
|
:marked
|
||||||
If you see `Loading...` displayed instead, see the
|
If you see `Loading...` displayed instead, see the
|
||||||
[Browser ES6 support appendix](#es6support).
|
[Browser ES2015 support appendix](#es6support).
|
||||||
:marked
|
:marked
|
||||||
### Make some changes
|
### Make some changes
|
||||||
|
|
||||||
@ -346,18 +346,37 @@ figure.image-display
|
|||||||
elaborate some of the points we covered quickly above.
|
elaborate 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>
|
||||||
|
<a id="libraries"></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/js/index.html', 'libraries', 'index.html')(format=".")
|
||||||
browsers. Some browsers (including IE 11) require a shim to support the
|
:marked
|
||||||
the needed functionality.
|
We began with an Internet Explorer polyfill.
|
||||||
Try loading the following shim *above* the other scripts in the `index.html`:
|
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=".").
|
Next are the polyfills for Angular2, `angular2-polyfills.js`,
|
||||||
<script src="node_modules/es6-shim/es6-shim.js"></script>
|
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
|
:marked
|
||||||
|
|
||||||
|
|
||||||
@ -406,7 +425,7 @@ code-example(format="").
|
|||||||
<a id="npm-errors"></a>
|
<a id="npm-errors"></a>
|
||||||
### Appendix: Npm errors and warnings
|
### 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 — and that is perfectly fine.
|
There might be a few `npm WARN` messages along the way — and that is perfectly fine.
|
||||||
|
|
||||||
We often see an `npm WARN` message after a series of `gyp ERR!` messages.
|
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)
|
If the re-compile fails, the package recovers (typically with a pre-built version)
|
||||||
and everything works.
|
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
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -1443,7 +1443,7 @@ code-example(format=".", language="bash").
|
|||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Appendix: Internet Explorer polyfills
|
## 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.
|
IE needs help with that.
|
||||||
Make sure the following polyfill libraries are loaded in the `index.html`
|
Make sure the following polyfill libraries are loaded in the `index.html`
|
||||||
***above*** the Angular polyfill:
|
***above*** the Angular polyfill:
|
||||||
|
@ -343,6 +343,7 @@ figure.image-display
|
|||||||
|
|
||||||
<a id="ie-polyfills"></a>
|
<a id="ie-polyfills"></a>
|
||||||
<a id="es6support"></a>
|
<a id="es6support"></a>
|
||||||
|
<a id="libraries"></a>
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
### Appendix: Libraries
|
### Appendix: Libraries
|
||||||
@ -351,7 +352,7 @@ figure.image-display
|
|||||||
:marked
|
:marked
|
||||||
We began with Internet Explorer polyfills.
|
We began with Internet Explorer polyfills.
|
||||||
IE requires polyfills to run
|
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
|
Most applications need those capabilities and most applications
|
||||||
should run in Internet Explorer.
|
should run in Internet Explorer.
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
@ -423,7 +424,7 @@ code-example(format="").
|
|||||||
<a id="npm-errors"></a>
|
<a id="npm-errors"></a>
|
||||||
### Appendix: Npm errors and warnings
|
### 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 — and that is perfectly fine.
|
There might be a few `npm WARN` messages along the way — and that is perfectly fine.
|
||||||
|
|
||||||
We often see an `npm WARN` message after a series of `gyp ERR!` messages.
|
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)
|
If the re-compile fails, the package recovers (typically with a pre-built version)
|
||||||
and everything works.
|
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 -->
|
<!-- Move this to the Style Guide when we have one -->
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
Loading…
x
Reference in New Issue
Block a user