Unterschied zwischen Angular Service und Angular Factory
![Unterschied zwischen Angular Service und Angular Factory](/img/Angular/feature-image---angular-service-vs-angular-factory.webp)
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")
})
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn