[angularJS] 서비스&팩토리

서비스

myApp.service('Math', function () { this.multiply = function (x, y) { return x * y; }; });  

- Math 콘텍스트(콘텍스트라는 명칭이 맞는지 의심됨.)에 multiply라는 메소드를 추가한다.

myApp.controller('MainCtrl', ['$scope', function ($scope) { var a = 12; var b = 24; // 결과는 288 var result = Math.multiply(a, b); }]);

- controller안에 서비스를 위와 같이 사용할 수 있다.

// Math를 주입한다 myApp.controller('MainCtrl', ['$scope', 'Math', function ($scope, Math) { var a = 12; var b = 24; // 결과는 288 var result = Math.multiply(a, b); }]);

- 하지만, controller안에 콘텍스트(콘텍스트라는 명칭이 맞는지 의심됨.)를 넣어주어야 컴파일 에러가 발생하지 않거나 컨트롤러가 동작함.

위의 function($scope)란 의존성 주입 방법을 뜻함.

팩토리

팩토리를 이용하여 서비스를 만드는 건 아주 간단하고, 서비스를 만드는 것과 비슷하다.

myApp.factory('Server', ['$http', function ($http) { return { get: function(url) { return $http.get(url); }, post: function(url) { return $http.post(url); }, }; }]);  

- 위와 같이 만들어주면 된다. 코드를 보면 어떤 동작을 하는지 얼추 이해가 된다.

myApp.controller('MainCtrl', ['$scope', 'Server', function ($scope, Server) { var jsonGet = 'http://myserver/getURL'; var jsonPost = 'http://myserver/postURL'; Server.get(jsonGet); Server.post(jsonPost); }]);

- Angular의 XHR을 래핑한 코드라고 한다. 컨트롤러에 의존성을 주입한 다음 간단하게 사용 가능.

* XHR : Ajax에서 XMLHttpRequest(HTTP request를 서버에 보낸다)

* 출처 : http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/