浅谈AngularJS中使用$resource(已更新)


Posted in Javascript onSeptember 14, 2017

这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了。   

REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式  

1)我们首先需要引入ng-Resource  模块,在angular之后

<script src="js/vendor/angular.js"></script>
  <script src="js/vendor/angular-resource.js"></script>

2) 在我们的应用中需要将其当做依赖进行引用

angular.module('myApp', ['ngResource']);

3)如何使用?

$resource服务本身是一个创建资源对象的工厂,返回的$resource对象中包含了同后端服务器进行的交互的高层API.

var User=$resource('/api/users/:userId',{userId:'@id'});

可以把User对象理解成同RESTful的后端服务进行交互的接口。

一、HTTP GET类型的方法

①GET请求:  get(params,successFn,errrorFn)

不定义具体的参数,get()请求通常被用来获取单个资源。

//GET /api/users
  User.get(function(resp){
  //处理成功 
  
  },function(err){
  //处理错误
  
  });

如果参数中传入了具名参数(我们例子中的参数是id),那么get()方法会向包含id的URL发送请求:   

//发起一个请求:GET-->/api/users/123
  User.get({id:'1234'},function(resp){
    //success
  },function(error){
    //fail
  });

②QUERY 请求:query向指定URL发送一个GET请求,并期望返回一个JSON格式的资源对象集合。

//发起一个请求
 User.query(function(users){
  //读取集合中的第一个用户
  var user=users[0];
 });

query()和get()方法之间唯一的区别是AngularJS期望query()方法返回数组。 

二、非HTTP GET类型的方法    

1. save(params, payload, successFn, errorFn)

save方法向指定URL发送一个POST请求,并用数据体来生成请求体。save()方法用来在服务器上生成一个新的资源。 payload:代表请求发送的数据体

//发送一个请求 with the body {name: 'Ari'}
  User.save({},{name:'Ari'},function(resp){
  
  },function(error){
  
  });

2. delete(params, payload, successFn, errorFn)   

delete方法会向指定URL发送一个DELETE请求,并用数据体来生成请求体。它被用来在服务器上删除一个实例:  

// DELETE /api/users
  User.delete({}, {
    id: '123'
  }, function(response) {
  // 处理成功的删除响应
  }, function(response) {
  // 处理非成功的删除响应
  });

3. remove(params, payload, successFn, errorFn)

remove方法和delete()方法的作用是完全相同的,它存在的意义是因为delete是JavaScript的保留字,在IE浏览器中会导致额外的问题。  

// 发起一个请求:
  // DELETE /api/users
  User.remove({}, {
   id: '123'
  }, function(response) {
  // 处理成功的删除响应
  }, function(response) {
  // 处理非成功的删除响应
  });

三、$resource设置对象

$resource对常见的五种请求进行封装,我们还可以对$resource进行扩展,这里要扩展$resource我们需要传入第三个参数,该参数是一个对象。

$resource('/api/users',{},{ 
 sendEmail:{ 
  method:'', 
  url:'', 
  params:{}, 
  isArray:boolean, 
  transformRequest:函数或者函数数组 
  transformResponse:函数或者函数数组 
  cache:布尔型或缓存对象 
  timeout:数值或promise对象 
  withCredentials:布尔类型 
  responseType:字符串,用来设置XMLHttpRequestResponseType属性 
 } 
})

四、$resource实例

示例1:简单的CRUD --摘自点击打开链接 这哥们总结的很全面

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

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

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

 怎么理解呢?

简单来说,上述方法在返回数据时,响应会被一个原型类包装,并在实例中添加一些有用的方法。

有以下三个实例方法:

  • $save()
  • $remove()
  • $delete()

这三个方法可以在资源实例上被调用,如上所示。需要格外注意,这三个方法在调用时$resource对象会立即返回一个空的数据引用。由于所有方法都是异步执行的,所以这个数据是一个空的引用,并不是真实的数据。

因此,虽然获取实例的调用看起来是同步的,但实际上不是。事实上,它只是数据的引用,当数据从服务器返回后AngularJS会自动将数据填充进去。

比如:

