AngularJS : 1.6.5
Bootstrap : 3.3.7
※v1.2.3のサンプルはこちら。
（１）AngularJSの$routeサービスの使用方法
●user_main.html
<button class="btn btn-primary" ng-click="new()">ユーザー登録へ</button>
<button class="btn btn-primary" ng-click="index()">ユーザー一覧</button>
●user_index.html
<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>
<strong>実行結果</strong><br />
<span>{{Result}}</span><br />
<button class="btn btn-primary" ng-click="cancel()">戻る</button>
●user_show.html
<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>
<button class="btn btn-primary" ng-click="edit(user.id)">ユーザ情報変更</button>
<button class="btn btn-primary" ng-click="cancel()">戻る</button>
</div>
</div>
●user_new.html
<div class="panel panel-default">
<div class="panel-heading">ユーザー登録</div>
<div class="panel-body">
<span>ユーザー登録データ</span><br />
<ul>
<li>FirstName:{{new_data.firstName}}</li>
<li>LastName:{{new_data.lastName}}</li>
<li>Address:{{new_data.address}}</li>
<li>Age:{{new_data.age}}</li>
</ul>
<button class="btn btn-primary" ng-click="create()">ユーザー登録</button>
<button class="btn btn-primary" ng-click="cancel()">戻る</button><br />
<strong>実行結果</strong><br />
<span>{{Result}}</span><br />
</div>
</div>
●user_edit.html
<div class="panel panel-default">
<div class="panel-heading">ユーザー情報変更</div>
<div class="panel-body">
<span>ユーザー変更内容</span><br />
<ul>
<li>FirstName:{{user.firstName}}</li>
<li>LastName:{{user.lastName}}</li>
<li>Address:{{user.address}}</li>
<li>Age:{{user.age}}</li>
</ul>
<button class="btn btn-primary" ng-click="update(user)">変更実行</button>
<button class="btn btn-primary" ng-click="cancel()">戻る</button><br />
<strong>実行結果</strong><br />
<span>{{Result}}</span><br />
</div>
</div>
var demoApp = angular.module('demoApp', ['ui.bootstrap','ngRoute','ngResource']);
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" });
});
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("UsersMainCtrl", function($scope, userResource,$location){
$scope.new = function() {
$location.path("/ng/resource/users_r/new");
};
$scope.index = function() {
$location.path("/ng/resource/users_r");
};
});
demoApp.controller("UsersIndexCtrl", function($scope, userResource,$location){
userResource.query(function(data, headers){
$scope.users = data;
},function(err) {
$scope.Result = "サーバーレスポンスエラー：" + err.statusText;
}
);
$scope.destroy = function (id) {
userResource.destroy({ id: id },function(data, headers){
$scope.Result = "id:" + id + "のユーザーを削除しました。デモ用なのでユーザー一覧画面は更新されません。";
},function(err) {
$scope.Result = "サーバーレスポンスエラー：" + err.statusText;
}
);
}
$scope.show = function(id) {
$location.path("/ng/resource/users_r/" + id);
};
$scope.cancel = function() {
$location.path("/ng/resource/users_r/main");
};
});
demoApp.controller("UsersNewCtrl", function($scope, userResource,$location){
$scope.new_data ={
firstName: "first0_rev",
lastName: "last0_rev",
address: "address0_rev",
age: "age0_rev"
};
$scope.create = function () {
userResource.create($scope.new_data,function(data, headers){
$scope.Result = "ユーザーを登録しました";
},function(err) {
$scope.Result = "サーバーレスポンスエラー：" + err.statusText;
}
);
}
$scope.cancel = function() {
$location.path("/ng/resource/users_r/main");
};
});
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");
};
});
demoApp.controller("UsersEditCtrl", function($scope, userResource,$routeParams,$
location){
userResource.show({ id: $routeParams.id },function(data, headers){
$scope.user = data;
$scope.user.firstName += "_rev";
$scope.user.lastName += "_rev";
$scope.user.address += "_rev";
$scope.user.age += "_rev";
},function(err) {
$scope.Result = "サーバーレスポンスエラー：" + err.statusText;
}
);
$scope.update = function (user) {
userResource.update(user,function(data, headers){
$scope.user_update = data;
$scope.Result = "ユーザー情報を変更しました。";
},function(err) {
$scope.Result = "サーバーレスポンスエラー：" + err.statusText;
}
);
}
$scope.cancel = function() {
$location.path("/ng/resource/users_r/main");
};
});