转自:http://blog.csdn.net/violet_day/article/details/17403207

$http

$http服务是基于$q服务的,提供了promise封装,它接受一个配置对象参数,并返回一个promise对象。同时,它还提供了2个方法用来定义Promise回调:success 和 error。

  1. $http({method:"GET", url:"/someUrl"}).
  2. success(function(data, status, headers, config){
  3. //当异步请求成功返回响应时触发
  4. }).error(function(data, status, headers, config){
  5. //当发生异常时触发
  6. });

由于常用的http请求就那么几种,$http服务实现了对应的简便方法,比方说:
$http.get
$http.post
$http.put
$http.delete
$http.head
$http.jsonp

$http为每次请求自动添加了HTTP header,可通过$httpProvider.defaults.headers来配置相关内容。

$httpProvider.defaults.headers.common设置了所有请求都会包含的头信息:

Accept: application/json, text/plain, * / *
x-Requested-With: XMLHttpRequest

$httpProvider.defaults.headers.post设置了POST请求的默认请求头:

Content-Type: application/json

$httpProvider.defaults.headers.put设置了PUT请求的默认请求头:

Content-Type: application/json

此外,关于$http的cache特性,推荐看一下这篇文章

那么$http的相关内容,就先到此为止。

现在,我们开始看看$resource,需要注意的是,该服务需要我们手动加载angular-resource.js文件~
$resource服务的核心价值在于:提供给开发者与RESTful风格WebServices交互的更好的用户体验,它封装了较为低级的$http,这样就不需要前端开发者写大量的异步请求代码了。

$resource服务的配置方法:

  1. $resource(url[, paramDefaults][, actions]);

url

字符串类型,其中可以出现占位符,占位符要以“:”为前缀,如果系统的域名带端口号的话,需要手动转义:
http://www.codingcool.com:8080/api应该这么传入:

  1. $resource("http://www.codingcool.com\\:8080/api");

这种情况在ng的1.2.0rc1版本已经不存在了,端口号会被识别而不需要手工转义~~

paramDefaults(可选)

对象类型,用于设置参数的默认值,它设置的数值可以被actions(第三个参数)进行覆盖。如果设置的参数值是函数,那么该函数将在每次获取其值时被执行(有那么点废话的意思)。

对于设置的没有出现在url模板(第一个参数)中的参数,将会以search query的方式添加,例如:
如果url模板为/codingcool/:author,paramDefaults为{author:”kazaff”, profession:”geek”},那么最终的请求url会变成:
/codingcool/kazaff?profession=geek

如果参数值是以“@”开头的,那么其真实值将会从数据对象中提取,后面会有例子。

actions(可选)

对象类型,用来定义$resource提供的可以使用方法,声明细节和$http一样。

下面再来看一下$resource的返回值:
返回值的类型是对象,它包含了和指定服务api(即url)进行互动的所有方法,默认会包含如下默认方法:

  1. { 'get':    {method:'GET'},
  2. 'save':   {method:'POST'},
  3. 'query':  {method:'GET', isArray:true},
  4. 'remove': {method:'DELETE'},
  5. 'delete': {method:'DELETE'}
  6. };

这些方法会调用内置的$http服务~

当异步请求成功,数据从服务器端取回后,被封装到一个$resource服务的一个对象实例中,这个对象可以被save,remove,delete方法直接操作,这种封装并提供简单的CRUD操作的方式,使得开发者可以感受到被尊重啊!呵呵~

  1. var User = $resource('/user/:userId', {userId:'@id'});
  2. var user = User.get({userId:123}, function() {
  3. user.abc = true;
  4. user.$save();
  5. });

注意上面代码中的”@id”和”$save()”,使用了@后,当执行$save时,user.id就会被当做userId的值来发送请求。

这种方式封装Ajax,不仅仅使得代码更加优雅,而且还能配合ng的视图渲染:当数据没有返回之前,模板引擎不会渲染,一旦异步数据获取完成,会自动触发模板引擎的渲染机制把数据呈现到视图中。

最后,看一个简单的例子:

AngularJS的$resource

  1. <!DOCTYPE html>
  2. <html ng-app="Demo">
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>ngResource DEMO</title>
  6. </head>
  7. <body>
  8. <div ng-controller="GeekListCtrl">
  9. <ul>
  10. <li ng-repeat="geek in geeks">
  11. <a href="#" ng-click="show({{geek.id}})">{{geek.name}}</a>
  12. </li>
  13. </ul>
  14. <div ng-show="user">
  15. {{user.msg}}
  16. </div>
  17. </div>
  18. <script src="./src/angular.js"></script>
  19. <script src="./src/angular-resource.js"></script>
  20. <script type="text/javascript">
  21. var Demo = angular.module('Demo', ["ngResource"])
  22. .factory('Geek', function ($resource){
  23. return $resource("geek/:geekId.json", {}, {
  24. query: {
  25. method: "GET",
  26. params: {geekId: "list"},
  27. isArray: true
  28. }
  29. });
  30. });
  31. function GeekListCtrl($scope, Geek){
  32. $scope.geeks = Geek.query();
  33. $scope.show = function(id){
  34. $scope.user = Geek.get({geekId: id});
  35. };
  36. }
  37. function GeekDetailCtrl($scope, $routeParams, Geek){
  38. $scope.geek = Geek.get({geekId: $routeParams.geekId}, function(geek){
  39. console.dir(geek);
  40. });
  41. }
  42. </script>
  43. </body>
  44. </html>

