アーカイブ

AngularJSを使ってGoogleマップ(1)google-mapディレクティブを使って地図を表示

AngularJSを使ってGoogleマップを表示する方法についてです。
 
WordPressの投稿本文にGoogleマップを表示するために必要な環境設定については下記記事を参照下さい。
WordPressでAngularJSを使ったGoogleマップを使えるようにする
続きを読む

関連記事の目次

AngularJSとBootstrap3を使ってページング

AngularJSとBootstrap3を使って一覧データをページングで表示するサンプルコードを作成しました。

デモとコードサンプルはこちら
 
Bootstrap3によるCSS設定、AngularJSのビルトインフィルター、カスタムフィルターなど様々な機能を使用していてコードが少し長くなっているので、3段階のステップに分けて作成しています。
 
※目次をクリックすると目次の下部にコンテンツが表示されます。

配列データをオフセットと表示個数を指定して表示
一覧情報をページ化して表示するには、オフセット(配列内のどのデータから表示するか)と表示個数を制御する必要があります。
 
まず、AngularJSのフィルターを使って、配列内のデータからオフセットと表示個数を指定して表示するサンプルを作成します。
 
表示個数は、下記のようにビルトインフィルターのlimitToを使って制御する事が出来ます。
 
<tr ng-repeat=”item in friends | offset: i_offset | limitTo: i_size”>
 
オフセットは、下記カスタムフィルターを定義し、入力配列データから指定した個数のデータをsliceで除去しています。このカスタムフィルターを使って、指定したオフセット数以降のデータを表示出来ます。
 

myApp.filter('offset', function() {
  return function(input, start) {
    start = parseInt(start);
    return input.slice(start);
  };
});

配列データをページングで表示
1)ページ数の計算、Bootstrap3のpagination属性を使ってページリンク表示
 
1ページ当りの表示件数を基にページ数を計算し、ページ数分のページリンクをBootstrap3のpagination属性を使って表示します。
 
①ページ数の計算
 
itemsPerPageがページ当りの件数で、配列データ数を割ってページ数を求めます。ページ数分のページ番号をリターンします。

$scope.itemsPerPage = 3;
$scope.range = function() {
  $scope.maxPage = Math.ceil($scope.friends.length/$scope.itemsPerPage);
  var ret = [];
  for (var i=1; i<=$scope.maxPage; i++) {
    ret.push(i);
  }
  return ret;
};

 
②Bootstrap3のpagination属性を使ってページリンク表示
 
Bootstrap3のページングの機能http://getbootstrap.com/components/#paginationを使ってページリンクを表示します。
 
上記①で定義したrange()関数を使ってページ番号をリターンし、ページ番号のリンクを表示しています。
ng-repeat="n in range()"

<ul class="pagination">
  <li>
    <a href="#" ng-click="prevPage()">≪ 前へ</a>
  </li>
  <li ng-repeat="n in range()" ng-click="setPage(n)">
    <a href="#">{{n}}</a>
  </li>
  <li>
    <a href="#" ng-click="nextPage()">次へ ≫</a>
  </li>
</ul>

 
2)リンククリック時の動作を定義
 
①現在表示しているページ番号を示す変数の初期値を定義
 
$scope.currentPage = 1;
 
②ページ当りの表示個数
 
<input ng-model="itemsPerPage" type="text">
 
③配列データを表示
 
現在のページ番号$scope.currentPageとページ当りの表示個数を指定して、指定したページのデータを表示します。上記(1)のサンプルコードを同じ仕組みです。
 
<tr ng-repeat="item in friends | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
 
④ページ番号リンククリック時の動作を定義
 
ページ番号をクリックすると$scope.currentPageにそのページ番号を設定します。これで上記③のオフセットが変更され、指定したページのデータを表示出来ます。

(HTML)
<li ng-repeat="n in range()" ng-click="setPage(n)">
  <a href="#">{{n}}</a>
</li>
(スクリプト)
$scope.setPage = function(n) {
  $scope.currentPage = n;
};

 
⑤前後のページへのリンク押下時の動作定義
 
