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
                })
            })
...