AngularJS PUT when applying for a REST Service

Question

I am developing a voting feature for my site, but new to using AngularJS $, and I want to “update” an existing entry with the vote I just recorded. The problem is that it does not update and does not give error messages, simply indicating in the console log that my REST call requires a preliminary CORS check, which leads me to believe that this at least concerns the backend.

At this stage of development, I believe I can turn off how to update the record with the identifier, since in this case I do not have $ routeeparam to transfer for the link, but I'm trying to update with ng-repeat, which has a voting function as part of this. On the screen, it works, increasing up or down, but does not update the database, so when I refresh the page, the changes are not saved because they were never made.

Here is my HTML:

<div ng-controller="articleVotingCtrl"> <table class="table table-striped"> <tr> <th>Votes</th> <th>Title</th> <th>Category ID</th> </tr> <tr ng-repeat="articlevote in articlevotes"> <td> <div class="col-md-1 voting well"> <div class="votingButton" ng-click="upVote(articlevote);"> <i class="glyphicon glyphicon-chevron-up"></i> </div> <div class="badge badge-inverse"> <div>{{articlevote.articlevotes}}</div> </div> <div class="votingButton" ng-click="downVote(articlevote);"> <i class="glyphicon glyphicon-chevron-down"></i> </div> </div> </td> <td>{{articlevote.articletitle}}</td> <td>{{articlevote.articlecategoryid}}</td> </tr> </table> </div> 

Here is my controller (where the problem is probably there or in combination with my service):

 // Article Vote pfcControllers.controller('articleVotingCtrl', ['$scope', 'pfcArticles', function($scope, pfcArticles) { $scope.articlevotes = pfcArticles.query(); $scope.upVote = function(articlevote) { articlevote.articlevotes++; updateVote(articlevote.id, articlevote.articlevotes); }; $scope.downVote = function(articlevote) { articlevote.articlevotes--; updateVote(articlevote.id, articlevote.articlevotes); }; function updateVote(id, articlevotes) { pfcArticles.update({ articleID: id }), articlevotes; } }]); 

Here is my service:

  // All Articles pfcServices.factory('pfcArticles', ['$resource', function($resource) { return $resource('https://myrestcall.net/tables/articles', { articleID: '@id' }, { 'update': { method: 'PATCH' } }); }]); 

Here is an example of JSON data:

 [ { "id": "66D5069C-DC67-46FC-8A51-1F15A94216D4", "articletitle": "artilce1", "articlecategoryid": 1, "articlesummary": "article 1 summary. ", "articlevotes": 1 }, { "id": "66D5069C-DC67-46FC-8A51-1F15A94216D5", "articletitle": "artilce2", "articlecategoryid": 2, "articlesummary": "article 2 summary. ", "articlevotes": 3 }, { "id": "66D5069C-DC67-46FC-8A51-1F15A94216D6", "articletitle": "artilce3", "articlecategoryid": 3, "articlesummary": "article 3 summary. ", "articlevotes": 0 }, { "id": "66D5069C-DC67-46FC-8A51-1F15A94216D7", "articletitle": "artilce4", "articlecategoryid": 1, "articlesummary": "article 3 summary. ", "articlevotes": 5 }, ] 

Answer 1

I got it working by adapting the service to accept the identifier and changing my updatevote function to get the scope identifier and have a "success" handler. This post was very helpful: AngularJS: Understanding this PUT example

Now my service is as follows:

 pfcServices.factory('pfcArticles', ['$resource', function ($resource) { return $resource('https://myrestcall.net/tables/articles/:articleID', { articleID: '@id' }, { 'update': { method: 'PATCH' } } ); }]); 

And the controller is set to:

 pfcControllers.controller('articleVotingCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) { $scope.articlevotes = pfcArticles.query(); // Voting function $scope.upVote = function (articlevote) { articlevote.articlevotes++; var id = articlevote.id; var articlevotes = articlevote.articlevotes; updateVote(id, articlevotes); }; $scope.downVote = function (articlevote) { articlevote.articlevotes--; var id = articlevote.id; var articlevotes = articlevote.articlevotes; updateVote(id, articlevotes); }; function updateVote(id, articlevotes) { var vote = pfcArticles.get({ articleID: id}, function () { vote.articlevotes = articlevotes; vote.$update(); }); } }]); 

There were no settings in HTML.