上記④と同様に$scope.currentPageの値を更新します。
(ビュー)

<a href="#" ng-click="prevPage()">≪ 前へ</a>
<a href="#" ng-click="nextPage()">次へ ≫</a>

(スクリプト)
$scope.prevPage = function() {
  if ($scope.currentPage > 1) {
    $scope.currentPage--;
  }
};
$scope.nextPage = function() {
  if ($scope.currentPage < maxPage) {
    $scope.currentPage++;
  }
};

ページリンクのCSS設定
現在表示しているページのページリンクの色を変える、先頭ページを表示している場合は"前へ"のリンクを、最後のページを表示している場合は"次へ"のリンクを無効にするように設定します。
 
AngularJSのng-classを使ってBootstrap3のpagenationのactive、disableを動的に設定して切替えます。
 
①現在表示しているページ番号のリンクをアクティブにする
 
AngularJSのng-classを使って、リンクのページ番号nと現在表示しているページ番号currentPageが等しい場合は、"active"のCSSクラスを動的に追加し、色を変更できます。
 
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
 
②前後のページへのリンクの有効、無効を切替え
 
上記①と同様にng-classを使って、現在のページが先頭または最後かどうかチェックし、マッチした場合は、"disabled"のCSSクラスを動的に追加し、リンクを無効にします。

(HTML)
<ul class="pagination">
  <li ng-class="prevPageDisabled()">
    <a href="#" ng-click="prevPage()">≪ 前へ</a>
  </li>
  :
  <li ng-class="nextPageDisabled()">
    <a href="#" ng-click="nextPage()">次へ ≫</a>
  </li>
</ul>
 
(スクリプト)
$scope.prevPageDisabled = function() {
  return $scope.currentPage === 1 ? "disabled" : "";
};

$scope.nextPageDisabled = function() {
  return $scope.currentPage === $scope.maxPage ? "disabled" : "";
};

関連記事の目次

AngularJSコードサンプル(カスタムディレクティブ)

AngularJS : 1.6.5
Bootstrap : 3.3.7
 
※v1.2.3のサンプルはこちら
 
■目次
(1)基本的なカスタムディレクティブの作成方法
(2)子スコープ、隔離スコープの設定
(3)transcludeオプション、ng-transcludeディレクティブの使用例
(4)ディレクティブ内でコントローラを生成し、他のディレクティブで利用
(5)compile関数の使用例
 

(1)基本的なカスタムディレクティブの作成方法

1)カスタムディレクティブを使用しない場合

  1. {{item.product_name}} : {{item.price | number:0}}円

2)カスタムディレクティブを使用した場合


1)カスタムディレクティブを使用しない場合
<ol>
  <li ng-repeat='item in products'>
    {{item.product_name}} : {{item.price | number:0}}円
  </li>
</ol>
2)カスタムディレクティブを使用した場合
<div products-list="products"></div>

var demoApp = angular.module('demoApp', []);
demoApp.controller("cus1Ctrl", function($scope) {
  $scope.products = [
    {product_name: "デジタルカメラ",price: 8500},
    {product_name: "ノートパソコン",price: 39000},
    {product_name: "テレビ",price: 15900},
    {product_name: "ファンヒーター",price: 9800}
  ];
});

demoApp.directive("productsList", function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs["productsList"]];
    },
    scope: true,
    template: "<ol><li ng-repeat='item in data'>{{item.product_name}} : {{item.price | number:0}}円</li></ol>",
    restrict: "A"
  }
});

(2)子スコープ、隔離スコープの設定

0)親スコープと共有:商品リスト(カメラ、テレビ、パソコン)

①親スコープ
フィルター(変数name)

②カスタムディレクティブA

③カスタムディレクティブB

1)子スコープ:商品リスト(カメラ、テレビ、パソコン)

①親スコープ
フィルター(変数name)

②カスタムディレクティブA

③カスタムディレクティブB

