前段时间做AngularJS的经验总结,这里和大家分享一下:
使用AngularJS的目的是构建一个单页应用,一直是局部刷新,可以达到类似客户端的效果
指令主要参数:
restrict : E(元素),A(属性),C(类名),M(注释),默认为EA
template : 指令链接DOM模板,例如“<h1>{{head}}</h1>”
templateUrl:替代template,指定模版路径
replace :指令链接模板是否替换原有元素,默认false
scope :有三种参数
- false :共享父域
- true :继承父域,但新建独立作用域
- 对象{} :独立作用域,有三种绑定策略实现数据传递
- @单向绑定,使用时加{{}}
- =双向绑定
- &函数绑定
require : 用于指令和指令之间进行通讯,在使用require指定依赖后,link函数的第四个参数就是所依赖的控制器
require: '?^teacher'这里的问号和^号是寻找策略,前者表示没有找到则置为null,后者表示在自身指令寻找指令名称的同时,向上父元素寻找
controller :赋予指令控制器,是用来定义其内部作用域的行为的
link :描述指令元素操作行为,先执行controller设置各个作用域的scope,执行link,设置DOM的各个行为
使用消息机制,$scope.$emit(EVENT.SUCEESS,{});其父controller如下
$scope.$on(EVENT.SUCEESS,function (event,args) {});
Controller间数据共享 :
使用服务做桥梁,因为服务是单例的,多个controller间访问的是同一份数据,设置好服务getter和setter方法,在任何需要这个数据的地方注入这个服务
angular.factory('sharedList',function() { var list = []; return { addItem: addItem,getList: getList } function addItem(item) { list.push(item); } function getList() { return list; } });
在定义模块,service,controller等时最好使用依赖注入,减少模块间的耦合
app.controller('worldCtrl',['$scope','$http',function($scope,$http){
// ...
}]);
或者myCtrl.$inject = ['$scope',''];这样显式注入
设置延时操作是使用angularjs自带的$timeout而不是setTimeout,后者对scope的修改不会触发更新,使用
$timeout.cancel(promise对象)取消一个timeout var a= $timeout(function(){ console.log('执行$timeout回调'); return'angular'; },1000);
通过ngResource来调用restful服务接口,而不是仅仅使用$http,它只适合处理一些简单的请求,可以定义
资源在服务端的URL,常用的请求参数类型,一些附加的方法,期望获得的响应类型等等这些
如下是ngResource的一个简单例子:
myAppModule.factory('CreditCard',['$resource',function($resource) { return $resource('/usr/:userId/card/:cardId',{userId: 123,cardId:'@id'},{charge: {method:'POST',params: {charge:true},isArray: false}); }]);
通过CreditCard.get({id : 11})则会生成/user/123/card/11的资源URL
UI Bootstrap的使用,由于项目中不用jQuery,所以无法直接使用BootStrap,该项目为每个Bootstrap JS组件添加了内置指令,只需要Bootstrap CSS就可以实现BootStrap的样式。