AngularJS是一个为动态web应用设计的结构框架，提供了一种新的开发应用方式，可以在web应用程序中使用HTML声明动态内容。Angular是由Google团队来维护的。
下面来介绍一下Angular的特点
1、功能性
通过一个独立的框架就可以构建动态、交互密集型的客户端应用。
2、MVC，即 Model View Controller
模型、视图和控制器（逻辑应用）
3、依赖注入
AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易开发，理解和测试应用。
4、双向数据绑定
通过强大的双向数据绑定功能，实现了把model与view完全绑定在一起，model变化，view也变化。
使用AngularJS的方便之处：
- 前后端分离，后端只提供数据接口，路由，模板渲染等都在前端完成
- html和js分离，展示和逻辑分离
- 减少js代码，减少DOM元素查找，事件绑定等代码
- 适合API开发（Application Programming Interface,[应用程序编程接口]）
下面将介绍AngularJS的具体的使用
首先，使用时我们要先引入Angular脚本。
1、内置指令
凡是以ng- 开头的，都称为内置指令。
ng-app=" "
用于表示一个angular应用，Angular会从ng-app 所在标签开始管理这个应用，一般一个页面只有一个。不传参数时表示使用默认的Angular应用。通常写在html或body上。
<html ng-app=""></html>
ng-init
该指令用来初始化一些数据，这些数据会挂载到根目录上，实际开发中，我们不会再这里初始化数据，会将数据挂载到Controller即控制器上。
<div ng-init=" name='zhar' "></div>
ng-model
用以将视图与模型进行双向绑定（通常用来绑定输入框和页面展示的内容的绑定）
ng-repeat
遍历数组：ng-repeat="x in arr"
遍历对象：ng-repeat="(key,val) in obj"
<div ng-init="arr=['a','b','c']">
<input type="text" ng-model="arr">
<ul>
<li ng-repeat="x in arr">{{ x }}</li>
</ul>
</div>
值得注意的是，当数组里有相同的值时，导致angular无法跟踪对应的值，需要使用track by $index让Angular根据下标来遍历。
<h1 ng-repeat="x in as track by $index">{{x}}</h1>
ng-bind
将模型数据输出到页面，可以解决脚本还能引入时，{{ }}按原样输出的问题。
除此之外，还有：
ng-class 为元素指定样式名
ng-class="{true:'class1',false:'class2'}[bol]" 由 bol 决定添加哪个样式
ng-class="{'class1':bol1,'class2':bol2,'classN':bolN}"由各个变量 决定是否添加指定的样式
ng-style 为元素添加样式
ng-style="{style1:style,...}"
ng-show 是否显示元素 true 显示 false 隐藏
ng-show 为 false时，只是为元素添加一个优先级最高的 display:none
ng-if 是否显示元素
ng-if 为 false 时，会将元素从 DOM 树中移除
ng-src 为图片添加路径
2、控制器
我们通常在控制器里声明一些数据和方法，声明方法：
- angular.module( moduleName[,depends]) 创建或获取模块
- moduleName : 模块名称 String
- depends : 依赖的其它模块 Array
- 当只传入一个名称时，代表获取指定的模块
- 两个参数时，定义模块，即使不依赖其它模块，也要传入一个空的数组
var app = angular.module("myApp",[]);
//推断式注入
app.controller("myController",function($scope){
$scope.name = "zhar";
})
//声明式注入
//建议一律使用这种方式，代码压缩混淆后，依然能正常运行
//数组的 0 到 倒数第二项 是该控制需要注入的模块，
//最后一项是回调函数
app.controller("myController2",["$scope",function($scope){
$scope.name = "tom";
$scope.arr = [1,2,3,4]
}])
各个控制器之间的内容是不能互相访问的，子级可以访问父级控制器的数据。
3、过滤器
过滤器，顾名思义就是数据渲染时我们可以加一些条件限制和过滤。使用方法就是竖杠+空格+过滤器名+冒号+需要的参数。代码：
<h3 ng-repeat="item in items | orderBy:orderKey:isDown">{{item.name+"-"+item.price}}</h3>
<h3 ng-repeat="item in items | myFilter3:searchKey">{{item.name}}</h3>
下面介绍一个内置的过滤器：
- currency 货币格式转换
currency:"前缀" 更改指定的前缀 默认为 $- lowercase | uppercase 大小写转换
- date 日期格式化
y 年 M 月 d 日 H 24时 h 12时 m 分钟 s 秒- 数组过滤器：
- limitTo 限制结果条数 如：limitTo:2 显示两条
- orderBy 排序
orderBy:orderKey 按 orderKey升序排列orderBy:orderKey:true 按 orderKey降序排列- filter 按关键字快速过滤
filter:searchKey 过滤所有数据包含 searchKey的内容
实例代码如下：
app.filter("myFilter3", function () {
return function (val, arg1) {
//其中，第一个参数为默认值，展示的数据数组，第二个为searchKey
// console.log(arg1);
var arr = [];
val.forEach(function (item) {
if (item.name.indexOf(arg1) != -1) {
arr.push(item);
}
})
return arr;
}
});
4、脏查询
脏查询机制（$digest）：每当有一个数据发生变化，就会触发脏查询，去遍历$watcherlist，如果发现这个值前后不相等，就会标记一个脏，并用新的值去替换旧的值，然后再一次遍历，对比值知否相等，最后再渲染视图。
5、$http
我们可以用该方法来请求数据，代码如下：
var app = angular.module("myApp",[]);
app.controller("myController",["$scope","$http",function ($scope,$http) {
$scope.items = [];
//$http.get() 返回一个 promise 对象
//success 和 err 只是语法糖，是对 then() 封装
$http.get("./data.json").success(function (res) {
console.log(res);
})
}])
6、路由
我们可以通过路由来实现页面内的跳转。首先，配置路由规则需要在config 阶段，然后需要依赖$stateProvider，和urlRouterProvider两个模块，下面是代码示例：
angular.module("myApp")
.config([
"$stateProvider","$urlRouterProvider",
function ($stateProvider,$urlRouterProvider) {
//配置规则
$stateProvider.state("home",{
url : "/home",
templateUrl : "./views/home.html",
controller : "homeController"
}).state("mine",{
url : "/mine",
template : "<h1>个人中心</h1>"
}).state("items",{
url : "/items",
template : "<h1>商品展示</h1>"
}).state("home.a",{
url : "/a",
template : "<h1>这是home下的A</h1>"
}).state("home.b",{
url : "/b",
template : "<h1>这是home下的B</h1>"
})
}]);
