JavaScript框架：AngularJS 学习笔记

AngularJS

——借鉴了后台编程语言（如Java、.Net、PHP等)创建大型应用时的设计思想。

简化了“单页面Web应用(SPA: Single Page Application)”的开发。尤其适用于基于数据CRUD操作的Web项目。

MVC设计模式：

1978年，由Xxx设计出来的。当前已经发生了很大的改变，有了很多的变种：MVP、MVVC、MV*..... 

MVC设计模式把软件的内部逻辑结构划分为三部分：     

Model： 模型，就是项目中的数据，如数字、字符、对象、数组...

View：视图，就是项目中数据的展现，如某个带可以显示数据的HTML标签

Controller：控制器，用于控制项目中数据的设定，一般就是操作函数。

AngularJS中的MVC模型：

1.使用AngularJS的步骤：

(1)引入angular.js文件

(2)某个父级元素声明ng-app属性

(3)子元素中可以使用angular相关内容了

  (1)ng-app标示一个angular模块的范围，只有此范围内的angular内容才会被处理
  (2)一个页面中只能声明一次ng-app，若有多块表达式需要处理，把ng-app声明在包含它们的父元素中
  (3)为了让网页通过HTML校验程序，可以对所有的angular指令前添加data-
  (4)ng-app属性要么不声明值；若声明了值，则script中必须声明此名称所对应的module：
<xxng-app="moduleName">
angular.module('moduleName', [ ] );

2.分析：使用angular后，页面的执行过程

第一步：页面内容正常加载，浏览器不认识的ng-xxx属性直接忽略，{{表达式}}直接显示

第二步：页面尾部遇到angular.js的引入声明，请求加载该文件

第三步：执行angular模块的声明：  angular.module('name', [ ]);

第四步：angular查找声明的模块所在的元素，执行该元素内部所有的angular相关内容

3.Angular中的Model

 Model：模型，就是应用中的数据，如：数字、字符串、数组、对象....

 声明Model数据有两种方式：

       (1)<xx ng-init="变量名=变量值;">   —— 不推荐使用！把model混合在html/view中

     (2)使用Controller初始化Model数据  —— 推荐使用！

angular.module(...).controller("ctrlName",function($scope){

$scope.变量名 = 值;    //为当前控制器声明model数据

$scope.变量名 = 值;      //....

$scope.变量名 =function(){.....};  //....

})

       注意： //model数据的任何修改都会被angurlar同步更新到view

4.为模块声明控制器

 Controller:  负责获取、修改、删除Model数据，每个控制器都可以有一个名为$scope的参数，通过此参数就可以操作Model数据。

5.$scope:

  (1)每个Controller对应唯一的一个$scope
  (2)只要把一个变量声明为$scope的成员，那么该变量就纳入了angular的管理——Model=>View的绑定——该变量(称为模型数据)只要一改变，立即会显示在View中；

6.Angular中的双向数据绑定：

  第一个方向的绑定——Model数据修改自动更新到View
{{模型变量名}}    或 <xx ng-bind="模型变量名">

  第二个方向的绑定——View中数据的修改自动更新到Model
<input  ng-model="模型变量名">

  提示：(1)ng-model指令实现的实际是双向绑定！
   (2)双向绑定时，ng-model声明的变量可以无需在Model中声明

7.如何检测Model中数据值的改变？

  默认情况下，View中的数据若绑定到了Model，则会自动把View中的新的值，赋值给Model。可以使用下述方法，随时检测Model中数据的改变：

$scope.$watch("模型数据变量名",  function(to, from){
//指定的模型变量值发生改变了....
});

8.使用Angular中的过滤器（Filter）

(1)number过滤器: 把数字以英文表示法表示出来,如123,456

{{值 | number }}

(2)currency过滤器：把数字以货币形式表示

(3)date过滤器：把Date/String/Number转换为特定的日期格式

(4)limitTo过滤器：限定显示Array/String为指定的宽度

(5)upperCase/lowerCase过滤器：大小写转换

(6)json过滤器：把对象转换为JSON标准的字符串

