RESTEasyとJPAとAngularJSを使ってWebアプリを作ってみる９（リクエスト）

コントローラー

なんとなくコントローラーにだらだらと処理を書くのは気が引けるので、サービスで処理をするようにしました。

src/main/webapp/script/controller.js

app.controller('InitController', function($scope, $location, $http, AppData, MessageBox, LoginService) {
	$scope.login = function()
	{
		LoginService.login($scope, $location, $http, AppData, MessageBox);
	};
});

ログインサービス

ログイン処理をサーバーにリクエストします。

src/main/webapp/script/service.js

app.factory('LoginService', function() {
	return {
		login: function($scope, $location, $http, AppData, MessageBox) {
			var request = {
				accountId: $scope.userId,
				password: $scope.passWd
			};
			$http.post('/api/user/login', request)
			.then(
				function(responce) {
					if (responce.data != null && responce.data.user != null) {
						AppData.user = responce.data.user;
						AppData.values.wrongAnswers = responce.data.answers;
						$location.path("/top");
					}
					else {
						MessageBox.warn($scope, "ログインに失敗しました。\n正しいユーザーIDとパスワードを入力してください。");
					}
				},
				function(responce) {
					MessageBox.error($scope, "システムエラーが発生しました。\n管理者にお問い合わせください。");
				}
			);
		}
	};
});

• /api/user/login にマッピングされているサーバーのメソッド（UserService#login）は User をパラメータにしていて、アカウントIDとパスワードを期待しているので、入力が一致するように request オブジェクトに値を設定します。
• $http.post でサーバーに POST リクエストを投げます。
• 通信が成功したら then の第1引数の function、失敗の場合は第2引数の function が実行されます。（promiseを参照）
• 認証が成功した場合は、ユーザと、もしあれば前回間違えた問題の一覧が返されるので、AppData に内容を設定して、$location で次ページのトップページへ遷移させます。
• 認証に失敗した場合や、通信エラーが発生した場合はメッセージダイアログを表示します。

トップページではユーザと前回間違えた問題の一覧を表示するため、コントローラーで AppData に保存した内容を $scope に設定します。

src/main/webapp/script/controller.js

app.controller('QuestionController', function($scope, $location, $http, AppData, MessageBox, MainService) {
	$scope.user = AppData.user;
	$scope.wrongAnswers = AppData.values.wrongAnswers;
	$scope.volume = 10;
	$scope.start = function()
	{
		MainService.start($scope, $location, $http, AppData, MessageBox);
	};
});

src/main/webapp/view/top.html

<div class="panel panel-default">
	<div class="panel-heading">{{user.lastName}}{{user.firstName}} さん、こんにちは</div>
	<div class="panel-body">
		<p ng-if="wrongAnswers.length > 0">
		前回間違えた問題の解答は覚えましたか？
		</p>
		<table class="table table-responsive">
			<tr ng-repeat="answer in wrongAnswers">
				<td>
					<table class="table table-responsive">
						<tr><th width="10%">問題</th><td colspan="3">{{answer.question.question}}</td></tr>
						<tr>
							<th width="10%">回答</th><td width="40%">{{answer.answer}}</td>
							<th width="10%">正解</th><td width="40%">{{answer.question.correct}}</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<hr />
		<h3>問題数を選択して「開始」ボタンを押してください。</h3>
		<div class="radio-inline">
			<label class="h3"><input type="radio" name="volume" ng-model="volume" value="10" />10問</label>
		</div>
		<div class="radio-inline">
			<label class="h3"><input type="radio" name="volume" ng-model="volume" value="30" />30問</label>
		</div>
		<button ng-click="start()" type="button" class="btn btn-primary btn-block">開始</button>
	</div>
</div>

ng-repeat で配列の処理も可能です。

あとは、同様に画面、コントローラー、サービスを作成していく。

RESTEasyとJPAとAngularJSを使ってWebアプリを作ってみる１０（JTAに切り替える）へ