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

AngularJSの$routeサービスを使って各URLに対応してカスタムビューを表示、$resourceサービスを使ったサーバーアクセスと組み合わせたサンプルを作成してみました。

・デモとコードサンプルはこちら
 
・$resourceサービスについては以下の記事も参照。
AngularJSの$resourceサービスを使ってREST
 
※目次をクリックすると目次の下部にコンテンツが表示されます。

$routeサービスの概要
・$routeサービスは、コントローラ、ビューテンプレート、ブラウザのURLを結びつける事ができる。(ブラウザのURLに応じてコントローラ、テンプレートビューを選択する)
 
・メインビュー内のng-viewディレクティブ<div ng-view></div&gtを記述した部分にルート設定でマッチしたURLに対応するビューテンプレートをインクルードする事が出来る。
 
・$routeサービスはAngularJS本体には含まれていないので、別途angular-route.min.jsを入手してインクルードする必要がある。

$routeサービスの使用方法
1)インクルード、モジュールの依存性の設定
 
・ビューで下記ファイルをインクルード
<script src=”js/angular-route.min.js”></script>
 
・スクリプトで依存性を設定
var demoApp = angular.module(‘demoApp’, [‘ngRoute’]);
 
2)ルート設定の概要
 
・モジュールの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" });
});

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

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

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" });
});

2)各テンプレートビューを別ファイルで作成
 
3)$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' }
    }
  );
});

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

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>
 
デモとコードサンプルはこちら

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください