Provider in AngularJS
- Anbieter in AngularJS
-
Unterschied zwischen
ProviderundFactoryin AngularJS - Unterschied zwischen Provider und Service in AngularJS
Wir stellen Anbieter in AngularJS und die Unterschiede zwischen provider, factory und service in AngularJS vor.
Anbieter in AngularJS
Anbieter sind eine Art von Dienst. Die Funktion provider() ermöglicht es uns, einen konfigurierbaren Dienst zu erstellen, der die Methode $get enthält.
Stellen wir uns vor, Sie erstellen eine Webanwendung, die APIs verwendet. Wenn wir einen API-Schlüssel festlegen müssen, um auf die Daten von der API in unserer Anwendung zuzugreifen, können wir dies in der module-Konfiguration festlegen und die Eingaben mithilfe des $provide-Dienstes an den Anbieter weitergeben.
Lassen Sie uns ein Modul mit einem Anbieter erstellen, der einen Wert zurückgibt, wenn ein Controller den Anbieter aufruft. Zuerst fügen wir die AngularJS-Bibliothek und die Datei app.js mit script-Tags hinzu.
# AngularJS
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="app.js"></script>
</head>
Wir werden die AngularJS-Anwendung mit ng-app und den Controller mit ng-controller definieren.
# AngularJS
<body ng-app="myApp">
<div ng-controller="myController"></div>
</body>
In app.js erstellen wir unser Modul.
# AngularJS
var module = angular.module("myApp", []);
Wir werden einen provider verwenden; Die Anbieter tun, was ihr Name schon sagt, nämlich dass sie Werte bereitstellen, also werden wir in diesem Fall einen Zeichenfolgenwert bereitstellen. Der Provider hat eine Methode definiert: $get.
Der Anbieter kann mehrere Methoden haben, aber Angular-Aufrufe sind $get. Also weisen wir der $get-Methode eine Funktion zu, die einen String-Wert zurückgibt.
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
return "Value from Provider";
};
});
Wir werden den Anbieter in unseren Controller einfügen und console.log() den Wert des Anbieters.
# AngularJS
module.controller("myController", function(myProvider){
console.log(myProvider);
});
Ausgabe:
Wie im obigen Beispiel gezeigt, haben wir den genauen Wert vom Anbieter in unserer Konsole erhalten. Das hat also funktioniert, und wir können einen Anbieter verwenden, um einen Wert zurückzugeben und diesen in unsere Methode einzufügen.
Es ist wichtig zu beachten, dass alle Anbieter alle gleich sind und Service und Fabrik auch gleich sind. Aber egal wie oft wir den Anbieter injizieren, der Wert wird nur einmal ausgeführt.
Wir können es testen, indem wir einen anderen Controller erstellen, wie unten gezeigt.
# AngularJS
module.controller("myController", function(myProvider){
console.log("First Controller:" + myProvider);
});
module.controller("myController2", function(myProvider){
console.log("Second Controller:" + myProvider);
});
Wir werden console.log() innerhalb der $get-Methode unseres Providers verwenden, um einen Wert innerhalb des Providers zu protokollieren. Wenn dieser Anbieter also ausgeführt wird, wird er denselben Wert protokollieren.
So können wir überprüfen, ob unser Provider ein- oder zweimal ausgeführt wird.
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
console.log("Provider Executed!")
return "Value from Provider";
};
});
Fügen wir div für unseren zweiten Controller in index.html hinzu.
# AngularJS
<div ng-controller="myController"></div>
<div ng-controller="myController2"></div>
Ausgabe:
Das obige Beispiel zeigt, dass der Anbieter nur einmal ausgeführt wird, der Wert des Anbieters jedoch in beide Controller eingefügt wird. Wir haben zwei Ausgabemeldungen von unseren Controllern erhalten.
Es ist wichtig zu beachten, dass Angular es ausführt, wenn ein Anbieter injiziert wird, $get and store aufruft und sich diesen Wert merkt. Jedes weitere Mal, wenn der Anbieter injiziert wird, gibt er den Wert zurück, den er beim ersten Mal extrahiert hat.
Unterschied zwischen Provider und Factory in AngularJS
Lassen Sie uns eine factory mit der gleichen Funktionalität wie der von uns erstellte Anbieter erstellen. Jetzt kopieren wir unseren Provider und ändern ihn in eine factory.
Die Factory hat keine Methode $get, also rufen wir die Funktion direkt in unserer Factory auf und geben einen Wert zurück. Das ist der einzige Teil, der sich vom Anbieter unterscheidet.
Wir werden unsere Fabrik in beide Controller einspeisen. Unser Code in app.js sieht wie folgt aus.
# AngularJS
var module = angular.module("myApp", []);
module.factory("myFactory", function(){
console.log("Factory Executed!")
return "Value from Factory";
});
module.controller("myController", function(myFactory){
console.log("First Controller:" + myFactory);
});
module.controller("myController2", function(myFactory){
console.log("Second Controller:" + myFactory);
});
Ausgabe:
Wie im obigen Beispiel gezeigt, erhalten wir die gleichen Ergebnisse. Beide Provider und die Fabrik machen dasselbe, aber eine factory kann es in etwas weniger Code tun.
Unterschied zwischen Provider und Service in AngularJS
Erstellen wir einen service mit der gleichen Funktionalität wie der von uns erstellte Anbieter. Jetzt kopieren wir unseren Anbieter und ändern ihn in einen Service umwandeln.
Der Service hat keine Methode $get, also rufen wir die Funktion in unserem Dienst genauso wie factory direkt auf und geben einen Wert zurück. Das ist der einzige Teil, der sich vom Anbieter unterscheidet.
Wir werden unseren Dienst in beide Controller einspeisen. Unser Code in app.js sieht wie folgt aus.
# AngularJS
var module = angular.module("myApp", []);
module.service("myService", function(){
console.log("Service Executed!");
this.getValue = function(){
return "Object from Service";
}
});
module.controller("myController", function(myService){
console.log("First Controller:" + myService.getValue());
});
module.controller("myController2", function(myService){
console.log("Second Controller:" + myService.getValue());
});
Ausgabe:
Wie im obigen Beispiel gezeigt, erhalten wir die gleichen Ergebnisse. Beide Anbieter und der Dienst tun dasselbe, aber der Dienst gibt ein Objekt anstelle einer Zeichenfolge zurück.
Der Hauptpunkt ist, wann man einen provider, eine factory und einen service verwendet. Wenn wir anstelle eines Objekts einen Wert zurückgeben möchten, können wir keinen Dienst verwenden.
Wir müssen eine Fabrik anstelle eines Dienstes verwenden, aber wir werden eine Fabrik verwenden, um ein Objekt anstelle eines Werts zurückzugeben. Der Provider gewährt uns während der Konfigurationszeit Zugriff.
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