angular.jsをやってみる (9) - $resourceのparamsDefaultにおける@接頭辞 -

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

前回のangular.jsをやってみる (8) – $resource -でも述べているように、paramsDefaultのパラメーターには@な接頭辞を持つデータ指定を利用する事が出来る

例えば以下ような感じで

angular.module("app", ["ngResource", "ngRoute"])
  .factory("Sample", ["$resource", function($resource) {
    return $resource(
      "/sample/:id.json",
      { id: "@id" }, // paramsDefault
      {},
      {
        query: { method: "GET", isArray: true }
      }
    );
  }]);

でangular.jsのドキュメント(日本語訳サイトからの引用)によると「もしパラメータの値に接頭辞として@が付いていた場合、 そのパラメータの値は、データオブジェクトから抽出されます。(GETを使用しない操作で便利です。)」っていう事らしい。恐らくはパラメーターに対してオブジェクトのインスタンスからプロパティ的なのから作用されるようになる物な感じだと思う(合ってるかは定かじゃないけど)

まぁ実例だした方が手っ取り早いと思うのだけど、例えばRailsとかのresourceコントローラーのルーティング定義の場合

sample_index GET    /sample(.:format)          sample#index
             POST   /sample(.:format)          sample#create
  new_sample GET    /sample/new(.:format)      sample#new
 edit_sample GET    /sample/:id/edit(.:format) sample#edit
      sample GET    /sample/:id(.:format)      sample#show
             PATCH  /sample/:id(.:format)      sample#update
             PUT    /sample/:id(.:format)      sample#update
             DELETE /sample/:id(.:format)      sample#destroy

ていうようなルーティング定義が行われている。例えばここで言うとupdateを行うには/sample/1.json等のようなリクエストを行い尚且リクエストメソッドがPUTかPATCHメソッドであれば良い。恐らくはdestroyなやつを作用させる場合も同様だと思うけどそこ(destroy)は今回触れない

で述べたようにupdateリクエストを行うにはURLパラメーターとしてIDが指定されていなければならない。そういうケース等においてはparamsDefaultにおいて@接頭辞なのを利用する事で解決できる模様

angular.module("app", ["ngResource", "ngRoute"])
  .config(function($routeProvider) {
    $routeProvider
      .when("/sample", {
        controller: "ListCtrl",
        templateUrl: "list.html"
      })
      .when("/sample/:id", {
        controller: "ShowCtrl",
        templateUrl: "entry.html"
      })
      .otherwise({ redirectTo: "/sample" });
  })
  .factory("Sample", ["$resource", function($resource) {
    return $resource(
      "/sample/:id.json",
      { id: "@id" },
      {
        query: { method: "GET", isArray: true },
        update: { method: "PUT" } // updateはPUTリクエストメソッドを使用するように設定
      }
    );
  }])
  .controller("ListCtrl", function($scope, Sample) {
    $scope.samples = Sample.query();
  })
  .controller("ShowCtrl", function($scope, $routeParams, $location, Sample) {
    $scope.sample = Sample.get({ id: $routeParams.id });
    $scope.update = function(sample) {
      // $updateなメソッドで実行するとPUTなリクエストメソッドでsample変数のidがURLに埋め込まれた形でリクエストされる(上記の設定内容であれば/sample/[sample.id].json)
      sample.$update(function() {
        // updateな処理が正常?に完了した場合には一覧(#/sample)のルーティングに戻る
        $location.path("/sample");
      });
    };
  });

っていう感じかなと実感遠回りした気分がするけど、要はリクエストするパラメーターはオブジェクトから作用させる事が出来るようになるって事なんじゃないのかなと

gradleプラグインを作ってみる (1) angular.jsをやってみる (8) - $resource -