angular.jsをやってみる (8) - $resource -

2014-03-19T00:00:00+00:00 angular.js JavaScript

REST and Custom Servicesを見つつやってみる。でRESTfulなWebサービス的なのが必要なので今回はRailsで適当なのでっち上げてやってみる。つまりangular.jsとかソッチ系も全部Railsプロジェクト内に作る

Railsプロジェクトの構築

以前にRails assets pipelineっていうネタでやってた事あるけど、それと同様でGemfileに

gem "angularjs-rails"

辺りを追加する。でapp/assets/javascripts/application.jsで

//= require angular
//= require angular-resource
//= require angular-route

辺りを追加。あとは適当にJSONレスポンスを返すリソースルーティングによるコントローラーを実装しておく。ここは(ry

public/index.html

<html ng-app="app">
  <head>
    <script src="assets/application.js"></script>
  </head>
  <body>
    <div ng-view />
  </body>
</html>

的な感じで作る。前回のngRouteを使ってやるのでng-viewにディレクティブを追加するだけ

あとはapp/assets/javascripts/app-module.js辺りを書く

app/assets/javascripts/app-module.js

angular.module("app", ["ngResource", "ngRoute"])
  .config(function($routeProvider) {
    $routeProvider
      .when("/sample", {
        controller: "ListCtrl",
        templateUrl: "list.html"
      })
      .when("/sample/:id", {
        controller: "ShowCtrl",
        template: "{% raw %}{{sample.name}}{% endraw %}"
      })
      .otherwise({ redirectTo: "/sample" });
  })
  .factory("Sample", ["$resource", function($resource) {
    // Sample.queryで/sample.jsonにリクエスト
    // Sample.getでsample/:id.jsonにリクエスト
    return $resource(
      "/sample/:id.json",
      {}, // paramDefaults
      {
        query: { method: "GET", isArray: true }
      } // actions
    );
  }])
  .controller("ListCtrl", function($scope, Sample) {
    $scope.samples = Sample.query();
  })
  .controller("ShowCtrl", function($scope, $routeParams, Sample) {
    $scope.sample = Sample.get({ id: $routeParams.id });
  });

$resourceの公式リファレンスを見れば分かるけど

  • get
  • save
  • query
  • remove
  • delete

っていうメソッドを持ったオブジェクトが返される模様。で第3引数のactionsにてそのリクエストに伴う設定等を行う事も出来る模様。

ちなみに$が付いたアクションもあるけど、これ英語の解釈が正しいかは不明だが「インスタンスメソッドかそうじゃないかの違い」なんじゃないかと。$が接頭辞でついてるactionsに関してはインスタンスメソッドとして利用可能な模様

あとこれも公式リファレンスに書いてるけど、paramDefaultsにおいて@な接頭辞が付くパラメーターに関しては後日別途で書く予定なのでここでは省略

ていう事でRESTfulなリソースAPIと連携して利用するようなケースであればangular-resource.jsな$resourceを使うと便利っていう事で

angular.jsをやってみる (7) - route -