(7)filter过滤器：从数组中筛选包含指定文本的项，得到一个原数组的子集

(8)orderBy过滤器：对数组中的记录进行排序

提示：过滤器可以连续调用!!

{{ 'Hello' |uppcase | lowercase }}

9.在Angular中发起AJAX请求，获取服务器端数据

  AngularService Object：  $http  封装了AJAX请求方法。

10.AngularJS应用的启动过程

angularjs网页的启动过程：
(1) 浏览器加载HTML网页，解析元素，得到静态DOM树
(2) 浏览器加载angular.js，当浏览器中DOMContentLoaded事件发生时，angular开始启动
(3) angular查找ng-app元素所对应的方位，
(4) 创建 $injector，实例化代码中声明的controller、service、filter、provider..
(5) 编译ng-app范围内的HTML DOM
(6) 创建$rootScope对象，以及其下述子对象
(7) 链接 DOM对象和作用域对象——绑定开始生效
(8) 链接替换完成后的HTMLDOM元素交给浏览器，重新渲染

11.AngularJS与jQuery的关系

  AngujarJS底层查找元素还是使用jQuery的方法。

  (1)若在加载angular.js之前，页面已经加载jquery.js，angular底层使用的就真的是jQuery的方法

  (2)若在加载angular.js之前，页面没有加载jquery.js，angular底层实现了一个jqLite的对象，模拟了大部分jQuery的功能

  可以在angular的代码中，使用下述语句来使用jQuery的方法：

  angular.element('选择器').jqFn(.... ) —— 不推荐使用

12.AngularJS适合于哪类项目？

  基于数据的CRUD操作的SPA（SinglePage Application）应用，如邮箱系统、网站后台、QQ空间、手机订餐应用....

  AngularJS不适用于页游、在线画图板等等以绘图、DOM操作为主的应用

13.AngularJS中的Module可以包含哪些组件？

 (1)value:  保存可以在不同的controller之间共享的对象/数据

  (2)constant： 保存可以在不同的controller之间共享的常量

  (3)service: 保存可以在不同的controller之间共享的对象/数据/操作

  (4)filter: 可以实现对数据的过滤和格式化，date/currency/limitTo...

 (5)controller: 控制器，用于设定模型数据——每一个控制器实例都与一个$scope对象相链接——注意：angular中的控制器不是单例的！每次使用都会创建一个新的对象(对应的$scope对象也是新创建的)！

 (6)directive: 指令，用于封装DOM操作，扩展HTML标签及属性的能力——为HTML添加新标签、新的属性、新的样式

14.AnguarJS四大特性之一——依赖注入

 Dependency  Injection，简称DI， 一个模块中可以声明可以组件，如value/controller/service...，当一个组件需要使用到其他组件时，必须在声明函数中指定依赖的组件名

  function($scope, $http, $element, $rootScope, emp1){

  }

 AngularJS底层会自动根据形参名称，查找其所依赖的组件，并传递进来。

15.AngularJS中：两个控制器间可以传递数据有哪些方式？

(1)把共享数据保存在$rootScope——不推荐

(2)两个控制器声明为上下级关系，把要共享的数据保存在父$scope —— 不推荐

(3)在模块中声明value /constant 组件

把共享数据声明在 service 组件中

16.在Module中自定义过滤器

格式：

myModule.filter('filterName' , function(){

return function( 输入参数 ){

//处理过程

return 处理结果

}

});

17.Service的使用

  Service，是module中的一种组件，专用于在不同的控制器对象间共享数据——任何一个Service对象都是单例的——只要一个Service对象创建了，只要浏览器不关闭当前网页，此对象就一直存在——且只有这样的一个对象！创建Service的语法：
moduleName.service('serviceName',  function(){
this.xx = xxx;
this.yy = function(){   }
});

18.自定义指令：

  directive: 指令，用于扩展HTML元素、属性、样式。定义新指令的语法：

      moduleName.directvie('指令名', function(){

return{

restrict:'AEC',

template:  '该指令实际对应的HTML内容'，

templateUrl:  'xxx.html'

};

});

