Angular笔记！！！！！

1.AngularJS的四大特性
(1)MVC设计模式
(2)双向数据绑定
(3)依赖注入
(4)模块化设计

2.ng模块提供的指令(directive)
(1) ngApp：启动一个Angular应用——这样Angular应用中的表达式才会被Angular执行。
用法： <ANY ng-app>
注意：且默认情况下一个HTML中不允许声明多个ngApp元素。
(2) ngInit（忘记，此方式将Model声明在View中，违反mvc设计模式）：声明模型变量(Model)——不是局部变量
用法： <ANY ng-init="变量名=值; 变量名=值;"> 声明变量后就可以使用{{ 变量名 }}
(3) ngBind: 计算一个表达式的值，输出为当前元素的innerHTML
用法： <ANY ng-bind="表达式"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="loading.gif"/></ANY> 推荐
<ANY class="ng-bind: 表达式;”></ANY> 不推荐
说明：ngBind指令作用与{{}}表达式基本类似，只是可以防止用户在一瞬间看到{{}}。ngBind指令计算完成表达式的值，会替换当前元素的innerHTML.
(4) ngController：调用Controller创建的函数
用法： <ANY ng-controller="控制器名">...</ANY>
(5) ngRepeat：用于在View实现循环输出
用法： <ANY ng-repeat="变量名 in 集合对象"></ANY>
含义：对于集合对象中的每一个元素，依次赋值给指定的变量名，对每次赋值都输出一遍当前元素。
(6) ngIf：用于在View实现判断输出，为false就不输出了
用法： <ANY ng-if="布尔表达式">
含义： 若布尔表达式为true则输出当前元素；否则当前元素在DOM树不存在
(7) ngClick： 为元素绑定单击事件的监听函数——只能是Model函数($scope.函数名=function(){})，不能是全局函数
(8) ngMouseOver ....
(9) ngSrc: <img ng-class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{imgSrc}}">为IMG标签指定src属性，但可以防止404请求错误
(10) ngShow: 若赋值为true，则display:block；否则display:none;
(11) ngHide: 若赋值为true，则display:none；否则display:block;
(12) ngDisabled: ng-disabled="isLoading"
(13) ngInclude: <div ng-include=" 'tpl/header.html' "></div>

3.AngularJS中声明模型数据的方式
(1)使用ngInit指令来声明Model数据
<ANY ng-init="变量名=值;">
说明：此方式将Model声明在View中，严重违反了MVC模型的分工，不推荐使用
(2)使用Controller对象创建Model数据——符合MVC模型分工
新版本的AngularJS中创建Model的语法：
ngApp=>Module=>Controller=>Model
1)声明一个AngularJS的应用程序： ngApp
2)创建一个自定义的模块： angular.module('模块名', [依赖列表])
3)在应用中注册自定义模块： ng-app="模块名"
4)在模块中声明Controller函数
5)在View中指定Controller对象的作用范围——调用控制器创建函数
6)在Controller中声明Model数据

  angular.module('myModule5', ['ng']).
    controller('myCtrl5', function($scope){
      $scope.cto.birthday = new Date();

      $scope.empList = [
        {ename:'春梅', age: 18, salary:88888},
        {ename:'旭旭', age: 17, salary:88887}
      ];
      $scope.empList.push({ename:'东东',age:16, salary:88887});

      var list = [
        {ename:'龙龙', age: 18, salary:66666},
        {ename:'静静', age: 17, salary:66666}
      ];

      //在一个数组中拼接另一个数组
      $scope.empList = $scope.empList.concat(list);
   });

4.控制器的作用范围/作用域
(1)每次调用ngController都会创建一个新的Controller对象
(2)每个Controller对象都有唯一的$scope对象
(3)$scope就表示当前控制器对象的有效范围/作用域
(4)声明在某个$scope中模型数据，一般情况下不能被其他的控制器所使用。
(5)若想在多个控制器间共享/传递数据，可以声明在根作用域中——$rootScope—每个Angular应用(ngApp)只有一个唯一的$rootScope对象
(6)控制器的本质用途：用于划分一个大型页面中的不同的DIV块——每个这样的块中都有自己专用的数据，以及可以与其他块共享的数据。

