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

时间:2013-06-29 05:04:10

标签: rest angularjs

我通过以下文章为例实现了REST / CRUD后端: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('/');
    });
}

但是当我调用更新功能时,URL不包含ID值:它只是“/ realmen”,而不是“/ realmen / ID”。

我尝试了各种解决方案,包括添加“RealMen.prototype.update”,但仍然无法让entryId显示在URL上。 (看起来我也必须自己构建JSON,只保存DB字段值 - 在创建新条目时,POST操作会自动为我做,但似乎没有只包含数据结构的数据结构我正在查看/编辑单个条目时的字段值。

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

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

3 个答案:

答案 0 :(得分:60)

我是Restangular的创造者。

您可以查看此CRUD示例,了解如何在没有您需要执行的所有URL配置和$资源配置的情况下PUT / POST / GET元素。除此之外,您可以使用嵌套资源而无需任何配置:)。

查看这个plunkr示例:

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

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

如果您需要某些不存在的功能,只需创建一个问题。我通常在一周内添加要求的功能,因为我也将这个库用于我的所有AngularJS项目:)

希望它有所帮助!

答案 1 :(得分:34)

由于您的update使用PUT方法,{entryId: $scope.entryId}被视为数据,要告知PUT数据中的角度生成,您需要在定义{{1}时添加params: {entryId: '@entryId'} },这意味着

update

修复:在更新行上缺少一个结束大括号。

答案 2 :(得分:9)

你可以这样实现

$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

希望有所帮助