2)隔離スコープ(2Way):商品リスト(カメラ、テレビ、パソコン)

①親スコープ
変数parebind

②カスタムディレクティブA

③カスタムディレクティブB

3)隔離スコープ(1Way):商品リスト(カメラ、テレビ、パソコン)

①親スコープ
変数parebind

②カスタムディレクティブA

③カスタムディレクティブB

4)隔離スコープ(親スコープの関数を実行)

①親スコープ
会員非会員

②カスタムディレクティブA

③カスタムディレクティブB


0)親スコープと共有:商品リスト(カメラ、テレビ、パソコン)<br />
<p>
  <strong>①親スコープ</strong><br />
  <span>フィルター(変数name)<input ng-model=name /></span></br>
</p>
<strong>②カスタムディレクティブA</strong><br />
<div ordered-list0="products"></div>
<strong>③カスタムディレクティブB</strong><br />
<div ordered-list0="products"></div>
1)子スコープ:商品リスト(カメラ、テレビ、パソコン)<br />
<p>
  <strong>①親スコープ</strong><br />
  <span>フィルター(変数name)<input ng-model=name /></span></br>
</p>
<strong>②カスタムディレクティブA</strong><br />
<div ordered-list1="products"></div>
<strong>③カスタムディレクティブB</strong><br />
<div ordered-list1="products"></div>
2)隔離スコープ(2Way):商品リスト(カメラ、テレビ、パソコン)<br />
<p>
  <strong>①親スコープ</strong><br />
  <span>変数parebind<input ng-model="parebind" /></span></br>
</p>
<strong>②カスタムディレクティブA</strong><br />
<div ordered-list2 namescope="products" bindscope="parebind"></div>
<strong>③カスタムディレクティブB</strong><br />
<div ordered-list2 namescope="products" bindscope="parebind"></div>
3)隔離スコープ(1Way):商品リスト(カメラ、テレビ、パソコン)<br />
<p>
  <strong>①親スコープ</strong><br />
  <span>変数parebind<input ng-model="parebind" /></span></br>
</p>
<strong>②カスタムディレクティブA</strong><br />
<div ordered-list3 namescope={{products}} bindscope={{parebind}}></div>
<strong>③カスタムディレクティブB</strong><br />
<div ordered-list3 namescope={{products}} bindscope={{parebind}}></div>
4)隔離スコープ(親スコープの関数を実行)<br />
<p>
  <strong>①親スコープ</strong><br />
  <input type="radio" ng-model="group" value="member">会員<input type="radio" ng-model="group" value="">非会員<br/>
</p>
<strong>②カスタムディレクティブA</strong><br />
<div ordered-list4 namescope="products" bindscope="parebind" feescope="getFee(group)"></div>
<strong>③カスタムディレクティブB</strong><br />
<div ordered-list4 namescope="products" bindscope="parebind" feescope="getFee(group)"></div>

var demoApp = angular.module('demoApp', []);

demoApp.controller("scopeCtrl", function($scope) {
  $scope.products = [
    {product_name: "デジタルカメラA",price: 8500},
    {product_name: "ノートパソコンA",price: 39000},
    {product_name: "テレビA",price: 15900},
    {product_name: "デジタルカメラB",price: 9800},
    {product_name: "テレビB",price: 25900}
  ];
  $scope.name = "カメラ";
  $scope.parebind = "親スコープで設定した初期値";
  $scope.group = "member";
  $scope.getFee = function (grp) {
    return grp == "member" ? "送料は無料です。" : "送料は1商品1,000円です。";
  }
});

demoApp.directive("orderedList0", function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs["orderedList1"]];
    },
    scope: false,
    template: "<p>フィルター(変数name): <input ng-model=name /></p><ol><li ng-repeat='item in data | filter: name'>{{item.product_name}} : {{item.price | number:0}}円</li></ol></p>",
    restrict: "A"
  }
});

