読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1.5に再挑戦 その9 ng-resource for mapping to a Restful API

概要

AngularJS1.5に再挑戦 その9 ng-resource for mapping to a Restful API

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

ng-resource for mapping to a Restful API

  • coreフォルダ、postフォルダ、post.service.js, post.module.jsを作成する。なぜcoreフォルダという名称のものを作成するかというと、ここにREST API向けへのmappingをするためのモジュールがここに入っており、その機能はangularのcoreだからとかそういう感じのニュアンスで言ってたと思う(^ ^;)

  • post.module.jsにコードを書いていく。

'use strict';

angular.module('post', []);
  • post.service.jsにコードを書いていく(なんで、ここは、service.jsなんだろうな。)
'use strict';

angular.
    module('post'). # こっちは、post
        factory('Post', function($resource){ //こっちの名前は、Post
            var url = '/json/posts.json'
            return $resource(url, {}, {
                query:{
                    method: "GET",
                    params: {},
                    isArray: true,
                    cache: true, //cacheはスピードアップするからつけることが多いとのこと。
                    // transformResponse
                    // interceptor
                }
                get:{
                    method: "GET",
                    // params: {"id": @id},
                    isArray: true,
                    cache: true,
                }
            })

        });
  • index.htmlに追記する。
        <script src='/js/app/core/post/post.module.js' ></script>
        <script src='/js/app/core/post/post.service.js' ></script>
  • blog-detail.module.jsにPost moduleを追加する。
'use strict';

angular.module('blogDetail', ["post"]); //モジュール名は、小文字
  • blog-detail.components.jsにPostを追加する。
'use strict';

angular.module('blogDetail').
    component('blogDetail', {
        templateUrl: '/templates/blog-detail.html',
        controller: function(Post, $http, $location, $routeParams, $scope){//Postモジュールを追加する。

            console.log(Post.query())//これで、Postで定義したqueryメソッドが利用できる。
            console.log(Post.get())//これで、Postで定義したgetメソッドが利用できる。
...
  • この状態で、detail ページにアクセスすると、consoleにquery, getで指定したデータが表示される。

  • つまりここまでの流れは、以下の通りか?

* post.service.jsで、postモジュールを定義する。
* postモジュールは、'/json/posts.json'にアクセスして、データを整形する(mappingする)役割がある。
* そのためのメソッドをqueryメソッド, getメソッドでそれぞれ定義する。
* index.htmlにそのpostモジュール関連のファイルを読み込ませる。post.serviceとpost.module
* blog-detail.module.jsに、postモジュールを読み込ませる。
* blog-detail.components.jsの関数に、Postモジュールを継承させて、queryメソッド、getメソッドを使えるようにする。
* queryメソッド、getメソッドで、取得したデータは、その関数内で自由に利用できる。
  • 以下のようにコードを追記すると、$http.getで取得して整形した時と同じような結果が得られる。
...
        controller: function(Post, $http, $location, $routeParams, $scope){//Postモジュールを追加する。

            console.log(Post.query())//これで、Postで定義したqueryメソッドが利用できる。
            console.log(Post.get())//これで、Postで定義したqueryメソッドが利用できる。

            Post.query(function(data){
                angular.forEach(data, function(post){
                    if (post.id == $routeParams.id){
                        $scope.notFound = false
                        $scope.post = post
                    }
                })
            })
...
  • 最終的に以下のようなすっきりしたコードになる。
'use strict';

angular.module('blogDetail').
    component('blogDetail', {
        templateUrl: '/templates/blog-detail.html',
        controller: function(Post, $http, $location, $routeParams, $scope){//Postモジュールを追加する。

            console.log(Post.query())//これで、Postで定義したqueryメソッドが利用できる。
            console.log(Post.get())//これで、Postで定義したqueryメソッドが利用できる。

            Post.query(function(data){
                angular.forEach(data, function(post){
                    if (post.id == $routeParams.id){
                        $scope.notFound = false
                        $scope.post = post
                    }
                })
            })

            // notFoundがtrueの場合
            if ($scope.notFound){
                console.log("Not found")
                // change location。これには、$locationの継承が必要。
                $location.path("/404")
            }
        }
    });
  • blog-list.module.jsと、blog-list.components.jsも同様に処理してみる。
'use strict';

angular.module('blogList', ["post"]);
'use strict';

angular.module('blogList').
    component('blogList', {
        templateUrl: '/templates/blog-list.html',
        controller: function(Post, $routeParams, $scope){

            $scope.items = Post.query();

        }
    });
  • すげー!!めっちゃシンプルになった。

  • 使うときは、公式サイト確認した方がいいよとのこと。

AngularJS