首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular JS: REST/CRUD后端的GET/POST/DELETE/PUT客户端的完整示例?

Angular JS: REST/CRUD后端的GET/POST/DELETE/PUT客户端的完整示例?
EN

Stack Overflow用户
提问于 2013-06-29 13:04:10
回答 3查看 203.4K关注 0票数 57

我以本文为例实现了一个REST/CRUD后端:http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/。我在本地运行MongoDB,我没有使用MongoLabs。

我遵循了使用ngResource和工厂模式的谷歌教程,我有查询(获取所有项目),获取项目( get ),创建项目(POST)和删除项目( delete )。我很难实现后端API想要的PUT方式--一个包含id (.../foo/)和更新数据的URL的PUT。

我有这段代码来定义我的服务:

angular.module('realmenServices', ['ngResource']).
    factory('RealMen', function($resource){
    return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
      query: {method:'GET', params:{entryId:''}, isArray:true},
      post: {method:'POST'},
      update: {method:'PUT'},
      remove: {method:'DELETE'}
    });

我从这个控制器代码中调用该方法:

$scope.change = function() {
    RealMen.update({entryId: $scope.entryId}, function() {
            $location.path('/');
    });
}

但是当我调用更新函数时,URL没有包含ID值:它只是"/realmen",而不是"/realmen/ ID“。

我尝试了各种解决方案,包括添加一个"RealMen.prototype.update",但仍然不能让entryId显示在网址上。(看起来我还必须自己构建只包含DB字段值的JSON -- POST操作会在创建新条目时自动执行,但在查看/编辑单个条目时似乎没有只包含字段值的数据结构)。

有没有一个示例客户端应用程序可以按照预期的RESTful方式使用所有四个动词?

我还看到了对Restangular和另一个覆盖$save的解决方案的引用,这样它就可以发出POST或PUT (http://kirkbushell.me/angular-js-using-ng-resource-in-a-more-restful-manner/)。这项技术似乎变化如此之快,以至于似乎没有一个好的参考解决方案可供人们用作示例。

EN

回答 3

Stack Overflow用户

发布于 2013-06-30 08:00:48

我是Restangular的创建者。

您可以查看这个CRUD示例,了解如何在不需要进行所有URL配置和$resource配置的情况下放置/POST/GET元素。除了它之外,您还可以在没有任何配置的情况下使用嵌套资源:)。

请看这个plunkr示例:

http://plnkr.co/edit/d6yDka?p=preview

您还可以查看自述文件并查看此处的文档https://github.com/mgonto/restangular

如果你需要一些不存在的特性,那就创建一个问题。我通常会在一周内添加所需的特性,因为我的所有AngularJS项目也都使用这个库:)

希望它能帮上忙!

票数 60
EN

Stack Overflow用户

发布于 2013-06-29 13:47:12

因为您的update使用PUT方法,{entryId: $scope.entryId}被视为数据,为了告诉angular从PUT数据生成,您需要在定义update时添加params: {entryId: '@entryId'},这意味着

return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
  query: {method:'GET', params:{entryId:''}, isArray:true},
  post: {method:'POST'},
  update: {method:'PUT', params: {entryId: '@entryId'}},
  remove: {method:'DELETE'}
});

修复:在更新行上缺少右大括号。

票数 34
EN

Stack Overflow用户

发布于 2014-05-09 07:23:18

您可以通过以下方式实现

$resource('http://localhost\\:3000/realmen/:entryId', {entryId: '@entryId'}, {
        UPDATE: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId' },
        ACTION: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId/action' }
    })

RealMen.query() //GET  /realmen/
RealMen.save({entryId: 1},{post data}) // POST /realmen/1
RealMen.delete({entryId: 1}) //DELETE /realmen/1

//any optional method
RealMen.UPDATE({entryId:1}, {post data}) // PUT /realmen/1

//query string
RealMen.query({name:'john'}) //GET /realmen?name=john

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

希望能有所帮助

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17376890

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档