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

Question

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

我已经学习了使用ngResource和Factory模式的Google教程，我可以查询（获取所有项目）、获取项目（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('/');
    });
}

但当我调用update函数时，URL不包括ID值：它只有"/realmen"，而不是"/realmen/ID"。

我尝试过各种解决方案，包括添加"RealMen.protype.update"，但仍然无法在URL上显示entryId。（看起来我还必须自己构建只包含DB字段值的JSON——POST操作在创建新条目时会自动为我执行，但在我查看/编辑单个条目时，似乎没有一个数据结构只包含字段值）。

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

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

Answer 1

我是Restangular的创建者。

您可以看看这个CRUD示例，看看如何在没有所有URL配置和$resource配置的情况下放置/POST/GET元素。除此之外，您还可以使用嵌套资源而不进行任何配置：）。

看看这个庞克的例子：

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

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

如果你需要一些不存在的功能，就制造一个问题。我通常会在一周内添加要求的功能，因为我的所有AngularJS项目都使用这个库：）

希望它能有所帮助！

Answer 2

因为您的update使用PUT方法，{entryId: $scope.entryId}被视为数据，为了根据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'}
});

修复：在更新行中缺少一个右大括号。

Answer 3

您可以通过这种方式实现

$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

希望它能帮助