一、简介
AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发，版本 1.0 是在 2012 年发布的。该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。
AngularJS 可以通过新的属性和表达式扩展了 HTML，可以构建一个单一页面应用程序。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
注意：在学习AngularJS之前，需要先掌握html/css, javascript等基础前端知识
使用
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
二、指令和表达式
指令
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app
ng-app 指令定义一个 AngularJS 应用程序。
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-init
ng-init 指令初始化应用程序数据。
通常情况下，不使用 ng-init。可以使用一个控制器或模块来代替它。
ng-model
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-repeat
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
使用 ng-repeat 来循环数组
-
{{ x }}
创建自定义指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
可以使用如下四种方式来调用：
·元素名
·属性
·类名，restrict : "A",
·注释，restrict : "M",
表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
注意，ng-model提供的是$scope --> view and view --> $scope的双向绑定。而ng-bind提供的是$scope --> view的单向绑定，类似{{ expression }}，不过也有细微的区别：使用双大括号会在数据加载完之前，浏览器先渲染html,从而让用户看到类似{{ expression }}这样的内容，而使用ng-bind却不会。
表达式中不仅可以有数字的加减乘除，还可以有类似字符串操作、对象、数组等。
//字符串
姓名：
//对象
姓为 {{ person.lastName }}
//数组
第三个值为 {{ points[2] }}
Angularjs应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
名:
姓:
姓名: {{firstName + " " + lastName}}
三、作用域、控制器和过滤器
作用域
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
{{greeting}}
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
名:
姓:
姓名: {{fullName()}}
过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
四、服务
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务，它可以返回当前页面的 URL 地址。
http服务
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'https://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
});
//也可以通过下面的方式进行简写
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.html").then(function (response) {
$scope.myWelcome = response.data;
});
});
timeout服务
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
interval服务
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
创建自定义服务
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
五、表单
Input
复选框
My Header
单选框
下拉菜单
输入验证
AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
Validation Example
六、包含和API
包含
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容
如果被包含的html里面包含js文件，也是可以被执行的。
默认情况下是不能跨域包含的，如果要跨域包含，则需要设置白名单。
| API | 描述 |
|---|---|
| angular.lowercase() | 转换字符串为小写 |
| angular.uppercase() | 转换字符串为大写 |
| angular.isString() | 判断给定的对象是否为字符串，如果是返回 true。 |
| angular.isNumber() | 判断给定的对象是否为数字，如果是返回 true。 |
API
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合:
| API | 描述 |
|---|---|
| angular.lowercase() | 转换字符串为小写 |
| angular.uppercase() | 转换字符串为大写 |
| angular.isString() | 判断给定的对象是否为字符串，如果是返回 true。 |
| angular.isNumber() | 判断给定的对象是否为数字，如果是返回 true。 |
七、路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现。
实例解析：
1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令。
该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$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
});
参数说明：
template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
.when('/computers',{template:'这是电脑分类页面'})
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
controller:
function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
controllerAs:
string类型，为controller指定别名。
redirectTo:
重定向的地址。
resolve:
指定当前controller所依赖的其他模块。
示例