angularJS $resource与后台restapi的对应关系

REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性(Human Readable),而且易于做缓存以及服务器扩展(scalability)。REST风格体现在URL设计上:

  • 每个URL对应一个资源
  • 对资源的不同操作对应于HTTP的不同方法
  • 资源表现形式(representation)通过AcceptContent-Type指定

AngularJS提供了$resourceService来更方便地与RESTful服务器API进行交互,可以方便地定义一个REST资源,而不必手动所有的声明CRUD方法。

参考文档: https://docs.angularjs.org/api/ngResource/service/$resource

Resource Factory

$resourceService定义在ngResourceModule中,需要在你的HTML中引入这个Module对应的JS,同时在你的APP中添加这样一个依赖:

var app = angular.module(‘helloApp, [‘ngResource‘]);

然后为资源建立一个Factory:

app.factory(‘Notes‘, [‘$resource‘, function($resource) {
    return $resource(‘/notes/:id‘);
}]);

当然,你也可以不把$esource的实例放到Factory里,直接在控制器中存起来:var Notes = $resource(‘/notes/:id)

CRUD

在你的控制器中就可以对资源进行增删改查了:

app.controller(‘NotesCtrl‘, [‘$scope‘, ‘Notes‘, function($scope, Notes) {
    var notes = Notes.query(function(){
        // GET: /notes
        // Response: [{id: 1, content: ‘hello‘}, {id: 2, content: ‘world‘}];

        var first = notes[0];
        first.content = ‘halo‘;
        first.$save(); //update效果
        // POST: /notes/1 {id: 1, content: ‘halo‘}
        // Response: {id: 1, content: ‘halo‘}

        second.$delete();
        // DELETE: /notes/2
    });

    var note = new Notes({content: ‘xxx‘});
    note.$save(); // insert效果
    // POST: /notes
    // Response: {id: 3, content: ‘xxx‘}
}]);

PUT 操作

$resource提供了五种默认操作:getquerysaveremovedelete。你可以配置一个update操作来完成HTTP PUT:

app.factory(‘Notes‘, [‘$resource‘, function($resource) {
    return $resource(‘/notes/:id‘, null, {
        update: { method:‘PUT‘ }
    });
}]);

现在,你可以在控制器中获取一个note并更新它:

var note = Notes.get({ id: 3}),
    $id = note.id;

note.content = ‘yyy‘;
Notes.update({ id:$id }, note);
// PUT /notes/3 {id: 3, content: ‘yyy‘}

现在你的Notes有六种操作了。这些操作有两种调用方式:

  1. 通过资源类调用,例如:Notes.update({id: xxx})
  2. 通过资源实例调用,例如:note.$update(),此时操作名需加前缀$

具体的调用参数可参考文档:

HTTP GET "class" actions: Resource.action([parameters], [success], [error])     get资源类调用

non-GET "class" actions: Resource.action([parameters], postData, [success], [error])   非get(update,post,delete)资源类调用

non-GET instance actions: instance.$action([parameters], [success], [error])    非get资源实例调用

其中,success参数为(value, responseHeaders),error参数为(httpResponse)

属性/URL映射

上述例子中,我们看到note对象的id属性会映射到URL中的:id/notes/:id)。如果你的业务更加复杂,可以手动配置这个映射关系。例如:

