浅谈AngularJS中使用$resource

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

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

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

?

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

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

?

1	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()请求通常被用来获取单个资源。

?

1 2 3 4 5 6 7 8

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

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

?

1 2 3 4 5 6

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

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

?

1 2 3 4 5

//发起一个请求 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:代表请求发送的数据体

?

1 2 3 4 5 6

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

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

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

?

1 2 3 4 5 6 7 8

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

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

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

?

1 2 3 4 5 6 7 8 9

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

三、$resource设置对象

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

四、$resource实例

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

?

1 2 3 4 5

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会自动将数据填充进去。

比如：

?

1 2 3

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

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

?

1 2 3 4 5

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

五、$resource服务

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

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

?

1 2 3

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

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

?

1 2 3 4 5 6 7 8 9 10 11

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对象上，上面的配置对象解释之后的方法为：

?

1 2 3

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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

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