demoApp.directive("orderedList1", function () {
  return {
    link: function (scope, element, attrs) {
      scope.data = scope[attrs["orderedList1"]];
    },
    scope: true,
    template: "<p>フィルター(変数name): <input ng-model=name /></p><ol><li ng-repeat='item in data | filter: name'>{{item.product_name}} : {{item.price | number:0}}円</li></ol></p>",
    restrict: "A"
  }
});

demoApp.directive("orderedList2", function () {
  return {
    scope: {
      localname: "=namescope",
      localbind: "=bindscope"
    },
    template: "<p>2Way(変数localbind): <input ng-model=localbind /><br />フィルター(変数key): <input ng-model=key /><ol><li ng-repeat='item in localname | filter: key'>{{item.product_name}} : {{item.price | number:0}}円</li></ol></p>",
    restrict: "A"
  }
});

demoApp.directive("orderedList3", function () {
  return {
    scope: {
      localname: "@namescope",
      localbind: "@bindscope"
    },
    template: "<p>1Way(変数localbind): <input ng-model=localbind /><br />データ(変数localname): {{localname}}</p>",
    restrict: "A"
  }
});

demoApp.directive("orderedList4", function () {
  return {
    scope: {
      localname: "=namescope",
      localbind: "=bindscope",
      localfee: "&feescope"
    },
    template: "<p><ol>  <li ng-repeat='item in localname | filter: key'>{{item.product_name}} : {{item.price | number:0}}円</li></ol><span>※{{localfee()}}<span></p>",
    restrict: "A"
  }
});

(3)transcludeオプション、ng-transcludeディレクティブの使用例


{{text}}


<input type="text" ng-model="title"><br/>
<textarea ng-model="text" rows="3"></textarea><br/>
<panel title="{{title}}">{{text}}</panel>

var demoApp = angular.module('demoApp', []);

demoApp.controller("transCtrl", function($scope) {
  $scope.title = 'パネルのタイトル';
  $scope.text = 'パネルの本文';
});

demoApp.directive("panel", function () {
  return {
    restrict: "E",
    scope: { title:'@' },
    template: '<div class="panel panel-default"><div class="panel-heading"><h4>{{title}}</h4></div><div class="panel-body"><p ng-transclude></p></div></div>',
    transclude: true,
  }
});

(4)ディレクティブ内でコントローラを生成し、他のディレクティブで利用

商品名 単価 個数
合計金額(税込): {{totalPrice | number:0}}円

<table class="table table-striped" product-total="totalPrice"
       product-data="products">
  <tr><th>商品名</th><th>単価</th><th>個数</th></tr>
  <tr ng-repeat="item in products" product-item></tr>
  <tr><th>合計金額(税込):</th><td colspan="2">{{totalPrice | number:0}}円</td></tr>
</table>

var demoApp = angular.module('demoApp', []);

demoApp.controller("ctlCtrl", function($scope) {
  $scope.products = [
    { name: "商品A", price: 100, quantity: 2 },
    { name: "商品B", price: 150, quantity: 3 },
    { name: "商品C", price: 200, quantity: 1 }
  ];
});

demoApp.directive("productItem", function () {
  return {
    template: "<td>{{item.name}}</td><td>{{item.price}}</td><td><input ng-model='item.quantity' /></td>",
    require: "^productTotal",
    link: function (scope, element, attrs, ctrl) {
      scope.$watch("item.quantity", function () {
        ctrl.updateTotal();
      });
    }
  }
});

demoApp.directive("productTotal", function () {
  return {
    scope: { total: "=productTotal", data: "=productData" },
    controller: function ($scope, $element, $attrs) {
      this.updateTotal = function() {
        var calc = 0;
        for (var i = 0; i < $scope.data.length; i++) {
          calc += $scope.data[i].quantity * $scope.data[i].price * 1.08;
        }
        $scope.total = calc;
      }
    }
  }
});

(5)compile関数の使用例

パネルタイトル

パネル本文。タイトルをクリックすると色が変ります。


