AngularJSの$routeサービスと$resourceサービスを使ったサンプルを作成

１）インクルード、モジュールの依存性の設定
　
・ビューで下記ファイルをインクルード
<script src=”js/angular-route.min.js”></script>
　
・スクリプトで依存性を設定
var demoApp = angular.module(‘demoApp’, [‘ngRoute’]);
　
２）ルート設定の概要
　
・モジュールのconfigメソッドで$routeProviderのwhenメソッドを使ってルートの設定を行う。
　
・whenメソッドで明示的に指定したルートにマッチしなかった場合に表示する内容をotherwiseメソッドで設定できる。
　
○構文
when(path, route);
otherwise(params);

例）

demoApp.config(function($locationProvider,$routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when("/ng/resource/users_r", {
      templateUrl: "/wp/template/user_index.html",
      controller: "UsersIndexCtrl" })
    .when("/ng/resource/users_r/:id", {
      templateUrl: "/wp/template/user_show.html",
      controller: "UsersShowCtrl" })
    .otherwise({
      templateUrl: "/wp/template/user_main.html",
      controller: "UsersMainCtrl" });
});

　
３）ルート設定のルートパラメータ
　
when(path, route)メソッドの引数のroute部分でオブジェクトで指定します。
　
①templateUrl
　
・テンプレートビューファイルのURL又はURLをリターンする関数を指定。
　
②template
　
・テンプレートビューのコンテンツを別ファイルではなく、インラインに記述。
　
③controller
　
・コントローラを明示的に指定し、そのコントローラで設定した値をテンプレートビュー内にバインドして表示できる。
　
・設定したルートにマッチし、テンプレートビューがインクルードされて表示される度にコントローラのインスタンスが生成される。
　
④redirectTo
　
・ルートがマッチした際、ブラウザにリダイレクトさせるパスを指定。
　
⑤resolve
　
・controllerパラメータで指定したコントローラに対して依存性を指定。
　
依存性にpromiseを使用している場合、すべてのpromiseが解決されるのを待ってから対象のコントローラのインスタンスを生成する。
　
４）path設定と$routeParamsサービス
　
・”:”とルートパラメータ名を使ってルートパラメータを設定できる。
　
・”*”を指定するとURLの複数のスラッシュ部分をルートパラメータに取得できる。
　
・”?”を指定するとオプションとして指定でき、指定した部分が含まれていないURLでもマッチさせる事が出来る。
　
例１）
.when(“/ng/resource/users_r/:id”,
　
URLのパスが”/ng/resource/users_r/1234″や”/ng/resource/users_r/show”などの場合、”1234″や”show”が$routeParamsサービスのid属性に保持され、スクリプト内で取得できる。
　
例２）*を使った例
.when(“/color/:color/largecode/:largecode*\/edit”,
　
マッチしたURLの”/color/”と”/largecode/”間の文字列が$routeParams.colorに保持される。
　
:largecode*のように”*”を指定するとURLの複数のスラッシュ部分をルートパラメータに保持することが出来る。
　
URLが”/color/brown/largecode/code/with/slashes/edit”の場合は、”code/with/slashes”が$routeParams.largecodeに保持される。
　
例３）オプションのパラメータ
.when(“/views/:param1?/:param2?”,
　
URLが”/views/value1″の場合、”/:param2″にはマッチしていないが、?がついてオプションのパラメータとして指定されているのでこのURLもマッチする。

下記$resourceサービスを使ったサンプルにルート設定を追加しました。
$resouceサービスを使ったサンプル。
　
１）ルート設定

demoApp.config(function($locationProvider,$routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when("/ng/resource/users_r", {
      templateUrl: "/wp-content/themes/wp/template/user_index.html",
      controller: "UsersIndexCtrl" })
    .when("/ng/resource/users_r/main", {
      templateUrl: "/wp-content/themes/wp/template/user_main.html",
      controller: "UsersMainCtrl" })
    .when("/ng/resource/users_r/new", {
      templateUrl: "/wp-content/themes/wp/template/user_new.html",
      controller: "UsersNewCtrl" })
    .when("/ng/resource/users_r/:id", {
      templateUrl: "/wp-content/themes/wp/template/user_show.html",
      controller: "UsersShowCtrl" })
    .when("/ng/resource/users_r/:id/edit", {
      templateUrl: "/wp-content/themes/wp/template/user_edit.html",
      controller: "UsersEditCtrl" })
    .otherwise({
      templateUrl: "/wp-content/themes/wp/template/user_main.html",
      controller: "UsersMainCtrl" });
});

２）各テンプレートビューを別ファイルで作成
　
３）$resourceサービスのREST設定をサービスで定義
　
ルート設定で各テンプレートビュー毎にコントローラを定義しているので、各コントローラからアクセスできるように$resourceサービスのREST設定をサービスとしてていぎします。

demoApp.factory("userResource", function($resource) {
  return $resource("/resource/users/:id", { id: "@id" },{
      'create':  { method: 'POST' },
      'index':   { method: 'GET', isArray: true },
      'show':    { method: 'GET', isArray: false },
      'update':  { method: 'PUT' },
      'destroy': { method: 'DELETE' }
    }
  );
});

４）各テンプレートビューに対応するコントローラを作成

demoApp.controller("UsersShowCtrl", function($scope, userResource,$routeParams,$location){
  userResource.show({ id: $routeParams.id },function(data, headers){
      $scope.user = data;
    },function(err) {
      $scope.Result = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
  $scope.edit = function(id) {
    $location.path("/ng/resource/users_r/" + id + "/edit");
  };
  $scope.cancel = function() {
    $location.path("/ng/resource/users_r/main");
  };
});

・ルート設定でルートパラメータにマッチした文字列を$routeParams.idで取得しています。
　
・テンプレートビュー内で下記リンクボタンを押下すると$location.pathで指定したパスに遷移します。
<button class=”btn btn-primary” ng-click=”edit(user.id)”>ユーザ情報変更</button>
　
デモとコードサンプルはこちら。