5. Service kavramı

Servisler angularda bilgiyi veya fonksiyonu tek elden kontrollerlara yayabilmek amacıyla kullanılabilir. Bu bilgi genelde back-end tarafından alınan bilgilerdir.

  • Bir controllera servisi entegre etmek için modul.controller(“MyController”, function ($scope, ServisIsmi) {….} yapısını kullanırız.
  • Burada $scope da aynı bizim tanımladığımız gibi bir servistir. Başındaki $ servisin custom olarak developer tarafından tanımlanan değil hazır bir servis olduğunu belirtir.
  • Controller içerisinde servis metotlarını ise  ServisIsmi.MetodIsmi(parametre1,parametre2); şeklinde kullanırız.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta charset="utf-8" />

<script>

   var modul = angular.module("MyModule", []);

    modul.service("HesapMakinesi", function () {

    this.topla = function (s1, s2) {
     return s1 + s2;
    }

    this.cikar = function (s1, s2) {
     return s1 - s2;
   }

   this.carp = function (s1, s2) {
     return s1 * s2;
  }

 });

 modul.controller("MyController", function ($scope, HesapMakinesi) {

   $scope.toplama = function () { $scope.sonuc = HesapMakinesi.topla($scope.sayi1, $scope.sayi2) };
   $scope.cikarma = function () { $scope.sonuc = HesapMakinesi.cikar($scope.sayi1, $scope.sayi2) };
   $scope.carpma = function () { $scope.sonuc = HesapMakinesi.carp($scope.sayi1, $scope.sayi2) };

  });

  modul.controller("MyController2", function ($scope, HesapMakinesi) {

  $scope.toplama = function () { $scope.sonuc = HesapMakinesi.topla($scope.sayi1, $scope.sayi2) };
  $scope.cikarma = function () { $scope.sonuc = HesapMakinesi.cikar($scope.sayi1, $scope.sayi2) };
  $scope.carpma = function () { $scope.sonuc = HesapMakinesi.carp($scope.sayi1, $scope.sayi2) };

 });

 </script>
</head>
 
<body ng-app="MyModule" >

 <div ng-controller="MyController">
     <b>Sayi 1:</b> <input type="number" ng-model="sayi1" /><br />
     <b>Sayi 2:</b> <input type="number" ng-model="sayi2" /><br />
     <b>Sonuc :</b> {{sonuc}}<br />

     <button ng-click="toplama()">sayilari topla</button>
     <button ng-click="cikarma()">sayilari cikar</button>
     <button ng-click="carpma()">sayilari çarp</button>
 </div>
 <b>**********************************************************************</b>
  <div ng-controller="MyController2">
      <b>Sayi 1:</b> <input type="number" ng-model="sayi1" /><br />
      <b>Sayi 2:</b> <input type="number" ng-model="sayi2" /><br />
      <b>Sonuc :</b> {{sonuc}}<br />

      <button ng-click="toplama()">sayilari topla</button>
      <button ng-click="cikarma()">sayilari cikar</button>
      <button ng-click="carpma()">sayilari çarp</button>
    </div>
  </body>
 </html>