AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
什么是 AngularJS？
"AngularJS 是专门为应用程序设计的 HTML。"
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把应用程序数据绑定到 HTML 元素。
一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。
使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素：
<ul><li ng-repeat="x in names">
{{ x }}
</li>
</ul>
AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。把实例中的对象想象成数据库中的记录。
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（invalid、dirty、touched、error）。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序/HTML 元素。
AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
向表达式添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
以上代码也可以用于读取数据库数据。AngularJS HTML DOM
AngularJS 有自己的 HTML 属性指令。
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
AngularJS HTML 事件
AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click 指令定义了一个 AngularJS 单击事件。
隐藏 HTML 元素
ng-hide 指令用于设置应用的一部分 不可见 。
ng-hide="true" 让 HTML 元素 不可见。
ng-hide="false" 让元素可见。
显示 HTML 元素
ng-show 指令可用于设置应用中的一部分可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。
AngularJS 模块
模块定义了您的应用程序。
所有的控制器都应该属于一个模块。
模块保持全局命名空间中的整洁。
控制器污染了全局命名空间
本教程中，截至目前为止的所有实例都使用了全局函数。
在所有的应用程序中，都应该尽量避免使用全局变量和全局函数。
全局值（变量或函数）可被其他脚本重写或破坏。
为了解决这个问题，AngularJS 使用了模块。
模块定义应放置在何处？
对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在上面的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在上面的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
AngularJS 表单是输入控件的集合。
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
- input 元素
- select 元素
- button 元素
- textarea 元素
AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据。
输入验证
在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。
AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。
AngularJS Bootstrap
AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。
AngularJS Include（包含）
使用 AngularJS, 你可以在 HTML 中包含 HTML 文件。
在未来的HTML中包含 HTML 文件
在 HTML 中，目前还不支持包含 HTML 文件的功能。
W3C 已经建议 http://www.w3.org 在未来的 HTML 中支持包含HTML的功能，格式如下:
AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容.
2535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