var Notes = $resouce(‘/users/:userId/notes/:noteId‘, {
    noteId: ‘@id‘,
    userId: ‘@owner‘
}

将会读取noteownerid属性来生成URL,比如删除note时:

// note === {id: 123, owner: ‘alice‘, content: ‘hello‘}
note.$delete();
// DELETE: /users/alice/notes/123

在构造$resource时,多于的属性映射会成为URL Query。例如:

var Notes = $resouce(‘/notes/:id‘, {
    id: ‘@id‘,
    user: ‘@owner‘
});
// note === {id: 123, owner: ‘alice‘, content: ‘hello‘}
note.$delete();
// DELETE: /notes/123?user=alice

REST操作的声明和调用中,多于的属性会成为URL Query。例如:

var Notes = $resouce(‘/notes/:id‘, {id: ‘@id‘}, {
    update: {method: ‘PUT‘, operator: ‘bob‘}
});
// note === {id: 123, content: ‘hello‘}
note.$update({trusted: true});
// PUT: /notes/123?operator=bob&trusted=true {id: 123, content: ‘hello‘}

响应转换

有时基于既定的后台设计,无法提供完全RESTful的API,比如/notes返回的是一个分页器对象,而非数组。此时,我们仍然可以使用$resource,但需要设置响应转换回调。例如:

var Notes = $resouce(‘/notes/:id‘, null, {
    pager: {
        method: ‘GET‘,
        transformResponse: function(data, headers){
            // Server respond:
            // data = {currentPage: 1,
            //     totalPage: 20,
            //     pageSize: 2,
            //     content: [{id: 1, content: ‘hello‘}, {id: 2, content: ‘world‘}]}
            var pager = JSON.parse(data);
            return pager.content;
        }
    }
});
var notes = Notes.query(function(){
    // GET: /notes
    // notes === [{id: 1, content: ‘hello‘}, {id: 2, content: ‘world‘}]
});

类似响应重写,你还可以设置请求转换transformRequest

虽然$resource的设计可以支持绝大多数的URL和内容表示设计,但如果你发现$resource的使用过程极其复杂,那可能是你的服务器API并不满足RESTful风格。



除非注明,本博客文章均为原创,转载请以链接形式标明本文地址: http://harttle.com/2015/06/05/angular-resource.html

时间: 2024-08-26 02:17:35

angularJS $resource与后台restapi的对应关系的相关文章

word20161217

p-node / p 节点 package / 程序包 packet / 数据包 packet assembler/disassembler, PAD / 分组拆装器 packet header / 数据包报头 packet switching / 数据包交换 PAD, packet assembler/disassembler / 分组拆装程序 page fault / 页错误 Page Faults Delta / 页错误 Delta paged pool / 分页的池 paging fil

spring-security2配置精讲(转载)

本文转载自牛人downpour的帖子: http://www.iteye.com/topic/319965 Spring 论坛上看了不少Spring Security的相关文章.这些文章基本上都还是基于Acegi-1.X的配置方式,而主要的配置示例也来自于SpringSide的贡献. 众所周知,Spring Security针对Acegi的一个重大的改进就在于其配置方式大大简化了.所以如果配置还是基于Acegi-1.X这样比较繁琐的配置方式的话,那么我们还不如直接使用Acegi而不要去升级了.所

保存带有图片的内容的设计思路

假设有需求,建立一条数据(如课程),需要给课程上传图片,支持多个上传,支持修改再上传,这个怎么设计流程: 新建的时候,一旦在窗口选择了某个图片,就做一次上传,然后让后台返回这个图片在数据库中的pid,保存课程的时候,讲pid传到后台进行保存,在数据库中以id进行关联 修改的时候,如果点击了删除图片,提交pid和课程id到后台,将对应关系进行删除即可,如果再有增加,直接将图片上传,并且把课程id一起带到后台进行关系添加,保存课程的时候就不用对pid进行任何处理了 ---项目组当前的设计思路,觉得很

让asp.net网站支持多语言,使用资源文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

Ambari源码分析之Resource.Type与ResourceProvider对应关系

测试环境:Oracle Enterprise Linux 64-bit (5.8版本) + Oracle 11g 64位 相关说明: Oracle11g64位软件的安装位置为/u01/app/oracle/product/11.2.0/dbhome_1 ,数据库名为默认的orcl,Linux虚拟机的IP设置为192.168.1.121 一.修改listener.ora文件内容 命令:[[email protected] ~]$ vi /u01/app/oracle/product/11.2.0/

Ambari源码分析之Resource.Type与PropertyProvider对应关系

PropertyProvider是取得监控指标的组件,下面给出Resource.Type与PropertyProvider对应关系: Resource.Type PropertyProvider Cluster GangliaReportPropertyProvider Service NagiosPropertyProvider Host GangliaHostPropertyProvider;NagiosPropertyProvider Component StackDefinedPrope

基于Flask实现后台权限管理系统 - Flask

1. Flask 1.1. 简介 Flask是使用Python编写的轻量级Web应用框架,其WSGI工具箱采用Werkzeug,模板引擎则使用Jinja2.Flask使用BSD授权,Flask也被称为“microframework”,因为它使用简单的核心,用extension增加其他功能,用户可以随意地进行组合,满足自己的要求. 一段最简单的Flask代码如下: 1 from flask import Flask 2 3 app = Flask(__name__) 4 5 6 7 @app.ro

后台三层架构

后台三层架构 所谓的三层开发就是将系统的整个业务应用划分为表示层.业务逻辑层.数据访问层,这样有利于系统的开发.维护.部署和扩展. 分层实现了“高内聚.低耦合”,采用“分而治之”的思想,把问题划分开来解决,易于控制.延展,易于分配资源. 第一层:表现层/表示层:负责直接跟用户进行交互,一般是指系统的界面,用于数据录入.数据显示等.意味着只做与外观显示相关的工作,不属于它的工作不用做. 第二层:业务层/服务层:用于做一些有效性验证的工作,以更好地保证程序运行的健壮性.如完成数据添加.修改和查询业务

php后台对接ios,安卓,API接口设计和实践完全攻略,涨薪必备技能

2016年12月29日13:45:27 关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充 说道接口设计第一反应就是restful api 请明白一点,这个只是设计指导思想,也就是设计风格 ,比如你需要遵循这些原则 原则条件REST 指的是一组架构约束条件和原则.满足这些约束条件和原则的应用程序或设计就是 RESTful.Web 应用程序最重要的 REST 原则是,客户端和服务器之间的交互在请求之间是无状态的.从客户端到服务