Ⅴ.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的点点滴滴-- 资源和过滤
Ⅴ.AngularJS的点点滴滴-- 资源和过滤的更多相关文章
- Ⅵ.AngularJS的点点滴滴-- 指令
指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...
- Ⅳ.AngularJS的点点滴滴-- 服务
服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...
- Ⅶ.AngularJS的点点滴滴-- 事件
事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...
- Ⅲ.AngularJS的点点滴滴-- 路由
路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...
- Ⅱ.AngularJS的点点滴滴--缓存
模板缓存-$templateCache and 缓存工厂 $cacheFactory 1.使用script标签 <html ng-app> <script src="htt ...
- Ⅰ.AngularJS的点点滴滴--引导
AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧 页面引导实例化 1.自动实例化 <html> <script ...
- angularjs中的时间格式化过滤
本地化日期格式化: ({{ today | date:'medium' }})Nov 19, 2015 3:57:48 PM ({{ today | date:'short' }})11/19/15 ...
- 【转载】AngularJS 用$sce服务来过滤HTML标签，解决无法正确显示后台传递的html标签
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...
- angularjs结合d3js实现资源展示
转载请注明出处: 转载自Bin's Blog: angularjs & d3 实现资源展示( http://www.wenbin.cf/post/27/ ) angularjs结合d3js实 ...
随机推荐
- NWERC 2012 Problem A Admiral
一个最小费用最大流的简单建模题: 比赛的时候和小珺合力想到了这个题目的模型: 方法:拆点+边的容量为1 这样就可以保证他们不会在点上和边上相遇了! 感谢刘汝佳大神的模板,让我这个网络流的小白A了这个题 ...
- Codeforces Round #198 (Div. 2) —— D
昨天想了一下D题,有点思路不过感觉很麻烦,就懒得去敲了: 今天上午也想了一下,还是没有结果,看了一下官方题解,证明得很精彩: 这道题目其实就是一道裸地最大上升子序列的题: 看到这里,直接怒码···· ...
- JavaScript 将字符串转化为json对象
var json = eval('(' + data + ')'); 其中data为字符串数据
- 开发的时候，一定要及时控制CPU使用率以及使用内存大小等三个问题（一个星期检查一次）
一直专注于功能的开发,没注意CPU和内存.昨天无意中发现两个问题: 1. 程序启动后,什么都没干,CPU就50%了(单核).现在想找原因降低使用率,感觉无从下手,要是平时就注意这个问题就好了. 2. ...
- 使用Systrace分析UI性能
开发应用的时候,应该检查它是否有流畅的用户体验,即60fps的帧率.如果由于某种原因丢帧,我们首先要做的就是知道系统在做什么(造成丢帧的原因). Systrace允许你监视和跟踪Android系统的行 ...
- Android 颜色Color
Android中使用4个数字来表示颜色,分别是alpha.红(red).绿(green).蓝(blue)四个颜色值(ARGB).每个数字取值0-255,因此一个颜色可以用一个整数来表示.为了运行效率, ...
- java WeakReference
在Java 1.2中就引入了java.lang.ref这个包,WeakReference就属于这个包.WeakReference是干嘛的呢,一言弊之,它是和Java中的垃圾回收相关的.如果一个对象只有 ...
- bzoj1042
首先直接做多重背包肯定会TLE的, 观察这个背包问题有什么特殊性呢 物品种类和重量,价值是一定的,不同的是背包的容量和物品的数量 由于当物品数量没有限制的时候,方案数是可以预处理出来的 所以我们考虑用 ...
- Gson ------ 实例演习
[本文范围]: 本文并非JSON知识讲解资料,亦非GSON知识讲解资料,而是通过实例让开发人员了解通过Gson如何使Java对象和Json对象进行相互转换. [JSON参考资料]: Json快速入门: ...
- Android获取系统cpu信息，内存，版本，电量等信息
本文转自:http://www.cnblogs.com/brainy/archive/2012/05/30/2526752.html 1.CPU频率,CPU信息:/proc/cpuinfo和/proc ...