Help us understand the problem. What is going on with this article?

RESTEasyとJPAとAngularJSを使ってWebアプリを作ってみる9(リクエスト)

More than 3 years have passed since last update.

コントローラー

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

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アプリを作ってみる10(JTAに切り替える)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away