Fabbrica e servizio in angularJS
Oltre a utilizzare i provider per creare servizi, AngularJS implementa idee attraverso un'architettura aziendale (servizi). AngularJs fornisce 2 funzioni per creare servizi:
- fabbrica()
- servizio()
Mục lục
Fabbrica
Una fabbrica è un metodo riutilizzabile di restituzione del valore che esegue attività come la convalida o le regole aziendali, la fabbrica genera i valori desiderati quando il controllore o il servizio ne hanno bisogno. Questi valori generati possono essere riutilizzati per controller o servizi quando necessario
Il metodo factory() è una funzione, crea un oggetto factory e restituisce quell'oggetto, quindi non è lo stesso del valore generato dal metodo value() che ho descritto sopra, la factory usa una funzione per aiutare a fare questo. operazioni come il calcolo del valore… costruisce una logica che restituisce valore, quindi restituisce valore e può iniettare in modo simile al metodo value()
Esempio di fabbrica
<!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>Servizio
In angularJS, il servizio si riferisce a un oggetto singleton , che memorizza un insieme di funzioni che possono essere iniettate nel controller, queste funzioni hanno una logica per aiutare il servizio a gestire il lavoro, ad esempio il servizio $http viene utilizzato per iniettare il controller per eseguire HTTP operazioni
Per creare un servizio nel modulo, AngularJS fornisce il metodo service(), con questo metodo definiamo il servizio e gli assegniamo i metodi desiderati, Un servizio ha una funzione di costruzione (inizializzazione), usando la parola nuova chiave per creare l'oggetto e metti metodi e proprietà al suo interno. Tuttavia, a differenza di factory, il servizio interno dopo la definizione non restituisce valore, tutto viene iniettato nel servizio attraverso questo (il contesto dell'oggetto stesso). Un servizio può essere iniettato in altri servizi, filtri, controller, direttive…
Esempio di inizializzazione dei dati tramite il servizio:
<!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>Con l'esempio sopra, eseguo il lavoro utilizzando il servizio tramite il meccanismo di iniezione, inserisco un'opzione di selezione predefinita nell'elenco di selezione appena inizializzato e la seleziono come predefinita selezionata.
Differenza tra servizio e fabbrica
| Differenza | Fabbrica | Servizio |
| Tipo di funzione (tipo di funzione) | Come funzione, restituisce un oggetto o un valore | È una funzione di costruzione o inizializzata tramite la nuova parola chiave |
| Usa (Usa) | Utilizzato per servizi non configurati, spesso utilizzati in strutture logiche complesse | Adatto per l'uso in strutture logiche semplici |
| Proprietà | definire senza questa parola chiave | Usa questa parola chiave |
| Meccanismo di iniezione amichevole | Senza supporto | Supporto |
| Primitivi (primitivi) | Ho | No |
| Scelta preferita | Priorità nella definizione della classe | Preferire quando si definiscono utilità rapide o si definiscono funzioni standard ES6 |
