Introduction aux méthodes d'utilisation de factory et de service dans AngularJS_AngularJS

AngularJS supporte le concept de « séparation des préoccupations » dans une architecture utilisant des services. Les services sont des fonctions JavaScript et sont chargés d'effectuer une seule tâche spécifique. Cela en fait également des entités distinctes pour la maintenance et les tests. Les contrôleurs et les filtres peuvent les appeler comme base pour les exigences. Les services sont injectés normalement à l'aide du mécanisme d'injection de dépendances d'AngularJS.

AngularJS fournit de nombreux services intrinsèques, tels que : $http, $route, $window, $location, etc. Chaque service est responsable d'une tâche spécifique, par exemple $http est utilisé pour créer des appels AJAX afin d'obtenir des données du serveur. $route est utilisé pour définir les informations de routage, etc. Les services intégrés sont toujours préfixés par le signe $.

Il existe deux manières de créer un service.

1. Usine
2. Services

Utiliser la méthode d'usine

À l'aide des méthodes d'usine, nous définissons d'abord une usine, puis lui attribuons des méthodes.

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

Utiliser la méthode de service

À l'aide des méthodes de service, nous définissons un service puis attribuons des méthodes. Injectez également des services déjà disponibles.

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

Exemple

L'exemple suivant démontrera toutes les commandes ci-dessus.
testAngularJS.html

  


  
AngularJS Sample Application
  

   
Enter a number: 
   X2
   
Result: {{result}}
  
  
  <script>
   var mainApp = angular.module(&quot;mainApp&quot;, []);
   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>

Résultats

Ouvrez textAngularJS.html dans votre navigateur Web. Voir les résultats ci-dessous.