转自:

[转]AngularJS的$resource的更多相关文章

  1. angularjs的resource实例对象

    angularjs的resource实例对象 我们看看都有啥 而直接使用service对象的时候没有前面这些$

  2. [caffe]linux下安装caffe(无cuda)以及python接口

    昨天在mac上折腾了一天都没有安装成功,晚上在mac上装了一个ParallelDesktop虚拟机,然后装了linux,十分钟就安装好了,我也是醉了=.= 主要过程稍微记录一下: 1.安装BLAS s ...

  3. [Swift]基础

    [Swift]基础 一, 常用变量 var str = "Hello, playground" //变量 let str1="Hello xmj112288" ...

  4. [Ruby on Rails系列]4、专题:Rails应用的国际化[i18n]

    1. 什么是internationalization(i18n)? 国际化,英文简称i18n,按照维基百科的定义:国际化是指在设计软件,将软件与特定语言及地区脱钩的过程.当软件被移植到不同的语言及地区 ...

  5. 【转】AngularJS的$resource

    $http $http服务是基于$q服务的,提供了promise封装,它接受一个配置对象参数,并返回一个promise对象.同时,它还提供了2个方法用来定义Promise回调:success 和 er ...

  6. [译]一个灵活的 Trello 敏捷工作流

    [译]一个灵活的 Trello 敏捷工作流 翻译自 An Agile Trello Workflow That Keeps Tasks Flexible Getting things done 可不只 ...

  7. iOS10收集IDFA,植入第三方广告[终结]--ADMob

    [PS: 前段时间,公司做ASO推广,需要在应用中收集IDFA值,跟广告平台做交互!于是有了这个需求--] 1.首先,考虑了一下情况(自己懒 -_-#),就直接在首页上写了一个Banner,循环加载广 ...

  8. 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤

    在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...

  9. 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查

    AngularJS中的$resource服务相比$http服务更适合与RESTful服务进行交互.本篇后端使用ASP.NET Web API, 前端使用$resource,实现增删改查. 本系列包括: ...

随机推荐

  1. uwsgi选择使用的python版本(转载)

    大概如下 mkdir /data/uwsgi cd /data/uwsgi wget http://projects.unbit.it/downloads/uwsgi-2.0.11.tar.gz ta ...

  2. 解决MyEclipse吃内存以及卡死的方法

    前言:MyEclipse5.5 大小 139M:MyEclipse6.5 大小 451M:MyEclipse7.0 大小 649M!下载服务器又是国外的...下载速度累人也就罢了,只要你工作性能一流. ...

  3. C# 整形、双精度浮点型、字符串与字节型的相互转化

    整形.双精度浮点型.字符串与字节型的相互转化,如下 using System; using System.Collections.Generic; using System.Linq; using S ...

  4. LUA闭包概念演示

    闭包的一个重要场景,形成一个自治的环境, 让操作可以封闭运行, 即函数运行时有状态的,可以从闭包创建时候的环境独立开来. 例如下面的lua闭包, genFilter 其入参parmIn是 函数的内部变 ...

  5. PAT 解题报告 1048. Find Coins (25)

    1048. Find Coins (25) Eva loves to collect coins from all over the universe, including some other pl ...

  6. redhat linux 安装mysql5.6.27

    1.yum安装mysql(root身份) yum install mysql-server mysql-devel mysql -y 如没有配置yum,请参见博客:http://www.cnblogs ...

  7. IOS推荐学习网站

    1> 个人博客:技术大牛 唐巧:http://blog.devtang.com/blog/archives/ 王巍:http://www.onevcat.com 破船之家:http://beyo ...

  8. Lintcode: Merge Sorted Array II

    Merge two given sorted integer array A and B into a new sorted integer array. Example A=[1,2,3,4] B= ...

  9. zabbix添加邮件报警机制

    zabbix添加邮件报警机制 作者:尹正杰 还记得之前跟大家聊过的一个如何监控一个目录的话题吗?我们虽然监控出来数据了,也有数据了,但是,只是监控也没有用啊~因为我们不能24小时盯着屏幕然后 出了事情 ...

  10. HUD 5086 Revenge of Segment Tree(递推)

    http://acm.hdu.edu.cn/showproblem.php?pid=5086 题目大意: 给定一个序列,求这个序列的子序列的和,再求所有子序列总和,这些子序列是连续的.去题目给的第二组 ...