Angular JS:REST/CRUD 后端的 GET/POST/DELETE/PUT 客户端的完整示例? [英] Angular JS: Full example of GET/POST/DELETE/PUT client for a REST/CRUD backend?

查看:25
本文介绍了Angular JS:REST/CRUD 后端的 GET/POST/DELETE/PUT 客户端的完整示例?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I've implemented a REST/CRUD backend by following this article as an example: http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/ . I have MongoDB running locally, I'm not using MongoLabs.

我遵循了使用 ngResource 和工厂模式的 Google 教程,并且我有查询(获取所有项目)、获取项目(GET)、创建项目(POST)和删除项目(DELETE)的工作.我很难按照后端 API 想要的方式实现 PUT —— 一个包含 id (.../foo/) 并且还包含更新数据的 URL 的 PUT.

I've followed the Google tutorial that uses ngResource and a Factory pattern and I have query (GET all items), get an item (GET), create an item (POST), and delete an item (DELETE) working. I'm having difficulty implementing PUT the way the backend API wants it -- a PUT to a URL that includes the id (.../foo/) and also includes the updated data.

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

I have this bit of code to define my services:

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'}
    });

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

I call the method from this controller code:

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

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

but when I call the update function, the URL does not include the ID value: it's only "/realmen", not "/realmen/ID".

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

I've tried various solutions involving adding a "RealMen.prototype.update", but still cannot get the entryId to show up on the URL. (It also looks like I'll have to build the JSON holding just the DB field values myself -- the POST operation does it for me automatically when creating a new entry, but there doesn't seem to be a data structure that only contains the field values when I'm viewing/editing a single entry).

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

Is there an example client app that uses all four verbs in the expected RESTful way?

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

I've also seen references to Restangular and another solution that overrides $save so that it can issue either a POST or PUT (http://kirkbushell.me/angular-js-using-ng-resource-in-a-more-restful-manner/). This technology seems to be changing so rapidly that there doesn't seem to be a good reference solution that folks can use as an example.

推荐答案

我是 Restangular 的创建者.

I'm the creator of Restangular.

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

You can take a look at this CRUD example to see how you can PUT/POST/GET elements without all that URL configuration and $resource configuration that you need to do. Besides it, you can then use nested resources without any configuration :).

查看这个 plunkr 示例:

Check out this plunkr example:

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

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

You could also see the README and check the documentation here https://github.com/mgonto/restangular

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

If you need some feature that's not there, just create an issue. I usually add features asked within a week, as I also use this library for all my AngularJS projects :)

希望有帮助!

这篇关于Angular JS:REST/CRUD 后端的 GET/POST/DELETE/PUT 客户端的完整示例?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