AngularJS1 + Django REST Frameworkに再挑戦 その9 Comment ngResource
概要
AngularJS1 + Django REST Frameworkに再挑戦 その9 Comment ngResource
参考動画
Django + AngularJS | Coding For Entrepreneurs
Comment ngResource
ngResource は、$httpを含んでおり、サーバとHTTP通信でデータのやりとりをするものなのかな。
core/post/post.module.jsのモジュール名を、post->core.post に名前を変更する(よりロバストにするため。)
core/comment フォルダを作成。
core/comment/comment.module.jsと、comment.service.jsを作成する。
comment.module.jsにコードを追記する。
'use strict'; angular.module('core.comment', []);
- comment.service.jsを作成する。
'use strict'; angular. module('core.comment'). factory('Comment', function($resource){ var url = '/api/comments/' return $resource(url, {}, { query: { method: "GET", params: {}, isArray: true, cache: false, transformResponse: function(data, headerGetter, status){ // console.log(data) var finalData = angular.fromJson(data) return finalData.results } // interceptor }, get: { method: "GET", params: {"slug": "@slug"}, isArray: false, cache: false, } }) });
まず、
var url = '/api/comments/'
に変更する。commentのjsonデータをゲットするために、
var commentQuery
をセットする。
var commentQuery = { url: url, method: "GET", params: {}, isArray: true, cache: false, transformResponse: function(data, headerGetter, status){ // console.log(data) var finalData = angular.fromJson(data) return finalData.results }
- 同様に
var commentGet
をセットする。ここで注意すべきなのは、url + ":id/"
としているところ。
var commentGet = { url: url + ":id/" method: "GET", params: {"id": "@id"}, isArray: false, cache: false, }
全体のデータのゲットは、commentQueryで、個別コメントのゲットは、commentGetでJSONデータを取得するのか。ということはcommentGetの方でもtransformResponseが必要になりそうだけど、どうなんだろうな。
現在はcomment.service.jsは、以下のようなコードになっている。
'use strict'; angular. module('core.comment'). factory('Comment', function($resource){ var url = '/api/comments/' var commentQuery = { url: url, method: "GET", params: {}, isArray: true, cache: false, transformResponse: function(data, headerGetter, status){ // console.log(data) var finalData = angular.fromJson(data) return finalData.results } } var commentGet = { url: url + ":id/" method: "GET", params: {"id": "@id"}, isArray: false, cache: false, } return $resource(url, {}, { query: commentQuery, get: commentGet, }) });
- core.commentをblog-detail.component.jsに組み込んでみる。
... angular.module('blogDetail'). component('blogDetail', { templateUrl: '/api/templates/blog-detail.html', controller: function(Comment, Post, $cookies, $http, $location, $routeParams, $scope){ var slug = $routeParams.slug Post.get({"slug": slug}, function(data){ $scope.post = data // $scope.comments = data.comments // Commentをslugと、type(contenttype)で絞り込んでおく。 Comment.query({"slug": slug, "type":"post"}, function(data){ $scope.comments = data }) }) ...