Angular.Js Factory 와 Service
Angular.js
Angular.js 는 Google 에서 인수하여 지원하는 Front-end Web Application Framework 다. 최근 트랜드인 Single Page Application (혹은 Single Page Interface) 를 제대로 구현 할 수 있으며, 생산성이 매우 뛰어난 프레임워크이기도 하다. 대신, 그 구조가 여러가지 개념으로 나뉘어 있어 복잡한 개념 습득이 필요해서 오랜 시간동안 익숙해져야 하는 단점이 있다. 그중에서도 가장 어려운 것이 Factory 와 Service 라고 할 수 있을 것 같다.
What's Factory and Service?
Factory 나 Service 나 만들어진 목적면에 있어서는 크게 다르지 않아보인다. Controller 가 HTML 로 데이터를 보여주거나 혹은 가져올때 쓰이는 반면, Service 는 API 서버와의 CRUD 통신이나 Angular Controller 사이에 데이터를 주고 받을 목적으로 만들어졌다. 이게 무슨 의미냐 하면, 예를 들어 API 서버에서 회원 정보 데이터를 가져와 Controller 에 전달해주는 역할을 하게 된다는 것이다.
개념적으로나 코드 간결화 측면에서도 매우 유용하나, 사실 실제로 써보기전에 설명만 들어서는 도대체 무슨소리인지 알아먹기 힘든 것이 사실이다. 간단하게 로그인 하는 함수에서 로그인 기능은 어떻게 UserFactory에 정의되고 또 사용되는지 살펴보자.
User Controller
angular.module('testApp')
.controller('UserController', function ($scope, $location, UserFactory) {
$scope.login = function () {
UserFactory
.login($scope.loginCredentials)
.then(function (res) {
$scope.user = res.data.user;
$location.path('/');
}, errorHandler);
};
});
User Factory
angular.module('testApp')
.factory('UserFactory', function ($http, API_URL, AuthToken) {
return {
var loginUrl = API_URL + '/login';
login: function (user) {
return $http
.post(loginUrl, user)
.then(function success (res) {
AuthToken.setToken(res.data.token);
return res;
});
},
});
사용법은 생각보다는 간단하다. 실행할 명령어를 UserFactory 에서 리턴해주고, 이 후 promise 나 해당 콜백을 Controller 쪽에서 정의해주면 끝. (User Factory 의 AuthToken 또한 Factory 로 로그인 유지를 위해 Server 에서 보내준 token 을 Browser 에 저장하는 역할을 한다.) Service 또한 사실상 같은 역할을 하기 때문에 굳이 다시 언급할 필요성은 없다고 느껴지나 정의하는 방법이 약간 다르다.
User Service
angular.module('testApp')
.service('UserService', function ($http, API_URL, AuthToken) {
return {
this.login = function (user) {
$http
.post(API_URL + '/login', user)
.then(function success (res) {
AuthToken.setToken(res.data.token);
return res;
});
},
});
Factory 는 login 이라는 함수 자체를 리턴했고, Service 는 결과값인 res 만을 리턴하고 있다. 또한 Factory 는 함수를 실행하기 전에 변수 등을 선언해주는 등의 일을 할 수 있지만, Service 의 경우는 그렇지 못한다. 아래 설명을 참고하자.
위 사진을 보면 Factory 는 함수 실행만을 하고, Service 는 객체화 되어서 프로퍼티를 추가해줄 수 있다는데, 실제 테스트를 해보고 내용을 업데이트하겠다.
Very simply:
.service - registered function will be invoked as a constructor (aka 'newed')
.factory - registered function will be invoked as a simple function
Both get invoked once resulting in a singleton object that gets injected into other components of your app