非常教程

AngularJS参考手册

环境准备与部署

浏览器支持

Angular 支持大多数常用浏览器,包括下列版本:

浏览器

支持的版本

Chrome

最新版

Firefox

最新版

Edge

最近的两个主版本

IE

11109

IE Mobile

11

Safari

最近的两个主版本

iOS

最近的两个主版本

Android

Nougat (7.0)Marshmallow (6.0)Lollipop (5.0, 5.1)KitKat (4.4)

Angular 在持续集成过程中,对每一个提交都会使用 SauceLabs 和 Browserstack 在上述所有浏览器上执行单元测试。

腻子脚本 (polyfill)

Angular 构建于 Web 平台的最新标准之上。 要支持这么多浏览器是一个不小的挑战,因为它们不支持现代浏览器的所有特性。

你可以通过加载腻子脚本("polyfills")来为想要支持的浏览器弥补这些特性。 下表 列出了可能用到的大多数腻子脚本。

这些建议的腻子脚本是运行完整 Angular 应用所需的。 你可能还会需要另一些的腻子脚本来支持没有出现在此列表中的哪些特性。 注意,这些腻子脚本并没有神奇的魔力来把老旧、慢速的浏览器变成现代、快速的浏览器,它只是填充了 API。

启用腻子脚本

Angular CLI 的用户可以通过自动创建的 src/polyfills.ts 文件来启用这些腻子脚本。

这个文件把强制的和很多可选的腻子脚本组织成 JavaScript 的 import 语句。

强制性 腻子脚本(如 zone.js)的 npm 包在创建项目时就已经自动安装了,相应的 import 语句也都加好了。你一般不用动它们。

但是如果要用一个可选的腻子脚本,就要通过 npmyarn 来安装它们的 npm 包了。 比如,如果你需要 web 动画的腻子脚本,就要通过下列命令之一来安装它:

content_copy# note that the web-animations-js polyfill is only here as an example

# it isn't a strict requirement of Angular anymore (more below)

npm install --save web-animations-js

然后打开 polyfills.ts 文件,并反注释对应的 import 语句,就像这样:

src/polyfills.ts

content_copy/**

* Required to support Web Animations `@angular/platform-browser/animations`.

* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

如果在 polyfills.ts 中找不到要使用的腻子脚本,就可以仿照下列模式自行添加它:

  1. 安装 npm 包
  2. polyfills.tsimport 这个文件

不使用 CLI 的用户可以遵循下列步骤自行操作。

强制性腻子脚本

下表中的腻子脚本是每个浏览器都要用到的:

浏览器(桌面和移动)

需要的腻子脚本

Chrome, Firefox, Edge, Safari 9+

ES7/reflect (仅 JIT)

Safari 7 & 8, IE10 & 11, Android 4.1+

ES6

IE9

ES6classList

可选浏览器特性的腻子脚本

有些 Angular 特性可能需要额外的腻子脚本。

例如,动画库依赖于标准的 web 动画 API,目前它只在 Chrome 和 Firefox 上可用。你可能需要一个腻子脚本来在其它浏览器上使用动画功能。

下列特性可能需要更多腻子脚本:

特性

腻子脚本

浏览器(桌面和移动)

JIT 编译。需要 reflect 来提供元数据。

ES7/reflect

默认对目前的所有浏览器都启用了。如果总是使用 AOT 模式,并且只使用 Angular 自带的装饰器,那么可以移除它。

动画 只有在应用中用到了 Animation Builder 时才需要;Angular 标准的动画支持是不需要任何腻子脚本的(截至 NG6)。

Web 动画

如果使用了 AnimationBuilder,那么腻子脚本将为 IE/Edge 和 Safari 启用擦除(scrubbing)支持(Chrome 和 Firefox 原生支持此特性)

如果你使用下列已废弃的 i18n 管道:date,currency,decimal,percent

Intl API

除了 Chrome、Firefox、Edge、IE11 和 Safari 10 外的所有浏览器

NgClass在 SVG 元素上应用时

classList

IE10, IE11

Http用 Http 发送和接收二进制数据时

Typed ArrayBlobFormData

IE 9

建议的腻子脚本

下表中是用来测试框架本身的腻子脚本,它们是应用程序的优质起点。

腻子脚本

授权方式

大小*

ES7/reflect

MIT

0.5KB

ES6

MIT

27.4KB

classList

公共域

1KB

Intl

MIT / Unicode license

13.5KB

Web Animations

Apache

14.8KB

Typed Array

MIT

4KB

Blob

MIT

1.3KB

FormData

MIT

0.4KB

* 这里的数据都按最小化并且 gzip 压缩后的版本算,是由closure compiler计算出的。

非 CLI 的用户的腻子脚本

如果你不使用 CLI,就要直接把腻子脚本添加到宿主页(index.html)中,就像这样:

src/index.html

content_copy<!-- pre-zone polyfills --><script src="node_modules/core-js/client/shim.min.js"></script><script src="node_modules/web-animations-js/web-animations.min.js"></script><script>  /**    * you can configure some zone flags which can disable zone interception for some    * asynchronous activities to improve startup performance - use these options only    * if you know what you are doing as it could result in hard to trace down bugs..   */  // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame  // __Zone_disable_on_property = true; // disable patch onProperty such as onclick  // __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames   /*    * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js    * with the following flag, it will bypass `zone.js` patch for IE/Edge   */  // __Zone_enable_cross_context_check = true;</script><!-- zone.js required by Angular --><script src="node_modules/zone.js/dist/zone.js"></script> <!-- application polyfills -->
AngularJS

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。

