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

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

```js: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);
	};
});
```

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

```js: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](http://js.studio-kingdom.com/angularjs/ng_service/$http) でサーバーに POST リクエストを投げます。
- 通信が成功したら then の第1引数の function、失敗の場合は第2引数の function が実行されます。（[promise](http://js.studio-kingdom.com/angularjs/ng_service/$q)を参照）
- 認証が成功した場合は、ユーザと、もしあれば前回間違えた問題の一覧が返されるので、AppData に内容を設定して、[$location](http://js.studio-kingdom.com/angularjs/ng_service/$location) で次ページのトップページへ遷移させます。
- 認証に失敗した場合や、通信エラーが発生した場合はメッセージダイアログを表示します。

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

```js: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);
	};
});
```

```html: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](http://js.studio-kingdom.com/angularjs/ng_directive/ng_repeat) で配列の処理も可能です。


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


[RESTEasyとJPAとAngularJSを使ってWebアプリを作ってみる１０（JTAに切り替える）](http://qiita.com/1roh/items/a73c7fdca88dfb3dc594)へ