Différence entre Angular Service et Angular Factory

Nous présenterons les différences entre les services Angular service et Angular factory.

Nous présenterons également les raisons de choisir le Angular service plutôt que Angular factory et vice versa.

Différence entre Angular Service et Angular Factory

Il semble y avoir un peu de confusion entre les différents types de services fournis par Angular, en particulier la différence entre les services Angular service et Angular factory.

La meilleure façon de les différencier est de créer un service dans les deux services et de comprendre leurs différences.

Nous allons créer un module Angular nommé todoList et l’affecter à la variable list.

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

Maintenant, nous allons créer le Angular service appelé todoList en utilisant à la fois Angular service et Angular factory pour voir la différence. Pour créer le service Angular service, appelez la méthode service sur le module.

Le premier paramètre de la méthode de service est le nom du service. Appelons-le le todoListService.

Le deuxième paramètre de la méthode de service est une fonction. Passons une fonction anonyme qui n’a pas besoin d’arguments.

Ainsi, notre code ressemblera à ci-dessous.

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

})

Implémentons le todoListService.Lorsque nous injectons un service dans un contrôleur pour la première fois, Angular utilise le mot-clé new sur la référence de fonction que nous avons passée dans une méthode de service.

En d’autres termes, il traite notre fonction comme une fonction constructeur. Deux choses se produisent automatiquement avec un new mot-clé ; d’abord, nous obtenons un objet vide assigné à la variable this.

Deuxièmement, notre fonction renverra cet objet. Le reste de la fonction est notre définition du service.

Alors, mettons en place un tableau pour stocker notre liste de tâches. Notre code ressemblera à ci-dessous.

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

Créons deux méthodes, addTodo et removeTodo, que nous n’implémenterons pas. Notre code sera comme ci-dessous.

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

Par conséquent, notre Angular service est complet, qui a la fonction addTodo et la fonction removeTodo, qui sont toutes construites en tant que service.

Lorsque nous injectons this, la variable this nous est renvoyée et devient notre service. Pour créer le service Angular factory, appelez la méthode factory sur le module.

Le premier paramètre de la méthode de service est le nom du service, et appelons-le todoListFactory. Le deuxième paramètre de la méthode de service est une fonction.

Passons une fonction anonyme qui n’a pas besoin d’arguments.

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

})

Implémentons le service d’usine.

La différence entre le Angular service et la Angular factory est que le Angular service est nu en tant que fonction de constructeur. En revanche, la Angular factory est simplement appelée, et tout ce qui est renvoyé par la fonction sera notre service.

Pour implémenter notre todoListFactory, nous devons créer un objet vide et retourner cet objet. Le reste de notre implémentation est le même.

Nous allons créer le tableau todoList et deux fonctions addTodo et removeTodo. Donc, notre code ressemblera à ci-dessous.

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

Nous avons deux services, un factory service et un service service, les mêmes. Nous pouvons créer un contrôleur, injecter nos services et être utilisés à l’identique ; ils ont tous les deux les mêmes méthodes et propriétés.

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

La principale question est de savoir pourquoi choisiriez-vous d’utiliser une usine plutôt qu’un service puisque nous pouvons faire la même chose avec les deux. La réponse est que si nous voulons retourner autre chose qu’un objet comme une fonction, nous devons utiliser une fabrique.

Disons que nous voulions avoir un service qui nous permette de créer une tâche à faire ; pour ce faire, nous pouvons créer une usine, et cette usine pourrait renvoyer une fonction, qui prend une description d’une tâche et un nom.

Cette fonction renverra un nouvel objet avec la description et le nom définis. Et il aura une fonction pour marquer la tâche comme terminée.

Notre code ressemblera à ci-dessous.

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

Ainsi, nous pouvons injecter notre nouveau service d’usine todoList dans notre contrôleur et l’utiliser pour créer de nouvelles tâches, telles qu’une tâche à faire et une tâche mise à jour.

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