Ⅴ.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一样
- 当点击query方法的时候看到有一个get的请求,其中如果要给前面的category赋值, 那么必须在默认参数上面@符号表示在调用的时候赋值
- 当方法里面写了url的时候会覆盖原来默认的url
- interceptor这个是其中多出来的参数也是一种拦截吧, 当请求结束的时候会响应相应的事件只有response和responseError
资源含有以下默认方法
{ 'get':{method:'GET'}, 'save':{method:'POST'}, 'query':{method:'GET',isArray:true}, 'remove':{method:'DELETE'}, 'delete':{method:'DELETE'}};既然说了拦截那么，那些下面的方法是对所有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')返回的就是过滤的方法
- 下一篇：Ⅵ.AngularJS的点点滴滴-- 指令
- 上一篇：Ⅳ.AngularJS的点点滴滴-- 服务
- 本文链接地址：Ⅴ.AngularJS的点点滴滴-- 资源和过滤