<panel-repeat repeat="3">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title">パネルタイトル</h3>
    </div>
    <div class="panel-body">
      パネル本文。タイトルをクリックすると色が変ります。
    </div>
  </div>
</panel-repeat>

var demoApp = angular.module('demoApp', []);

demoApp.directive("panelRepeat", function () {
  return {
    restrict: "E",
    compile: function(tElement, attrs) {
      var content = tElement.children();
      for (var i = 1; i < attrs.repeat; i++) {
        tElement.append(content.clone());
      };
      return function (scope, elem, attrs) {
        elem.on('click', function() {
          elem.find("h2").css({ "color": "red" }); 
        });
      };
    }
  };
});

関連記事の目次

AngularJSコードサンプル(http interceptor)

AngularJS : 1.6.5
Bootstrap : 3.3.7
 
※v1.2.3のサンプルはこちら
 

(1)$httpサービスのInterceptor



レスポンスデータ

名前 年齢 住所
{{item.id}} {{item.name}} {{item.age}} {{item.address}}

<button ng-click="getFriends(true)">データ取得</button><br />
<button ng-click="getFriends(false)">データ取得(エラー)</button><br />
<strong>レスポンスデータ</strong><br />
    <table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends" >
      <td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.address}}</td>
    </tr>
  </tbody>
</table>

1)アノニマスのファクトリを使ってinterceptorを設定する方法
var demoApp = angular.module('demoApp', []);
demoApp.config(function($httpProvider) {
  $httpProvider.interceptors.push(function ($q) {
    return {
      request: function(config) {
        config.headers.Authorization = 'Basic xxxx';
        console.log('Interceptor:request', config.headers);
        return config;
      },
      requestError: function(rejection) {
        console.log('Interceptor:requestError', rejection);
        return $q.reject(rejection);
      },
      response: function(response) {
        console.log('Interceptor:response', response);
        return response;
      },
      responseError: function(rejection) {
        console.log('Interceptor:responseError', rejection.statusText);
        return $q.reject(rejection);
      }
    }
  })
});

demoApp.controller('intceptCtrl', function ($scope, $http) {
  $scope.getFriends = function (tf) {
    var svrURL = (tf ? "friends.json" :"invalid-url.php");
    var config = {};
    $http.get(svrURL, config)
      .then(function onSuccess(response) {
        console.log('Client:response', response.status);
        $scope.friends = response.data;
      }, function onError(response) {
        console.log('Client:responseError',response.status);
        $scope.friends = [];
      });
  };
});

2)サービスとしてinterceptorを登録する方法
var demoApp = angular.module('demoApp', []);
demoApp.factory('myInterceptor', function($q) {
  return {
    request: function(config) {
      config.headers.Authorization = 'Basic xxxx';
      console.log('Interceptor:request', config.headers);
      return config;
    },
    requestError: function(rejection) {
      console.log('Interceptor:requestError', rejection);
      return $q.reject(rejection);
    },
    response: function(response) {
      console.log('Interceptor:response', response);
      return response;
    },
    responseError: function(rejection) {
      console.log('Interceptor:responseError', rejection.statusText);
      return $q.reject(rejection);
    }
  };
});
demoyApp.config(function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
});

関連記事の目次

AngularJSコードサンプル(resource)

AngularJS : 1.6.5
Bootstrap : 3.3.7
 
※v1.2.3のサンプルはこちら
 

(1)AngularJSの$resourceサービスの使用方法

1)resourceクラスメソッドを使用した例

登録データ{{new_data}}

ID First Name Last name
{{item.id}} {{item.firstName}} {{item.lastName}}
ユーザー詳細情報
  • ID:{{user.id}}
  • FirstName:{{user.firstName}}
  • LastName:{{user.lastName}}
  • Address:{{user.address}}
  • Age:{{user.age}}

変更テスト
値に”_rev”を追加

ユーザー変更
ユーザーの変更後のデータ

  • ID:{{user_update.id}}
  • FirstName:{{user_update.firstName}}
  • LastName:{{user_update.lastName}}
  • Address:{{user_update.address}}
  • Age:{{user_update.age}}

