89
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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.resultsng-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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
89
Help us understand the problem. What are the problem?