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

AngularJS でAPIをコールし結果を取得するサンプル②

More than 5 years have passed since last update.

前回の投稿(AngularJSでAPIをコールし結果を取得するサンプル①)に引き続いての投稿です。
APIとの通信は、非同期での通信や応答に時間がかかるAPIなどを考えると、ngResource を利用した方が良いみたいです。

[2014/5/11追記] 続編を書いたのでこちらを参照 ⇒ AngularJSでAPIをコールし非同期で画面を更新する

ngResource を導入する手順

YeomanのAngularJSの雛型(generator-angular)を使う場合

この場合はジェネレータに含まれてるので、そのまま適用すればOK。

スクリーンショット 2014-04-13 21.12.38.png

このあたりを参考に、Yeomanでインストールしてください(⇒Yeoman で AngularJS & UI Bootstrap の開発環境構築

参考

参考:generator-angular (GitHub)

Yeomanを使わず個別にインストールする場合

Bowerでインストール

$ bower install angular-resource --save

index.htmlに追記

index.html
<script src="bower_components/angular-resource/angular-resource.js"></script>

※もしくは $ grunt bower-install を実行すると index.html に記載される。

AngulareJSに組み込み

  • 下記のように ngResource を指定

スクリーンショット 2014-04-13 21.28.36.png

参考

参考:bower-angular-resource (GitHub)

ngResource を利用してAPIアクセスしてみる

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

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

②Factoryに ngResource 経由でJSONファイルにアクセスしリターンするモジュール GetJson を定義

app/scripts/services/api.js
angular.module('apiTestApp')
  .factory('GetJson', function ($resource) {

    var res = $resource('data/sample.json');

    return {
      all: function () {
        return res.query();
      }
    };
  });

③Controllerで先ほどの GetJson を利用しAPIアクセス

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

    $scope.items = GetJson.all();

  });

④ViewでHTMLへ表示

app/views/main.html
<div class="container" ng-controller="MainCtrl">
    <table class="table">
        <tr ng-repeat="item in items">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
        </tr>
    </table>
</div>

結果はこんな感じです ⇒ http://hkusu.github.io/AngularJS_apicall_demo2/

ほか

また今回のソース一式はこちらです ⇒ https://github.com/hkusu/AngularJS_apicall_demo2

今回は API経由で全件取得しましたが、ngResource でプロトコルやパラメータの指定もできます。⇒ 公式ドキュメント

WEBサービスを作る場合、データを RestFull な API を利用することはよくあることなので、うまく使いこなしたいなと思います。その場合、Controllerに APIに関する処理を書くとごちゃごちゃしてくるので、今回のように Factory や Service などに切り出しておくとソースがすっきりするのかなと。

hkusu
Software Engineer @ Yumemi, Inc JavaScript / Android / Kotlin / AWS etc..
http://hkusu.github.io
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
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