From a01e0cc6e286c63f95ff69bd70e2eb9f07e63617 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Sun, 17 Jan 2016 22:30:19 -0800 Subject: [PATCH] docs(quickstart): JS IE Polyfill; change ES6->ES2015 closes #715, incorporates #684 --- .../docs/_examples/quickstart/js/index.html | 5 +++ public/docs/js/latest/quickstart.jade | 45 +++++++++++++------ public/docs/ts/latest/guide/router.jade | 2 +- public/docs/ts/latest/quickstart.jade | 7 +-- 4 files changed, 42 insertions(+), 17 deletions(-) diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html index f7a64d1a36..ae21b52c7d 100644 --- a/public/docs/_examples/quickstart/js/index.html +++ b/public/docs/_examples/quickstart/js/index.html @@ -7,6 +7,11 @@ + + + + + diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 88e3731334..3084a9e5ea 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -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.
+ 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. - + + + + .l-main-section :marked - - ### 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="."). - <script src="node_modules/es6-shim/es6-shim.js"></script> + 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=""). ### 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. 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 diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 39a3337ac2..cfe708554a 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -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: diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index e3d0f043c9..c4c02c2424 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -343,6 +343,7 @@ figure.image-display + .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=""). ### 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. 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`. .l-main-section