AngularJS中使用$resource

时间：2015-06-04 15:54:24 阅读：154 评论：0 收藏：0 [点我收藏+]

这个服务可以创建一个资源对象，我们可以用它非常方便地同支持RESTful的服务端数据源进行交互，当同支持RESTful的数据模型一起工作时，它就派上用场了。
REST是Representational State Transfer（表征状态转移）的缩写，是服务器用来智能化地提供数据服务的一种方式

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

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我们需要传入第三个参数，该参数是一个对象。

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

四、自定义$resource服务

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

angular.module(‘testApp‘, [‘ngResource‘]),factory(‘UserService‘,[‘$resource‘, function($resource){

return $resource(url,{},{});

}]);

举例：

五、项目中应用实例

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' ]
    };
});

AngularJS中使用$resource

标签：angular resource

原文地址：http://blog.csdn.net/u010834071/article/details/46360377

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行