一、什么是MVC：
MVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成，采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。
模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。
视图（View）一般用来展示数据，比如通过HTML展示。
控制器（Controller）一般用做连接模型和视图的桥梁。
MVC更多应用在后端开发程序里，后被引入到前端开发中，由于受到前端技术的限制便有了一些细节的调整，进而出现了很多MVC的衍生版（子集）如MVVM、MVW、MVP、MV*等。
二、模块化（Module）
使用AngularJS构建应用（App）时是以模块化（Module）的方式组织的，即将整个应用划分成若干模块，每个模块都有各自的职责，最终组合成一个整体。
步骤1：定义应用：通过为任一HTML标签添加ng-app属性，可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。
<html lang="en" ng-app="App">
步骤2：定义模块：AngularJS提供了一个全局对象angular，在此全局对象下存在若干的方法，其中angular.module()方法用来定义一个模块。
var App=angular.module('App',[]);
步骤3：定义控制器：控制器（Controller）作为连接模型（Model）和视图（View）的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。
App.controller('DemoCtrl',['$scope',function($scope){
$scope.name='Hello';
}])
模型（Model）数据是要展示到视图（View）上的，所以需要将控制器（Controller）关联到视图（View）上，通过为HTML标签添加ng-controller属性并赋值相应的控制器（Controller）的名称，就确立了关联关系。
<body ng-controller='DemoCtrl'>
<h1>{{name}}</h1>
</body>
三、指令
（1）内置指令
ng-app 指定应用根元素，至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示，true显示、false不显示
ng-hide控制元素是否隐藏，true隐藏、false不隐藏
ng-if控制元素是否“存在”，true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
（2）自定义指令
AngularJS允许根据实际业务需要自定义指令，通过angular全局对象下的directive方法实现。
var App=angular.module('App',[]);
App.directive('tagName',function($scope){
return {
//自定义指令类型EACM
restrict : 'EA',
//是否替换原有标签
replace : true,
//指令模板
template : '<h1>hello</h1>',
//指令外部模板
// tempalteURL : '01.html'
}
});
//E 代表元素指令 Element
//A 代表属性执行 Attribute
//M 代表注释指令 Mark
//C 代表class执行 Class
实际案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义指令</title>
<script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="box" ng-controller="DemoCtrl">
<ul>
<li demo></li>
</ul>
<demo></demo>
<div class="demo"></div>
<!-- directive:demo -->
</div>
<script>
var App = angular.module('App', []);
// 定义指令
App.controller('DemoCtrl', ['$scope', function ($scope) {
}]);
// App模块实例下 有若干方法, directive 方法用来定义一个指令
// 需要两个参数
// 第1个 指令的名称
// 第2个 指令的逻辑
App.directive('demo', function () {
// console.log(1);
// 要求必须返回一个值（对象/函数）
// 对象有一定要求
return {
// A attribute 表示此指令可以通过属性来使用
// E element 表示此指令可以通过标签来使用
// C class 表示此指令可以通过类名来使用
// M Mark 表示此指令可以通过注释来使用
restrict: 'ECMA',
// template: '<h1>hello AngularJS!</h1>',
replace: true,
// 引入一个外部分文件
templateUrl: './list.html',
link: function () {},
compile: function () {},
scope: {}
}
});
// 上述代码定义了一个非常基本的指令（只满足了语法）
// 其使用方法与内置指令一样
</script>
</body>
</html>
四、数据绑定
AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。
所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。
（1）单向绑定
单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，只能模型（Model）数据向视图（View）传递。
（2）双向绑定
双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递，如下图所示。
（3）相关指令
a）在AngularJS中通过“{{}}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务$scope来提供，这个$scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。
注：“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象。
b）通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。
c）通过ng-init可以初始化模型（Model）也就是$scope。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-init指令</title>
<script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
<!-- 通过ng-init指令也可以定义模型数据 -->
<div ng-init="name='小红'; age=18">
<h1>{{name}}{{age}}</h1>
</div>
<script>
var App = angular.module('App', []);
App.controller('DemoCtrl', ['$scope', function ($scope) {
// 定义模型数据不局限于下面方式
$scope.name = '小明';
}]);
</script>
</body>
</html>
d）AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等
e）通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。
五、作用域
通常AngularJS中应用（App）是由若干个视图（View）组合成而成的，而视图（View）又都是HTML元素，并且HTML元素是可以互相嵌套的，另一方面视图都隶属于某个控制器（Controller），进而控制器之间也必然会产生嵌套关系。
每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，不同层级控制器（Controller）下的$scope便产生了作用域。
（1）根作用域
一个AngularJS的应用（App）在启动时会自动创建一个根作用域$rootScope，这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的。
（2）子作用域
通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。
六、过滤器
在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。
（1）内置过滤器
1、currency[货币] 将数值格式化为货币格式
2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。
3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
4、json将Javascrip对象转成JSON字符串。
5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位
6、lowercase将文本转换成小写格式
7、uppercase将文本转换成大写格式
8、number数字格式化，可控制小位位数
9、orderBy对数组进行排序，第2个参数是布尔值可控制方向(正序或倒序)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 过滤器</title>
<script src="./libs/angular.min.js"></script>
<style>
dl, dt, dd {
padding: 0;
margin: 0;
}
</style>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
<dl>
<dt>AngularJS过滤器</dt>
<dd>当前时间为: {{now|date:'yyyy-MM-dd hh:mm:ss EEEE'}}</dd>
<dd>商品价格为: {{price|currency:'￥':4}}</dd>
<dd>介绍: {{info|limitTo:-2}}</dd>
<dd>数组: {{list|limitTo:-2}}</dd>
<dd>转小写: {{brief|lowercase}}</dd>
<dd>转大写: {{brief|uppercase}}</dd>
<dd>处理数字: {{num|number:2}}</dd>
<dd>排序数据: {{students|orderBy:'score':true}}</dd>
<dd>处理成json: {{obj|json}}</dd>
<dd>筛选数据: {{list|filter:'p'}}</dd>
<dd>筛选数据: {{students|filter:{age:18} }}</dd>
<dd>过滤器连写: {{info|uppercase|limitTo:2}}</dd>
</dl>
<table>
<tr ng-repeat="student in students|orderBy:'score'">
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.score}}</td>
</tr>
</table>
</div>
<script>
var App = angular.module('App', []);
App.controller('DemoCtrl', ['$scope', function ($scope) {
$scope.now = new Date;
// 使用 currency 这个过滤器可以指定货币类型
$scope.price = 12.345;
// 使用 limitTo 这个过滤器可以截取字符串
$scope.info = 'my name is itcast';
// 使用 limitTo 这个过滤器可以截取数组
$scope.list = ['javascript', 'php', 'html', 'css', 'java'];
// lowercase 这个过滤器可以将字母转成小写
// uppercase 这个过滤器可以将字母转成大写
$scope.brief = 'my Name IS itcast';
// number 这个过滤器可以处理数字格式
$scope.num = 23.12345;
// orderBy 这个过滤器可以对数组数据进行排序
$scope.students = [
{name: '小明', age: 18, score: 98},
{name: '小红', age: 17, score: 94},
{name: '小米', age: 19, score: 97},
{name: '小花', age: 16, score: 92},
{name: '小李', age: 20, score: 95},
{name: '小黄', age: 18, score: 99}
]
$scope.obj = {
name: '小明'
}
}])
</script>
</body>
</html>
（2）自定义过滤器
除了使用AngularJS内建过滤器外，还可以根业务需要自定义过滤器，通过模块对象实例提供的filter方法自定义过滤器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义过滤器</title>
<script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
<h1>{{name|demo:'a':'b'}}</h1>
<p>{{info|capitalize}}</p>
</div>
<script>
var App = angular.module('App', []);
// 定义一个控制器 controller
App.controller('DemoCtrl', ['$scope', function ($scope) {
//
$scope.name = 'itcast';
$scope.info = 'my name is itcast!';
}]);
// 定义一个指令 directive
App.directive('demo', function () {
//
});
// 定义一个过滤器 filter
// 需要两个参数
// 第1个过滤器名字
// 第2个依赖关系
App.filter('demo', function () {
// 必须要返回一个函数
return function (arg, arg1, arg2) {
// 在此完成数据格式化处理的逻辑
// 并且 Angularjs 会将需要格式化处理的
// 数据当成第一个参数传递进来
console.log(arg, arg1, arg2)
return '你好 ' + arg;
}
});
// 上述定义了最基本的过滤器，其使用方法与内置一样
App.filter('capitalize', function () {
return function (input) {
return input[0].toUpperCase() + input.slice(1);
}
});
</script>
</body>
</html>
七、依赖注入
（1）行内注入（推荐使用）
以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。
（2）推断式注入
没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称。
这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。
八、服务
服务是一个对象或函数，对外提供特定的功能。
（1）内置服务
1、$log打印调试信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 内置服务</title>
<script src='./libs/angular.min.js'></script>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
<h1>{{name}}</h1>
</div>
<script>
var App = angular.module('App', []);
// 在现实开发，经常性做一些调试信息的输出
// 调试的级别是不一样的
// notice warning error
// AngularJS 将调试信息级别做了封装
// 封装成了一个服务(名称为$log)，开发过程中只需要调用这个服务即可
// 当前开发依赖一个 $log 的通用功能（服务）
App.controller('DemoCtrl', ['$scope', '$log', function ($scope, $log) {
// $log 是一个对象，对外开放一些方法
$log.log('信息'); // console.log()
$log.info('信息'); // console.info()
$log.error('信息'); // console.error()
$log.warn('信息'); // console.warn()
// 可以通 配置 服务将此功能打开
$log.debug('信息');
// console.log();
}])
</script>
</body>
</html>
2、$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 内置服务</title>
<script src='./libs/angular.min.js'></script>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
<p>当前时间为: {{now|date:'yyyy-MM-dd hh:mm:ss'}}</p>
<button ng-click="stop()">停止</button>
</div>
<script>
var App = angular.module('App', []);
App.controller('DemoCtrl', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {
$scope.now = new Date();
var timer = $interval(function () {
$scope.now = new Date();
}, 1000);
$scope.stop = function () {
$interval.cancel(timer);
}
}])
</script>
</body>
</html>
3、$filter在控制器中格式化数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 内置过滤器</title>
<script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
<ul>
<li>{{now}}</li>
<li>{{price}}</li>
<li>{{list}}</li>
<li>{{arr}}</li>
</ul>
</div>
<script>
var App = angular.module('App', []);
// 有如下需求
// 希望在 非视图 中对数据进行格式化处理
// 在 AngularJS 中可以使用 $filter 这个服务
// 在 非视图 中对数据进行格式化处理
App.controller('DemoCtrl', ['$scope', '$filter', function ($scope, $filter) {
// filter 可以将数据格式化
// $filter 是一个函数，并且可以接收一些数
// 根据参数的不同，$filter 所能处理的数据
// 格式也不同，举例说明
var date = $filter('date'); // 返回值也为函数
$scope.now = date(new Date(), 'yyyy-MM-dd hh:mm:ss');
var currency = $filter('currency'); // 返回值也为函数
$scope.price = currency(12.345, '￥');
var filter = $filter('filter'); // 返回值也为函数
$scope.list = filter(['html', 'css', 'javascript', 'php'], 'p');
var limitTo = $filter('limitTo'); // 返回值也为函数
$scope.arr = limitTo(['html', 'css', 'js'], 2);
}]);
// 自定义的过滤器也可以当成参数传递
</script>
</body>
</html>
4、$http用于向服务端发起异步请求。
同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 内置服务</title>
<script src='./libs/angular.min.js'></script>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
</div>
<script>
var App = angular.module('App', []);
// 使用AngularJS需要发送一个异步请求到服务器
// 服务器返回给前端一个数据
// 并且将数据显示到页面上
// AngluarJS 中有一个服务叫 $http 可以发送
// 异步请求
App.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
//
// $scope.name = '小明';
// $http 是一个函数
$http({
url: '', // 请求地址
method: '', // 请求方式
data: '', // post 方式的数据
params: '', // get 方式的数据
headers: {
// 请求头信息
// Content-Type
}
}).then(function (data) {
// 成功后的回调
}, function () {
// 失败后的回调
});
}])
</script>
</body>
</html>
post传参实例
var App = angular.module('App', []);
App.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
$http({
url: './post.php',
method: 'post',
// 使用 data 来传递 post 请求的数据
// data: {name: 'itcast', age: 10},
data: 'name=itcast&age=10',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function (res) {
// res.data;
})
}]);
注意：jsonp的传输数据的方式是get方式。
（2）自定义服务
通过上面例子得知，所谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。
1、factory方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义服务</title>
<script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
<h1>{{now}}{{time}}</h1>
</div>
<script>
var App = angular.module('App', []);
App.controller('DemoCtrl', ['$scope','showTime', function($scope,showTime) {
$scope.now = showTime.now;
$scope.time = showTime.format('hh:mm:ss');
}])
App.factory('showTime', ['$filter', function ($filter) {
return {
now: $filter('date')(new Date(), 'yyyy-MM-dd'),
format: function (arg) {
return $filter('date')(new Date(), arg);
}
}
}])
</script>
</body>
</html>
2、service方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义服务</title>
<script src="./libs/angular.min.js"></script>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
<h1>{{name}}</h1>
<h1>{{now}}</h1>
<h1>{{time}}</h1>
</div>
<script>
var App = angular.module('App', []);
// controller 定义控制器
App.controller('DemoCtrl', ['$scope', 'showTime', function ($scope, showTime) {
$scope.now = showTime.now;
$scope.time = showTime.format('hh:mm:ss');
}])
App.service('showTime', ['$filter', function ($filter) {
this.now = $filter('date')(new Date(), 'yyyy-MM-dd');
this.format = function (arg) {
return $filter('date')(new Date(), arg);
}
}]);
</script>
</body>
</html>
在介绍服务时曾提到服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用。
九、模块加载
服务也是模块形式存在的对且对外提供特定功能，前面学习中都是将服务做为依赖注入进去的，然后再进行调用，除了这种方式外我们也可以直接运行相应的服务模块，AngularJS提供了run方法来实现。
配置块
App.config(['$filterProvider', function ($filterProvider) {
// "provider" 一般开放一些方法，通过这些方法来实现具体的配置
$filterProvider.register('capitalize', function () {
return function (arg) {
// console.log(arg)
return arg[0].toUpperCase() + arg.slice(1);
}
});
}]);
运行块
App.run(['$log', '$http', '$rootScope', function ($log, $http, $rootScope) {
$http({
url: './example.php'
});
}]);
不但如此，run方法还是最先执行的，利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行，比如验证用户是否登录，未登录则不允许进行任何其它操作。
十、路由
（1）SPA
SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。
在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题。
（2）路由
在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。
实现单页面应用需要具备：
a、只有一页面
b、链接使用锚点
通过上面的例子发现在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。
AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。
使用：
1、引入angular-route.js
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
2、实例化模块（App）时，当成依赖传进去（模块名称ngRoute）
var App=angular.module('App',['ngRoute']);
3、配置路由模块
App.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{
template : '首页'
})
}])
4、布局模板
通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。
<div ng-view></div>
整理一下就是：
var App = angular.module('App', ['ngRoute']);
// 需要配置路由
App.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/register', {
// template: '<h1>login</h1>'
templateUrl: './views/register.html'
}).when('/login', {
templateUrl: './views/login.html'
}).when('/list', {
templateUrl: './views/list.html',
controller: 'ListCtrl'
}).when('/404', {
templateUrl: './views/404.html'
}).otherwise({
redirectTo: '/404'
});
}]);
App.controller('ListCtrl', ['$scope', function ($scope) {
$scope.lists = ['html', 'css', 'js', 'php'];
}])
路由参数：
1、提供两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数，其中when方法可以被多次调用。
2、第1个参数是一个字符串，代表当前URL中的hash值。
3、第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。
a、template 字符串形式的视图模板
b、templateUrl 引入外部视图模板
c、controller 视图模板所属的控制器
d、redirectTo跳转到其它路由
4、获取参数，在控制中注入$routeParams可以获取传递的参数
.when('./index/:id',{
template: 'Index Page',
controller: 'IndexController'
})
App.controller('IndexController',['$scope','$routeParams',function($scope,$routeParams){
}])
进一步强化：
// AngularJS 地址参数有两种写法
// 1、在地址上通过 ? 进行传递，其格式为 key=val&key1=val1
// 2、在when方法中第一个参数中进行设置，其格式为 :key
App.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/register/id/:id/page/:page/pass/:pass', {
// 加载外部文件
templateUrl: './views/register.html',
controller: 'RegisterCtrl'
}).when('/login', {
// 加载外部文件
templateUrl: './views/login.html',
controller: 'LoginCtrl'
}).when('/list', {
// 加载外部文件
templateUrl: './views/list.html',
// 定义控制器
controller: 'ListCtrl'
});
}]);
十一、jquery lite
在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite，通过angular.element不能选择元素，但可以将一个DOM元素转成jQuery对象，如果引提前引入了jQuery则angular.element则完全等于jQuery。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 中使用 jQuery</title>
<script src="./libs/jquery-1.7.2.min.js"></script>
<script src="./libs/angular.min.js"></script>
<style>
.box {
400px;
height: 400px;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="box"></div>
<button>点击</button>
<script>
// AngularJS 中提供了一个方法 element()
// 通过这个方法可以将 一个原生 DOM 对象
// 转换成一个 jQuery 对象
// 1、获取原生DOM
var box = document.querySelector('.box');
var btn = document.querySelector('button');
// 2、转成 jQuery 对象
var jqBox = angular.element(box);
var jqBtn = angular.element(btn);
jqBtn.on('click', function () {
jqBox.animate({
200,
height: 200
}, 500);
});
</script>
</body>
</html>