AngularJS1 + Django REST Frameworkに再挑戦 その6 Create Comment in Backend with $http
概要
AngularJS1 + Django REST Frameworkに再挑戦 その6 Create Comment in Backend with $http
参考動画
Django + AngularJS | Coding For Entrepreneurs
Create Comment in Backend with $http
$httpを使って、バックエンドで、コメント作成機能を実装する。
blog-detail.component.jsに、commentsの中身をscopeに渡すように設定する。
Post.get({"slug": $routeParams.slug}, function(data){ $scope.post = data $scope.comments = data.comments })
- blog-detail.htmlのcommentsの箇所を修正する。
<h3>Comments</h3> <div class='row' ng-show='comments.length > 0'> <div class='col-sm-6'> <input class='form-control' type='text' ng-model='query' placeholder='Filter Comments' /> <br/> </div> </div> <ul ng-show='comments.length > 0'> <li ng-repeat='comment in comments | filter: query'> {{ comment.content }} <a href='#' class='btn btn-sm btn-default' confirm-click='Do you want to delete this?' confirmed-click='deleteComment(comment)'>X</a> </li> </ul>
- blog-detail.component.jsに、$cookiesを継承するように設定しておく。
controller: function(Post, $cookies, $http, $location, $routeParams, $scope){
// "Authorization: JWT" '{"content":"some reply to another try"}' 'http://127.0.0.1:8000/api/comments/create/?slug=new-title&type=post&parent_id=13'
- addReply functionにコメント作成機能の実装していく。slugは $routeParams.slugで、持ってくる。
... var slug = $routeParams.slug Post.get({"slug": slug}, function(data){ ... $scope.addReply = function() { console.log($scope.reply) var req = { url: 'http://127.0.0.1:8000/api/comments/create/?slug=' + slug + '&type=post' data:{ content: $scope.reply.content } } $scope.comments.push($scope.reply) // $scope.post.comments.push("abc") resetReply() }
- tokenの有無でコメントできるかできないかを変更する。
$scope.addReply = function() { console.log($scope.reply) var token = $cookies.get("token") if (token){ var req = { method: "POST", url: 'http://127.0.0.1:8000/api/comments/create/?slug=' + slug + '&type=post', data:{ content: $scope.reply.content }, headers:{ authorization: "JWT " + token } } $scope.comments.push($scope.reply) // $scope.post.comments.push("abc") resetReply() } else { console.log("no token") } }
- $httpを利用して、tokenがある場合のreqの情報を送付する。
var requestAction = $http(req) requestAction.success(function(r_data, r_status, r_headers, r_config){ $scope.comments.push($scope.reply) }) requestAction.errors(function(e_data,e_status, e_headers, e_config){ console.log(e_data) })
resetReply()
functionは、requestAction.successの場合に組み込む。また、resetReply functionの内容も、text->contentに変更する。
function resetReply(){ $scope.reply = { "id": $scope.comments.length + 1, "content": "", } }
これでcommentを作成してみる。。。error!どうも、requestAction.errorsではなく、requestAction.errorが正解らしい。それを修正して試してみる。。。できた!
けど、tokenの期限が切れている場合はうまくいかないらしい。これは後で対応するとのこと。
comment delete機能も使ってみる。。。表面上は消えたように見えるが、ページを更新するとまた表示されてしまう。これを解消するには、結構難しい処理が必要らしい。
今回もなかなかヘビーだった。