// $scope.user将为空

  $scope.user = User.get({id: '123'});

这些方法也提供了回调函数,在数据返回时按预期的方式调用:

User.get({id: '123'}, function(user) {

  $scope.user = user;

  });

五、$resource服务

服务配置方法:$resource(url,[paramDefaults],[ actions]);  

我们也可以将$resource服务当做自定义服务的基础。

angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
  return $resource(url,{},{});
 }]);

举例:参考自AngularJS中的RESTful资源

app.factory('CreditCard', ['$resource', function($resource) { 
  return $resource('/usr/:userId/card/:cardId', 
  {userId: 123, cardId: '@id'}, 
  { 
  charge: {   //自定义的方法 
    method: 'POST',  
    params: {charge: true}, //表示需要作为请求的一部分来传递的参数 
    isArray: false 
    } 
  }) 
  }]);

在这里我们指定了一个charge方法,可以通过传递一个对象来配置这个方法,对象中的key就是需要暴露的方法名称。配置项中需要指定的内容有:请求的类型(GET、POST等)、需要作为请求的一部分来传递的参数(在这个例子中就是charge=true),以及返回的结果是否是一个数组(在这个例子中不是)。一旦做完这些事情之后,你就可以自由地调用CreditCard.charge()了。

说明:这是一种非常灵活的编码风格,根据上面的代码,对于配置对象{charge: {method: 'POST', params: {charge: true}, isArray: false},Angular会将其解析成一个方法,然后把这个方法绑定到返回的Restful对象上,上面的配置对象解释之后的方法为:

CreditCard.charge = function(charge, isArray) { 
//这里是方法体 
}

对于AngularJS应用来说,最常见的处理流程是:到服务器上获取数据,然后把数据赋值给变量,再把数据显示到模板中。这种快捷方式是非常好用的。在控制器代码中,你唯一要做的事情就是发起对服务端的调用,把返回值赋给正确的作用域变量,然后让模板自动负责渲染它。由于card变量是使用{{}}这种数据绑定技术绑定到视图上的,所以一开始给它一个空值并没有问题,等异步响应返回之后再把结果赋给它。这时候Angular的数据绑定机制会立即发现数据发生了变化,然后会自动通知视图进行刷新。从这里可以看到,使用Angular框架时,对异步调用的很多处理方式已经发生了细微的变化。

五、本人在项目中应用实例

define([ 
  '{angular}/angular', 
  '{angular-sanitize}/angular-sanitize', 
  '{w20-ui}/modules/select' 
], function (angular) { 
  'use strict'; 
 
  var hubComponentImport = angular.module('hubComponentImport', ['ui.select', 'ngSanitize']); 
 
  hubComponentImport.controller('hubImportComponentCtrl', ['$scope', '$routeParams', '$timeout','$resource','$location', function ($scope, $routeParams, $timeout,$resource,$location) { 
    $scope.editComponent = function () { 
      //初始化参数 
      $scope.component= {tags:[]}; 
      //利用$resource自定义post方法 
      var Components= $resource('rest/components/url',{},{ 
        getComponent: {method:'POST'} 
      }); 
      //接收页面输入数据,并发送请求 
      var component= Components.getComponent({},{url:$scope.componentUrl},function(data){ 
        $scope.component = data; 
      }); 
      //转向edit.html页面 
      $scope.searchComponent = 'manage/views/edit.html'; 
    }; 
     
     
  }]); 
 
  return { 
    angularModules: [ 'hubComponentImport' ] 
  }; 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
jQuery plugin animsition使用小结
Sep 14 #jQuery
angular.extend方法的具体使用
Sep 14 #Javascript
浅谈angular.copy() 深拷贝
Sep 14 #Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 #Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 #Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 #Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 #Javascript
You might like
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python中的urllib模块使用详解
2015/07/07 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
生产部经理岗位职责
2013/12/16 职场文书
2013的个人自我评价
2013/12/26 职场文书
如何写求职信
2014/05/24 职场文书
付款委托书范本
2014/10/05 职场文书
全国助残日活动总结
2015/05/11 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
浅谈MySQL函数
2021/10/05 MySQL