ユーザー削除
{{user_delete.data}}

ユーザー登録
ユーザー登録データ

  • FirstName:{{user_create.firstName}}
  • LastName:{{user_create.lastName}}
  • Address:{{user_create.address}}
  • Age:{{user_create.age}}

リクエストURL、メソッド

  • リクエストURL:{{Result.url}}
  • リクエストメソッド:{{Result.method}}

2)resourceインスタンスを使用した例

ID First Name Last name
{{item.id}} {{item.firstName}} {{item.lastName}}
ユーザー詳細情報
サーバーリクエストは必要なし

  • ID:{{user.id}}
  • FirstName:{{user.firstName}}
  • LastName:{{user.lastName}}
  • Address:{{user.address}}
  • Age:{{user.age}}

変更テスト
値に”_rev”を追加

ユーザー変更
ユーザーの変更後のデータ

  • ID:{{user_save.id}}
  • FirstName:{{user_save.firstName}}
  • LastName:{{user_save.lastName}}
  • Address:{{user_save.address}}
  • Age:{{user_save.age}}

ユーザー削除
{{user_delete.data}}

リクエストURL、メソッド

  • リクエストURL:{{Result1.url}}
  • リクエストメソッド:{{Result1.method}}

1)resourceクラスメソッドを使用した例<br />
<button class="btn btn-primary" ng-click="create()">ユーザー登録</button><br />
<span>登録データ{{new_data}}</span><br />
<button class="btn btn-primary" ng-click="index()">ユーザー一覧</button><br />
<div ng-switch on="switch">
  <div ng-switch-when="index">
    <table class="table table-striped table-bordered">
      <thead>
        <tr><th>ID</th><th>First Name</th><th>Last name</th><th></th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in users">
          <td>{{item.id}}</td>
          <td>{{item.firstName}}</td>
          <td>{{item.lastName}}</td>
          <td>
            <button class="btn btn-primary" ng-click="show(item.id)">詳細表示</button>  <button class="btn btn-primary" ng-click="destroy(item.id)">削除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="show">
    <div class="panel panel-default">
      <div class="panel-heading">ユーザー詳細情報</div>
      <div class="panel-body">
        <ul>
          <li>ID:{{user.id}}</li>
          <li>FirstName:{{user.firstName}}</li>
          <li>LastName:{{user.lastName}}</li>
          <li>Address:{{user.address}}</li>
          <li>Age:{{user.age}}</li>
        </ul>
        <strong>変更テスト</strong><br />
        <span>値に"_rev"を追加</span><br />
        <button class="btn btn-primary" ng-click="update(user)">変更</button>
      </div>
    </div>
  </div>
  <div ng-switch-when="update">
    <div class="panel panel-default">
      <div class="panel-heading">ユーザー変更</div>
      <div class="panel-body">
        <span>ユーザーの変更後のデータ</span><br />
        <ul>
          <li>ID:{{user_update.id}}</li>
          <li>FirstName:{{user_update.firstName}}</li>
          <li>LastName:{{user_update.lastName}}</li>
          <li>Address:{{user_update.address}}</li>
          <li>Age:{{user_update.age}}</li>
        </ul>
      </div>
    </div>
  </div>
  <div ng-switch-when="destroy">
    <div class="panel panel-default">
      <div class="panel-heading">ユーザー削除</div>
      <div class="panel-body">
        <span>{{user_delete.data}}</span><br />
      </div>
    </div>
  </div>
  <div ng-switch-when="create">
    <div class="panel panel-default">
      <div class="panel-heading">ユーザー登録</div>
      <div class="panel-body">
        <span>ユーザー登録データ</span><br />
        <ul>
          <li>FirstName:{{user_create.firstName}}</li>
          <li>LastName:{{user_create.lastName}}</li>
          <li>Address:{{user_create.address}}</li>
          <li>Age:{{user_create.age}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<strong>リクエストURL、メソッド</strong><br />
<ul>
  <li>リクエストURL:{{Result.url}}</li>
  <li>リクエストメソッド:{{Result.method}}</li>
</ul>
2)resourceインスタンスを使用した例<br />
<button class="btn btn-primary" ng-click="query()">ユーザー一覧</button><br />
<div ng-switch on="switch">
  <div ng-switch-when="list">
    <table class="table table-striped table-bordered">
      <thead>
        <tr><th>ID</th><th>First Name</th><th>Last name</th><th></th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in users">
          <td>{{item.id}}</td>
          <td>{{item.firstName}}</td>
          <td>{{item.lastName}}</td>
          <td>
            <button class="btn btn-primary" ng-click="get(item)">詳細表示</button>  <button class="btn btn-primary" ng-click="delete(item)">削除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="get">
  :
  :

