Fábrica e serviço em angularJS
Além de usar provedores para criar serviços, o AngularJS implementa ideias por meio de uma arquitetura de negócios (serviços). AngularJs fornece 2 funções para criar serviços:
- fábrica()
- serviço()
Mục lục
Fábrica
Uma fábrica é um método reutilizável, de retorno de valor que realiza tarefas como validação, ou regras de negócio, a fábrica gera os valores desejados quando o controlador ou serviço precisa. Esses valores gerados podem ser reaproveitados para controladores ou serviços sempre que necessário
O método factory() é uma função, ele cria um objeto de fábrica e retorna esse objeto, então não é o mesmo que o valor gerado pelo método value() que descrevi acima, a fábrica usa uma função para ajudar a fazer isso. operações como cálculo de valor… construir lógica que retorna valor, então retorna valor e pode injetar similar ao método value()
Exemplo de fábrica
<!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>Serviço
Em angularJS, serviço refere-se a um objeto singleton , que armazena um conjunto de funções que podem ser injetadas no controlador, essas funções possuem lógica para ajudar o serviço a lidar com o trabalho, por exemplo o serviço $http é usado para injetar o controlador para fazer HTTP operações
Para criar um serviço no módulo, o AngularJS disponibiliza o método service(), com este método definimos o serviço e atribuímos os métodos desejados a ele, Um serviço possui uma função construtora (inicialização), usando a palavra new key para criar objeto e coloque métodos e propriedades nele. Porém, diferente da fábrica, dentro do serviço após a definição não retornar valor, tudo é injetado no serviço através disso (o próprio contexto do objeto). Um serviço pode ser injetado em outros serviços, filtros, controladores, diretivas…
Exemplo de inicialização de dados por meio do serviço:
<!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>Com o exemplo acima, eu faço o trabalho usando o serviço através do mecanismo de injeção, coloco uma opção de seleção padrão na lista de seleção recém-inicializada e a seleciono como padrão selecionado.
Diferença entre Serviço e Fábrica
| Diferença | Fábrica | Serviço |
| Tipo de função (tipo de função) | Como uma função, retorna um objeto ou um valor | É uma função construtora ou inicializada por meio da nova palavra-chave . |
| Usar (Usar) | Usado para serviço não configurado, geralmente usado em estrutura lógica complexa | Adequado para uso em estruturas lógicas simples |
| Propriedades | definição sem usar esta palavra-chave | Use esta palavra-chave |
| Mecanismo de injeção amigável | Sem suporte | Apoiar |
| Primitivos (primitivos) | Tenho | Não |
| Escolha preferencial | Prioridade ao definir a classe | Prefira ao definir utilitários rápidos ou definir funções padrão ES6 |
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