19.CSS/JS代码的压缩和混淆

  CSS代码压缩：去除所有注释、换行、空格

  JS代码压缩：去除注释、没有用换行、空格

  JS代码混淆：把所有的变量名都简化

 

 YUICompressor ： Yahoo User Interface 前端开发套装之一，可以对CSS和JS进行压缩和混淆

  使用方法：

(1)直接在命令行中使用  

              java  -jar  yuicompressor-2.4.8.jar   源文件  -o  目标文件

      (2)可以整合入WebStorm，作为一个File Watcher

注意：AngularJS中在创建module中的组件(value / constant / filter / service / controller ...)时，要根据形参名进行依赖注入：

app.controller('myCtrl1',  function( $scope,  $rootScope, $http){

});

上述函数中的形参，会被压缩程序，精简为形如： a,  b,  c 形式的变量。解决办法：

app.controller('myCtrl1',  ['$scope', '$rootScope', '$http',   function( a, b,  c){

}]);

 

20.Angular自带的模块之一——ngRoute

  ngRoute模块，用于实现“路由”功能。

  ngRoute可以根据页面地址栏中的“锚点值”，只在当前DOM树上挂载对应的元素，其它的同级锚点所对应的页面元素从DOM树上卸载。

  使用ngRoute模块的步骤：

  (1)在HTML中添加 angular-route.js 文件的引用

  (2)在主模块中添加对 'ngRoute' 模块的依赖

(3)设定所有的路由：

                  module.config(function($routeProvider){

                                $routeProvider

                                       .when(‘ ‘,{})

.when(‘ ‘ ,{})

.otherwise({})

})

(4)HTML页面中声明ng-view,用于盛放上述路由提供的模板内容实现一个路由模块的访问，可以使用两种方式：

1.       HTML：<a href=”#/start”></a>

2.       JS:app.controller(‘startctrl’,function($location){

$location.path(‘/start’);

})

提示：若想对跳转到路由页传递参数：

       路由定义中声明需要的参数： .when(’/detail/:dno/:pnum/:uname’,{})

       路由跳转时必须传递路由参数：$location.path(‘/detail/123/5/tom’);

       控制器读取路由参数的值： function($scope,$routeParams){

//声明的所有值都是$routeParams的属性

$routeParams.dno….

}

21.Angular自带的模块之一——ngAnimate

  AngularJS本身并没有实现特殊的动画效果，其所依赖的动画效果需要依赖于：

(1)     CSStransition/keyframes  ——动画声明必须放在CSS声明中

(2)     JQuery.animate({},1000,fn)——动画声明必须放在JS中

 使用ngAnimate模块的步骤：

(1)     页面中导入angular-animate.js文件

(2)     在主模块声明文件中，添加对ngAnimate模块的依赖

(3)     页面中使用ngAnimate有两种方式：

CSS:transition /keyframe

JS:jQuery.animate();

 

CSS: 当模块中声明了ngAnimate依赖模块后，ng-if/ng-view元素在消失/显现时由angular ngAnimate模块自动的添加了两组class：

元素由存在=>消失时，ng-leave标明的是刚一开始离开时的状态ng-leave-active标明的是离开完成时的状态

元素由消失=>存在时，ng-enter标明的是刚一进入时的状态 ng-enter-active标明的是进入完成时的状态

使用上述四个class确定动画开始和结束的四个状态点，中间的动画执行由CSS的transition来实现

       提示：使用ngView做路由页面切换时，上述四个class默认加在ng-view元素本身

 

JQuery：

       联合jQuery实现ngAnimate的步骤：

(1)     引入jquery.js

(2)     引入angular.js

(3)     引入angular-animate.js

(4)     创建模块，声明对ngAnimate模块的依赖

(5)     编写代码：

Module.animation(‘要使用动画的元素的选择器’，function（）{

               return{

                      enter：function（e,fn）{

                             $(e).css({刚一进入时的状态})；

                             $(e).animate({进入完成时的状态}，2000，fn);

                             },

                      leave:function(e,fn){

                             $(e).css({刚一离开时的初始状态})；

                             $(e).animate({离开完成时的状态}，2000，fn);

                             }

                      }

})