AngularJS1.5に再挑戦 その9 ng-resource for mapping to a Restful API
概要
AngularJS1.5に再挑戦 その9 ng-resource for mapping to a Restful API
参考動画・参考サイト
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(); } });
すげー!!めっちゃシンプルになった。
使うときは、公式サイト確認した方がいいよとのこと。