コントローラー
なんとなくコントローラーにだらだらと処理を書くのは気が引けるので、サービスで処理をするようにしました。
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 で配列の処理も可能です。
あとは、同様に画面、コントローラー、サービスを作成していく。