AngularJS目录

1.快速上手 | quick start
2.语言服务
3.安全
4.环境准备与部署
5.Service Worker
6.保持最新
7.从 AngularJS 升级
8.服务端渲染
9.Visual Studio 2015 快速上手
10.风格指南
11.国际化
12.测试
13.路由与导航
14. 教程 | Tutorial
15.架构
16.组件与模板
17.表单
18.可观察对象与RxJS
19.引导启动
20.Angular 模块
21.依赖注入
22.HttpClient
23.词汇表
24.AngularJS 应用
25.AngularJS 模块
26.AngularJS 事件
27.AngularJS HTML DOM
28.AngularJS 过滤器
29.AngularJS 控制器
30.AngularJS 指令
31.AngularJS 表达式
32.AngularJS 简介
33.AngularJS 参考手册
34.AngularJS 实例
35.AngularJS 输入验证
36.AngularJS 表单
37.AngularJS SQL
38.AngularJS 表格
39.AngularJS Http
40.AngularJS 包含
41.AngularJS Bootstrap
42.AngularJS API
43.AngularJS ng-checked 指令
44.AngularJS ng-change 指令
45.AngularJS ng-blur 指令
46.AngularJS ng-bind-template 指令
47.AngularJS ng-bind-html 指令
48.AngularJS ng-bind 指令
49.AngularJS ng-app 指令
50.AngularJS Scope(作用域)
51.AngularJS ng-model 指令
52.AngularJS ng-dblclick 指令
53.AngularJS ng-cut 指令
54.AngularJS ng-csp 指令
55.AngularJS ng-copy 指令
56.AngularJS ng-controller 指令
57.AngularJS ng-cloak 指令
58.AngularJS ng-click 指令
59.AngularJS ng-class-odd 指令
60.AngularJS ng-class-even 指令
61.AngularJS ng-class 指令
62.AngularJS ng-keyup 指令
63.AngularJS ng-keypress 指令
64.AngularJS ng-keydown 指令
65.AngularJS ng-init 指令
66.AngularJS ng-include 指令
67.AngularJS ng-if 指令
68.AngularJS ng-href 指令
69.AngularJS ng-hide 指令
70.AngularJS ng-focus 指令
71.AngularJS ng-disabled 指令
72.AngularJS ng-non-bindable 指令
73.AngularJS ng-mouseup 指令
74.AngularJS ng-mouseover 指令
75.AngularJS ng-mousemove 指令
76.AngularJS ng-mouseleave 指令
77.AngularJS ng-mouseenter 指令
78.AngularJS ng-mousedown 指令
79.AngularJS ng-model-options 指令
80.AngularJS ng-model 指令
81.AngularJS ng-list 指令
82.AngularJS ng-style 指令
83.AngularJS ng-srcset 指令
84.AngularJS ng-src 指令
85.AngularJS ng-show 指令
86.AngularJS ng-selected 指令
87.AngularJS ng-repeat 指令
88.AngularJS ng-readonly 指令
89.AngularJS ng-paste 指令
90.AngularJS ng-options 指令
91.AngularJS ng-open 指令
92.AngularJS ng-value 指令
93.AngularJS ng-switch 指令
94.AngularJS ng-submit 指令
95.AngularJS 服务(Service)
96.AngularJS Select(选择框)
97.AngularJS 动画
98.AngularJS 依赖注入