Unterschied zwischen Angular Service und Angular Factory

Wir stellen Ihnen die Unterschiede zwischen den Dienstleistungen Angular service und Angular factory vor.

Wir werden auch die Gründe für die Wahl des Angular service gegenüber der Angular factory und umgekehrt vorstellen.

Unterschied zwischen Angular Service und Angular Factory

Es scheint ein wenig Verwirrung zwischen den verschiedenen Servicetypen zu geben, die Angular anbietet, insbesondere der Unterschied zwischen den Diensten Angular service und Angular factory.

Der beste Weg, um zwischen ihnen zu unterscheiden, besteht darin, einen Dienst in beiden Diensten zu erstellen und ihre Unterschiede zu verstehen.

Wir erstellen ein Angular-Modul namens todoList und weisen es der Variablen list zu.

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

Jetzt werden wir den Angular service namens todoList erstellen, indem wir sowohl Angular service als auch Angular factory verwenden, um den Unterschied zu sehen. Um den Dienst Angular service zu erstellen, rufen Sie die Dienstmethode auf dem Modul auf.

Der erste Parameter der Dienstmethode ist der Dienstname. Nennen wir es den todoListService.

Der zweite Parameter der Dienstmethode ist eine Funktion. Lassen Sie uns eine anonyme Funktion übergeben, die keine Argumente benötigt.

Unser Code sieht also wie folgt aus.

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

})

Lassen Sie uns den todoListService implementieren. Wenn wir zum ersten Mal einen Dienst in einen Controller injizieren, verwendet Angular das Schlüsselwort new für die Funktionsreferenz, die wir in einer Dienstmethode übergeben haben.

Mit anderen Worten, es behandelt unsere Funktion als Konstruktorfunktion. Zwei Dinge passieren automatisch mit einem new Schlüsselwort; Zuerst bekommen wir ein leeres Objekt, das der Variablen this zugewiesen wird.

Zweitens gibt unsere Funktion dieses Objekt zurück. Der Rest der Funktion ist unsere Definition des Dienstes.

Lassen Sie uns also ein Array einrichten, um unsere To-Do-Liste zu speichern. Unser Code sieht wie folgt aus.

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

Lassen Sie uns zwei Methoden erstellen, addTodo und removeTodo, die wir nicht implementieren werden. Unser Code wird wie folgt aussehen.

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

Damit ist unser Angular service komplett, der die addTodo-Funktion und die removeTodo-Funktion enthält, die alle als Service aufgebaut sind.

Wenn wir this einfügen, wird die Variable this an uns zurückgegeben und wird zu unserem Dienst. Um den Dienst Angular factory zu erstellen, rufen Sie die Factory-Methode auf dem Modul auf.

Der erste Parameter der Dienstmethode ist der Dienstname, nennen wir ihn todoListFactory. Der zweite Parameter der Dienstmethode ist eine Funktion.

Lassen Sie uns eine anonyme Funktion übergeben, die keine Argumente benötigt.

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

})

Lassen Sie uns den Werksdienst implementieren.

Der Unterschied zwischen dem Angular service und der Angular factory besteht darin, dass der Angular service als Konstruktorfunktion nackt ist. Im Gegensatz dazu wird die Angular factory nur aufgerufen, und was von der Funktion zurückgegeben wird, ist unser Dienst.

Um unsere todoListFactory zu implementieren, müssen wir ein leeres Objekt erstellen und dieses Objekt zurückgeben. Der Rest unserer Implementierung ist gleich.

Wir werden das Array todoList und zwei Funktionen addTodo und removeTodo erstellen. Unser Code sieht also wie folgt aus.

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

Wir haben zwei Dienstleistungen, einen factory service und einen service service, derselbe. Wir können einen Controller erstellen, unsere Dienste einspeisen und identisch verwendet werden; sie haben beide die gleichen Methoden und Eigenschaften.

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

Die Hauptfrage ist, warum Sie sich für eine Factory statt für einen Service entscheiden würden, da wir mit beiden das Gleiche tun können. Die Antwort lautet: Wenn wir etwas anderes als ein Objekt wie eine Funktion zurückgeben wollen, müssen wir eine Factory verwenden.

Nehmen wir an, wir wollten einen Dienst haben, der es uns ermöglicht, eine Aufgabe zu erstellen. Dazu können wir eine Factory erstellen, und diese Factory könnte eine Funktion zurückgeben, die eine Beschreibung einer Aufgabe und einen Namen benötigt.

Diese Funktion gibt ein neues Objekt mit der festgelegten Beschreibung und dem festgelegten Namen zurück. Und es wird eine Funktion haben, um die Aufgabe als abgeschlossen zu markieren.

Unser Code sieht wie folgt aus.

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

Wir können also unseren neuen Factory-Service todoList in unseren Controller einspeisen und ihn verwenden, um neue To-Dos zu erstellen, z. B. eine Aufgaben-To-Do und eine aktualisierte To-Do.

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