5.AngularJS四大特性之二——双向数据绑定
(1)方向1：Model绑定到View
实现方法：{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked ... 等等
(2)方向2：View绑定到Model
实现方法：只有ngModel指令可以！ 可以使用$scope.$watch()函数对Model数据的值进行监视。
·单行文本输入域，ngMode可以把value属性值绑定到Model变量
·复选框，ngModel可以把true/false值绑定到Model变量
·单选框，ngModel可以把当前选中的单选框的value值绑定到Model变量
·下拉框，ngModel可以把当前选中的option的value值绑定到Model变量

6.ng模块中提供的service组件
(1)$rootScope 用于在所有的控制器间共享数据的服务
(2)$interval 周期性定时器服务
(3)$timeout 一次性定时器服务
$interval(function(){ console.log("11111111111111"); }, 1000) 扩展：Yahoo User Interface，YUI项目中提供了一个很好用的压缩程序：yui-compressor可用于压缩CSS、JS文件，可以把yuicompressor配置为WebStorm中的FileWatcher，监视js/css文件，实现自动的压缩

7.AngularJS的最大的不足/应用时需要特别关注的地方

解决方法：用多个Controller搞定

8.依赖注入
module.controller('控制器', function($scope, $interval){})
Angular中的ngController指令在实例化控制器对象时，会根据指定的形参名，创建出控制器所依赖的对象，并注入给控制器对象
可以被注入的对象——所有的service/provider对象都可以被注入
(1)$rootScope：在多个控制器间共享数据的服务
(2)$interval：提供周期性定时器服务
(3)$timeout：
(4)$log：提供五个基本的日志输出服务
(5)$http：提供异步HTTP请求（AJAX）服务
用法： $http({method:'GET', url:'/xx.php'}).
success(fn).
error(fn);
简化版： $http.get('url').success(fn);
$http.post('url', data).success(fn);
(6)$location
注意：
若项目JS文件使用了类似yuicompressor等压缩程序，默认会把函数的形参名精简为一个字母的形式，会导致Angular的依赖注入失败！解决办法：
module.controller('控制器名', [
'$scope',
'$interval',
'$http',
function(aaa,bbb,ccc){}
])

9.ng模块中提供的过滤器(filter)
Filter: 把Model数据在显示时以某种特定的格式呈现。
(1)lowercase
语法： {{ 表达式 | lowercase }}
(2)uppercase
语法： {{ 表达式 | uppercase }}
(3)number
语法： {{ 表达式 | number }}
{{ 表达式 | number : 小数位数 }}
(3)currency
语法： {{ 表达式 | currency }}
{{ 表达式 | currency : '货币符号' }}
(3)date
语法： {{ 表达式 | date }} 默认格式： Sep 1, 2015
{{ 表达式 | date : '日期时间格式'}} 'yyyy-MM-dd HH-mm-ss'

10.AngularJS提供的模块——ngRoute
ngRoute模块的用途：就是根据浏览器中URL中的一个特殊的地址标记(形如#/xxx)，查找到该标记所对应的模板页面，并异步加载到当前页面的ngView指令中。
使用步骤：
(1)创建唯一完整的HTML页面，其中声明一个容器，ngView指令。引入angular.js和angular-route.js
(2)创建多个模板页面(习惯上放在一个特别的目录下，如tpl)
(3)创建Module，声明依赖于ng和ngRoute两个模块。
(4)在Module中配置路由字典。
另：
ngRoute模块中的伪页面跳转
(1)通过超链接跳转
<a href="#/路由地址"> #不能省
(2)通过JS跳转
<button ng-click="jump()"></button>
$scope.jump = function(){
//location.href="2.html" 不能使用多页面应用中的跳转
$location.path('/路由地址'); //#不能有
}
、
详细代码：
<div ng-view></div>
angular.module('myModule6', ['ng', 'ngRoute']).
controller('startCtrl', function ($scope,$location) {
$scope.msg = '起始页面';
$scope.jump = function(){
$location.path('/detail');
}
}).
controller('mainCtrl', function ($scope) {
$scope.msg = '主菜单页面';
}).
controller('detailCtrl', function ($scope) {
$scope.msg = '详情页面';
}).
config(function ($routeProvider) { //配置路由字典，指定路由地址<=>模板页面对应关系
$routeProvider.
when('/start', {
templateUrl: 'tpl/start.html',
controller: 'startCtrl' //此处声明的控制器可以供当前模板页面中的所有元素使用
}).
when('/main', {
templateUrl: 'tpl/main.html',
controller: 'mainCtrl'
}).
when('/detail', {
templateUrl: 'tpl/detail.html'
}).
otherwise({ //若URL未提供路由地址/提供了不存在的路由地址
redirectTo: '/start'
})
})

11.ngAnimate模块的使用
Angular本身没有提供任何动画效果，但ngAnimate模块提供了一些“动画钩子(hooks)”，可以钩住用户自定义JS(jQuery.animate())、Transition、Keyframes动画效果。
ngAnimate模块为下述指令提供的动画钩子：ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass。
演示：使用ngAnimate提供的动画钩子调用自定义的Transition动画效果。
(1)引入angular.js、angular-animate.js
(2)自定义模块声明依赖ngAnimate模块，相关指令就会自动生成动画钩子
(3)针对动画钩子编写Transition动画
/要离开的元素动画开始时的样式/
.page.ng-leave {
left: 0;
opacity: 1;
}
/要离开的元素动画结束时的样式/
.page.ng-leave.ng-leave-active {
left: -100%;
opacity: 0;
}
/要进入的元素动画开始时的样式/
.page.ng-enter {
left: 100%;
opacity: 0;
}
/要进入的元素动画结束时的样式/
.page.ng-enter.ng-enter-active {
left: 0;
opacity: 1;
}

12.补充：如何实现页面包含
项目中，习惯把多个页面中完全一样的内容，单独提取出来作为一个独立的文件(如header.html、footer.html)，凡是需要此文件的页面，引入该页面即可。
AngularJS中ng模块提供了一个指令：ngInclude，
<div ng-include=" 'tpl/header.html' "></div>