Diferencia entre Angular Service y Angular Factory

Introduciremos las diferencias entre los servicios Angular service y Angular factory.

También presentaremos las razones para elegir el Angular service sobre la Angular factory y viceversa.

Diferencia entre Angular Service y Angular Factory

Parece haber un poco de confusión entre los diferentes tipos de servicios que proporciona Angular, específicamente la diferencia entre los servicios de Angular service y Angular factory.

La mejor manera de diferenciarlos es crear un servicio en ambos servicios y comprender sus diferencias.

Crearemos un módulo de Angular llamado todoList y lo asignaremos a la variable list.

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

Ahora, crearemos el Angular service llamado todoList usando tanto Angular service como Angular factory para ver la diferencia. Para crear el servicio Angular service, llame al método de servicio en el módulo.

El primer parámetro del método de servicio es el nombre del servicio. Llamémoslo todoListService.

El segundo parámetro del método de servicio es una función. Pasemos una función anónima que no necesita argumentos.

Entonces, nuestro código se verá como a continuación.

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

})

Implementemos el todoListService. Cuando inyectamos un servicio en un controlador por primera vez, Angular usa la palabra clave new en la referencia de función que pasamos en un método de servicio.

En otras palabras, trata nuestra función como una función constructora. Dos cosas suceden automáticamente con una palabra clave new; primero, obtenemos un objeto vacío asignado a la variable this.

En segundo lugar, nuestra función devolverá este objeto. El resto de la función es nuestra definición del servicio.

Entonces, configuremos un array para almacenar nuestra lista de tareas pendientes. Nuestro código se verá como a continuación.

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

Vamos a crear dos métodos, addTodo y removeTodo, que no implementaremos. Nuestro código será como el siguiente.

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

Por lo tanto, nuestro Angular service está completo, que tiene la función addTodo y la función removeTodo, que está todo construido como un servicio.

Cuando inyectamos esto, la variable this se nos devuelve y se convierte en nuestro servicio. Para crear el servicio de Angular factory, llame al método de fábrica en el módulo.

El primer parámetro del método de servicio es el nombre del servicio, y lo llamaremos todoListFactory. El segundo parámetro del método de servicio es una función.

Pasemos una función anónima que no necesita argumentos.

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

})

Implementemos el servicio de fábrica.

La diferencia entre el Angular service y la Angular factory es que el Angular service está desnudo como función constructora. Por el contrario, la Angular factory solo se llama, y ​​lo que se devuelva de la función será nuestro servicio.

Para implementar nuestra todoListFactory, tenemos que crear un objeto vacío y devolver ese objeto. El resto de nuestra implementación es la misma.

Crearemos el array todoList y dos funciones addTodo y removeTodo. Así que nuestro código se verá como a continuación.

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
})

Disponemos de dos servicios, un factory service y un service service, el mismo. Podemos crear un controlador, inyectar nuestros servicios y ser utilizados de manera idéntica; ambos tienen los mismos métodos y propiedades.

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

La pregunta principal es por qué elegiría usar una fábrica en lugar de un servicio, ya que podemos hacer lo mismo con ambos. La respuesta es que si queremos devolver algo que no sea un objeto como una función, debemos usar una fábrica.

Digamos que queremos tener un servicio que nos permita crear tareas pendientes; para hacer esto, podemos crear una fábrica, y esta fábrica podría devolver una función, que toma una descripción de una tarea pendiente y un nombre.

Esa función devolverá un nuevo objeto con la descripción y el nombre establecidos. Y tendrá una función para marcar la tarea pendiente completa.

Nuestro código se verá como a continuación.

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

Entonces, podemos inyectar nuestro nuevo servicio de fábrica todoList en nuestro controlador y usarlo para crear nuevas tareas pendientes, como una tarea pendiente y una pendiente actualizada.

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")
})