ngResource はどうやって値を埋めているのか

ngResource は AngularJS で RESTful API を call する際につかえるクライアントライブラリだが、これがなかなかマジカルな動きをする。

具体的には、以下のようなコードがなぜか動く。HTTP リクエストが実行された後で $scope.entries にいい感じにレスポンスがうまっているのだ。

$scope.entries = $resource(‘/entry’).query();

通常なら動かなそうなコードだ。なぜこれが動いてしまうのか。

なぜ動くのか

$scope.entries = $resource(‘/entry').query();

のとき、ngResource の内部では以下のようなことが起きている。

$scope.foo = (function () {
	// 空の配列を作る
	var value = [ ];

	$http.get(‘/foo’).then(function (res) {
		res.data.forEach(function (v) {
			// $scope に入れるオブジェクトの参照はクロージャで保持されている
			value.push(v);
		});
	});

	// 空の配列をとりあえず返して、後から非同期に値を埋める
	return value;
})();

そう、仕組みがわかってしまえばなんのことはない。空の配列なりオブジェクトなりをかえしておいて、後から埋めているだけなのだ。