微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

浅谈AngularJS中使用$resource已更新

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

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

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

rush:js;">

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

rush:js;"> angular.module('myApp',['ngResource']);

3)如何使用?

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

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

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

一、HTTP GET类型的方法

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

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

rush:js;"> //GET /api/users User.get(function(resp){ //处理成功

},function(err){
//处理错误

});

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

/api/users/123 User.get({id:'1234'},function(resp){ //success },function(error){ //fail });

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

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

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

二、非HTTP GET类型的方法

1. save(params,payload,errorFn)

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

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

},function(error){

});

2. delete(params,errorFn)

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

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

3. remove(params,errorFn)

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

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

三、$resource设置对象

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

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

四、$resource实例

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

rush:js;"> 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会自动将数据填充进去。

比如:

rush:js;"> // $scope.user将为空

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

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

rush:js;"> User.get({id: '123'},function(user) {

$scope.user = user;

});

五、$resource服务

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

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

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

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

rush:js;"> app.factory('CreditCard',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',isArray: false},Angular会将其解析成一个方法,然后把这个方法绑定到返回的Restful对象上,上面的配置对象解释之后的方法为:

rush:js;"> CreditCard.charge = function(charge,isArray) { //这里是方法体 }

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

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

rush:js;"> 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' ]
};
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