19 Kasım 2014 Çarşamba

AngularJS - Factory, Service ve Provider

Tıpkı benim gibi AngularJS'e yeni başlayanlar için belki de en çok kafa karışıklığına neden olan konulardan birisi; Factory, Service ve Provider'dir. Bunların tam olarak ne işe yaradığı, hangi durumlarda ve nasıl kullanıldığı, kısıtlamaları vs. oldukça karışık görünür. Anladığım kadarıyla burada toparlamaya çalışacağım.
AngularJS'de sayfa yenilendiğinde veya yönlendirme yapıldığında controller'ların içeriği silinir. Bu nedenle, uygulama genelinde kullanılacak nesnelere erişimi mümkün kılmak için Service'ler kullanılır. Angular'da Service oluşturulması ve kaydedilmesi 3 yolla gerçekleştirilebilir.

1. Factory
Syntax: module.factory( 'factoryName', functionName );
factoryName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait referansın çağırımındaki değer geri döndürülür.
2. Service
Syntax: module.service( 'serviceName', functionName );
serviceName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait bir instance geri döndürülür. new functionName() diyebiliriz.
3. Provider
Syntax: module.provider( 'providerName', functionName );
providerName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait referansın $get methodunun çağırımındaki değer geri döndürülür.
Provider, Service ve Factory'e göre daha karışık görünmesine rağmen onlardan çok daha fazla avantajı vardır. Uygulama henüz başlamadığında, module configuration yapıldığı esnâda Provider'lar kullanılabilir. Aslında Angular Provider'ı tanımakta, Factory ve Service ise Provider'ı sadece miras almaktadır.

Aşağıda bu konuda basit bir örnek bulunmaktadır. Ben .js kodu üzerinde duracağım. Örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.

var myModule = angular.module('myModule', []);
var myModule = angular.module('myModule', []);

var MyFunc = function() {
    this.name = 'Factory';
    console.log('init constructor');
 
    this.$get = function() {
 console.log('$get function');
 this.name = 'Provider';
 return this.name;
    };

    console.log('end constructor');
    return this.name;
};

myModule.service('myService', MyFunc);

myModule.factory('myFactory', MyFunc);

myModule.provider('myProvider', MyFunc);

myModule.controller('myController', [ '$scope', 'myService', 'myFactory',
  'myProvider', function($scope, myService, myFactory, myProvider) {
   $scope.serviceMsg = myService;
   $scope.factoryMsg = myFactory;
   $scope.providerMsg = myProvider;
  }]);

Yukarıdaki örnekte ilk olarak MyFunc isminde bir constructor fonksiyonu tanımlanıyor. Öntanımlı olarak fonksiyon içerisinde name değişkenine 'Factory' atanıyor. $get fonksiyonunda ise 'Provider' atanıyor. Constructor fonksiyonuna ve $get fonksiyonuna girişte console'a log yazdırılıyor. Aşağıdaki ekran görüntüsünden de görüleceği üzere; Provider kullanımında, constructor çağırımından sonra çağırılan $get() fonksiyonunda işlem yapılıyor. Yukarıda bahsettiğim gibi; bu fonksiyon configuration safhasında çağırıldığı için sadece Provider kullanımında bu log basılıyor.
Daha sonra myService, myFactory ve myProvider isminde service, factory ve provider oluşturuluyor.
myModule.controller('myController', [ '$scope', 'myService', 'myFactory', 'myProvider', function($scope, myService, myFactory, myProvider)... kullanımında ise; service, factory ve provider myController oluşturulurken inject ediliyor.


Not: Şu ana kadar paylaştığım Angular uygulamaların tamamına da buradan erişebilirsiniz.

Referanslar

Hiç yorum yok: