1, AngularJS四大特性
(1)MVC模型
(2)双向数据绑定
(3)DI（依赖注入）
(4)模块化编程
一，声明，ng的作用范围：<html ng-app>
2,Angular表达式
提示：angular表达式的本质是一段JS代码，先调用eval()执行出式子的值，再输出在当前位置上。
<ANY>{{ 式子 }}</ANY>
总结：
(1){{}}可以输出各种数学/比较/逻辑/三目运算/调用string对象的方法/模型变量的值；
(2)但不能调用全局函数、不能创建对象、普通JS页面变量的值如：new Date()。
(3){{}}会发生元素内容闪动现象，可以使用ngBind指令解决此问题
如：<h1 ng-Bind="'hello'.length"></h1>
//模块控制器
<body ng-controller="cont">
{{counter}}
<script>
angular.module('myApp',['ng'])
.controller('cont', [
'$scope',
function($scope){ $scope.counter='Tom'; }
//$scope和$rootScope,$scope覆盖rootScope
])
</script>
</script>
</body>
//模型遍历
<h1 ng-init="pel={name:'tom',age:23}"></h1>
<ul>
<li ng-repeat="d in pel"><span>{{d}}</span></li>
</ul>
<hr/>
<ul>
<li ng-repeat="(k,v) in pel"><span>{{k}}</span>--------------<span>{{v}}</span></li>
</ul>
<hr/>
<h1 ng-init="many=[{name:'tom',age:23},{name:'angla',age:64}]"></h1>
<ul>
<li ng-repeat="d in many"><span>{{$index}}</span>-----<span>{{d.name}}</span><span>----</span><span>{{d.age}}</span>
</li>
</ul>
3，常见dome操作指令，ng-show,ng-hide
4,Angluar模块中的组件——service
(1)$http：提供异步的AJAX请求服务
.controller('名称', function($http){
$http.get('xx.php').success(fn)
})
(2)$interval：提供周期性定时器服务
.controller('名称', function($interval){
$interval(fn, delay);
})
5,数据双向绑定
(1)方向1：把Model数据绑定到View（Model=>View）：只要模型数据此后再改变，View会同步改变。可以实现此绑定的方法：
1){{ 模型数据名 }}
2)ngBind、ngRepeat、ngShow...指令
(2)方向2：把View中数据绑定到Model（View=>Model）:只要View中的数据一改变（各种表单输入项），Model中的数据也会同步改变。可以实现此绑定的方法：
1) ngModal指令
6.Angluar模块中的组件——filter——掌握
filter：对数据的呈现格式进行过滤和筛选
(1)number：把数字格式化为数字字符串
{{ 数字 | number : 小数位数 }}
(2)currency：把数字格式化为货币字符串
{{ 数字 | currency : '货币符号' }}
(3)lowercase：把字符串格式化为小写
{{ 字符串 | lowercase }}
(4)uppercase：把字符串格式化为小写
{{ 字符串 | uppercase }}
(5)date：把数字格式化为日期格式
{{ 数字 | date : 'yyyy-MM-dd HH:mm:ss'}}
7.AngularJS中的DI
Dependency Injection，依赖注入
.controller('控制器名', function($http, $scope, $interval){ })
控制器声明函数中，形参是必需的几个Angular对象，Angular会根据形参的名称，查找对应的提供者，创建该对象并传递进来(称为“依赖注入”)——依赖的形参先后顺序无所谓，但不能声明AnguarJS不认识的形参。
依赖注入，符合“最少知识原则/迪米特法则”设计原则。
若JS文件被压缩了，形参名会被简化为类似a、b、c的名称，会导致Angular无法根据形参进行注入！解决方法：
.controller('控制器名', [
'$scope',
'$http',
'$interval',
function(a, b, c){ a.ename='Tom'; b.get('1.php'); }
])
8.AngularJS提供的模块——ngRoute
Route：路由
ngRoute模块：负责解析RouteURL，发起AJAX请求，把返回的HTML片段加载到当前页面。
在SPA应用中的“伪页面切换”效果的原理：
整个应用只有一个“完整”的页面，其中有个空的容器元素；
使用JS解析客户端请求的URL后面的“#/”部分的内容，根据值发起异步的AJAX请求，服务器返回对应的页面(HTML片段)，XHR对象将这些响应数据加载到“完整”页面的空容器中。
“伪页面切换”比传统的页面切换的优势：
(1)伪页面切换底层使用的是AJAX技术，不会产生客户端惨白等待问题；
(2)服务器返回的是HTML片段，不再是完整HTML，从而减少了数据传输量；
(3)伪页面切换本质是同一个页面中不同的DIV之间切换，可以实现动画效果。
使用ngRoute模块的步骤：
(1)项目目录中导入JS文件 angular.js + angular-route.js
(2)创建一个“完整”的页面，导入 angular.js + angular-route.js
(3)自定义JS文件中，声明angular.module，依赖于ng和ngRoute模块；模块中需要配置路由映射信息：哪个#/xxx对应哪个HTML片段页面；页面中声明ngView指令——用于盛放模板页
ngRoute会自动解析客户端请求地址中的#/xxx，发起AJAX请求，加载对应的HTMLL片段页面，到当前容器中。
angular.module('', ['ng', 'ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/route1', {
templateUrl: 'xx.html'
})
.otherwise({
redirectTo: '/route1'
})
})
为每个模板页面声明Model数据，有两种方式：
(1)在module声明controller，在每个模板页面的根元素上，声明ngController指令，使用特定的controller
(2)在配置路由地址映射时，指定每个地址所用的controller：
.when('/xx', {
templateUrl: 'xx.html',
controller: 'xx'
})
如何在不同的模板页面("伪页面")之间跳转：
(1)使用LINK
<a href="#/route1">
(2)使用JS
.controller('', function($scope, $location){
$scope.jump = function(){
$location.path( '/xx' );
}
})
<button ng-click="jump( )">
5.AngularJS提供的模块——ngAnimate
ngAnimate：可以为很多的指令(ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass)添加动画效果。
使用步骤：
(1)项目目录中导入JS文件 angular.js + angular-route.js + angular-animate.js
(2)创建一个页面，导入 angular.js + angular-route.js + angular-animate.js
(3)自定义JS文件中，声明angular.module，依赖于ng、ngRoute、ngAnimate模块
(4)手工编写要使用的动画效果： JS /CSS3 Transition / CSS3 Keyframes
注意：ngAnimate模块本身没有编写任何的动画效果，只是为即将要离开的ngView添加了.ng-leave.ng-leavea-active，为即将要进入的ngView添加了.ng-enter.ng-enter-active。需要程序员为这四个claas指定需要样式
.ng-leave: 要离开的元素，动画刚要开始时的样式
.ng-leave.ng-leave-active：要离开的元素，动画结束时的样式
.ng-enter: 要进入的元素，动画刚要开始时的样式
.ng-enter-active:要进入的元素，动画结束时的样式
.main-view-animate {
100%;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out
}
.main-view-animate.ng-enter {
z-index: 999;
position: relative;
background-color: #f9f9f9;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0
}
.main-view-animate.ng-enter.ng-enter-active {
position: relative;
z-index: 2;
background-color: #f9f9f9;
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1
}
.main-view-animate.ng-leave {
background-color: #f9f9f9;
position: absolute;
top: 0
}
.main-view-animate.ng-leave-active {
opacity: .6
}