Angular JS: Full GET / POST / DELETE / PUT client example for REST / CRUD back-end?

Question

I implemented the REST / CRUD backend, following this article as an example: http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/ . My MongoDB works locally, I do not use MongoLabs.

I followed a Google tutorial that uses the ngResource and Factory template, and I have a request (GET all elements), get an element (GET), create an element (POST) and delete the element (DELETE) at work. I am having difficulty implementing PUT as required by the API: PUT for the URL, which includes the identifier (... / foo /), and also includes 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('/'); }); } 

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

I tried various solutions related to adding "RealMen.prototype.update", but still can't get entryId to display at the url. (It seems that I will have to build JSON, saving only the values ​​of the database fields - the POST operation does this for me automatically when creating a new record, but there does not seem to be a data structure that contains only the field values ​​when I view / edit one record) .

Is there an example client application that uses all four verbs in the expected RESTful path?

I also saw links to Restangular and another solution that overrides $ save so that it can issue POST or PUT ( http://kirkbushell.me/angular-js-using-ng-resource-in-a-more-restful-manner / ). This technology seems to be changing so fast that there seems to be no good reference solution that people can use as an example.

Answer 1

I am the creator of Restangular.

You can take a look at this CRUD example to find out how you can create PUT / POST / GET elements without setting this URL configuration and resource configuration. In addition, you can use the embedded resources without any configuration :).

Check out this plunkr example:

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

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

If you need some kind of function that does not exist, just create a problem. I usually add functions over the course of a week since I also use this library for all my AngularJS projects :)

Hope this helps!

Answer 2

Since your update uses the PUT method, {entryId: $scope.entryId} treated as data, to tell angular to generate PUT data, you need to add params: {entryId: '@entryId'} when you define your update , which means

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

Bugfix: there was no closing brace on the update line.

Answer 3

You can implement this method

 $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 

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

Hope this helps