AngularJS - Dienstleistungen

AngularJS unterstützt das Konzept der Trennung von Bedenken mithilfe der Dienstarchitektur. Dienste sind JavaScript-Funktionen, die nur für bestimmte Aufgaben verantwortlich sind. Dies macht sie zu einzelnen Entitäten, die wartbar und testbar sind. Die Steuerungen und Filter können sie nach Bedarf aufrufen. Services werden normalerweise mithilfe des Abhängigkeitsinjektionsmechanismus von AngularJS injiziert.

AngularJS bietet viele integrierte Dienste. Zum Beispiel $ http, $ route, $ window, $ location usw. Jeder Dienst ist für eine bestimmte Aufgabe verantwortlich, z. B. wird $ http verwendet, um einen Ajax-Aufruf zum Abrufen der Serverdaten zu tätigen, und $ route wird zum Definieren der verwendet Routing-Informationen und so weiter. Den eingebauten Diensten wird immer das Symbol $ vorangestellt.

Es gibt zwei Möglichkeiten, einen Dienst zu erstellen:

Factory
Service

Verwenden der Factory-Methode

Bei dieser Methode definieren wir zuerst eine Factory und weisen ihr dann eine Methode zu.

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

Verwenden der Servicemethode

In dieser Methode definieren wir einen Service und weisen ihm dann eine Methode zu. Wir fügen ihm auch einen bereits verfügbaren Service hinzu.

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

Beispiel

Das folgende Beispiel zeigt die Verwendung aller oben genannten Richtlinien -

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>

Ausgabe

Öffnen Sie die Datei testAngularJS.htm in einem Webbrowser und sehen Sie das Ergebnis.