AngularJSでバックエンド連携部分をServiceにまとめる

controllerからAjaxリクエスト部分を除外する

AngularJSにはServiceという概念がある。

AngularJSからRestfulなリクエストを送信のエントリーでは、最終的に

• app.js
• controllers.js

を分離して、MVCを意識したRestfulなサンプルアプリを作ってみた。そのエントリーの中で、controllers.jsは以下のようになった。

(function() {
    var ajs = angular.module('myApp.controllers', []);
    ajs.controller('AppCtrl', function($scope, $rootScope, $http) {
        $rootScope.appUrl = "http://restful-cakephp.local";
    });
 
    ajs.controller('GetRequestCtrl', function($scope, $rootScope, $http) {
        var load = function() {
            $http.get($rootScope.appUrl + '/recipes.json')
                    .success(function(data, status, headers, config) {
                            $scope.recipes = data.recipes;
                    });
        }
 
        load();
    });
}());

controller内でAPIへの接続、及びデータの取得を行っている。本エントリーでは、上のコードからバックエンド連携部分をServiceとして分離する。

Restful APIとの連携部分としてServiceを書く。

(function () {
	var ajs = angular.module('myApp.services', []);

	ajs.factory('GetService', function($http, $rootScope) {
		var GetService = {
			async: function() {
			  
				var promise = $http.get($rootScope.appUrl + '/recipes.json')
					.success(function(data, status, headers, config) {
						return data;
					});
			
				return promise;
			}
		};
		
		return GetService;
	});

}());

上のコードを

services.js

として保存する。バックエンドAPIとの連携部分のみをserviceに括り出したので、controllerからserviceを利用するコードを書く。

    ajs.controller('GetRequestCtrl', function(GetService, $scope) {
		GetService.async().then(function(d) {
			$scope.recipes = d.data.recipes;
		});
    });

GetRequestCtrlコントローラは上のようにシンプルになった。app.jsでserviceモジュールの読み込み設定も必要。

    var ajs = angular.module('myApp', [
		'ngRoute',
		'myApp.services',
		'myApp.controllers'
	]);

controllerとservice(Model)を分離することができた。serviceをmvcのModelとして利用しコントローラからバックエンド連携やビジネスロジックを追い出すことで、コントローラが巨大化することを防ぐことができる。