var demoApp = angular.module('demoApp', ['ngResource'])
;

demoApp.controller("resrcCtrl", function($scope, $resource, $location){
  var userResource = $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' }
  })
  $scope.index = function () {
    userResource.query(function(data, headers){
        $scope.users = data;
        $scope.Result = {};
        $scope.Result.url = "/ng/resource/users/";
        $scope.Result.method = "GET";
        $scope.switch = "index";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー:" + err.statusText;
      }
    );
  }
  $scope.show = function (id) {
    $scope.switch = "show";
    userResource.show({ id: id },function(data, headers){
        $scope.user = data;
        $scope.Result = data;
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー:" + err.statusText;
      }
    );
  }
  $scope.new_data ={
    firstName: "first0_rev",
    lastName: "last0_rev",
    address: "address0_rev",
    age: "age0_rev"
  };
  $scope.create = function () {
    $scope.switch = "create";
    userResource.create($scope.new_data,function(data, headers){
        $scope.user_create = data;
        $scope.Result = data;
        $scope.Result.url = "/ng/resource/users";
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー:" + err.statusText;
      }
    );
  }

  $scope.update = function (user) {
    $scope.switch = "update";
    user.firstName += "_rev";
    user.lastName += "_rev";
    user.address += "_rev";
    user.age += "_rev";
    userResource.update(user,function(data, headers){
        $scope.user_update = data;
        $scope.Result = data;
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー:" + err.statusText;
      }
    );
  }

  $scope.destroy = function (id) {
    $scope.switch = "destroy";
    userResource.destroy({ id: id },function(data, headers){
        $scope.user_delete = data;
        $scope.Result = data;
      },function(err) {
        $scope.Result = "サーバーレスポンスエラー:" + err.statusText;
      }
    );
  }
  var userResource1 = $resource("../../resource/users/:id", { id: "@id" });
  $scope.query = function () {
    userResource1.query(function(data, headers){
        $scope.users = data;
        $scope.Result1 = {};
        $scope.Result1.url = "/ng/resource/users/";
        $scope.Result1.method = "GET";
        $scope.switch = "list";
      },function(err) {
        $scope.Result1 = "サーバーレスポンスエラー:" + err.statusText;
      }
    );
  }

  $scope.get = function (user) {
    $scope.user = user;
    $scope.switch = "get";
    $scope.Result1.url = "サーバーリクエストなし";
    $scope.Result1.method = "サーバーリクエストなし";
  }
  $scope.save = function (user) {
    user.firstName += "_rev";
    user.lastName += "_rev";
    user.address += "_rev";
    user.age += "_rev";
    $scope.switch = "save";
    user.$save(function(data, headers){
        $scope.user_save = data;
        $scope.Result1 = data;
      },function(err) {
        $scope.Result1 = "サーバーレスポンスエラー:" + err.statusText;
      }
    );
  }
  $scope.delete = function (user) {
    $scope.switch = "delete";
    user.$delete(function(data, headers){
        $scope.user_delete = data;
        $scope.Result1 = data;
      },function(err) {
        $scope.Result1 = "サーバーレスポンスエラー:" + err.statusText;
      }
    );
  }
});

関連記事の目次