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 --> <!-- 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>

View File

@ -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`,
&lt;script src=&quot;node_modules/es6-shim/es6-shim.js&quot;&gt;&lt;/script&gt; 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 &mdash; and that is perfectly fine. 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. 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

View File

@ -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:

View File

@ -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 &mdash; and that is perfectly fine. 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. 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