AngularJS Servis nedir?

alattin (16999) 7 yıl önce sordu

AngularJS Servis nedir? AngularJS Servis nasıl kullanılır?

Toplam 1 cevap


alattin (16999) 7 yıl önce cevapladı

AngularJS Servis nedir? AngularJS Servis nasıl kullanılır?

AngularJS'de servis, belirli görevleri yerine getiren fonksiyonları ifade eder. AngularJS ile kendi servislerinizi oluşturabileceğiniz gibi, bütünleşik gelen servislerden de faydalanabilirsiniz. $http, $route, $window, $location gibi servisler bunlardan bir kaçıdır.

Her servis belirli bi görevden sorumludur. Örneğin $http sunucuya ajax isteği yollayarak veri çekmeye yarar. Tüm bütünleşik hizmetler $ sembolü ile başlar.

AngularJS ile servisi iki şekilde yaratabilirsiniz:

  • factory
  • services

Kodun nasıl çalıştığını gör

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="app">   
    <div ng-controller="islem">
        <input type="text" ng-model="sayi1" /> <input type="text" ng-model="sayi2" />
        <p>
            <button ng-click="carp()">Carp</button>
            <button ng-click="topla()">Topla</button>
        </p>
        <p>
            sonuc : {{sonuc}}
        </p>
    </div>
    <hr />
    <div ng-controller="hesaplama">
        <input type="text" ng-model="sayi1" /> <input type="text" ng-model="sayi2" />
        <p>
            <button ng-click="cikartma()">Çıkart</button>
            
        </p>
        <p>
            sonuc : {{sonuc}}
        </p>
    </div>
    <script>
        var app = angular.module('app', []);
        app.factory('MatematikServisi', function () {
            var factory = {};
            factory.carpma = function (a, b) {
                return a * b;
            }
            factory.toplama = function (a, b) {
                return parseInt(a) + parseInt(b);
            }
            factory.cikartma = function (a, b) {
                return parseInt(a) - parseInt(b);
            };
            return factory;
        });
        app.service('HesaplamaServisi', function (MatematikServisi) {
            this.cikartma = function (a,b) {
                return MatematikServisi.cikartma(a,b);
            };

        });
        app.controller('islem', function ($scope, MatematikServisi) {
            $scope.carp = function () {
                $scope.sonuc = MatematikServisi.carpma($scope.sayi1, $scope.sayi2);
            }
            $scope.topla = function () {
                $scope.sonuc = MatematikServisi.toplama($scope.sayi1, $scope.sayi2);
            }
        })
        app.controller('hesaplama', function ($scope, HesaplamaServisi) {
            $scope.cikartma = function () {
                $scope.sonuc = HesaplamaServisi.cikartma($scope.sayi1, $scope.sayi2);
            }
        })
    </script>    

</body>
</html>

 

Yukarıdaki örnekte iki adet servis oluşturuluyor: MatematikServisi ve HesaplamaServisi . Bu servisler factory ve service metodları ile oluşturuluyor.

Daha sonra bu servisler Controller tarafından kullanılıyor. Bu örnekte Controller tarafından kullanılan servislerin View tarafınan nasıl kullanıldığını görebilirsiniz.

ng-click AngularJS özelliği ile Controller içindeki metot tetikleniyor. Servislerin Controller tarafından kullanıldığına dikkat edin.