Factory und Service in AngularJS
Neben der Verwendung von Anbietern zur Erstellung von Diensten implementiert AngularJS Ideen durch eine Geschäftsarchitektur (Dienste). AngularJs bietet 2 Funktionen zum Erstellen von Diensten:
- Fabrik()
- Service()
Mục lục
Fabrik
Eine Factory ist eine wiederverwendbare, Wert zurückgebende Methode, die Aufgaben wie Validierung oder Geschäftsregeln durchführt. Die Factory generiert die gewünschten Werte, wenn die Steuerung oder der Dienst sie benötigt. Diese generierten Werte können bei Bedarf für Controller oder Dienste wiederverwendet werden
Die factory()-Methode ist eine Funktion, sie erstellt ein Factory- Objekt und gibt dieses Objekt zurück, also ist es nicht dasselbe wie der Wert, der von der value()-Methode generiert wird, die ich oben beschrieben habe, die Factory verwendet eine Funktion, um dies zu erreichen Operationen wie die Wertberechnung … bauen Logik auf, die den Wert zurückgibt, dann den Wert zurückgibt und ähnlich wie die Methode value() injizieren kann
Beispiel Fabrik
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Factory</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script> <style> input, select { margin-bottom: 10px; } </style> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <h1>Calculate total product</h1> Product price: <br /> <input type="number" ng-model="price" /> <br /> Shipping type: <br /> <select ng-model="shippingtype"> <option value="flat">Flat shipping - 10$</option> <option value="custom">Express - custom price</option> </select> <br /> <input type="number" ng-model="shipping" ng-show="shippingtype == 'custom'" /> <br /> <p>Total: {{calculate()}}</p> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.factory("calculateOrderService", function () { //define factory varialble var factory = {}; factory.flatShipping = function (price) { // shipping price value is 10 return price + 10; } factory.customShipping = function (price, shipping) { // shipping price value is 20 return price + shipping; } return factory; }); myApp.controller("myCtrl", function ($scope, calculateOrderService) { $scope.price = 0; $scope.shipping = 0; $scope.total = 0; $scope.shippingtype = "flat"; $scope.calculate = function () { if ($scope.shippingtype == "flat") { $scope.total = calculateOrderService.flatShipping($scope.price); } else { $scope.total = calculateOrderService.customShipping($scope.price, $scope.shipping); } return $scope.total; }; }); </script> </html>Service
In AngularJS bezieht sich Service auf ein Singleton -Objekt, das eine Reihe von Funktionen speichert, die in den Controller injiziert werden können. Diese Funktionen haben eine Logik, die dem Service hilft, den Job zu erledigen, zum Beispiel wird der $http-Service verwendet, um den Controller zu injizieren, um HTTP auszuführen Operationen
Um einen Dienst im Modul zu erstellen, stellt AngularJS die Methode service() zur Verfügung, mit dieser Methode definieren wir den Dienst und weisen ihm die gewünschten Methoden zu. Ein Dienst hat eine Konstruktorfunktion (Initialisierung), mit dem Wort new key to create object und Fügen Sie Methoden und Eigenschaften hinzu. Im Gegensatz zu Factory gibt der Inside-Service nach der Definition jedoch keinen Wert zurück, alles wird dadurch in den Service injiziert (der Objektkontext selbst). Ein Dienst kann in andere Dienste, Filter, Controller, Anweisungen eingefügt werden…
Beispiel für die Initialisierung von Daten durch den Dienst:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Service</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <select ng-model="selectedlistOption" ng-change="alertselected()" ng-options="item as item.name for item in listOption track by item.id"> </select> </div> </body> <script> var app = angular.module('myApp', []); app.service('myService', function () { this.optionDefault = {id: 0, name: "Choose nothing"}; this.addListOption = function (listOption) { listOption.unshift(this.optionDefault); }; }); app.controller('myController', function ($scope, myService) { // $scope.selected = ""; $scope.listOption = [ {id: 1, name: "Option 1"}, {id: 2, name: "Option 2"}, {id: 3, name: "Option 3"}, {id: 4, name: "Option 4"}, ]; myService.addListOption($scope.listOption); $scope.selectedlistOption= $scope.listOption[0]; $scope.alertselected = function(){ console.log($scope.selectedlistOption); } }); </script> </html>Im obigen Beispiel erledige ich die Arbeit mit dem Dienst über den Injektionsmechanismus, füge eine Standardauswahloption in die neu initialisierte Auswahlliste ein und wähle sie als Standardauswahl aus.
Unterschied zwischen Service und Fabrik
| Unterschied | Fabrik | Service |
| Funktionstyp (Funktionstyp) | Gibt als Funktion ein Objekt oder einen Wert zurück | Ist eine Konstruktorfunktion oder wird über das Schlüsselwort new |
| Verwenden (verwenden) | Wird für nicht konfigurierte Dienste verwendet, häufig in komplexen logischen Strukturen | Geeignet für den Einsatz in einfachen logischen Strukturen |
| Eigenschaften | Definition ohne Verwendung dieses Schlüsselworts | Verwenden Sie dieses Schlüsselwort |
| Freundlicher Injektionsmechanismus | Keine Unterstützung | Die Unterstützung |
| Primitive (Primitive) | Haben | Nein |
| Bevorzugte Wahl | Priorität bei der Definition der Klasse | Bevorzugt beim Definieren von Schnelldienstprogrammen oder beim Definieren von ES6-Standardfunktionen |
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
