AngularJS穿上投票应用程序REST服务 [英] AngularJS PUT on voting application to REST Service
问题描述
我一直在开发我的网站投票功能，但我新的使用AngularJS的$资源，我期待更新与我刚刚录制的表决现有记录。问题是，它没有更新，不给任何错误消息，在控制台日志中只是说我的REST调用所需CORS preflight，这使我相信它至少打到后端。
在发展这一点上，我相信我可能会关闭有关如何使用一个ID更新记录，因为在这种情况下，我没有一个$ routeparam传递，以供参考，但我试图从更新NG-重复具有投票功能的一部分。在屏幕上它的工作原理通过增加向上或向下，但这样，当我刷新页面，更改不持有，因为他们从来没有承诺不更新数据库。
下面是我的HTML：
＆LT; DIV NG控制器=articleVotingCtrl＆GT;
＆LT;表类=表的表条纹＆GT;
＆所述; TR＆GT;
＆LT;第i个投票＆LT; /第i
＆LT;第i个标题＆LT; /第i
＆LT;第i个类别ID＆LT; /第i
＆LT; / TR＆GT;
＆LT; TR NG重复=articlevote在articlevotes＆GT;
＆所述; TD＆GT;
＆LT; DIV CLASS =COL-MD-1投票以及＆GT;
＆LT; DIV CLASS =votingButtonNG点击=给予好评（articlevote）;＆GT;
＆LT; I类=glyphicon glyphicon - 雪佛龙达＆GT;＆LT; / I＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =徽章徽章逆＆GT;
＆LT; DIV＆GT; {{articlevote.articlevotes}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =votingButtonNG点击=downVote（articlevote）;＆GT;
＆LT; I类=glyphicon glyphicon-字形向下＆GT;＆LT; / I＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT; {{articlevote.articletitle}}＆下; / TD＆GT;
＆所述; TD＆GT; {{articlevote.articlecategoryid}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
下面是我的控制器（这是该问题可能是，或与我的服务）：
//文章投票
pfcControllers.controller（'articleVotingCtrl'，['$范围，pfcArticles'，函数（$范围，pfcArticles）{
$ scope.articlevotes = pfcArticles.query（）; $ scope.upVote =功能（articlevote）{
articlevote.articlevotes ++;
updateVote（articlevote.id，articlevote.articlevotes）;
}; $ scope.downVote =功能（articlevote）{
articlevote.articlevotes--;
updateVote（articlevote.id，articlevote.articlevotes）;
}; 功能updateVote（ID，articlevotes）{
pfcArticles.update（{
条款ArticleID：ID
}），articlevotes;
}
}]）;
下面是我的服务：
//全部文章
pfcServices.factory（'pfcArticles'，['$资源'，函数（$资源）{
返回$资源（'https://myrestcall.net/tables/articles'，{条款ArticleID：'@id'}，{
更新：{
方法：'补丁'
}
}）;
}]）;
下面是示例JSON数据：
[
{
ID：66D5069C-DC67-46FC-8A51-1F15A94216D4
articletitle：artilce1，
articlecategoryid：1，
articlesummary：第1条的总结。
articlevotes：1
}，
{
ID：66D5069C-DC67-46FC-8A51-1F15A94216D5
articletitle：artilce2，
articlecategoryid：2，
articlesummary：第2条的总结。
articlevotes：3
}，
{
ID：66D5069C-DC67-46FC-8A51-1F15A94216D6
articletitle：artilce3，
articlecategoryid：3，
articlesummary：第3条的总结。
articlevotes：0
}，
{
ID：66D5069C-DC67-46FC-8A51-1F15A94216D7
articletitle：artilce4，
articlecategoryid：1，
articlesummary：第3条的总结。
articlevotes：5
}，
]
我得到了它通过调整服务以接受一个ID，并改变我的updatevote功能接收范围的ID，并有一个成功的处理程序的工作。这个职位是非常有益的：<一href=\"http://stackoverflow.com/questions/22465894/angularjs-understanding-this-put-example\">AngularJS:了解这个PUT例如
我的服务如下内容：
pfcServices.factory（'pfcArticles'，['$资源'，函数（$资源）{
返回$资源（'https://myrestcall.net/tables/articles/:articleID'，{条款ArticleID：@id}，
{
更新：{方法：PATCH'}
}
）;
}]）;
和所述控制器被设置为：
pfcControllers.controller（'articleVotingCtrl'，['$范围，pfcArticles'，函数（$范围，pfcArticles）{$ scope.articlevotes = pfcArticles.query（）;//投票功能
$ scope.upVote =功能（articlevote）{
articlevote.articlevotes ++;
VAR ID = articlevote.id;
VAR articlevotes = articlevote.articlevotes;
updateVote（ID，articlevotes）;
};
$ scope.downVote =功能（articlevote）{
articlevote.articlevotes--;
VAR ID = articlevote.id;
VAR articlevotes = articlevote.articlevotes;
updateVote（ID，articlevotes）;
};功能updateVote（ID，articlevotes）{
VAR票= pfcArticles.get（{条款ArticleID：ID}，函数（）{
vote.articlevotes = articlevotes;
票$ update（）方法。
}）;
}
}]）;
有到HTML中没有调整。
I have been developing a voting function for my Website, but am newer to using AngularJS's $resource and am looking to "update" an existing record with the vote I just recorded. The issue is that it is not updating and is not giving any error messages, merely stating in the console log that my REST call required CORS preflight, which leads me to believe it is at least hitting the backend.
At this point in development, I believe I may be off on how to update a record with an ID, as in this case, I don't have a $routeparam to pass in for reference but am trying to update from an ng-repeat that has the voting functionality as part of it. On screen it works by incrementing up or down, but does not update the database so that when I refresh the page, the changes don't hold because they were never committed.
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 (which is where the issue probably is, 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 sample 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
},
]
I got it working by adapting the service to accept an id and changing my updatevote function to receive the scoped id and to have a "success" handler. This post was very helpful: AngularJS: Understanding this PUT example
My service is now 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 adjustments to the HTML.
这篇关于AngularJS穿上投票应用程序REST服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
