->Tutorial：
https://docs.angularjs.org/tutorial
->Specification：
http://www.runoob.com/angularjs/angularjs-tutorial.html
->Source code：
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。
AngularJS 是一个
JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
The project is preconfigured with a number of npm helper scripts to make it easy to run the common tasks that you will need while developing:
- npm start: Start a local development web server.
- npm test: Start the Karma unit test runner.
- npm run protractor: Run the Protractor end-to-end (E2E) tests.
- npm run update-webdriver: Install the drivers needed by Protractor.
AngularJS 通过
ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
AngularJS
模块（Module） 定义了 AngularJS 应用。
AngularJS
控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用,
ng-controller 定义了控制器。
AngularJS 指令是扩展的 HTML 属性，带有前缀
ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。
把实例中的对象想象成数据库中的记录。
ng-app 指令定义了 AngularJS 应用程序的
根元素。
ng-app 指令在网页加载完毕时会
自动引导（自动初始化）应用程序。
ng-init 指令为 AngularJS 应用程序定义了
初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
ng-model 指令
绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（invalid、dirty、touched、error）。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
ng-repeat 指令对于集合中（数组中）的每个项会
克隆一次 HTML 元素。
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用
.directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，
runoobDirective, 但在使用它时需要以
- 分割,
runoob-directive
你可以通过以下方式来调用指令：
- 元素名
- 属性
- 类名
- 注释
你可以限制你的指令只能通过特定的方式来调用。
restrict 值可以是以下几种:
- E 作为元素名使用
- A 作为属性使用
- C 作为类名使用
- M 作为注释使用
restrict 默认值为
EA, 即可以通过元素名和属性名来调用指令。
ng-model 指令根据表单域的状态添加/移除以下类：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
AngularJS 应用组成如下：
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
所有的应用都有一个
$rootScope，它可以作用在
ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是
JavaScript 对象，由标准的 JavaScript
对象的构造函数 创建。
控制器也可以有方法（变量和函数）
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
| 过滤器 | 描述 |
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
<li ng-repeat="x in names | filter:test | orderBy:'country'">
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个
$location 服务，它可以返回当前页面的 URL 地址。
AngularJS 使用
$location 服务比使用
window.location 对象更好。
$http 是 AngularJS 应用中最常用的服务。
你可以创建访问自定义服务，链接到你的模块中：
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
以下是存储在web服务器上的 JSON 文件：
get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上
在 AngularJS 中我们可以使用
ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但
ng-options 指令更适合创建下拉列表，它有以下优势：
使用
ng-options 的选项的一个对象，
ng-repeat 是一个字符串。
ng-repeat 有局限性，选择的值是一个字符串:
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。
对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。
我们使用了
ng-show指令， color:red 在邮件是
$dirty 或
$invalid 才显示。
| 属性 | 描述 |
| $dirty | 表单有填写记录 |
| $valid | 字段内容合法的 |
| $invalid | 字段内容是非法的 |
| $pristine | 表单没有填写记录 |
API 意为
Application
Programming
Interface（应用程序编程接口）。
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：
- 比较对象
- 迭代对象
- 转换对象
全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数：
| API | 描述 |
| angular.lowercase() | 转换字符串为小写 |
| angular.uppercase() | 转换字符串为大写 |
| angular.isString() | 判断给定的对象是否为字符串，如果是返回 true。 |
| angular.isNumber() | 判断给定的对象是否为数字，如果是返回 true。 |
使用 AngularJS, 你可以使用
ng-include 指令来包含 HTML 内容:
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
- value
- factory
- service
- provider
- constant
使用 ngView 指令，该 div 内的 HTML 内容会根据路由的变化而变化。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
- 第一个参数是 URL 或者 URL 正则规则。
- 第二个参数是路由配置对象。
AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。
路由配置对象语法规则如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
