search
LoginSignup
99
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Organization

AngularJSでAPIをコールし非同期で画面を更新する

先日にはてブのホットエントリになってたこの記事(Promises: ブラウザーJavaScriptの新しい非同期標準になるか?)をみるに、APIアクセスの場合は promises を使わないと、APIの応答が遅い場合に結果が取得できないし、またAPIの結果が返ってくるまでユーザを待たせてしまうことになります。

というわけで、AngularJS でAPIの結果を非同期で取得して画面を更新する、というデモを作ってみました(応答が遅いAPIを模するために、1秒のウェイトを擬似的にいれてます)。

デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3

スクリーンショット 2014-05-11 1.26.57.png

下記にソースの説明をします。
※ 私のJavaScriptの経験はまだ浅いので、おかしなところがあったら教えてください^^;

① ソースツリーのWEB公開領域に、適当にJSONファイルを用意

app/data/sample.json
[
  {
    "id": "1",
    "name": "山田"
  },
  {
    "id": "2",
    "name": "鈴木"
  },
  {
    "id": "3",
    "name": "高橋"
   }
]

② JSONファイルにアクセスするFactoryを用意

擬似的に1秒間ウェイトしてから、結果を返すようにしています。

app/scripts/services/data.js
angular.module('apiTestApp')
  .factory('JsonData', function ($http) {

    return {

      getSampleData: function () {

        return $http.get('data/sample.json')
          .success(function(data, status, headers, config) {

            // 擬似的に、1秒間ウェイト
            var time = new Date().getTime();
            while (new Date().getTime() < time + 1000);

            return data;
          });
      }

    }

  })
;

③ Controllerから先程のFactoryを呼び出し

.then で先程のAPIアクセスの応答があった後に、画面にAPIの応答結果を表示するようにします。
AngularJSの場合、リアルタイムのデータバイングが働くので、簡単に書けますね^^

応答を待つ間に、後続に書いた処理(今回だと $scope.show_loading = true; の行)が実行されます。
今回は応答を待つ間は画面に「読み込み中」と表示することにします。

app/scripts/controllers/main.js
angular.module('apiTestApp')
  .controller('MainCtrl', ['$scope', 'JsonData', function ($scope, JsonData) {

    // こっちの書き方はNGパターン
    //$scope.items = JsonData.getSampleData().data;

    JsonData.getSampleData().then(function(res){
        $scope.items = res.data;
        $scope.show_loading = false; // ローディング中、を非表示へ
      }
    );

    $scope.show_loading = true; // ローディング中、を表示

  }])
;

④ ViewでHTMLへ表示

app/views/main.html
<div ng-controller="MainCtrl">
  この間の部分が非同期での読み込み<br>
  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓<br>
  <div ng-show="show_loading">
    読み込み中..
  </div>
  <li ng-repeat="item in items">
    {{item.id}} - {{item.name}}
  </li>
  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓<br>
</div>

⑤ 結果はこんな感じ

スクリーンショット 2014-05-11 1.26.57.png

スクリーンショット 2014-05-11 1.24.16.png

デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3

ほか

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
99
Help us understand the problem. What are the problem?