AngularJS中使用$resource

这个服务可以创建一个资源对象,我们可以用它非常方便地同支持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我们需要传入第三个参数,该参数是一个对象。

$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' ]
    };
});
时间: 2024-10-10 22:14:56

AngularJS中使用$resource的相关文章

黄聪:AngularJS中的$resource使用与Restful资源交互(转)

原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了.      REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Re

浅谈AngularJS中使用$resource

这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了. REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Resource  模块,在angular之后 <script src="js/vendor/angular.js"></script> &l

AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们成为维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服务使用AngularJS的依赖注入机制注入正常. AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJ

AngularJS 中 异步请求$http 对象的使用

 AngularJS 提供了一个类似jquery的$.ajax的对象,用于异步请求. 在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数. 对于官网的$http对象的总结和使用. 用法: $http(config); 参数: config (常用的参数标红,翻译了一下) config object Object describing the request to be made and how it should b

AngularJS 中的 Promise 和 设计模式

Promises And Design Patterns 写得好长好长好长长~ 解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后给它一个函数引用,当这个方法完结的时候执行这个函数引用. $.get('api/gizmo/42', function(gizmo) { console.log(gizmo); // or whatever }); 看起来很不错对不对,不过,也有缺点的:首先,合并或者链接多个异步过程超复杂:要么就是大量的模板代码,要么就是嗯哼你懂的回调地狱(

AngularJS 中的 Promise 和 设计模式(转)

原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And 'Promise-Ifying' Plain Values AngularJS 中的实际应用 实际链式例子 测试 Promise - 基于代码 Promises And Design Patterns 写得好长好长好长长~ 解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

AngularJs中的directives(指令)

一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 调用自定义指令的4种方式:元素.属性.样式类.注释. 常用的是前两种,实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

解决Android中No resource found that matches android:TextAppearance.Material.Widget.Button.Inverse问题

解决Android中No resource found that matches android:TextAppearance.Material.Widget.Button.Inverse问题http://blog.csdn.net/u012336923/article/details/48289485 /路径/app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.0.1/res/values-v23/v