AngularJS - Hizmetler

AngularJS, servis mimarisini kullanarak Kaygıların Ayrılması konseptini destekler. Hizmetler, yalnızca belirli görevleri gerçekleştirmekten sorumlu olan JavaScript işlevleridir. Bu, onları bakımı yapılabilir ve test edilebilir bireysel varlıklar yapar. Kontrolörler ve filtreler bunları ihtiyaç bazında arayabilir. Hizmetler normalde AngularJS'nin bağımlılık ekleme mekanizması kullanılarak enjekte edilir.

AngularJS birçok dahili hizmet sağlar. Örneğin, $ http, $ route, $ window, $ location, vb. Her hizmet belirli bir görevden sorumludur, örneğin $ http sunucu verilerini almak için ajax çağrısı yapmak için kullanılır, $ route ise yönlendirme bilgileri vb. Dahili servisler her zaman $ sembolü ile başlar.

Bir hizmet oluşturmanın iki yolu vardır -

Factory
Service

Fabrika Yöntemini Kullanma

Bu yöntemde önce bir fabrika tanımlıyoruz sonra ona yöntem atıyoruz.

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

Servis Yöntemini Kullanma

Bu yöntemde bir hizmet tanımlıyor ve sonra ona yöntem atıyoruz. Ayrıca ona zaten mevcut bir hizmet enjekte ediyoruz.

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

Misal

Aşağıdaki örnek, yukarıda belirtilen tüm direktiflerin kullanımını gösterir -

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>

Çıktı

Bir web tarayıcısında testAngularJS.htm dosyasını açın ve sonucu görün.