AngularJS - Servicios

AngularJS admite el concepto de Separación de preocupaciones mediante la arquitectura de servicios. Los servicios son funciones de JavaScript, que son responsables de realizar solo tareas específicas. Esto los convierte en entidades individuales que se pueden mantener y probar. Los controladores y filtros pueden llamarlos según sus necesidades. Los servicios normalmente se inyectan utilizando el mecanismo de inyección de dependencia de AngularJS.

AngularJS proporciona muchos servicios incorporados. Por ejemplo, $ http, $ route, $ window, $ location, etc. Cada servicio es responsable de una tarea específica, como $ http se usa para hacer una llamada ajax para obtener los datos del servidor, $ route se usa para definir el información de enrutamiento, etc. Los servicios incorporados siempre tienen el prefijo $ símbolo.

Hay dos formas de crear un servicio:

Factory
Service

Usando el método de fábrica

En este método, primero definimos una fábrica y luego le asignamos un método.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   
   return factory;
});

Usando el método de servicio

En este método, definimos un servicio y luego le asignamos un método. También le inyectamos un servicio ya disponible.

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

Ejemplo

El siguiente ejemplo muestra el uso de todas las directivas mencionadas anteriormente:

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Services</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b
            }
            return factory;
         });
         mainApp.service('CalcService', function(MathService) {
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         mainApp.controller('CalcController', function($scope, CalcService) {
            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
      
   </body>
</html>

Salida

Abra el archivo testAngularJS.htm en un navegador web y vea el resultado.

↰ Previous page Next page ↱