AngularJsを使ってみる―Serviceの利用―

Serviceの基本的な使い方です。組み込みのHttp通信機能を利用してみます。

AngularJsでJSonデータを外部から参照する方法です。
ここには、built-inのServiceを利用します。

Serviceというのは、あまり悩まず便利なAPIをまとめた機能と覚えておけば十分使えると思います。

内部ではJQueryの機能を利用しているようです。コントローラの引数の中で$httpの利用を宣言すると、injectorというAngularJsの機能が自動的に判別して、コントローラに差し込んでくれます。

引数の形式は少し特殊で、arrayをコントローラの引数に設定し、その内部でまず文字列として使用するサービスを宣言します。そして、そのサービスを無名関数の引数に設定します。

また、JSonデータは自動的にJavaScriptのArray形式に変換されます。具体的には以下のように書きます。

ここではPromiseを利用しており、通信成功時にはsucces以下がコールバックされて実行されます。ちなみに失敗時の動作はerrorという関数を追加します。

app.controller('SomeController', ['$http', function($http){
    var store = this;
    store.jsonData = [];
    $http.get('/store-json-data.json').success(function(data){ 
      store.jsonData = data;
    });
}]);