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