resolveを利用してControllerに処理が移動する前にバックエンドからデータを取得しておく

その結果Controllerをよりシンプルに書ける

AngularJSの$routeProviderを中心にコードを構成してみると、よりサーバサイドのMVCのようにAngularJSを理解することができる。

$routeProviderは、app.jsというアプリケーション本体に記述している。

$routeProvider
.when('/posts', {
	templateUrl: 'app/partials/posts.html', // view
	controller: 'TestCtrl', // Controller
	resolve: {
		'GetServiceData':function(GetService){
			return GetService.promise;
		} // Model
	}
})

• templateUrl → View
• controller → Controller
• resolve → Model

resolveのことを調べていて、AngularJSとして正しいかは分からないが、イメージとしてはサーバサイドのMVCに似た構成にすることができる。resolveにServiceを指定することにより、Controllerに対してバックエンド側のデータを注入することが可能になる。

上のコードのGetServiceは以下のようになる。

ajs.factory('GetService', function($http, $rootScope) {
	var d = null;
	var promise = $http.get($rootScope.appUrl + '/recipes.json').success(function (data) {
		d = data;
	});

	return {
		promise:promise,
		getdata: function () {
			return d;
		}
	};
});

GetServiceでは、バックエンドのRESTful APIからデータを取得している。そして、resolveにGetServiceを指定しておくことで、Controller内では、意識することなくGetServiceのデータが利用できる。その結果Controllerを完結に書くことができる。

ajs.controller('TestCtrl', function(GetService, $scope) {
        $scope.recipes = GetService.getdata().recipes;
});

Controller内で$scope.recipesにバックエンド側のデータを格納すればView側でそのデータを表示することができる。

<tr ng-repeat="e in recipes">
        <td>{{e.Recipe.id}}</td>
        <td>{{e.Recipe.title}}</td>
        <td>{{e.Recipe.body}}</td>
        <td>{{e.Recipe.created|date:'short'}}</td>
</tr>

あらかじめ取得するデータが決まっている場合には、$routeProviderのresolveを利用することで管理しやすいコードを書くことができる。