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

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.results を ng-repeat の繰り返し処理で TABLEタグ内に書き出し

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

sample.json

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

おわりに

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

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

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