Angular Service와 Angular Factory의 차이

Angular service와 Angular factory 서비스의 차이점을 소개합니다.

Angular factory 대신 Angular service를 선택하고 그 반대의 경우도 마찬가지입니다.

Angular Service와 Angular Factory의 차이점

Angular가 제공하는 다양한 서비스 유형, 특히 Angular service와 Angular factory 서비스 간의 차이점 사이에는 약간의 혼동이 있는 것 같습니다.

이들을 구별하는 가장 좋은 방법은 두 서비스 모두에서 서비스를 만들고 차이점을 이해하는 것입니다.

todoList라는 Angular 모듈을 만들고 변수 list에 할당합니다.

var list = angular.module('todoList', []);

이제 Angular service와 Angular factory를 사용하여 차이점을 확인하기 위해 todoList라는 Angular service를 생성합니다. Angular service 서비스를 생성하려면 모듈에서 service 메소드를 호출하십시오.

서비스 메소드의 첫 번째 매개변수는 서비스 이름입니다. todoListService라고 합시다.

서비스 메소드의 두 번째 매개변수는 함수입니다. 인수가 필요 없는 익명 함수를 전달해 보겠습니다.

따라서 우리의 코드는 아래와 같을 것입니다.

list.service("todoListService", function(){

})

todoListService를 구현해 보겠습니다. 처음으로 서비스를 컨트롤러에 주입할 때 Angular는 서비스 메서드에서 전달한 함수 참조에 new 키워드를 사용합니다.

즉, 우리 함수를 생성자 함수로 취급합니다. new 키워드를 사용하면 두 가지 일이 자동으로 발생합니다. 먼저 this 변수에 할당된 빈 객체를 얻습니다.

둘째, 우리의 함수는 이 객체를 반환할 것입니다. 나머지 기능은 서비스에 대한 정의입니다.

따라서 할 일 목록을 저장할 배열을 설정해 보겠습니다. 우리의 코드는 아래와 같을 것입니다.

list.service("todoListService", function(){
this.todoList = []
})

구현하지 않을 addTodo 및 removeTodo라는 두 가지 메서드를 만들어 보겠습니다. 우리의 코드는 아래와 같을 것입니다.

list.service("todoListService", function(){
this.todoList = []
this.addTodo = function(todo){
//Just to give idea
}
this.removeTodo = function(todo){
//Just to give idea
}
})

따라서 Angular service가 완성되었으며 addTodo 기능과 removeTodo 기능이 모두 서비스로 구축되었습니다.

이것을 주입하면 this 변수가 반환되어 서비스가 됩니다. Angular factory 서비스를 생성하려면 모듈에서 factory 메소드를 호출하십시오.

서비스 메소드의 첫 번째 매개변수는 서비스 이름이며 todoListFactory라고 합시다. 서비스 메소드의 두 번째 매개변수는 함수입니다.

인수가 필요 없는 익명 함수를 전달해 보겠습니다.

list.factory("todoListFactory", function(){

})

팩토리 서비스를 구현해보자.

Angular service와 Angular factory의 차이점은 Angular service가 생성자 함수로 누드라는 점입니다. 대조적으로 Angular factory는 방금 호출되었으며 함수에서 반환되는 모든 것이 우리의 서비스가 됩니다.

todoListFactory를 구현하려면 빈 개체를 만들고 해당 개체를 반환해야 합니다. 나머지 구현은 동일합니다.

todoList 배열과 addTodo 및 removeTodo 두 함수를 생성합니다. 따라서 우리의 코드는 아래와 같을 것입니다.

list.factory("todoListFactory", function(){
var obj = {}
this.todoList = []
this.addTodo = function(todo){
//Just to give idea
}
this.removeTodo = function(todo){
//Just to give idea
}
return obj
})

factory 서비스와 service 서비스의 두 가지 서비스가 있습니다. 컨트롤러를 만들고 서비스를 주입하고 동일하게 사용할 수 있습니다. 둘 다 동일한 방법과 속성을 가지고 있습니다.

list.controller("todoController", function(todoListService, todoListFactory){
	todoListService.addTodo(/*todo*/)
	todoListFactory.addTodo(/*todo*/)
})

주된 질문은 우리가 둘 다 동일한 작업을 수행할 수 있기 때문에 서비스보다 공장을 사용하기로 선택하는 이유입니다. 답은 함수와 같은 객체가 아닌 다른 것을 반환하려면 factory를 사용해야 한다는 것입니다.

할 일을 생성할 수 있는 서비스를 원한다고 가정해 보겠습니다. 이를 위해 우리는 factory를 생성할 수 있으며 이 factory는 할 일과 이름에 대한 설명을 취하는 함수를 반환할 수 있습니다.

이 함수는 설명과 이름이 설정된 새 개체를 반환합니다. 그리고 할 일을 완료로 표시하는 기능이 있습니다.

우리의 코드는 아래와 같을 것입니다.

list.factory("todoListF", factory(){
	return function(description, name){
		return{
			description: description,
			name: name,
			complete: function(){
				//to-do completed
			}
		}
	}
})

따라서 새로운 todoList factory 서비스를 컨트롤러에 삽입하고 이를 사용하여 할 일 및 업데이트된 할일과 같은 새 할일을 생성할 수 있습니다.

list.controller("todoFController", function(todoListF){
	var task = new todoListF("Push code to github", "Github Push Code")
	var update = new todoListF("Update code on github repository", "Update Repository")
})