浅谈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 相关文章推荐
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
vuejs指令详解
Feb 07 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
Python3实现转换Image图片格式
2018/06/21 Python
在python 中实现运行多条shell命令
2019/01/07 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
Python命令行click参数用法解析
2019/12/19 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
python中os.remove()用法及注意事项
2021/01/31 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
少先队入队活动方案
2014/02/08 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
项目转让协议书
2014/10/27 职场文书
大学生求职意向书
2015/05/11 职场文书
国庆阅兵观后感
2015/06/15 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书