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>