AngularJS 기초 [3]

AngularJS 기초 [3]

서비스, 팩토리

AngularJS의 service(서비스)는 여러 코드에서 반복적으로 사용되는 코드를 분리할 때 사용하는 기능으로,

해당 서비스가 필요한 곳에 의존성을 주입해 활용할 수 있습니다.

서비스는 다음과 같은 특성이 있습니다.

- 지연 초기화: 의존성으로 주입하기 전까지는 초기화가 되지 않습니다.

- 싱글톤: 각각의 컴포넌트에서 하나의 인스턴스를 싱글톤으로 참조합니다.

AngularJS에서 service(서비스)와 factory(팩토리)는 서로 상당한 유사성을 갖고 있기 때문에 혼동할 수 있습니다.

특히 Javascript의 유연한 타입으로 인해 라이브러리의 의도와는 다르게 그냥 동작하는 경우가 많습니다.

서비스

아래 예제는 2개의 숫자를 곱하는 서비스입니다.

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

컨트롤러 안에서 서비스를 다음처럼 사용할 수 있습니다.

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

사실 곱셈은 너무 쉬워서 service가 필요하지 않지만 핵심은 이해할 수 있을겁니다.

서비스 혹은 팩토리를 생성할 때는 의존성 주입을 사용해서 Angular에게 새로 만든 서비스의 존재를 알려줘야 합니다.

그렇지 않으면 컴파일 에러가 발생하거나 컨트롤러가 동작하지 않을 것입니다.

컨트롤러 선언 부분에 function($scope)를 보셨을 텐데, 이게 바로 간단한 의존성 주입 방법입니다.

function($scope) 앞에 있는 ['$scope']는 다음번에 설명하겠습니다.

다음 예제는 의존성 주입을 통해 Angular에게 서비스가 필요하다고 알려주는 방법입니다.

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

팩토리

팩토리로 서비스를 만드는 건 이제 간단합니다.

객체 리터럴을 팩토리 안에서 생성하거나 다음처럼 몇 가지 메서드를 추가하면 됩니다.

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

Angular의 XHR을 래핑 한 코드를 작성해봤습니다. 컨트롤러에 의존성을 주입한 다음 이렇게 간단히 사용하면 됩니다.

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

혹시 서버 번경 사항을 폴링 하고 싶으면 Server.poll(jsonPoll)을 설정하거나

Server.socket(jsonSocket)을 사용할 수도 있습니다.

이렇게 컨트롤러에 서비스를 주입해서 사용하면 컨트롤러의 코드를 최소로 유지할 수 있습니다.

즉 나만의 도구를 만들어서 사용하는 것처럼 코드를 모듈화 할 수 있는 길이 열리는 것입니다.

서비스와 팩토리에서 가장 두드러진 차이점을 꼽는다면,

서비스에서는 초기화 과정이 존재하기 때문에 자연스럽게 prototype 상속이 가능합니다.

그래서 일반적으로 상속이 필요한 데이터 핸들링이나 모델링 등의 경우에는 서비스를 활용하고,

helper나 정적 메서드와 같이 활용되는 경우는 팩토리로 구현을 많이 합니다.

from http://greenkick.tistory.com/11 by ccl(A) rewrite - 2021-01-10 23:28:25