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