浅谈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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 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
星际实力自我测试
2020/03/04 星际争霸
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP 微信支付类 demo
2015/11/30 PHP
Smarty变量用法详解
2016/05/11 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
基于游标的分页接口实现代码示例
2018/11/12 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
忠诚奉献演讲稿
2014/09/12 职场文书
财政局长个人总结
2015/03/04 职场文书
灵魂歌王观后感
2015/06/17 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP