[1] Module.factory를 이용한 Hello 서비스 만들기
-서비스를 정의하려면 모듈 인스턴스가 필요하다.
angular.module()함수를 이용해 모듈 인스턴스를 생성할 수 있다.
이 모듈인스턴스는 서비스를 만들 수 있는 다양한 메서드를 제공한다.
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="js/lib/angular.js" ></script>
<script type="text/javascript">
angular.module('sampleApp', [])
.factory('hello', [function(){
var helloText = "님 안녕하세요.";
return {
say : function(name){
return name+helloText;
}
};
}])
.controller('mainCtrl', function($scope, hello){
$scope.hello = hello.say("철수")
});
</script>
</head>
<body>
<div ng-controller="mainCtrl">
<p>{{hello}}</p>
</div>
</body>
</html>
- 위 코드에서 모듈 인스턴스의 factory() 메서드를 호출해 hello 서비스를 만들었다.
factory 함수의 첫 번째 인자로 서비스 명을 주고 다음 인자로 서비스를 주입받을 때 반환할 객체의 팩토리 함수를 준다.
이렇게 만든 hello 서비스는 컨트롤러에서 인자로 주입해 사용할 수 있다.
위 코드에서는 hello 서비스가 mainCtrl 컨트롤러에 AngularJS에 의해 주입된 것이다.
- 어떻게 hello 인스턴스가 메인 컨트롤러에 주입되었을까..?
- 모듈 factory메서드는 $provide.factory 메서드의 레퍼런스에 불과하다.
모듈은 각 지시자, 서비스, 컨트롤러 등과 같은 컴포넌트를 담는 박스와 같다.
편의성을 위하여 모듈 인스턴스의 factory메서드를 통해 $provide.factory 메서드를 호출한다.
이렇게 정의된 펙토리 함수는 나중에 $injector가 서비스 객체를 생성할 때 호출된다.
위 그림에서 보는 바와 같이 AngularJS 내부에서 등록된 컨트롤러를 호출할 때 $injector.invoke메서드를 사용하는데 이때 컨트롤러가
주입받고자 하는 인자의 이름을 $injector.get("인자이름")으로 가지고와 해당 인자이름에 해당하는 팩토리함수를 실행시켜 객체를 반환 받아 그 객체를
invoke하는 함수의 인자로 전달한다.
위 그림과 같이 injector는 서비스의 싱글톤을 유지하기 위해 내부적으로 캐시를 가지고 있어 서비스가 매번 새로운 객체를 생성하는 것을 방지한다.
그리고 실제로 AngularJS에서 모든 서비스는 이 $provide를 이용해 정의하게 된다.
*서비스를 특정함수에게 주입하거나 등록된 서비스를 얻어오는 역할을 $injector가 한다.
[2] $provide를 이용한 Provider 정의
- AngularJs에서 $provide를 이용해 주입할 수 있는 서비스를 제공해 주는 프로바이더(Provider)를 정의할 수 잇다.
이렇게 정의된 프로바이더를 이용해 생성하는 것을 서비스라고한다.
1. 서비스 프로바이더를 생성하는 다섯가지 방법
'AngularJS' 카테고리의 다른 글
| 19. 의존관계 주입과 서비스 - 1 (서비스란?) (0) | 2015.04.09 |
|---|---|
| 18. 지시자 - 2 (사용자 정의 지시자) (0) | 2015.03.16 |
| 17. 지시자 웹 표준 준수 대비 및 오래된 인터넷 익스플로러 지원하기 (0) | 2015.03.16 |
| 16. 지시자(directive) - 1 (0) | 2015.03.16 |
| 15. 모듈(Module) (0) | 2015.03.16 |