博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular JS: 以更RESTful的方式使用ngResource
阅读量:5771 次
发布时间:2019-06-18

本文共 1988 字,大约阅读时间需要 6 分钟。

  hot3.png

原创翻译自Kirk Bushell的BLOG:

我发现一个Angular JS中的关键问题是(以我喜欢的代码工作方式来说)$save方法在ngResource中将只会使用POST沿着有效载荷提交到服务器。新建和更新记录操作都是这样的,对来自服务器的新和旧的对象都是如此。这破坏了 RESTful约定的更新操作应该使用PUT或者PATCH操作。我下面建议的解决方案拓展了现有的ngResource实现,提供了更多的默认选项,同时精简了我们的工作流程。完美的用法(恕我直言)应该像下面这样:

var user = new User;user.name = 'Kirk Bushell';user.$save(); // POSTvar user = User.get( { id: 1 });user.name = 'John smith';user.$save(); // PUT

    如果我们深入ngResource的代码中,这样的需求是可能的,关于怎么样去简化它的实现(这应该是由 Angular 的团队来完成)。不幸的是,它的确意味着如果我们想要同时用POST/PUT来实现保存操作,我们不得不用两个不同的方法(这不是我的风格)。恕我直言,保存就是保存 --- 让你的模块/类 来定义这是什么样的保存(新建或是更新)操作。我们需要做的是用我们自己的默认实现来拓展ngResource提供的 $resource工厂。让我们接着看下去。

var module = angular.module( 'my.resource', [ 'ngResource' ] );module.factory( 'Resource', [ '$resource', function( $resource ) {   return function( url, params, methods ) {    var defaults = {      update: { method: 'put', isArray: false },      create: { method: 'post' }    };        methods = angular.extend( defaults, methods );    var resource = $resource( url, params, methods );    resource.prototype.$save = function() {      if ( !this.id ) {        return this.$create();      }      else {        return this.$update();      }    };    return resource;  };}]);

    这里我们定义了一个自定义模块 - my.resource,这个模块可以被注入到其他你想要这个拓展功能的模块中。我们接着以一个依赖为我们的Resource工厂注入$resource,并做一些小魔法,让我们研究下吧。

    首先,我们定义了一个新的默认数组。它包括了为resource的更新update和新建create方法 - create方法将会被定义成一个POST请求,update方法将会被定义成一个PUT请求。我们为什么会想要这两个额外的方法?因为它允许我们做更明确的请求,正因如此,我们需要重载$save方法!

    我们拓展了任何我们会提供给resource的方法。然后,我们定义我们的新resource和通过重载$save方法拓展它。这个方法会检查id字段是否包含在一个资源对象中,如果有id字段,它将会调用我们定义在default中的$update方法;如果没有id字段,它会调用$create方法,很简单吧!

    但是 - 我们怎么在我们自己的资源中使用它呢?小菜一碟。

var module = angular.module( 'services', [ 'my.resource' ] );module.factory( 'User', [ 'Resource', function( $resource ) {  return $resource( 'users/:id', { id: '@id' } );}]);

    现在你可以看到 - 我们对待它就像对待其他的资源一样注入,唯一的区别是 - 我们定义了我们的 $resource依赖于我们自己进行拓展ngResource 后的Resource。

    这的确相当简单不是么。现在你可以让你的资源对象调用变的正常了!一如往常,欢迎大家的回复,批评,和建议。

转载于:https://my.oschina.net/buwei/blog/185082

你可能感兴趣的文章
JS中比较数字大小
查看>>
jQuery插件的开发
查看>>
基础,基础,还是基础之JAVA基础
查看>>
如何成为一个C++高级程序员
查看>>
我的友情链接
查看>>
显式锁(第十三章)
查看>>
看linux书籍做的一些重要笔记(2011.07.03更新)
查看>>
CString、Char* ,char [20]、wchar_t、unsigned short转化
查看>>
从案例学RxAndroid开发(上)
查看>>
Redis学习手册(内存优化)
查看>>
浅尝TensorFlow on Kubernetes
查看>>
springboot系列十 Spring-Data-Redis
查看>>
excel进行矩阵计算
查看>>
基于Android平台的动态生成控件和动态改变控件位置的方法
查看>>
BOM
查看>>
iOS: Block的循环引用
查看>>
MySQL类型转换
查看>>
变量声明提升1
查看>>
sed 对目录进行操作
查看>>
移动端开发单位——rem,动态使用
查看>>