Ⅴ.AngularJS的点点滴滴-- 资源和过滤

资源ngResource(依赖ngResource模块)

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-resource.js"></script>
<div ng-controller="detail">
    <button  ng-click="query()">query</button>
    <button  ng-click="handle()">handle</button>
</div>
<script>
angular.module('app', ['ngResource']).factory('restful', ['$resource','$q',
function($resource,$q) {
  return $resource('/:category', {
    category: '@category'
  },
  {
    query: {
      method: 'get',
      responseType: 'text',
      interceptor: {
        'response': function(response) {
          return response;
        },
        'responseError': function(rejection) {
          return $q.reject(rejection);
        }
      }
    },
    handle: {
      method: 'post',
      responseType: 'json',
      url: "/:category/:handle",
      params: {
        handle: '@handle'
      }
    }
  });
}]).controller('detail', ['$scope', 'restful',
function($scope, restful) {
  $scope.query = function() {
    restful.query({
      category: 'a'
    },
    function() {})
  };
  $scope.handle = function() {
    restful.handle({
      category: 'b',
      handle: 'c',
      a: 'e'
    },
    function() {})
  };
}]);
angular.bootstrap(document, ['app']);
</script>
</html>

使用factory方法创建资源,里面具体的配置的参数和上一个点滴的$http一样

  1. 当点击query方法的时候看到有一个get的请求,其中如果要给前面的category赋值, 那么必须在默认参数上面@符号表示在调用的时候赋值
  2. 当方法里面写了url的时候会覆盖原来默认的url
  3. interceptor这个是其中多出来的参数也是一种拦截吧, 当请求结束的时候会响应相应的事件只有response和responseError

  4. 资源含有以下默认方法

    { 'get':{method:'GET'},
'save':{method:'POST'},
'query':{method:'GET',isArray:true},
'remove':{method:'DELETE'},
'delete':{method:'DELETE'}};

  5. 既然说了拦截那么，那些下面的方法是对所有http请求进行拦截的服务的创建,当要处理响应的事情的时候, 就会进相应的方法体,有点类似ajax的ajaxSend和ajaxSuccess以及ajaxError因为都是全局的, 其中request和response是对象请求和响应的数据进行改写, 需要返回修改后或者创建一个新的对象、一个promise对象也可以 模块方法如下

    angular.module('app.interceptor', []).config(['$provide', '$httpProvider',
function($provide, $httpProvider) {
$provide.factory('myHttpInterceptor',
function($q) {
 return {
   'request': function(config) {
     return config || $q.when(config);
   },
   'requestError': function(rejection) {
     return $q.reject(rejection);
   },
   'response': function(response) {
     return response || $q.when(response);
   },
   'responseError': function(rejection) {
     return $q.reject(rejection);
   }
 };
});
$httpProvider.interceptors.push('myHttpInterceptor');
}]);

    或者直接使用匿名的方法

    angular.module('app.interceptor', []).config(['$httpProvider',
function($httpProvider) {
$httpProvider.interceptors.push(function($q) {
 return {
   'request':function(config) {
     return config || $q.when(config);},
   'requestError': function(rejection) {
     return $q.reject(rejection); },
   'response': function(response) {
     return response || $q.when(response);
   },
   'responseError': function(rejection) {
     return $q.reject(rejection);
   }
 };
});
}]);

过滤$filter

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<div ng-controller="detail">
    <input type="number" ng-model="query">
    <label>{{query|num:'2'}}</label>
</div>
<script>
angular.module('app', []) 
.filter('num', function () {
    return function (input,result) {
        return input/result;
    }
}).controller('detail', ['$scope','$filter',
function($scope,$filter) {
  console.log($filter('num')('100','2'));
  $scope.query =1
}]);
angular.bootstrap(document, ['app']);
</script>
</html>

过滤其中input参数是当前对象的值,result是:??过滤名称的后面的值, 也可以在js中直接调用方法如上$filter('num')返回的就是过滤的方法

posted @ 2013-11-27 14:35  cnljli  阅读(557)  评论(0)  编辑  收藏  举报