AngularJS小结

前段时间做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的各个行为

 

Controller间调用方法 :

使用消息机制，$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的样式。