iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(browser-support): edits (#2299)

Browse Source
This commit is contained in:
Ward Bell 2016-09-09 22:21:40 -04:00 committed by GitHub
parent 1e9c0724c2
commit 01b211193c
4 changed files with 87 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/docs/_examples/quickstart/ts/index.html
View File

@ -9,10 +9,10 @@
<!-- 1. Load libraries --> <!-- 1. Load libraries -->
<!-- #docregion libraries --> <!-- #docregion libraries -->
<!-- #docregion ie-polyfills --> <!-- #docregion polyfills -->
<!-- Polyfill(s) for older browsers --> <!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/core-js/client/shim.min.js"></script>
<!-- #enddocregion ie-polyfills --> <!-- #enddocregion polyfills -->
<script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script>

5
public/docs/dart/latest/guide/_data.json
View File

@ -87,6 +87,11 @@
"intro": "Attribute directives attach behavior to elements." "intro": "Attribute directives attach behavior to elements."
}, },
"browser-support": {
"title": "Browser support",
"intro": "Browser support and polyfills guide."
},
"component-styles": { "component-styles": {
"title": "Component Styles", "title": "Component Styles",
"intro": "Learn how to apply CSS styles to components." "intro": "Learn how to apply CSS styles to components."

5
public/docs/js/latest/guide/_data.json
View File

@ -74,6 +74,11 @@
"intro": "Attribute directives attach behavior to elements." "intro": "Attribute directives attach behavior to elements."
}, },
"browser-support": {
"title": "Browser support",
"intro": "Browser support and polyfills guide."
},
"component-styles": { "component-styles": {
"title": "Component Styles", "title": "Component Styles",
"intro": "Learn how to apply CSS styles to components." "intro": "Learn how to apply CSS styles to components."

125
public/docs/ts/latest/guide/browser-support.jade
View File

@ -1,3 +1,7 @@
block includes
include ../_util-fns
- var _at_angular = '@angular'
:marked :marked
# Browser support # # Browser support #
Angular supports most recent browsers. This includes the following specific versions: Angular supports most recent browsers. This includes the following specific versions:
@ -50,88 +54,105 @@ table
td td
:marked .l-sub-section
To ensure this compatibility, the unit tests of the framework are run on all of them for every pull request. :marked
This is done as part of the continuous integration setup of the project, using [SauceLabs](https://saucelabs.com/) and [Browserstack](https://www.browserstack.com). Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request,
using <a href="https://saucelabs.com/" target="_blank">SauceLabs</a> and
<a href="https://www.browserstack.com" target="_blank">Browserstack</a>.
:marked
# Polyfills # # Polyfills #
Angular is built on the latest standards of the web platform. Angular is built on the latest standards of the web platform.
Targeting such a wide range of browsers can be challenging as they may not support all the features of modern browsers. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.
You compensate by loading polyfill scripts ("polyfills") on the host web page (`index.html`)
that implement missing features in JavaScript.
+makeExample('quickstart/ts/index.html', 'polyfills')(format='.')
:marked
A particular browser may require at least one polyfill to run _any_ Angular application.
You may need additional polyfills for specific features.
To fill the gaps, the best solution is to use polyfills which "upgrade" old browsers by adding missing features. The tables below will help you determine which polyfills to load, depending on the browsers you target and the features you use.
For each browser, some polyfill may be required to run any application, and some may be needed only when some features are used.
.alert.is-helpful
span As a developer, depending on the browsers you target and on the features you use, you'll need to load a set of polyfills.
span The tables below will help you making the right choices.
.alert.is-important .alert.is-important
span The polyfills documented here are the ones which were identified to run full Angular application. :marked
span Others may be needed if you decide to use extra features which are not supported everywhere. The suggested polyfills are the ones we know will run full Angular applications.
span On top of that, they will not magically transform an old and slow browser into a modern and fast one. You may need additional polyfills to support features not covered by this list.
Note that polyfills cannot magically transform an old, slow browser into a modern, fast one.
:marked :marked
## Mandatory polyfills ## ## Mandatory polyfills ##
For each supported browser, these are the polyfills which are required to run an application: These are the polyfills required to run an Angular application on each supported browser:
table table
tr tr(style="vertical-align: top")
th Browsers (desktop & mobile) th Browsers (desktop & mobile)
th Polyfills required th Polyfills required
tr tr(style="vertical-align: top")
td Chrome, Firefox, Edge, Safari 9+ td Chrome, Firefox, Edge, Safari 9+
td None td None
tr tr(style="vertical-align: top")
td Safari 7 & 8, IE10 & 11, Android 4.1+ td Safari 7 & 8, IE10 & 11, Android 4.1+
td ES6 td
tr :marked
[ES6](#core-es6)
tr(style="vertical-align: top")
td IE9 td IE9
td ES6<br>classList td
:marked
[ES6<br>classList](#classlist)
:marked :marked
## Optional browser features to polyfill ## ## Optional browser features to polyfill ##
In addition to the mandatory polyfills, some features of Angular may require some extra polyfills. Some features of Angular may require additional polyfills.
For example, the animations use the standard web animation API, which is only available in Chrome and Firefox today. For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
In order to use this feature in other browsers, the correct polyfill is needed. You'll need a polyfill to use animations in other browsers.
Here are the features which may require additional polyfills: Here are the features which may require additional polyfills:
table table
tr tr(style="vertical-align: top")
th Feature th Feature
th Polyfill th Polyfill
th Browsers (desktop & mobile) th(style="width: 50%") Browsers (desktop & mobile)
tr
tr(style="vertical-align: top")
td td
a(href="./animations.html") Animations a(href="./animations.html") Animations
td Web Animations td
:marked
[Web Animations](#web-animations)
td All but Chrome and Firefox<br>Not supported in IE9 td All but Chrome and Firefox<br>Not supported in IE9
tr tr(style="vertical-align: top")
td td
a(href="../api/common/index/DatePipe-class.html") Date a(href="../api/common/index/DatePipe-class.html" target="_blank") Date
span , span ,
a(href="../api/common/index/CurrencyPipe-class.html") currency a(href="../api/common/index/CurrencyPipe-class.html" target="_blank") currency
span , span ,
a(href="../api/common/index/DecimalPipe-class.html") decimal a(href="../api/common/index/DecimalPipe-class.html" target="_blank") decimal
span and span and
a(href="../api/common/index/PercentPipe-class.html") percent a(href="../api/common/index/PercentPipe-class.html" target="_blank") percent
span pipes span pipes
td Intl API
td All but Chrome, Firefox, Edge and IE11
tr
td td
a(href="../api/common/index/NgClass-directive.html") NgClass :marked
[Intl API](#intl)
td All but Chrome, Firefox, Edge and IE11
tr(style="vertical-align: top")
td
a(href="../api/common/index/NgClass-directive.html" target="_blank") NgClass
span on SVG elements span on SVG elements
td classList td
:marked
[classList](#classlist)
td IE10, IE11 td IE10, IE11
tr tr(style="vertical-align: top")
td td
a(href="./server-communication.html") Http a(href="./server-communication.html") Http
span when sending and receiving binary data span when sending and receiving binary data
td Typed Arrays<br>Blob<br>FormData td
:marked
[Typed&nbsp;Array](#typedarray) <br>[Blob](#blob)<br>[FormData](#formdata)
td IE 9 td IE 9
:marked :marked
@ -141,51 +162,43 @@ table
table table
tr tr
th Polyfill th Polyfill
th Library
th Licence th Licence
th Size* th Size*
tr tr
td ES6
td td
a(href="https://github.com/zloirock/core-js") https://github.com/zloirock/core-js a#core-es6(href="https://github.com/zloirock/core-js" target="_blank") ES6
td MIT td MIT
td 27.4KB td 27.4KB
tr tr
td classList
td td
a(href="https://github.com/eligrey/classList.js") https://github.com/eligrey/classList.js a#classlist(href="https://github.com/eligrey/classList.js" target="_blank") classList
td Public domain td Public domain
td 1KB td 1KB
tr tr
td Intl
td td
a(href="https://github.com/andyearnshaw/Intl.js ") https://github.com/andyearnshaw/Intl.js a#intl(href="https://github.com/andyearnshaw/Intl.js" target="_blank") Intl
td MIT / Unicode licence td MIT / Unicode licence
td 13.5KB td 13.5KB
tr tr
td Web Animations
td td
a(href="https://github.com/web-animations/web-animations-js") https://github.com/web-animations/web-animations-js a#web-animations(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations
td Apache td Apache
td 14.8KB td 14.8KB
tr tr
td Typed Arrays
td td
a(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js") https://github.com/inexorabletash/polyfill/blob/master/typedarray.js a#typedarray(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array
td MIT td MIT
td 4KB td 4KB
tr tr
td Blob
td td
a(href="https://github.com/eligrey/Blob.js") https://github.com/eligrey/Blob.js a#blob(href="https://github.com/eligrey/Blob.js" target="_blank") Blob
td MIT td MIT
td 1.3KB td 1.3KB
tr tr
td FormData
td td
a(href="https://github.com/francois2metz/html5-formdata") https://github.com/francois2metz/html5-formdata a#formdata(href="https://github.com/francois2metz/html5-formdata" target="_blank") FormData
td MIT td MIT
td 0.4KB td 0.4KB
:marked :marked
*Figures are for minified and gzipped code, computed with [http://closure-compiler.appspot.com/home](http://closure-compiler.appspot.com/home) * Figures are for minified and gzipped code, computed with the <a href="http://closure-compiler.appspot.com/home" target="_blank">closure compiler</a>