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

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

More than 5 years have passed since last update.

WEBサービス作るにはサーバのAPIと連携しないと意味ないよねってことで、勉強がてら作成してみたメモです。

[2014/3/15追記] この例はHTMLページとAPIが同一サーバの場合です。APIが別サーバの場合は、JSONPを利用する必要があります。
[2014/4/13追記] 非同期での通信や、応答に時間がかかるAPIなどを考えると、ngResource を利用した方が良いみたいです。続編を書いたのでこちらを参照 ⇒ AngularJS でAPIをコールし結果を取得するサンプル②
[2014/5/11追記] さらに続編を書いたのでこちらを参照 ⇒ AngularJSでAPIをコールし非同期で画面を更新する

作成したデモページ

[API発行]ボタンを押すと、APIコールでJSONファイルを取得して結果をTABLEに表示します。
http://hkusu.github.io/AngularJS_apicall_demo
(GitHub Pages で動かしています。)

コード

前のこちらの投稿の構成を元に、下記のようにコードを記載。

main.js
'use strict';

angular.module('testApp')
    .controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

        var $uri ='data/sample.json';

        $scope.doSearch = function() {

            $http({
                method : 'GET',
                url : $uri
            }).success(function(data, status, headers, config) {
                $scope.results = data.data;
                console.log(status);
                console.log(data);
            }).error(function(data, status, headers, config) {
                console.log(status);
            });
        };

    }]);

main.jsの説明:

  • $http モジュールをコントローラへ追加
  • $uri にAPIのURLパスを記載。もしドメインが異なる外部サーバの場合は JSONP を利用する必要があります。
  • APIのコール結果は $scope.results へバインド
    • 後述のHTML側でこの値を利用する
main.html
<div class="container" ng-controller="MainCtrl">
    <button class="btn btn-primary" ng-click="doSearch()">API発行</button>
    <br>
    <br>
    <table class="table">
        <tr ng-repeat="result in results">
            <td>{{result.id}}</td>
            <td>{{result.name}}</td>
        </tr>
    </table>
</div>

main.htmlの説明:

  • ボタンが押されたら、先ほどのdoSearch()を呼び出し
  • バインドされた $scope.resultsng-repeat の繰り返し処理で TABLEタグ内に書き出し

APIは作成するのが面倒だったので、同一サーバ内に次のような固定のJSONを配置しました。

http://hkusu.github.io/AngularJS_apicall_demo/data/sample.json

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

おわりに

挙動はデモページで確認ください。

APIと連携することができました^^ いろいろ出来そうな気がしてきますね。
まあ、実際にはAPIと連携しないアプリケーションの方があまりないかもしれませんが。

今回のソースコード一式はこちら
https://github.com/hkusu/AngularJS_apicall_demo

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