JavaScript
AngularJS
github-pages

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

More than 3 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