AngularJS : 1.2.23
Bootstrap : 3.2.0
（１）AngularJSの$resourceサービスの使用方法
１）resourceクラスメソッドを使用した例
登録データ{{new_data}}
登録データ{{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}}
２）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}}
１）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>
２）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;
}
);
}
});