JavaScript框架:AngularJS 学习笔记

原创 2015年11月24日 19:06:40

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);

                             }

                      }

})

 








版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AngularJS学习笔记

  • 2014年12月08日 20:39
  • 839KB
  • 下载

AngularJs学习笔记——摘自菜鸟教程

Angular Js是一个Javascript框架,它是一个以Javascript编写的库。 AngularJS 模块(Module) 定义了 AngularJS 应用。 AngularJS 控制...

AngularJs学习笔记.docx

  • 2015年09月25日 22:39
  • 655KB
  • 下载

AngularJS 学习笔记(表单验证篇)

  • 2014年09月21日 23:52
  • 1.51MB
  • 下载

AngularJS 学习笔记(表单校验篇)

作为一个伪前端javaer,Bootstrap让我不用再为表示层

AngularJS 学习笔记.pdf

  • 2014年07月20日 12:02
  • 479KB
  • 下载

angularJs个人学习笔记及源码

  • 2017年04月24日 01:00
  • 6.76MB
  • 下载

AngularJS学习笔记(3)——通过Ajax获取JSON数据

通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,现在把模型model内的items中的值单独写成一个JSON文件,再通过发起Ajax请求的方式获取JSON数据。这样,清单列表中的...

AngularJS学习笔记

  • 2015年07月01日 23:14
  • 797KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript框架:AngularJS 学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)