Angular.jsの$httpを使ってみる

Angular.jsの$httpを使って、同一ドメイン内のjsonデータを取得してみます。

サンプルコード

HTML

<div ng-controller="vaList">
	<ul class="va-list">
		<li class="va-list-item" ng-repeat="actor in actorData.list">
			<div class="va-list-item_name">{{actor.name}} <span class="va-list-item_belong">(所属:{{actor.belong}})</span></div>
			<div class="va-list-item_birthday">生年月日:{{actor.birthday}}</div>
		</li>
	</ul>
</div>

JavaScript

angular.module('app', []).controller('vaList', function($scope, $http) {

	$scope.actorData = '';

	// jsonデータの取得
	$http.get('data.json').success(function(data) {
		$scope.actorData = data;
	}).error(function() {
		alert('取得失敗');
	});
});

jsonデータを取得するデモページ