Modelデータ構築用のAjaxリクエストをrunメソッドで実行

Ajaxで取得するjsonファイルを作成

AngularJSの入門者向けに書いてきた掲示板アプリ作成記事の最後はAjax編になる。

Filterの使い方でAngularJSで開発した掲示板アプリは完成した。本エントリー(Ajax編)では、Modelデータの構築部分を静的にコーディングしていたものをAjaxリクエストで取得しデータを構築するように変更する方法を書いてみる。

Ajaxでリクエストするファイルを

bbs.json

というファイル名で作成し、アプリケーション本体と同じ階層に配置する。内容は以下のように定義した。

{
	"title": "メジャーリーグと日本の野球について", 
	"answers": [{ "body": "大リーグはおもしろい", "tree": false },
		{ "body": "イチローとマー", "tree": false },
		{ "body": "日米野球摩擦", 
			"tree": [
				{ "response": "Goodbye baseball", "tree": false },
			        { "response": "イチローのファインプレー", "tree": false },
			        { "response": "ピッチャーのベースカバー", "tree": false }
			] },
		{ "body": "野茂のトルネード", "tree": false }
	]
}

Modelの使い方で上のjsonデータと同様のデータをハードコーディングして定義したが、本エントリーでデータの取得をAjax化するため、

var model = { ... };

の変数を削除しておく。

runメソッドでAjaxリクエストを送信

データ取得用のbbs.jsonを作成したので、Ajaxリクエスト部分のコードが必要。アプリの初期セットアップ時にModelデータを構築する必要があるので、AngularJSのイニシャルセットアップにフックする。初期起動にフックするためには、AngularJSの

runメソッド

を利用して実行することができる。

var bbsApp = angular.module("bbsApp", []);

bbsApp.run(function( $http ) {
    $http.get("bbs.json").success(function( d ) {
        model.title = d.title;
	model.answers = d.answers;
   });
});

controllerメソッドなどと同様にrunメソッドを利用することができる。

上のコードにより、Ajaxリクエストがアプリ起動時に実行され、レスポンスをModelデータとして利用できる状態になる。

AngularJS使い方ガイドの記事

• AngularJSの使い方入門編
• Modelの使い方
• Controllerの使い方
• Viewの使い方
• Two-Way Data Bindingの使い方
• Behaviorの使い方
• Filterの使い方
• Ajaxの使い方

参考
AngularJS入門