AngularJS: Hizmet vs fabrika vs Servis sa─člay─▒c─▒


Al─▒nan cevaba git


Bir aras─▒ndaki farklar nelerdir Service , Provider ve Factory angularjs i├žinde?


3285





2013-03-27




Cevap say─▒s─▒n─▒ say: 30






AngularJS posta listesinden hizmet vs fabrika vs sa─člay─▒c─▒ ve enjeksiyon kullan─▒mlar─▒n─▒ a├ž─▒klayan inan─▒lmaz bir i┼č par├žac─▒─č─▒ ald─▒m . Cevaplar─▒ derlemek:

Hizmetler

S├Âzdizimi: module.service( 'serviceName', function );
Sonu├ž: serviceName'i enjekte edilebilir bir arg├╝man olarak bildirirken, size fonksiyonun bir ├Ârne─či verilecektir. Ba┼čka bir deyi┼čle new FunctionYouPassedToService() .

Fabrikalar

S├Âzdizimi: module.factory( 'factoryName', function );
Sonu├ž: FactoryName'i enjekte edilebilir bir arg├╝man olarak bildirirken, module.factory'ye iletilen i┼člev referans─▒n─▒ ├ža─č─▒rarak d├Ând├╝r├╝len de─čer size sa─članacakt─▒r .

Sa─člay─▒c─▒lar─▒

S├Âzdizimi: module.provider( 'providerName', function );
Sonu├ž: Sa─člay─▒c─▒Ad─▒y─▒ size enjekte edilebilir bir arg├╝man olarak bildirirken, size sa─članacakt─▒r (new ProviderFunction()).$get() . Yap─▒c─▒ i┼člevi $ get y├Ântemi ├ža─čr─▒lmadan ├Ânce ba┼člat─▒l─▒r - ProviderFunction i┼člev ba┼čvurusu module.provider ├Â─česine iletilir.

Sa─člay─▒c─▒lar, mod├╝l konfig├╝rasyon a┼čamas─▒nda konfig├╝re edilebilirler.

Verilen kod i├žin buraya bak─▒n .

─░┼čte Misko'nun harika bir a├ž─▒klamas─▒:

 provide.value('a', 123);

function Controller(a) {
  expect(a).toEqual(123);
}
 

Bu durumda enjekt├Âr de─čeri oldu─ču gibi verir. Ama ya de─čeri hesaplamak istersen? O zaman fabrika kullan

 provide.factory('b', function(a) {
  return a*2;
});

function Controller(b) {
  expect(b).toEqual(246);
}
 

Bu factory , de─čerin yarat─▒lmas─▒ndan sorumlu olan bir fonksiyondur. Fabrika fonksiyonunun ba┼čka ba─č─▒ml─▒l─▒klar isteyebilece─čine dikkat edin.

Peki ya daha fazla OO olmak ve Greeter ad─▒nda bir s─▒n─▒fa sahip olmak istiyorsan─▒z?

 function Greeter(a) {
  this.greet = function() {
    return 'Hello ' + a;
  }
}
 

O zaman ├Ârneklemek i├žin yazmak zorunda kalacaks─▒n

 provide.factory('greeter', function(a) {
  return new Greeter(a);
});
 

Sonra kontrol├Ârde b├Âyle bir "selamlay─▒c─▒" isteyebiliriz

 function Controller(greeter) {
  expect(greeter instanceof Greeter).toBe(true);
  expect(greeter.greet()).toEqual('Hello 123');
}
 

Ama bu ├žok fazla endi┼če verici. Bunu yazman─▒n daha k─▒sa bir yolu provider.service('greeter', Greeter);

Peki ya Greeter s─▒n─▒f─▒ enjeksiyondan ├Ânce yap─▒land─▒rmak istiyorsak? Sonra yazabiliriz

 provide.provider('greeter2', function() {
  var salutation = 'Hello';
  this.setSalutation = function(s) {
    salutation = s;
  }

  function Greeter(a) {
    this.greet = function() {
      return salutation + ' ' + a;
    }
  }

  this.$get = function(a) {
    return new Greeter(a);
  };
});
 

O zaman bunu yapabiliriz:

 angular.module('abc', []).config(function(greeter2Provider) {
  greeter2Provider.setSalutation('Halo');
});

function Controller(greeter2) {
  expect(greeter2.greet()).toEqual('Halo 123');
}
 

Bir not olarak, service , factory ve value her sa─člay─▒c─▒dan elde edilir.

 provider.service = function(name, Class) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.instantiate(Class);
    };
  });
}

provider.factory = function(name, factory) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.invoke(factory);
    };
  });
}

provider.value = function(name, value) {
  provider.factory(name, function() {
    return value;
  });
};
 

2857







JS Fiddle Demo

factory / service / ─░le "Merhaba d├╝nya" ├Ârne─či provider :

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

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!";
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!";
        }
    };
});
    
//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!";
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});
        

function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
    
    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
} 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
    {{hellos}}
</div>
</body> 


809







TL; DR

1) Bir Fabrika kullan─▒yorsan─▒z , bir nesne yarat─▒rs─▒n─▒z, ona ├Âzellikler ekler ve ard─▒ndan ayn─▒ nesneyi d├Ând├╝r├╝rs├╝n├╝z. Bu fabrikay─▒ denetleyicinize ge├žirdi─činizde, nesnedeki bu ├Âzellikler art─▒k o denetleyicide fabrikan─▒z arac─▒l─▒─č─▒yla kullan─▒labilir.

 app.controller(ÔÇśmyFactoryCtrlÔÇÖ, function($scope, myFactory){
  $scope.artist = myFactory.getArtist();
});

app.factory(ÔÇśmyFactoryÔÇÖ, function(){
  var _artist = ÔÇśShakiraÔÇÖ;
  var service = {};

  service.getArtist = function(){
    return _artist;
  }

  return service;
});
 


2) Servisi kullan─▒rken , AngularJS 'new' anahtar kelimesiyle onu sahne arkas─▒ndan ba┼člat─▒r. Bu nedenle, 'this' ├Âzelliklerini ekleyeceksiniz ve hizmet 'this' de─čerini d├Ând├╝recektir. Hizmeti kontrol cihaz─▒n─▒za ge├žirdi─činizde, 'bu' ├╝zerindeki ├Âzellikler ┼čimdi bu kontrol cihaz─▒nda hizmetiniz ├╝zerinden kullan─▒labilecektir.

 app.controller(ÔÇśmyServiceCtrlÔÇÖ, function($scope, myService){
  $scope.artist = myService.getArtist();
});

app.service(ÔÇśmyServiceÔÇÖ, function(){
  var _artist = ÔÇśNellyÔÇÖ;
  this.getArtist = function(){
    return _artist;
  }
});
 



3) Tedarik├žiler , .config () i┼člevine aktarabilece─činiz tek hizmettir. Hizmet nesnesine uygun hale getirmeden ├Ânce mod├╝l genelinde yap─▒land─▒rma sa─člamak istedi─činizde bir sa─člay─▒c─▒ kullan─▒n.

 app.controller(ÔÇśmyProviderÔÇÖ, function($scope, myProvider){
  $scope.artist = myProvider.getArtist();
  $scope.data.thingFromConfig = myProvider.thingOnConfig;
});

app.provider(ÔÇśmyProviderÔÇÖ, function(){
 //Only the next two lines are available in the app.config()
 this._artist = ÔÇśÔÇÖ;
 this.thingFromConfig = ÔÇśÔÇÖ;
  this.$get = function(){
    var that = this;
    return {
      getArtist: function(){
        return that._artist;
      },
      thingOnConfig: that.thingFromConfig
    }
  }
});

app.config(function(myProviderProvider){
  myProviderProvider.thingFromConfig = ÔÇśThis was set in configÔÇÖ;
});
 



TL olmayan; DR

1)
Fabrikalar, bir servis yaratman─▒n ve yap─▒land─▒rman─▒n en pop├╝ler yoludur. DR'nin s├Âyledi─činden daha fazlas─▒ yok. Siz sadece bir nesne yarat─▒r, ona ├Âzellikler ekler, sonra ayn─▒ nesneyi d├Ând├╝r├╝rs├╝n├╝z. Ard─▒ndan fabrikay─▒ kontrol cihaz─▒n─▒za ge├žirdi─činizde, objedeki bu ├Âzellikler art─▒k fabrikadan kontrol cihaz─▒nda mevcut olacakt─▒r. Daha kapsaml─▒ bir ├Ârnek a┼ča─č─▒dad─▒r.

 app.factory(ÔÇśmyFactoryÔÇÖ, function(){
  var service = {};
  return service;
});
 

┼×imdi ÔÇťserviseÔÇŁ ekledi─čimiz hangi ├Âzellikler olursa olsun, ÔÇťmyFactoryÔÇŁ yi kontrol cihaz─▒m─▒za ge├žirdi─čimizde bizim i├žin mevcut olacakt─▒r.

┼×imdi geri arama fonksiyonumuza baz─▒ '├Âzel' de─či┼čkenler ekleyelim. Bunlara do─črudan denetleyiciden eri┼čilemez, ancak nihayetinde gerekti─činde bu '├Âzel' de─či┼čkenleri de─či┼čtirebilmek i├žin 'hizmet' ├╝zerine baz─▒ al─▒c─▒ / ayarlay─▒c─▒ y├Ântemleri kuraca─č─▒z.

 app.factory(ÔÇśmyFactoryÔÇÖ, function($http, $q){
  var service = {};
  var baseUrl = ÔÇśhttps://itunes.apple.com/search?term=ÔÇÖ;
  var _artist = ÔÇśÔÇÖ;
  var _finalUrl = ÔÇśÔÇÖ;

  var makeUrl = function(){
   _artist = _artist.split(ÔÇś ÔÇś).join(ÔÇś+ÔÇÖ);
    _finalUrl = baseUrl + _artist + ÔÇś&callback=JSON_CALLBACKÔÇÖ;
    return _finalUrl
  }

  return service;
});
 

Burada, bu de─či┼čkenleri / i┼člevi 'hizmet' e eklemedi─čimizi fark edeceksiniz. Onlar─▒ daha sonra kullanmak veya de─či┼čtirmek i├žin basit├že yarat─▒yoruz.

  • baseUrl, iTunes API'sinin gerektirdi─či temel URL'dir.
  • _artist, aramak istedi─čimiz sanat├ž─▒d─▒r
  • _finalUrl, iTunes'a ├ža─čr─▒ yapaca─č─▒m─▒z son ve tamamen yerle┼čik URL'dir.
  • makeUrl, iTunes dostu URLÔÇÖnizi yaratacak ve d├Ând├╝recek bir i┼člevdir.

┼×imdi yard─▒mc─▒ / ├Âzel de─či┼čkenlerimiz ve i┼člevlerimiz yerinde oldu─ču i├žin, 'service' nesnesine baz─▒ ├Âzellikler ekleyelim. 'Hizmet' ├╝zerine koydu─čumuz ne olursa olsun, 'myFactory'yi' i├žine ge├žirdi─čimiz denetleyicinin i├žinde do─črudan kullan─▒labilir.

Sanat├ž─▒y─▒ basit bir ┼čekilde d├Ând├╝ren veya ayarlayan setArtist ve getArtist y├Ântemlerini olu┼čturaca─č─▒z. Olu┼čturulan URLÔÇÖmizle birlikte iTunes APIÔÇÖy─▒ ├ža─č─▒racak bir y├Ântem de olu┼čturaca─č─▒z. Bu y├Ântem, veriler iTunes API'dan geri d├Ând├╝─č├╝nde yerine getirecek bir s├Âz verecek. AngularJS'de verilen s├Âzleri kullanma konusunda fazla deneyimim olmad─▒ysa, onlara derinlemesine bir dal─▒┼č yapman─▒z─▒ ┼čiddetle tavsiye ederim.

A┼ča─č─▒da setArtist bir sanat├ž─▒ kabul eder ve izin verir sen sanat├ž─▒ ayarlamak i├žin. getArtist sanat├ž─▒y─▒ d├Ând├╝r├╝r. callItunes, ilk olarak $ http iste─čimizle kullanaca─č─▒m─▒z URL'yi olu┼čturmak i├žin makeUrl () i┼člevini ├ža─č─▒r─▒r. Sonra bir s├Âz nesnesi kurar, son URL adresimizle $ http iste─činde bulunur, sonra $ http bir s├Âz verdi─činde, iste─čimizden sonra .success veya .error diyebiliriz. Ard─▒ndan s├Âz├╝m├╝z├╝ iTunes verileriyle ├ž├Âz├╝yoruz veya 'Bir hata olu┼čtu' yazan bir mesajla reddediyoruz.

 app.factory('myFactory', function($http, $q){
  var service = {};
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  service.setArtist = function(artist){
    _artist = artist;
  }

  service.getArtist = function(){
    return _artist;
  }

  service.callItunes = function(){
    makeUrl();
    var deferred = $q.defer();
    $http({
      method: 'JSONP',
      url: _finalUrl
    }).success(function(data){
      deferred.resolve(data);
    }).error(function(){
      deferred.reject('There was an error')
    })
    return deferred.promise;
  }

  return service;
});
 

┼×imdi fabrikam─▒z tamamland─▒. Art─▒k herhangi bir denetleyiciye 'myFactory' enjekte edebiliyoruz ve daha sonra hizmet nesnesine ekledi─čimiz y├Ântemlerimizi (setArtist, getArtist ve callItunes) ├ža─č─▒rabiliyoruz.

 app.controller('myFactoryCtrl', function($scope, myFactory){
  $scope.data = {};
  $scope.updateArtist = function(){
    myFactory.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myFactory.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }
});
 

Yukar─▒daki kontrol ├╝nitesinde 'myFactory' servisini enjekte ediyoruz. Daha sonra $ kapsam nesnemize 'myFactory' verilerinden ├Âzellikler ayarlad─▒k. Yukar─▒daki tek zor kod, daha ├Ânce hi├ž s├Âz vermemi┼č olman─▒z. CallItunes bir s├Âz veriyor oldu─čundan, s├Âz├╝m├╝z├╝ iTunes verileriyle yerine getirdikten sonra .then () y├Ântemini kullanabilir ve yaln─▒zca $ kapsam.data.artistData ayarlayabiliriz. Denetleyicimizin ├žok 'zay─▒f' oldu─čunu fark edeceksiniz (Bu iyi bir kodlama uygulamas─▒d─▒r). T├╝m mant─▒ksal ve kal─▒c─▒ verilerimiz, denetleyicimizde de─čil hizmetimizde bulunur.

2) Servis
Bir Servis yaratma ile ilgili olarak bilmeniz gereken en b├╝y├╝k ┼čey 'new' anahtar kelimesi ile ba┼člat─▒lm─▒┼č olmas─▒d─▒r. JavaScript gurular─▒ i├žin bu, kodun niteli─či hakk─▒nda size b├╝y├╝k bir ipucu vermelidir. JavaScriptÔÇÖde s─▒n─▒rl─▒ bir ge├žmi┼če sahip olanlar i├žin veya 'yeni ÔÇÖanahtar kelimenin ger├žekte ne oldu─čunu bilmeyenler i├žin, sonunda HizmetÔÇÖin do─čas─▒n─▒ anlamada bize yard─▒mc─▒ olacak baz─▒ JavaScript temellerini g├Âzden ge├žirelim.

'New' anahtar kelimesiyle bir i┼člev ├ža─č─▒rd─▒─č─▒n─▒zda meydana gelen de─či┼čiklikleri ger├žekten g├Ârmek i├žin, bir i┼člev olu┼čtural─▒m ve 'new' anahtar kelimesi ile onu ├ža─č─▒ral─▒m, sonra terc├╝man─▒n 'new' anahtar kelimesini g├Ârd├╝─č├╝nde ne yapt─▒─č─▒n─▒ g├Âsterelim. Sonu├žlar─▒n ikisi de ayn─▒ olacak.

─░lk ├Ânce yap─▒c─▒m─▒z─▒ yaratal─▒m.

 var Person = function(name, age){
  this.name = name;
  this.age = age;
}
 

Bu tipik bir JavaScript yap─▒c─▒ i┼člevidir. ┼×imdi, 'new' anahtar s├Âzc├╝─č├╝n├╝ kullanarak Person i┼člevini ├ža─č─▒rd─▒─č─▒m─▒zda, bu 'yeni olu┼čturulan nesneye ba─članacak.

┼×imdi, Ki┼čimizin prototipine bir y├Ântem ekleyelim; b├Âylece bu, Ki┼čimizin 's─▒n─▒f─▒n─▒n' her ├Ârne─či i├žin ge├žerli olacakt─▒r.

 Person.prototype.sayName = function(){
  alert(ÔÇśMy name is ÔÇś + this.name);
}
 

┼×imdi, sayName i┼člevini prototip ├╝zerine koydu─čumuz i├žin, her bir ├ľrnek ├Ârne─či, s├Âz konusu ├Ârne─čin ad─▒n─▒ uyarmak i├žin sayName i┼člevini ├ža─č─▒rabilir.

┼×imdi, ki┼či yap─▒c─▒ i┼člevimiz ve prototipindeki sayName i┼člevimiz oldu─čuna g├Âre, ger├žekte bir Ki┼či ├Ârne─či olu┼čtural─▒m ve sonra sayName i┼člevini ├ža─č─▒ral─▒m.

 var tyler = new Person(ÔÇśTylerÔÇÖ, 23);
tyler.sayName(); //alerts ÔÇśMy name is TylerÔÇÖ
 

B├Âylece hep birlikte bir Yap─▒c─▒ olu┼čturma kodu, prototipine bir i┼člev ekleme, bir Person ├Ârne─či olu┼čturma ve ard─▒ndan i┼člevi prototipine ├ža─č─▒rma kodu ┼č├Âyle g├Âr├╝n├╝r.

 var Person = function(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function(){
  alert(ÔÇśMy name is ÔÇś + this.name);
}
var tyler = new Person(ÔÇśTylerÔÇÖ, 23);
tyler.sayName(); //alerts ÔÇśMy name is TylerÔÇÖ
 

┼×imdi 'new' anahtar s├Âzc├╝─č├╝n├╝ JavaScript'te kullan─▒rken ger├žekten neler oldu─čuna bir bakal─▒m. Dikkat etmeniz gereken ilk ┼čey, ├Ârne─čimizde 'new' ifadesini kulland─▒ktan sonra, 'tyler' ├╝zerinde bir nesneymi┼č gibi bir y├Ântem (sayName) olarak ├ža─č─▒rabildi─čimizdir - ├ž├╝nk├╝ ├Âyledir. ─░lk ├Ânce, Personeli kurucumuzun kodda g├Âr├╝p g├Âremememizin bir nesne d├Ând├╝rd├╝─č├╝n├╝ biliyoruz. ─░kincisi, sayName i┼člevimizin prototip ├╝zerinde bulundu─čundan ve do─črudan Person ├Ârne─činde bulunmad─▒─č─▒ndan, Person i┼člevinin d├Ând├╝rd├╝─č├╝ nesnenin ba┼čar─▒s─▒z aramalarda prototipine yetki vermesi gerekti─čini biliyoruz. Daha basit bir ifadeyle, tyler.sayName () i┼člevini ├ža─č─▒rd─▒─č─▒m─▒zda terc├╝man ÔÇťTamam, az ├Ânce olu┼čturdu─čumuz 'tyler' nesnesine bakaca─č─▒m, sayName i┼člevini bulun ve sonra onu aray─▒n. Bekle bir dakika, burada g├Ârm├╝yorum - t├╝m g├Ârd├╝─č├╝m isim ve ya┼č, prototipi kontrol edeyim. Evet, prototipte g├Âr├╝n├╝yor, arayay─▒m. ÔÇŁ.

A┼ča─č─▒da, 'yeni' anahtar kelimenin JavaScriptÔÇÖte ger├žekte ne yapt─▒─č─▒n─▒ d├╝┼č├╝nebilece─činiz kodunu bulabilirsiniz. Temelde yukar─▒daki paragraf─▒n bir kod ├Ârne─čidir. 'Terc├╝man g├Âr├╝n├╝m├╝n├╝' veya terc├╝man─▒n kodu notlar─▒n i├žindeki bi├žimine koydum.

 var Person = function(name, age){
  //The below line creates an object(obj) that will delegate to the personÔÇÖs prototype on failed lookups.
  //var obj = Object.create(Person.prototype);

  //The line directly below this sets ÔÇśthisÔÇÖ to the newly created object
  //this = obj;

  this.name = name;
  this.age = age;

  //return this;
}
 

┼×imdi 'new' anahtar s├Âzc├╝─č├╝n├╝n JavaScriptÔÇÖte ger├žekte ne yapt─▒─č─▒n─▒ bilme, AngularJSÔÇÖde bir Hizmet olu┼čturmak daha kolay olmal─▒d─▒r.

Bir Hizmet yarat─▒rken anla┼č─▒lmas─▒ gereken en b├╝y├╝k ┼čey, Hizmetlerin 'yeni' anahtar kelimesiyle ba┼člat─▒ld─▒─č─▒n─▒ bilmektir. Bu bilgiyi yukar─▒daki ├Ârneklerimizle birle┼čtirdi─činizde, ├Âzelliklerinizi ve y├Ântemlerinizi do─črudan 'buna' ekleyece─činizi ve daha sonra Hizmetten geri al─▒naca─č─▒n─▒ kabul etmelisiniz. Bu eylemde bir g├Âz atal─▒m.

Factory ├Ârne─činde orijinal olarak yapt─▒─č─▒m─▒z─▒n aksine, bir nesne olu┼čturmam─▒za gerek kalmadan, o nesneyi d├Ând├╝rmemize gerek kalmaz, ├ž├╝nk├╝ daha ├Ânce bir├žok kez bahsedildi─či gibi, 'new' anahtar s├Âzc├╝─č├╝n├╝ kulland─▒k, b├Âylece terc├╝man bu nesneyi yaratacak, bu prototip, o zaman i┼či yapmadan bize getir.

├ľncelikle ilk ├Ânce, '├Âzel' ve yard─▒mc─▒ i┼člevimizi olu┼čtural─▒m. Fabrikam─▒za ayn─▒ ┼čeyi yapt─▒─č─▒m─▒z i├žin bu ├žok tan─▒d─▒k gelmeli. Her sat─▒r─▒n burada ne yapt─▒─č─▒n─▒ a├ž─▒klamayaca─č─▒m ├ž├╝nk├╝ bunu fabrika ├Ârne─činde yapt─▒m, akl─▒n─▒z kar─▒┼čt─▒ysa fabrika ├Ârne─čini tekrar okuyun.

 app.service('myService', function($http, $q){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }
});
 

┼×imdi, denetleyicimizde kullan─▒labilecek t├╝m y├Ântemlerimizi 'this' e ekleyece─čiz.

 app.service('myService', function($http, $q){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  this.setArtist = function(artist){
    _artist = artist;
  }

  this.getArtist = function(){
    return _artist;
  }

  this.callItunes = function(){
    makeUrl();
    var deferred = $q.defer();
    $http({
      method: 'JSONP',
      url: _finalUrl
    }).success(function(data){
      deferred.resolve(data);
    }).error(function(){
      deferred.reject('There was an error')
    })
    return deferred.promise;
  }

});
 

┼×imdi t─▒pk─▒ fabrikam─▒zda oldu─ču gibi, setArtist, getArtist ve callItunes, servisimi hangi kontrol cihaz─▒nda ge├žirece─čimizde mevcut olacak. ─░┼čte myService denetleyicisi (fabrika denetleyicimizle neredeyse ayn─▒).

 app.controller('myServiceCtrl', function($scope, myService){
  $scope.data = {};
  $scope.updateArtist = function(){
    myService.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myService.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }
});
 

Daha ├Ânce de belirtti─čim gibi, 'yeni'nin ne yapt─▒─č─▒n─▒ ger├žekten anlad─▒ktan sonra, Hizmetler AngularJS'deki fabrikalarla neredeyse ayn─▒d─▒r.

3) Sa─člay─▒c─▒

Sa─člay─▒c─▒lar hakk─▒nda hat─▒rlanmas─▒ gereken en b├╝y├╝k ┼čey, uygulaman─▒z─▒n app.config b├Âl├╝m├╝ne girebilece─činiz tek hizmet olmalar─▒d─▒r. Hizmet nesnenizin bir b├Âl├╝m├╝n├╝ uygulaman─▒zda ba┼čka bir yerde mevcut olmadan ├Ânce de─či┼čtirmeniz gerekiyorsa, bu ├žok ├Ânemlidir. Hizmetlere / Fabrikalara ├žok benzese de, tart─▒┼čaca─č─▒m─▒z birka├ž farkl─▒l─▒k var.

├ľncelikle, Hizmet Sa─člay─▒c─▒'m─▒z─▒ Hizmet ve Fabrika ile yapt─▒─č─▒m─▒z ┼čekilde benzer ┼čekilde ayarlad─▒k. A┼ča─č─▒daki de─či┼čkenler bizim '├Âzel' ve yard─▒mc─▒ fonksiyonumuzdur.

 app.provider('myProvider', function(){
   var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  //Going to set this property on the config function below.
  this.thingFromConfig = ÔÇśÔÇÖ;

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }
}
 

* Yukar─▒daki kodun herhangi bir b├Âl├╝m├╝n├╝n kafa kar─▒┼čt─▒r─▒c─▒ olmas─▒ durumunda, neyin daha fazla ayr─▒nt─▒ verdi─čini a├ž─▒klad─▒─č─▒m Fabrika b├Âl├╝m├╝ne bak─▒n.

Sa─člay─▒c─▒lar─▒ ├╝├ž b├Âl├╝mden biri olarak d├╝┼č├╝nebilirsiniz. ─░lk b├Âl├╝m, daha sonra de─či┼čtirilecek / ayarlanacak '├Âzel' de─či┼čkenler / fonksiyonlard─▒r (yukar─▒da g├Âsterilmi┼čtir). ─░kinci b├Âl├╝m, app.config i┼člevinizde bulunabilecek de─či┼čkenler / i┼člevlerdir ve bu nedenle ba┼čka bir yerde (daha ├Ânce de g├Âsterilmi┼čtir) bulunmadan ├Ânce de─či┼čtirilebileceklerdir. Bu de─či┼čkenlerin 'this' anahtar kelimesine eklenmesi gerekti─čine dikkat etmek ├Ânemlidir. ├ľrne─čimizde, app.config dosyas─▒nda yaln─▒zca 'thingFromConfig' ifadesi kullan─▒labilir. ├ť├ž├╝nc├╝ b├Âl├╝m (a┼ča─č─▒da g├Âsterilmektedir), 'myProvider' hizmetini o belirli denetleyiciye iletti─činizde denetleyicinizde bulunabilecek t├╝m de─či┼čkenler / i┼člevlerdir.

Sa─člay─▒c─▒ ile bir hizmet olu┼čtururken, denetleyicinizde kullan─▒labilecek tek ├Âzellikler / y├Ântemler $ get () i┼člevinden d├Ând├╝r├╝len ├Âzellikler / y├Ântemlerdir. A┼ča─č─▒daki kod $ 'kelimesini' koyar '(ki bu fonksiyonun sonunda d├Ânece─čini biliyoruz). ┼×imdi, $ get i┼člevi denetleyicide kullan─▒labilir olmas─▒n─▒ istedi─čimiz t├╝m y├Ântemleri / ├Âzellikleri d├Ând├╝r├╝r. ─░┼čte bir kod ├Ârne─či.

 this.$get = function($http, $q){
    return {
      callItunes: function(){
        makeUrl();
        var deferred = $q.defer();
        $http({
          method: 'JSONP',
          url: _finalUrl
        }).success(function(data){
          deferred.resolve(data);
        }).error(function(){
          deferred.reject('There was an error')
        })
        return deferred.promise;
      },
      setArtist: function(artist){
        _artist = artist;
      },
      getArtist: function(){
        return _artist;
      },
      thingOnConfig: this.thingFromConfig
    }
  }
 

┼×imdi tam Sa─člay─▒c─▒ kodu ┼č├Âyle g├Âr├╝n├╝r

 app.provider('myProvider', function(){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  //Going to set this property on the config function below
  this.thingFromConfig = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  this.$get = function($http, $q){
    return {
      callItunes: function(){
        makeUrl();
        var deferred = $q.defer();
        $http({
          method: 'JSONP',
          url: _finalUrl
        }).success(function(data){
          deferred.resolve(data);
        }).error(function(){
          deferred.reject('There was an error')
        })
        return deferred.promise;
      },
      setArtist: function(artist){
        _artist = artist;
      },
      getArtist: function(){
        return _artist;
      },
      thingOnConfig: this.thingFromConfig
    }
  }
});
 

┼×imdi t─▒pk─▒ fabrikam─▒zda ve Hizmetimizde oldu─ču gibi, setArtist, getArtist ve callItunes, Provider'─▒m─▒ hangi kontrol cihaz─▒na ge├žirdi─čimizde mevcut olacak. ─░┼čte myProvider denetleyicisi (fabrika / Servis denetleyicimizle neredeyse ayn─▒).

 app.controller('myProviderCtrl', function($scope, myProvider){
  $scope.data = {};
  $scope.updateArtist = function(){
    myProvider.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myProvider.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }

  $scope.data.thingFromConfig = myProvider.thingOnConfig;
});
 

Daha ├Ânce belirtildi─či gibi, Sa─člay─▒c─▒ ile bir servis yaratman─▒n t├╝m amac─▒, nihai nesne uygulaman─▒n geri kalan─▒na iletilmeden ├Ânce baz─▒ de─či┼čkenleri app.config i┼člevi arac─▒l─▒─č─▒yla de─či┼čtirebilmektir. Bunun bir ├Ârne─čini g├Ârelim.

 app.config(function(myProviderProvider){
  //Providers are the only service you can pass into app.config
  myProviderProvider.thingFromConfig = 'This sentence was set in app.config. Providers are the only service that can be passed into config. Check out the code to see how it works';
});
 

Art─▒k 'thingFromConfig' ├Â─česinin sa─člay─▒c─▒m─▒zda nas─▒l bo┼č bir dize oldu─čunu g├Ârebilirsiniz, ancak bu DOM'da g├Âr├╝nd├╝─č├╝nde, 'Bu c├╝mle kuruldu ...' olacak.


643







T├╝m Hizmetler tekildir ; Her uygulama i├žin bir kez ├Ârneklenirler. Bunlar olabilir herhangi bir t├╝r ilkel bir nesne ger├žek, fonksiyon ya da ├Âzel bir t├╝r├╝, hatta bir ├Ârne─či olsun.

value , factory , service , constant , Ve provider y├Ântemleri t├╝m sa─člay─▒c─▒lar vard─▒r. Enjekt├Âre Hizmetleri nas─▒l ba┼člatt─▒─č─▒n─▒ ├Â─čretiyorlar.

En ayr─▒nt─▒l─▒, ama ayn─▒ zamanda en kapsaml─▒ olan─▒ bir Sa─člay─▒c─▒ tarifi. Kalan d├Ârt tarifi t├╝rleri - De─čer, Fabrika, Hizmet ve Sabit - Bir sa─člay─▒c─▒ tarifi ├╝st├╝nde bir s├Âzdizim g├╝zelli─čidir .

  • De─čer Tarif E─čer servis uygula kendinizi ├Ârne─čini ve sa─člamak en basit durumda, bir ├Ârneklenmi┼č de─čeri enjekt├Âre.
  • Fabrika tarifi bu hizmeti ├Ârne─čini gerekti─činde o ├ža─č─▒ran Enjekt├Âr fabrika fonksiyonunu verir. ├ça─čr─▒ld─▒─č─▒nda, fabrika i┼člevi servis ├Ârne─čini yarat─▒r ve d├Ând├╝r├╝r. Hizmetin ba─č─▒ml─▒l─▒klar─▒, fonksiyonlar─▒n arg├╝manlar─▒ olarak enjekte edilir. Yani bu tarifi kullanarak a┼ča─č─▒daki yetenekleri ekler:
    • Di─čer servisleri kullanabilme (ba─č─▒ml─▒l─▒klar─▒ var)
    • Servis ba┼člatma
    • Gecikmeli / tembel ba┼člatma
  • Servis tarifi neredeyse Fabrika tarifi ayn─▒d─▒r, ama burada Enjekt├Âr bir ├ža─č─▒ran yap─▒c─▒s─▒ yeni operat├Âr yerine bir fabrika fonksiyonu ile.
  • Sa─člay─▒c─▒ tarifi genellikle overkill . Fabrikan─▒n olu┼čturulmas─▒n─▒ konfig├╝re etmenize izin vererek bir kat daha aktarma katman─▒ ekler.

    Sa─člay─▒c─▒ tarifini yaln─▒zca uygulama ba┼člamadan ├Ânce yap─▒lmas─▒ gereken uygulama genelinde yap─▒land─▒rma i├žin bir API g├Âstermek istedi─činizde kullanmal─▒s─▒n─▒z. Bu genellikle yaln─▒zca davran─▒┼člar─▒ uygulamalar aras─▒nda biraz de─či┼čiklik g├Âstermesi gerekebilecek yeniden kullan─▒labilir servisler i├žin ilgin├žtir.

  • Sabit tarifi sadece sen bulunan servislere tan─▒mlaman─▒z─▒ sa─člar haricinde De─čer tarifi gibidir yap─▒land─▒rma safhas─▒nda. De─čer tarifi kullan─▒larak olu┼čturulan hizmetlerden daha erken. De─čerlerin aksine, kullan─▒larak dekore edilemezler decorator .
Sa─člay─▒c─▒ belgelerine bak─▒n .


511


2013-12-24





AngularJS Fabrika, Servis ve Sa─člay─▒c─▒s─▒n─▒ Anlamak

Bunlar─▒n hepsi tekrar kullan─▒labilir singleton nesnelerini payla┼čmak i├žin kullan─▒l─▒r. Yeniden kullan─▒labilir kodunuzu uygulaman─▒z / ├že┼čitli bile┼čenler / mod├╝ller aras─▒nda payla┼čman─▒za yard─▒mc─▒ olur.

Dok├╝manlar Servisinden / Fabrikadan :

  • Tembel olarak somutla┼čt─▒r─▒lm─▒┼č - A├ž─▒sal yaln─▒zca bir uygulama bile┼čeni buna ba─čl─▒ oldu─čunda bir servisi / fabrikay─▒ ba┼člat─▒r.
  • Singletons - Bir servise ba─čl─▒ olan her bir bile┼čen, servis fabrikas─▒ taraf─▒ndan ├╝retilen tekil ├Ârne─če referans al─▒r.

Fabrika

Bir fabrika, bir nesne olu┼čturmadan ├Ânce mant─▒─č─▒ i┼čleyebilece─činiz / ekleyebilece─činiz bir i┼člevdir, ard─▒ndan yeni olu┼čturulan nesne d├Ând├╝r├╝l├╝r.

 app.factory('MyFactory', function() {
    var serviceObj = {};
    //creating an object with methods/functions or variables
    serviceObj.myFunction = function() {
        //TO DO:
    };
    //return that object
    return serviceObj;
});
 

kullan─▒m

Sadece s─▒n─▒f gibi bir fonksiyonlar toplulu─ču olabilir. Bu nedenle, kontrol cihaz─▒n─▒z─▒n / fabrika / y├Ânlendirme i┼člevlerinin i├žine enjekte ederken farkl─▒ kontrol cihazlar─▒nda ba┼člat─▒labilir. Her uygulama i├žin yaln─▒zca bir kez somutla┼čt─▒r─▒l─▒r.

Hizmet

Servislere bakarken dizi prototipini d├╝┼č├╝n├╝n. Hizmet, 'new' anahtar s├Âzc├╝─č├╝n├╝ kullanarak yeni bir nesneyi ba┼člatan bir i┼člevdir. this Anahtar kelimeyi kullanarak bir servis nesnesine ├Âzellikler ve i┼člevler ekleyebilirsiniz . Bir fabrikadan farkl─▒ olarak hi├žbir ┼čey d├Ând├╝rmez (y├Ântemler / ├Âzellikler i├žeren bir nesneyi d├Ând├╝r├╝r).

 app.service('MyService', function() {
    //directly binding events to this context
    this.myServiceFunction = function() {
        //TO DO:
    };
});
 

kullan─▒m

Uygulama boyunca tek bir nesneyi payla┼čman─▒z gerekti─činde kullan─▒n. ├ľrne─čin, kimli─či do─črulanm─▒┼č kullan─▒c─▒ bilgileri, payla┼č─▒labilir y├Ântemler / veriler, Yard─▒mc─▒ Program i┼člevleri vb.

sa─člayan

Yap─▒land─▒r─▒labilir bir servis nesnesi olu┼čturmak i├žin bir sa─člay─▒c─▒ kullan─▒l─▒r. Servis ayar─▒n─▒ config fonksiyonundan yap─▒land─▒rabilirsiniz. $get() ─░┼člevini kullanarak bir de─čer d├Ând├╝r├╝r . $get ─░┼člev a├ž─▒sal olarak ├žal─▒┼čt─▒rma faz ├╝zerinde ├žal─▒┼čt─▒r─▒lmaktad─▒r.

 app.provider('configurableService', function() {
    var name = '';
    //this method can be be available at configuration time inside app.config.
    this.setName = function(newName) {
        name = newName;
    };
    this.$get = function() {
        var getName = function() {
             return name;
        };
        return {
            getName: getName //exposed object to where it gets injected.
        };
    };
});
 

kullan─▒m

Hizmet nesneniz i├žin kullan─▒labilir duruma getirmeden ├Ânce mod├╝l ┼čeklinde bir yap─▒land─▒rma sa─člaman─▒z gerekti─činde, ├Ârn. E─čer sevdi─či ├çevre temelinde API URL'sini ayarlamak istedi─činiz varsayal─▒m dev , stage ya prod

NOT

Servis ve fabrika kullan─▒lmad─▒─č─▒ s├╝rece sadece sa─člay─▒c─▒ a├ž─▒sal─▒n yap─▒land─▒rma a┼čamas─▒nda mevcut olacakt─▒r.

Umar─▒m bu, Fabrika, Servis ve Tedarik├ži hakk─▒ndaki anlay─▒┼č─▒n─▒z─▒ temizlemi┼čtir .


223







Benim i├žin vahiy, hepsinin ayn─▒ ┼čekilde ├žal─▒┼čt─▒─č─▒n─▒ fark etti─čimde ortaya ├ž─▒kt─▒: bir ┼čeyi bir kez ├žal─▒┼čt─▒rarak , elde ettikleri de─čeri depolayarak ve sonra ba─č─▒ml─▒l─▒k enjeksiyonuyla ba┼čvuruldu─čunda ayn─▒ depolanan de─čeri ├Âks├╝rd├╝ .http://en.wikipedia.org/wiki/Dependency_injection

Diyelim ki:

 app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);
 

├ť├ž aras─▒ndaki fark ┼čudur:

  1. a 'nin saklanan de─čeri ├žal─▒┼č─▒yor fn .
  2. b saklanan de─čeri new ing fn .
  3. c '─▒n saklanan de─čeri ilk ├Ânce bir ├Ârnek new almaktan fn sonra gelir ve ard─▒ndan bir $get ├Ârnek y├Ântemi ├žal─▒┼čt─▒r─▒r .

Bu, her enjeksiyonun de─čeri yaln─▒zca bir kez, ilk kez enjekte edildiklerinde ve nerede verildi─či AngularJS'in i├žinde bir ├Ânbellek nesnesi gibi bir ┼čey oldu─ču anlam─▒na gelir:

 cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()
 

Bu nedenle this hizmetlerde kullan─▒yoruz ve bir this.$get sa─člay─▒c─▒lar─▒ tan─▒ml─▒yoruz .


192







Hizmet vs sa─člay─▒c─▒ vs fabrika:

Basit tutmaya ├žal─▒┼č─▒yorum. Her ┼čey temel JavaScript konsepti ile ilgili.

Her ┼čeyden ├Ânce, AngularJS'deki hizmetler hakk─▒nda konu┼čal─▒m !

Servis Nedir: AngularJS'de Servis , baz─▒ faydal─▒ y├Ântemleri veya ├Âzellikleri saklayabilen tek bir JavaScript nesnesinden ba┼čka bir ┼čey de─čildir. Bu singleton nesnesi ngApp (Angular app) esas─▒na g├Âre olu┼čturulur ve mevcut uygulamadaki t├╝m kontrol├Ârler aras─▒nda payla┼č─▒l─▒r. Angularjs bir servis nesnesini ba┼člatt─▒─č─▒nda, bu servis nesnesini benzersiz bir servis ad─▒ ile kaydeder. Hizmet ├Ârne─čine ihtiyac─▒m─▒z oldu─čunda, her zaman, Angular bu hizmet ad─▒ i├žin kay─▒t defterini arar ve ba┼čvuruyu hizmet nesnesine d├Ând├╝r├╝r. Hizmet nesnesindeki y├Ântemi, eri┼čim ├Âzelliklerini vb. ├ça─č─▒rabiliriz. Ayr─▒ca, denetleyicilerin kapsam─▒ nesnesine ├Âzellikleri, y├Ântemleri koyabiliyor musunuz diye sorabilirsiniz! Peki neden servis nesnesine ihtiyac─▒n─▒z var? Cevaplar: hizmetler birden fazla denetleyici kapsam─▒ aras─▒nda payla┼č─▒l─▒yor. Bir kontrol cihaz─▒n─▒n kapsam nesnesine baz─▒ ├Âzellikler / y├Ântemler koyarsan─▒z, yaln─▒zca ge├žerli kapsam i├žin kullan─▒labilir. Ancak hizmet nesnesindeki y├Ântemleri, ├Âzellikleri tan─▒mlad─▒─č─▒n─▒zda, t├╝m d├╝nyada kullan─▒labilir olacak ve bu hizmeti enjekte ederek herhangi bir denetleyicinin kapsam─▒na eri┼čilebilir.

Bu nedenle, ├╝├ž denetleyici kapsam─▒ varsa, denetleyici A, denetleyiciB ve denetleyiciC olmas─▒na izin verin, t├╝m├╝ ayn─▒ hizmet ├Ârne─čini payla┼č─▒r.

 <div ng-controller='controllerA'>
    <!-- controllerA scope -->
</div>
<div ng-controller='controllerB'>
    <!-- controllerB scope -->
</div>
<div ng-controller='controllerC'>
    <!-- controllerC scope -->
</div>
 

Hizmet nas─▒l olu┼čturulur?

AngularJS bir hizmeti kaydetmek i├žin farkl─▒ y├Ântemler sunar. Burada ├╝├ž y├Ântem fabrikas─▒ (..), hizmet (..), sa─člay─▒c─▒ (..) ├╝zerinde yo─čunla┼čaca─č─▒z;

Bu ba─člant─▒y─▒ kod referans─▒ i├žin kullan─▒n

Fabrika fonksiyonu:

Bir fabrika fonksiyonunu a┼ča─č─▒daki gibi tan─▒mlayabiliriz.

 factory('serviceName',function fnFactory(){ return serviceInstance;})
 

AngularJS, iki parametre alan serviceName ve JavaScript i┼člevini alan 'factory (' serviceName ', fnFactory)' y├Ântemini sunar. Angular, a┼ča─č─▒daki gibi fnFactory () i┼člevini ├ža─č─▒rarak hizmet ├Ârne─či olu┼čturur .

 var serviceInstace = fnFactory();
 

Ge├žirilen i┼člev bir nesneyi tan─▒mlayabilir ve o nesneyi geri getirebilir. AngularJS bu nesne referans─▒n─▒ ilk arg├╝man olarak iletilen bir de─či┼čkene kaydeder. FnFactory'den iade edilen her ┼čey serviceInstance'a ba─članacakt─▒r. D├Ânen nesne yerine i┼člev, de─čerler vb. De geri d├Ânebiliriz. Ne geri d├Ânersek gidelim, hizmet ├Ârne─či i├žin ge├žerli olacak.

├ľrnek:

 var app= angular.module('myApp', []);
//creating service using factory method
app.factory('factoryPattern',function(){
  var data={
    'firstName':'Tom',
    'lastName':' Cruise',
    greet: function(){
      console.log('hello!' + this.firstName + this.lastName);
    }
  };

  //Now all the properties and methods of data object will be available in our service object
  return data;
});
 

Servis Fonksiyonu:

 service('serviceName',function fnServiceConstructor(){})
 

Ba┼čka bir yol, bir hizmeti kaydedebiliriz. Tek fark, AngularJS'nin servis nesnesini somutla┼čt─▒rmaya ├žal─▒┼čmas─▒d─▒r. Bu sefer a├ž─▒sal 'new' anahtar s├Âzc├╝─č├╝n├╝ kullan─▒r ve yap─▒c─▒ i┼člevine a┼ča─č─▒daki gibi bir ┼čey ├ža─č─▒r─▒r.

 var serviceInstance = new fnServiceConstructor();
 

Yap─▒c─▒ i┼člevinde 'this' anahtar s├Âzc├╝─č├╝n├╝ hizmet nesnesine ├Âzellikler / y├Ântemler eklemek i├žin kullanabiliriz. ├Ârnek:

 //Creating a service using the service method
var app= angular.module('myApp', []);
app.service('servicePattern',function(){
  this.firstName ='James';
  this.lastName =' Bond';
  this.greet = function(){
    console.log('My Name is '+ this.firstName + this.lastName);
  };
});
 

Sa─člay─▒c─▒ i┼člevi:

Provider () i┼člevi, servisler olu┼čturman─▒n ba┼čka bir yoludur. Kullan─▒c─▒ya yaln─▒zca bir mesaj mesaj─▒ g├Ânderen bir hizmet olu┼čturmakla ilgilenelim. Ancak, kullan─▒c─▒n─▒n kendi tebrik mesaj─▒n─▒ ayarlayabilmesi i├žin bir i┼člevsellik sa─člamak istiyoruz. Teknik a├ž─▒dan yap─▒land─▒r─▒labilir hizmetler olu┼čturmak istiyoruz. Bunu nas─▒l yapabiliriz? Uygulaman─▒n ├Âzel tebrik mesajlar─▒n─▒ iletebilmesi i├žin bir yol olmal─▒ ve Angularjs bunu hizmet ├Ârne─čimizi yaratan fabrika / yap─▒c─▒ i┼člevi i├žin kullan─▒labilir hale getirecekti. B├Âyle bir durumda sa─člay─▒c─▒ () i┼člevi i┼či yapar. sa─člay─▒c─▒ () i┼člevini kullanarak yap─▒land─▒r─▒labilir hizmetler olu┼čturabiliriz.

A┼ča─č─▒da verilen sa─člay─▒c─▒ s├Âzdizimini kullanarak yap─▒land─▒r─▒labilir hizmetler olu┼čturabiliriz.

 /*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});

/*step2:configure the service */
app.config(function configureService(serviceProvider){});
 

Sa─člay─▒c─▒ s├Âzdizimi dahili olarak nas─▒l ├žal─▒┼č─▒r?

1.Provider nesnesi, bizim sa─člay─▒c─▒ fonksiyonumuzda tan─▒mlad─▒─č─▒m─▒z yap─▒c─▒ fonksiyon kullan─▒larak yarat─▒l─▒r.

 var serviceProvider = new serviceProviderConstructor();
 

2. app.config () 'de ge├žirdi─čimiz i┼člev, ├žal─▒┼čt─▒r─▒ls─▒n. Buna yap─▒land─▒rma a┼čamas─▒ denir ve burada hizmetimizi ki┼čiselle┼čtirme ┼čans─▒m─▒z var.

 configureService(serviceProvider);
 

3.Finally servis ├Ârne─či, $ get serviceProvider metodunu ├ža─č─▒rarak yarat─▒l─▒r.

 serviceInstance = serviceProvider.$get()
 

S├Âzdizimini kullanarak hizmet olu┼čturmak i├žin ├Ârnek kod:

 var app= angular.module('myApp', []);
app.provider('providerPattern',function providerConstructor(){
  //this function works as constructor function for provider
  this.firstName = 'Arnold ';
  this.lastName = ' Schwarzenegger' ;
  this.greetMessage = ' Welcome, This is default Greeting Message' ;
  //adding some method which we can call in app.config() function
  this.setGreetMsg = function(msg){
    if(msg){
      this.greetMessage =  msg ;
    }
  };

  //We can also add a method which can change firstName and lastName
  this.$get = function(){
    var firstName = this.firstName;
    var lastName = this.lastName ;
    var greetMessage = this.greetMessage;
    var data={
       greet: function(){
         console.log('hello, ' + firstName + lastName+'! '+ greetMessage);
       }
    };
    return data ;
  };
});

app.config(
  function(providerPatternProvider){
    providerPatternProvider.setGreetMsg(' How do you do ?');
  }
);
 

├çal─▒┼čma demosu

├ľzet:


Fabrika, bir servis ├Ârne─či d├Ând├╝ren fabrika i┼člevini kullan─▒r. serviceInstance = fnFactory ();

Servis bir yap─▒c─▒ i┼člevini kullan─▒r ve Angular, hizmet ├Ârne─či olu┼čturmak i├žin 'new' anahtar s├Âzc├╝─č├╝n├╝ kullanarak bu yap─▒c─▒ i┼člevi ├ža─č─▒r─▒r. serviceInstance = new fnServiceConstructor ();

Sa─člay─▒c─▒ , bir sa─člay─▒c─▒Constructor i┼člevini, bu sa─člay─▒c─▒Constructor i┼člevini $ get bir fabrika i┼člevini tan─▒mlar . Hizmet nesnesini olu┼čturmak i├žin a├ž─▒sal ├ža─čr─▒lar $ get (). Sa─člay─▒c─▒ s├Âzdizimi, servis nesnesinin ba┼člat─▒lmadan ├Ânce yap─▒land─▒r─▒lmas─▒ ek bir avantaja sahiptir. serviceInstance = $ get ();


136







Buradaki birka├ž ki┼činin do─čru bir ┼čekilde belirtti─či gibi, bir fabrika, sa─člay─▒c─▒, servis, hatta de─čer ve sabit, ayn─▒ ┼čeyin versiyonlar─▒d─▒r. Daha genel provider olan─▒ hepsine ay─▒rabilirsin . Gibi:


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

─░┼čte bu g├Âr├╝nt├╝n├╝n kayna─č─▒:

http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/


85







Fabrika

AngularJS'ye bir i┼člev verin, fabrika istendi─činde AngularJS ├Ânbelleklenecek ve d├Ân├╝┼č de─čerini enjekte edecektir.

├ľrnek:

 app.factory('factory', function() {
    var name = '';
    // Return value **is** the object that will be injected
    return {
        name: name;
    }
})
 

Kullan─▒m─▒:

 app.controller('ctrl', function($scope, factory) {
     $scope.name = factory.name;
});
 

Hizmet

AngularJS'ye bir i┼člev verirsiniz, AngularJS bunu ba┼člatmak i├žin yeni ├ža─čr─▒ yapar. AngularJS'nin hizmet talep edildi─činde ├Ânbelleklenip enjekte edilece─či ┼čekilde yaratt─▒─č─▒ durum budur. Yana yeni hizmet ├Ârne─čini kullan─▒ld─▒, keyword bu ge├žerlidir ve ├Ârne─čine kar┼č─▒l─▒k gelir.

├ľrnek:

 app.service('service', function() {
     var name = '';
     this.setName = function(newName) {
         name = newName;
     }
     this.getName = function() {
         return name;
     }
});
 

Kullan─▒m─▒:

 app.controller('ctrl', function($scope, service) {
   $scope.name = service.getName();
});
 

sa─člayan

AngularJS'ye bir i┼člev verirsiniz ve AngularJS $get i┼člevini ├ža─č─▒r─▒r . $get Servis talep edildi─činde ├Ânbelle─če al─▒nacak ve enjekte edilecek olan fonksiyonun d├Ân├╝┼č de─čeridir .

Sa─člay─▒c─▒lar, AngularJS enjekte edilebilir y├Ântemi almak i├žin ├ža─č─▒rmadan ├Ânce sa─člay─▒c─▒y─▒ yap─▒land─▒rman─▒za izin verir $get .

├ľrnek:

 app.provider('provider', function() {
     var name = '';
     this.setName = function(newName) {
          name = newName;
     }
     this.$get = function() {
         return {
            name: name
         }
     }
})
 

Kullan─▒m (kontrol ├╝nitesinde enjekte edilebilir)

 app.controller('ctrl', function($scope, provider) {
    $scope.name = provider.name;
});
 

Kullan─▒m ( $get enjekte edilebilir olu┼čturmak i├žin daha ├Ânce sa─člay─▒c─▒y─▒ yap─▒land─▒rma denir)

 app.config(function(providerProvider) {
    providerProvider.setName('John');
});
 

63







Tedarik├žilerle u─čra┼č─▒rken ilgin├ž bir ┼čey fark ettim.

Enjekt├Ârlerin g├Âr├╝n├╝rl├╝─č├╝, sa─člay─▒c─▒lar i├žin servisler ve fabrikalar i├žin oldu─čundan farkl─▒d─▒r. Bir AngularJS "sabiti" (├Ârne─čin, myApp.constant('a', 'Robert'); ) bildirirseniz , bunu servislere, fabrikalara ve sa─člay─▒c─▒lara enjekte edebilirsiniz.

Ancak, bir AngularJS "de─čer" (├Ârne─čin,. myApp.value('b', {name: 'Jones'}); ) Bildirirseniz, bunu hizmetlere ve fabrikalara enjekte edebilirsiniz, ancak sa─člay─▒c─▒ olu┼čturma i┼člevine NOT. Bununla birlikte, $get sa─člay─▒c─▒n─▒z i├žin tan─▒mlad─▒─č─▒n─▒z i┼čleve enjekte edebilirsiniz . Bu AngularJS belgelerinde belirtilmi┼čtir, ancak ka├ž─▒r─▒lmas─▒ kolayd─▒r. De─čer ve sabit y├Ântemlerle ilgili b├Âl├╝mlerde% offer sayfas─▒nda bulabilirsiniz.

http://jsfiddle.net/R2Frv/1/

 <div ng-app="MyAppName">
    <div ng-controller="MyCtrl">
        <p>from Service: {{servGreet}}</p>
        <p>from Provider: {{provGreet}}</p>
    </div>
</div>
<script>
    var myApp = angular.module('MyAppName', []);

    myApp.constant('a', 'Robert');
    myApp.value('b', {name: 'Jones'});

    myApp.service('greetService', function(a,b) {
        this.greeter = 'Hi there, ' + a + ' ' + b.name;
    });

    myApp.provider('greetProvider', function(a) {
        this.firstName = a;
        this.$get = function(b) {
            this.lastName = b.name;
            this.fullName = this.firstName + ' ' + this.lastName;
            return this;
        };
    });

    function MyCtrl($scope, greetService, greetProvider) {
        $scope.servGreet = greetService.greeter;
        $scope.provGreet = greetProvider.fullName;
    }
</script>
 

56







Bu acemi i├žin ├žok kafa kar─▒┼čt─▒r─▒c─▒ bir par├ža ve kolay kelimelerle a├ž─▒kl─▒─ča kavu┼čturmaya ├žal─▒┼čt─▒m

AngularJS Service: Yard─▒mc─▒ fonksiyonlar─▒n kontrol ├╝nitesindeki servis referans─▒ ile payla┼č─▒lmas─▒ i├žin kullan─▒l─▒r. Servis do─čada tekildir, bu nedenle bir servis i├žin taray─▒c─▒da sadece bir ├Ârnek olu┼čturulur ve sayfa boyunca ayn─▒ referans kullan─▒l─▒r.

Hizmette, bu nesne ile ├Âzellik olarak i┼člev adlar─▒ yarat─▒r─▒z .

AngularJS Factory: Factory'nin amac─▒ Service ile ayn─▒d─▒r, ancak bu durumda yeni bir nesne yarat─▒r ve bu nesnenin ├Âzellikleri olarak i┼člevler ekleriz ve sonunda bu nesneyi d├Ând├╝r├╝r├╝z.

AngularJS Sa─člay─▒c─▒: Bunun amac─▒ yine ayn─▒d─▒r ancak Sa─člay─▒c─▒, $ get i┼člevinin ├ž─▒kt─▒s─▒n─▒ verir.

Servis, Fabrika ve Sa─člay─▒c─▒y─▒ tan─▒mlamak ve kullanmak http://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider adresinde a├ž─▒klanm─▒┼čt─▒r.http://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider


45







Benim i├žin fark─▒ anlaman─▒n en iyi ve en basit yolu:

 var service, factory;
service = factory = function(injection) {}
 

AngularJS belirli bile┼čenleri somutla┼čt─▒r─▒r (basitle┼čtirilmi┼č):

 // service
var angularService = new service(injection);

// factory
var angularFactory = factory(injection);
 

Bu nedenle, hizmet i├žin, AngularJS bile┼čeni haline gelen, hizmet bildirim i┼člevi taraf─▒ndan temsil edilen s─▒n─▒f─▒n nesne ├Ârne─čidir. Fabrika i├žin fabrika bildirim fonksiyonundan d├Ând├╝r├╝len sonu├žtur. Fabrika servisle ayn─▒ ┼čekilde davranabilir:

 var factoryAsService = function(injection) {
  return new function(injection) {
    // Service content
  }
}
 

D├╝┼č├╝nmenin en basit yolu ┼čudur:

  • Hizmet, bir singleton nesne ├Ârne─čidir. Kodunuz i├žin tek bir nesne sa─člamak istiyorsan─▒z hizmetleri kullan─▒n.
  • Fabrika bir s─▒n─▒ft─▒r. Kodunuz i├žin ├Âzel s─▒n─▒flar sa─člamak istiyorsan─▒z fabrikalar─▒ kullan─▒n (zaten ba┼člat─▒ld─▒klar─▒ i├žin hizmetlerle yap─▒lamaz).

Fabrika 's─▒n─▒f─▒' ├Ârne─či, sa─člay─▒c─▒n─▒n fark─▒n─▒n yan─▒ s─▒ra, yorumlarda da verilmi┼čtir.


34







Bu konudaki a├ž─▒klamam:

Temel olarak, s├Âz konusu t├╝rlerin t├╝m├╝ (servis, fabrika, sa─člay─▒c─▒ vb.) Sadece eski moda genel de─či┼čkenler gibi k├╝resel de─či┼čkenler (elbette t├╝m uygulama i├žin k├╝resel olan) yarat─▒r ve yap─▒land─▒r─▒r.

Genel de─či┼čkenler ├Ânerilmemekle birlikte, bu genel de─či┼čkenlerin as─▒l kullan─▒m─▒ , de─či┼čkeni ilgili denetleyiciye ileterek ba─č─▒ml─▒l─▒k enjeksiyonunu sa─člamakt─▒r .

"Genel de─či┼čkenler" i├žin de─čerler olu┼čtururken bir├žok zorluk seviyesi vard─▒r:

  1. Sabit
    Bu, di─čer dillerdeki sabitlerin (JavaScript'in bulunmad─▒─č─▒ gibi) oldu─ču gibi, t├╝m uygulama boyunca de─či┼čtirilmemesi gereken ger├žek bir sabiti tan─▒mlar.
  2. De─čer
    Bu de─či┼čtirilebilir bir de─čer veya nesnedir ve ba┼čka hizmetler veya fabrikalar olu┼čtururken bile enjekte edilebilecek baz─▒ global de─či┼čkenler olarak hizmet eder (bunlara bak─▒n─▒z). Bununla birlikte, bir " ger├žek de─čer " olmal─▒d─▒r, yani ger├žek de─čeri yazmal─▒ ve herhangi bir hesaplama veya programlama mant─▒─č─▒ kullanamaz (ba┼čka bir deyi┼čle 39 veya myText veya {prop: "value"} uygun, ancak 2 +2 de─čil).
  3. Fabrika
    Hemen hesaplanabilecek daha genel bir de─čer. Bir i┼člevi, de─čeri hesaplamak i├žin gereken mant─▒kla AngularJS'ye ge├žirerek ├žal─▒┼č─▒r ve AngularJS onu ├žal─▒┼čt─▒r─▒r ve d├Ân├╝┼č de─čerini adland─▒r─▒lm─▒┼č de─či┼čkene kaydeder.
    Bir nesneyi (bu durumda bir servise benzer ┼čekilde ├žal─▒┼č─▒r ) veya bir i┼člevi (de─či┼čkene geri arama i┼člevi olarak kaydedilecek) d├Ând├╝rmenin m├╝mk├╝n oldu─čunu unutmay─▒n .
  4. Servis
    Servis, yaln─▒zca de─čeri bir nesne oldu─čunda ge├žerli olan ve fonksiyona do─črudan herhangi bir mant─▒k yaz─▒lmas─▒na izin veren (bir kurucu olacakm─▒┼č gibi), ilan ve eri┼čime izin veren fabrikan─▒n daha soyulmu┼č bir versiyonudur. bu anahtar s├Âzc├╝─č├╝ kullanan nesne ├Âzellikleri .
  5. Sa─člay─▒c─▒ Fabrikan─▒n
    basitle┼čtirilmi┼č bir s├╝r├╝m├╝ olan bir servisin aksine , bir sa─člay─▒c─▒ "global" de─či┼čkenleri ba┼člatmak i├žin daha karma┼č─▒k, ancak daha esnek bir yoldur, en b├╝y├╝k esneklik ise app.config ├Â─česinden de─čerleri ayarlama se├žene─čidir. Bu anahtar kelimeyi kullanarak belirtilen ├Âzelliklere sahip bir i┼člevi sa─člayarak, bu hizmetten kullan─▒labilecek bir hizmet ve sa─člay─▒c─▒ kombinasyonu kullanmak gibi ├žal─▒┼č─▒r . Ard─▒ndan , yukar─▒daki ├Âzellikleri dosya yoluyla ayarlad─▒ktan sonra AngularJS taraf─▒ndan y├╝r├╝t├╝len ayr─▒ bir $ .get i┼člevine sahip olmas─▒ gerekir ve bu $ .get i┼člevi , geri d├Ân├╝┼č de─čerinin "global" de─čerini ba┼člatmak i├žin kullan─▒ld─▒─č─▒ gibi yukar─▒daki fabrika gibi davran─▒r. " de─či┼čkenler.
    app.config
    app.config

33







Benim anlay─▒┼č─▒m a┼ča─č─▒da ├žok basittir.

Fabrika: Sadece fabrikan─▒n i├žinde bir nesne yarat─▒r ve geri g├Ânderirsiniz.

Hizmet:

Yaln─▒zca bir i┼člevi tan─▒mlamak i├žin bu anahtar kelimeyi kullanan standart bir i┼čleve sahipsiniz.

Sa─člay─▒c─▒:

$get Tan─▒mlad─▒─č─▒n─▒z bir nesne var ve veriyi d├Ând├╝ren nesneyi elde etmek i├žin kullan─▒labilir.


26







A├ž─▒sal dok├╝manlardan ├ľzet :

  • Nesnelerin nas─▒l olu┼čturulaca─č─▒n─▒ tan─▒mlayan be┼č tarif t├╝r├╝ vard─▒r: De─čer , Fabrika , Servis , Sa─člay─▒c─▒ ve Sabit .
  • Fabrika ve Servis en yayg─▒n kullan─▒lan tariflerdir. Aralar─▒ndaki tek fark, Servis tarifinin, ├Âzel t├╝rdeki nesneler i├žin daha iyi ├žal─▒┼čmas─▒d─▒r, Fabrika ise JavaScript ilkeleri ve i┼člevleri ├╝retebilir.
  • Sa─člay─▒c─▒ tarifi ├žekirdek tarifi t├╝r├╝d├╝r ve t├╝m di─čer olanlar─▒ ├╝zerinde bir s├Âzdizim g├╝zelli─čidir.
  • Sa─člay─▒c─▒ en karma┼č─▒k tarif t├╝r├╝d├╝r. Genel yap─▒land─▒rma gerektiren yeniden kullan─▒labilir bir kod par├žas─▒ olu┼čturmad─▒k├ža buna ihtiyac─▒n─▒z yoktur.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin


SO'dan en iyi cevaplar:

https://stackoverflow.com/a/26924234/165673 (<- ─░Y─░) https://stackoverflow.com/a/27263882/165673
https://stackoverflow.com/a/16566144/165673


24







Zaten t├╝m iyi cevaplar. Servis ve Fabrika ile ilgili birka├ž nokta daha eklemek istiyorum . Servis / fabrika aras─▒ndaki fark ile birlikte. Ve biri gibi sorular olabilir:

  1. Servis mi yoksa fabrika mu kullanmal─▒y─▒m? Fark ne?
  2. Ayn─▒ m─▒ yoksa ayn─▒ davran─▒┼čta m─▒lar?

Servis ve fabrika aras─▒ndaki farkla ba┼člayal─▒m:

  1. ─░kisi de Singleton'dur : Ne zaman Angular bunlar─▒ ilk defa bir ba─č─▒ml─▒l─▒k olarak buldu─čunda, tek bir servis / fabrika ├Ârne─či olu┼čturur. ├ľrnek olu┼čturulduktan sonra, ayn─▒ ├Ârnek sonsuza dek kullan─▒l─▒r.

  2. Davran─▒┼čl─▒ bir nesneyi modellemek i├žin kullan─▒labilir : Her ikisinde de y├Ântemleri, dahili durum de─či┼čkenleri vb. Olabilir . Bu kodu yazma ┼čekliniz de─či┼čecek olsa da.

Hizmetler:

Hizmet, yap─▒c─▒ bir i┼člevdir ve Angular bunu yeni arayarak ba┼člatacakt─▒r yourServiceName() . Bu birka├ž ┼čey anlam─▒na gelir.

  1. ─░┼člevler ve ├Ârnek de─či┼čkenler ├Âzellikleri olacakt─▒r this .
  2. Bir de─čer d├Ând├╝rmene gerek yok. A├ž─▒sal new yourServiceName( )), this ├╝zerine koydu─čunuz t├╝m ├Âzelliklere sahip nesneyi al─▒r .

├ľrnek ├ľrnek:

 angular.service('MyService', function() {
  this.aServiceVariable = "Ved Prakash"
  this.aServiceMethod = function() {
    return //code
  };
});
 

Angular bu MyService hizmeti kendisine ba─čl─▒ olan bir kontrol cihaz─▒na enjekte etti─činde, kontrol cihaz─▒ MyService ├╝zerinde fonksiyonlar ├ža─č─▒rabilir, ├Ârne─čin MyService.aServiceMethod ().

Dikkatli olun this :

Yap─▒lan servis bir nesne oldu─čundan, i├žindeki y├Ântemler ├ža─čr─▒ld─▒klar─▒nda buna ba┼čvurabilir:

 angular.service('ScoreKeeper', function($http) {
  this.score = 0;

  this.getScore = function() {
    return this.score;
  };

  this.setScore = function(newScore) {
    this.score = newScore;
  };

  this.addOne = function() {
    this.score++;
  };
});
 

ScoreKeeper.setScore ├ľrne─čin, bir puanlama zincirini aramak i├žin cazip gelebilirsiniz , ├Ârne─čin skoru sunucudan alarak ba┼člatt─▒ysan─▒z: $http.get('/score').then(ScoreKeeper.setScore). Bununla ilgili sorun, ScoreKeeper.setScore buna this ba─čl─▒ olarak ├ža─čr─▒lacak null ve hatalarla kar┼č─▒la┼čacaks─▒n─▒z. Daha iyi yol olurdu $http.get('/score').then(ScoreKeeper.setScore.bind(ScoreKeeper)) . Bunu servis y├Ânteminizde kullanmay─▒ veya kullanmamay─▒ tercih ederken, onlar─▒ nas─▒l arad─▒─č─▒n─▒za dikkat edin.

┼×uradan bir De─čer D├Ând├╝rmek Service :

JavaScript yap─▒c─▒lar─▒n─▒n nas─▒l ├žal─▒┼čt─▒─č─▒ndan dolay─▒ (i.e., an Object) , bir constructor i┼člevden karma┼č─▒k bir de─čer d├Ând├╝r├╝rseniz , arayan ki┼či bu ├Ârne─či yerine bu Nesneyi al─▒r.

Temelde, a┼ča─č─▒dan fabrika ├Ârne─čini kopyalay─▒p yap─▒┼čt─▒rmak yerine ge├žebilece─čini Bu ara├žlar factory ile service ve bu ├Âdeme ┼čekli:

 angular.service('MyService', function($http) {
  var api = {};

  api.aServiceMethod= function() {
    return $http.get('/users');
  };
  return api;
});
 

B├Âylece, Angular hizmetinizi yeni MyService () ile kurdu─čunda, MyService ├Ârne─či yerine bu api nesnesini al─▒r.

Bu, ilkel t├╝rler i├žin karma┼č─▒k de─čerlerin (nesneler, i┼člevler) davran─▒┼č─▒d─▒r.

Fabrikalar:

Bir fabrika, de─čeri geri getiren d├╝z eski bir fonksiyondur. D├Ân├╝┼č de─čeri, fabrikaya ba─čl─▒ olanlara enjekte edilen de─čerdir. A├ž─▒sal'daki tipik bir fabrika modeli, a┼ča─č─▒daki gibi ├Âzelliklere sahip fonksiyonlara sahip bir nesneyi d├Ând├╝rmektir:

 angular.factory('MyFactory', function($http) {
  var api = {};

  api.aFactoryMethod= function() {
    return $http.get('/users');
  };

  return api;
});
 

Fabrika ba─č─▒ml─▒l─▒─č─▒ i├žin enjekte edilen de─čer, fabrikan─▒n iade de─čeridir ve bir nesne olmas─▒ gerekmez. Bir fonksiyon olabilir

Yukar─▒daki 1 ve 2 soru i├žin cevaplar:

├ço─čunlukla, sadece her ┼čey i├žin fabrikalar─▒ kullanmakla ba─čl─▒ kal. Davran─▒┼člar─▒n─▒ anlamak daha kolayd─▒r. Bir de─čeri d├Ând├╝r├╝p d├Ând├╝rmeyece─činize dair bir se├ženek yoktur ve ayr─▒ca yanl─▒┼č bir ┼čey yaparsan─▒z ortaya konacak hi├žbir hata yoktur.

Yine de onlara ba─č─▒ml─▒l─▒klar olarak enjekte etmekten bahsetti─čimde onlara hala ÔÇťhizmetlerÔÇŁ olarak de─činiyorum.

Hizmet / Fabrika davran─▒┼č─▒ ├žok benzerdir ve baz─▒ insanlar ikisinin de iyi oldu─čunu s├Âyleyecektir. Bu biraz do─čru, ancak John Papa'n─▒n stil rehberinin tavsiyelerine uymay─▒ ve fabrikalara sad─▒k kalmay─▒ daha kolay buluyorum. **


18


2017-09-27





Ek bir a├ž─▒klama, fabrikalar─▒n, hizmetler yapamad─▒─č─▒ s─▒rada i┼člevler / ilkel de─čerler yaratabilmesidir. Epokk'a dayanarak bu jsFiddle'a g├Âz at─▒n: http://jsfiddle.net/skeller88/PxdSP/1351/ .

Fabrika ├ža─čr─▒labilecek bir fonksiyon d├Ând├╝r├╝r:

 myApp.factory('helloWorldFromFactory', function() {
  return function() {
    return "Hello, World!";
  };
});
 

Fabrika ayr─▒ca ├ža─čr─▒labilecek bir y├Ântemle bir nesneyi geri g├Ânderebilir:

 myApp.factory('helloWorldFromFactory', function() {
  return {
    sayHello: function() {
      return "Hello, World!";
    }
  };
});
 

Hizmet ├ža─čr─▒labilecek bir y├Ântemle nesneyi d├Ând├╝r├╝r:

 myApp.service('helloWorldFromService', function() {
  this.sayHello = function() {
     return "Hello, World!";
  };
});
 

Daha fazla ayr─▒nt─▒ i├žin, fark ├╝zerine yazd─▒─č─▒m bir yaz─▒ya bak─▒n: http://www.shanemkeller.com/tldr-services-vs-factories-in-angular/


16







Zaten iyi cevaplar var, ama sadece bunu payla┼čmak istiyorum.

Her ┼čeyden ├Ânce: Sa─člay─▒c─▒ service $ enjekt├Âr taraf─▒ndan enjekte edilmek ├╝zere olan (AngulaJS'nin IoC d├╝zenini nas─▒l kulland─▒─č─▒) (tek bir nesne) yaratman─▒n yolu / re├žetesidir .

Ve De─čer, Fabrika, Hizmet ve Sabit (4 yol) - Sa─člay─▒c─▒ yol / al─▒c─▒ ├╝zerindeki s├Âzdizimsel ┼čeker .

Bir Service vs Factory k─▒sm─▒ ele al─▒nd─▒: https://www.youtube.com/watch?v=BLzNCkPn3ao

Hizmetin t├╝m├╝, new bildi─čimiz gibi 4 ┼čeyi yapan anahtar kelimeyle ilgilidir:

  1. yepyeni bir nesne yarat─▒r
  2. prototype nesnesine ba─člar
  3. ba─čland─▒─č─▒ context i├žin this
  4. ve d├Âner this

Ve Fabrika tamamen Fabrika Deseniyle ilgilidir - bu Hizmet gibi Nesneleri d├Ând├╝ren i┼člevleri i├žerir.

  1. di─čer servisleri kullanma yetene─či (ba─č─▒ml─▒l─▒klar─▒ var)
  2. hizmet ba┼člatma
  3. gecikmeli / tembel ba┼člatma

Ve bu basit / k─▒sa video: ayr─▒ca Sa─člay─▒c─▒ : https://www.youtube.com/watch?v=HvTZbQ_hUZY (fabrikadan sa─člay─▒c─▒ya nas─▒l gittiklerini g├Ârebilirsiniz)

Sa─člay─▒c─▒ tarifi, uygulama tamamen ba┼člat─▒lmadan / ba┼člat─▒lmadan ├Ânce, ├žo─čunlukla uygulama yap─▒land─▒rmas─▒nda kullan─▒l─▒r.


16


2015-06-23





T├╝m bu yaz─▒lar─▒ okuduktan sonra benim i├žin daha fazla kafa kar─▒┼č─▒kl─▒─č─▒ yaratt─▒ .. Ama yine de hepsi de─čerli bilgiler .. Sonunda basit kar┼č─▒la┼čt─▒rma ile bilgi verecek a┼ča─č─▒daki tabloyu buldum

  • Enjekt├Âr, iki t├╝r nesne olu┼čturmak i├žin tarifler kullan─▒r: hizmetler ve ├Âzel ama├žl─▒ nesneler
  • Nesnelerin nas─▒l olu┼čturulaca─č─▒n─▒ tan─▒mlayan be┼č tarif t├╝r├╝ vard─▒r: De─čer, Fabrika, Servis, Sa─člay─▒c─▒ ve Sabit.
  • Fabrika ve Servis en yayg─▒n kullan─▒lan tariflerdir. Aralar─▒ndaki tek fark, Servis tarifinin, ├Âzel t├╝rdeki nesneler i├žin daha iyi ├žal─▒┼čmas─▒d─▒r, Fabrika ise JavaScript ilkeleri ve i┼člevleri ├╝retebilir.
  • Sa─člay─▒c─▒ tarifi ├žekirdek re├žete t├╝r├╝d├╝r ve di─čerlerinin t├╝m├╝ ├╝zerinde sadece s├Âzdizimsel ┼čekerlerdir.
  • Sa─člay─▒c─▒ en karma┼č─▒k tarif t├╝r├╝d├╝r. Genel yap─▒land─▒rma gerektiren yeniden kullan─▒labilir bir kod par├žas─▒ olu┼čturmad─▒k├ža buna ihtiyac─▒n─▒z yoktur.
  • Denetleyici hari├ž t├╝m ├Âzel ama├žl─▒ nesneler Fabrika tarifleri arac─▒l─▒─č─▒yla tan─▒mlan─▒r.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Ve yeni ba┼člayanlar i├žin anlamak: - Bu kullan─▒m durumunu do─čru olmayabilir, ancak y├╝ksek seviyede bu ├╝├ž i├žin gerekli olan ┼čey budur.

  1. A├ž─▒sal mod├╝lde kullanmak istiyorsan─▒z config i┼člevi sa─člay─▒c─▒ olarak yarat─▒lmal─▒d─▒r.

 angular.module('myApp').config(function($testProvider){
$testProvider.someFunction();
}) 

  1. Ajax aramas─▒ veya ├╝├ž├╝nc├╝ taraf entegrasyonlar─▒n─▒n servis olmas─▒ gerekir .
  2. Veri manip├╝lasyonlar─▒ i├žin fabrika olarak yarat─▒n

Temel senaryolar i├žin fabrika ve Servis ayn─▒ ┼čekilde davran─▒r.


14







─░┼čte AngularjSÔÇÖdeki nesne fabrikas─▒ i├žin bir kod ┼čablonu olarak buldu─čum baz─▒ broilerplate kodlar─▒. ├ľrnek olarak bir Car / CarFactory kulland─▒m. Kontrol cihaz─▒nda basit uygulama kodunu yapar.

      <script>
        angular.module('app', [])
            .factory('CarFactory', function() {

                /**
                 * BroilerPlate Object Instance Factory Definition / Example
                 */
                this.Car = function() {

                    // initialize instance properties
                    angular.extend(this, {
                        color           : null,
                        numberOfDoors   : null,
                        hasFancyRadio   : null,
                        hasLeatherSeats : null
                    });

                    // generic setter (with optional default value)
                    this.set = function(key, value, defaultValue, allowUndefined) {

                        // by default,
                        if (typeof allowUndefined === 'undefined') {
                            // we don't allow setter to accept "undefined" as a value
                            allowUndefined = false;
                        }
                        // if we do not allow undefined values, and..
                        if (!allowUndefined) {
                            // if an undefined value was passed in
                            if (value === undefined) {
                                // and a default value was specified
                                if (defaultValue !== undefined) {
                                    // use the specified default value
                                    value = defaultValue;
                                } else {
                                    // otherwise use the class.prototype.defaults value
                                    value = this.defaults[key];
                                } // end if/else
                            } // end if
                        } // end if

                        // update 
                        this[key] = value;

                        // return reference to this object (fluent)
                        return this;

                    }; // end this.set()

                }; // end this.Car class definition

                // instance properties default values
                this.Car.prototype.defaults = {
                    color: 'yellow',
                    numberOfDoors: 2,
                    hasLeatherSeats: null,
                    hasFancyRadio: false
                };

                // instance factory method / constructor
                this.Car.prototype.instance = function(params) {
                    return new 
                        this.constructor()
                                .set('color',           params.color)
                                .set('numberOfDoors',   params.numberOfDoors)
                                .set('hasFancyRadio',   params.hasFancyRadio)
                                .set('hasLeatherSeats', params.hasLeatherSeats)
                    ;
                };

                return new this.Car();

            }) // end Factory Definition
            .controller('testCtrl', function($scope, CarFactory) {

                window.testCtrl = $scope;

                // first car, is red, uses class default for:
                // numberOfDoors, and hasLeatherSeats
                $scope.car1     = CarFactory
                                    .instance({
                                        color: 'red'
                                    })
                                ;

                // second car, is blue, has 3 doors, 
                // uses class default for hasLeatherSeats
                $scope.car2     = CarFactory
                                    .instance({
                                        color: 'blue',
                                        numberOfDoors: 3
                                    })
                                ;
                // third car, has 4 doors, uses class default for 
                // color and hasLeatherSeats
                $scope.car3     = CarFactory
                                    .instance({
                                        numberOfDoors: 4
                                    })
                                ;
                // sets an undefined variable for 'hasFancyRadio',
                // explicitly defines "true" as default when value is undefined
                $scope.hasFancyRadio = undefined;
                $scope.car3.set('hasFancyRadio', $scope.hasFancyRadio, true);

                // fourth car, purple, 4 doors,
                // uses class default for hasLeatherSeats
                $scope.car4     = CarFactory
                                    .instance({
                                        color: 'purple',
                                        numberOfDoors: 4
                                    });
                // and then explicitly sets hasLeatherSeats to undefined
                $scope.hasLeatherSeats = undefined;
                $scope.car4.set('hasLeatherSeats', $scope.hasLeatherSeats, undefined, true);

                // in console, type window.testCtrl to see the resulting objects

            });
    </script>
 

─░┼čte daha basit bir ├Ârnek. Enlem ve boylam─▒ g├Âsteren, ancak farkl─▒ nesne ├Âzellikleri arac─▒l─▒─č─▒yla "Konum" nesnesi bekleyen birka├ž ├╝├ž├╝nc├╝ taraf k├╝t├╝phanesi kullan─▒yorum. Sat─▒c─▒ kodunu k─▒rmak istemedim, bu y├╝zden etrafta dola┼čt─▒─č─▒m "Konum" nesnelerini ayarlam─▒┼čt─▒m.

     angular.module('app')
.factory('PositionFactory', function() {

    /**
     * BroilerPlate Object Instance Factory Definition / Example
     */
    this.Position = function() {

        // initialize instance properties 
        // (multiple properties to satisfy multiple external interface contracts)
        angular.extend(this, {
            lat         : null,
            lon         : null,
            latitude    : null,
            longitude   : null,
            coords: {
                latitude: null,
                longitude: null
            }
        });

        this.setLatitude = function(latitude) {
            this.latitude           = latitude;
            this.lat                = latitude;
            this.coords.latitude    = latitude;
            return this;
        };
        this.setLongitude = function(longitude) {
            this.longitude          = longitude;
            this.lon                = longitude;
            this.coords.longitude   = longitude;
            return this;
        };

    }; // end class definition

    // instance factory method / constructor
    this.Position.prototype.instance = function(params) {
        return new 
            this.constructor()
                    .setLatitude(params.latitude)
                    .setLongitude(params.longitude)
        ;
    };

    return new this.Position();

}) // end Factory Definition

.controller('testCtrl', function($scope, PositionFactory) {
    $scope.position1 = PositionFactory.instance({latitude: 39, longitude: 42.3123});
    $scope.position2 = PositionFactory.instance({latitude: 39, longitude: 42.3333});
}) // end controller
 

;


13







Bu sayfay─▒ ve belgeleri (en son bakt─▒─č─▒m zamandan beri b├╝y├╝k ├Âl├ž├╝de geli┼čmi┼č g├Âr├╝n├╝yor) referans olarak kullanarak , 5 tedarik├židen 4'├╝n├╝ kullanan a┼ča─č─▒daki ger├žek (-ish) d├╝nya demosunu bir araya getirdim; De─čer, Sabit, Fabrika ve tam te┼čekk├╝ll├╝ Tedarik├ži.

HTML:

 <div ng-controller="mainCtrl as main">
    <h1>{{main.title}}*</h1>
    <h2>{{main.strapline}}</h2>
    <p>Earn {{main.earn}} per click</p>
    <p>You've earned {{main.earned}} by clicking!</p>
    <button ng-click="main.handleClick()">Click me to earn</button>
    <small>* Not actual money</small>
</div>
 

Uygulaman─▒n

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

// A CONSTANT is not going to change
app.constant('range', 100);

// A VALUE could change, but probably / typically doesn't
app.value('title', 'Earn money by clicking');
app.value('strapline', 'Adventures in ng Providers');

// A simple FACTORY allows us to compute a value @ runtime.
// Furthermore, it can have other dependencies injected into it such
// as our range constant.
app.factory('random', function randomFactory(range) {
    // Get a random number within the range defined in our CONSTANT
    return Math.random() * range;
});

// A PROVIDER, must return a custom type which implements the functionality 
// provided by our service (see what I did there?).
// Here we define the constructor for the custom type the PROVIDER below will 
// instantiate and return.
var Money = function(locale) {

    // Depending on locale string set during config phase, we'll
    // use different symbols and positioning for any values we 
    // need to display as currency
    this.settings = {
        uk: {
            front: true,
            currency: '£',
            thousand: ',',
            decimal: '.'
        },
        eu: {
            front: false,
            currency: 'ÔéČ',
            thousand: '.',
            decimal: ','
        }
    };

    this.locale = locale;
};

// Return a monetary value with currency symbol and placement, and decimal 
// and thousand delimiters according to the locale set in the config phase.
Money.prototype.convertValue = function(value) {

    var settings = this.settings[this.locale],
        decimalIndex, converted;

    converted = this.addThousandSeparator(value.toFixed(2), settings.thousand);

    decimalIndex = converted.length - 3;

    converted = converted.substr(0, decimalIndex) +
        settings.decimal +
        converted.substr(decimalIndex + 1);    

    converted = settings.front ?
            settings.currency + converted : 
            converted + settings.currency; 

    return converted;   
};

// Add supplied thousand separator to supplied value
Money.prototype.addThousandSeparator = function(value, symbol) {
   return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, symbol);
};

// PROVIDER is the core recipe type - VALUE, CONSTANT, SERVICE & FACTORY
// are all effectively syntactic sugar built on top of the PROVIDER construct
// One of the advantages of the PROVIDER is that we can configure it before the
// application starts (see config below).
app.provider('money', function MoneyProvider() {

    var locale;

    // Function called by the config to set up the provider
    this.setLocale = function(value) {
        locale = value;   
    };

    // All providers need to implement a $get method which returns
    // an instance of the custom class which constitutes the service
    this.$get = function moneyFactory() {
        return new Money(locale);
    };
});

// We can configure a PROVIDER on application initialisation.
app.config(['moneyProvider', function(moneyProvider) {
    moneyProvider.setLocale('uk');
    //moneyProvider.setLocale('eu'); 
}]);

// The ubiquitous controller
app.controller('mainCtrl', function($scope, title, strapline, random, money) {

    // Plain old VALUE(s)
    this.title = title;
    this.strapline = strapline;

    this.count = 0;

    // Compute values using our money provider    
    this.earn = money.convertValue(random); // random is computed @ runtime
    this.earned = money.convertValue(0);

    this.handleClick = function() { 
        this.count ++;
        this.earned = money.convertValue(random * this.count);
    };
});
 

├çal─▒┼čma demosu .


12







Bu cevap konuyu / soruyu ele al─▒yor

Nas─▒l Fabrika, Servis ve Sabit - sadece bir tarifin tepesinde s├Âzdizimsel ┼čeker nedir?

VEYA

fabrika, servis ve sa─člay─▒c─▒lar dahili olarak nas─▒l simailar olur

temelde olan ┼čey

Bir yapt─▒─č─▒n─▒zda factory() size ayarlar function sa─člay─▒c─▒s─▒n─▒n ikinci arg├╝man sa─članan $get ve onu (d├Ân├╝┼č provider(name, {$get:factoryFn }) ) ama elde etti─čin provider ancak ba┼čka hi├žbir ├Âzellik / y├Ântem yoktur $get Bunun provider (bu yap─▒land─▒ramazs─▒n─▒z yollarla)

Fabrikan─▒n kaynak kodu

 function factory(name, factoryFn, enforce) {
    return provider(name, {
      $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
    });
};
 

Bunu yaparken service() size bir fabrika () sa─člayarak ( hizmetinizde verdi─činiz yap─▒c─▒ ├Ârne─čini iade function eder ) enjekte eder constructor ve iade eder

Kaynak servis kodu

 function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
};
 

Bu nedenle, temelde her iki durumda da, sa─člad─▒─č─▒n─▒z i┼člev i├žin $ $ sa─člay─▒c─▒lar─▒ al─▒rs─▒n─▒z, ancak config blo─ču i├žin sa─člay─▒c─▒ () 'da sa─člad─▒─č─▒n─▒z gibi $ get d─▒┼č─▒nda bir ┼čey verebilirsiniz.


12


2015-04-13





Ben m├╝kemmel cevap ├žok ┼čey biliyorum ama kullanman─▒n deneyimlerimi payla┼čmak zorunda
1. service Varsay─▒lan ├žo─ču durum i├žin
2. factory spesifik ├Ârne─či o hizmeti olu┼čturmak i├žin kullan─▒lan

 // factory.js ////////////////////////////
(function() {
'use strict';
angular
    .module('myApp.services')
    .factory('xFactory', xFactoryImp);
xFactoryImp.$inject = ['$http'];

function xFactoryImp($http) {
    var fac = function (params) {
        this._params = params; // used for query params
    };

    fac.prototype.nextPage = function () {
        var url = "/_prc";

        $http.get(url, {params: this._params}).success(function(data){ ...
    }
    return fac;
}
})();

// service.js //////////////////////////
(function() {
'use strict';
angular
    .module('myApp.services')
    .service('xService', xServiceImp);
xServiceImp.$inject = ['$http'];

function xServiceImp($http) {  
    this._params = {'model': 'account','mode': 'list'};

    this.nextPage = function () {
        var url = "/_prc";

        $http.get(url, {params: this._params}).success(function(data){ ...
    }       
}
})();
 

ve kullanarak:

 controller: ['xFactory', 'xService', function(xFactory, xService){

        // books = new instance of xFactory for query 'book' model
        var books = new xFactory({'model': 'book', 'mode': 'list'});

        // accounts = new instance of xFactory for query 'accounts' model
        var accounts = new xFactory({'model': 'account', 'mode': 'list'});

        // accounts2 = accounts variable
        var accounts2 = xService;
... 
 

11







Partiye biraz ge├ž kald─▒n. Ancak bunun, fabrika, servis ve sa─člay─▒c─▒ metodolojilerini kullanarak Angular JS Custom Services geli┼čtirmeyi ├Â─črenmek isteyen (veya netli─či olan) i├žin daha yararl─▒ oldu─čunu d├╝┼č├╝nd├╝m.

AngularJS Custom Services'─▒ geli┼čtirmek i├žin fabrika, servis ve sa─člay─▒c─▒ metodolojilerini a├ž─▒k bir ┼čekilde anlatan bu videoya rastlad─▒m:

https://www.youtube.com/watch?v=oUXku28ex-M

Kaynak Kodu: http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service

Buraya g├Ânderilen kod, okuyuculardan yararlanmak i├žin yukar─▒daki kaynaktan do─črudan kopyalan─▒r.

"Fabrika" tabanl─▒ ├Âzel servisin kodu ┼č├Âyledir (http servisini ├ža─č─▒rman─▒n yan─▒ s─▒ra hem senkronize hem de asenkron versiyonlar─▒ ile birlikte):

 var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcFactory',
  function($scope, calcFactory) {
    $scope.a = 10;
    $scope.b = 20;

    $scope.doSum = function() {
      //$scope.sum = calcFactory.getSum($scope.a, $scope.b); //synchronous
      calcFactory.getSum($scope.a, $scope.b, function(r) { //aynchronous
        $scope.sum = r;
      });
    };

  }
]);

app.factory('calcFactory', ['$http', '$log',
  function($http, $log) {
    $log.log("instantiating calcFactory..");
    var oCalcService = {};

    //oCalcService.getSum = function(a,b){
    //	return parseInt(a) + parseInt(b);
    //};

    //oCalcService.getSum = function(a, b, cb){
    //	var s = parseInt(a) + parseInt(b);
    //	cb(s);
    //};

    oCalcService.getSum = function(a, b, cb) { //using http service

      $http({
        url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
        method: 'GET'
      }).then(function(resp) {
        $log.log(resp.data);
        cb(resp.data);
      }, function(resp) {
        $log.error("ERROR occurred");
      });
    };

    return oCalcService;
  }
]); 

├ľzel Hizmetler i├žin "hizmet" y├Ânteminin kodu (bu, "fabrika" ya benzer, ancak s├Âzdizimi a├ž─▒s─▒ndan farkl─▒d─▒r):

 var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
	$scope.a = 10;
	$scope.b = 20;

	$scope.doSum = function(){
		//$scope.sum = calcService.getSum($scope.a, $scope.b);
		
		calcService.getSum($scope.a, $scope.b, function(r){
			$scope.sum = r;
		});		
	};

}]);

app.service('calcService', ['$http', '$log', function($http, $log){
	$log.log("instantiating calcService..");
	
	//this.getSum = function(a,b){
	//	return parseInt(a) + parseInt(b);
	//};

	//this.getSum = function(a, b, cb){
	//	var s = parseInt(a) + parseInt(b);
	//	cb(s);
	//};

	this.getSum = function(a, b, cb){
		$http({
			url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
			method: 'GET'
		}).then(function(resp){
			$log.log(resp.data);
			cb(resp.data);
		},function(resp){
			$log.error("ERROR occurred");
		});
	};

}]); 

├ľzel Hizmetler i├žin "sa─člay─▒c─▒" metodolojisi kodu (yap─▒land─▒r─▒labilir servis geli┼čtirmek istiyorsan─▒z, bu gereklidir):

 var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
	$scope.a = 10;
	$scope.b = 20;

	$scope.doSum = function(){
		//$scope.sum = calcService.getSum($scope.a, $scope.b);
		
		calcService.getSum($scope.a, $scope.b, function(r){
			$scope.sum = r;
		});		
	};

}]);

app.provider('calcService', function(){

	var baseUrl = '';

	this.config = function(url){
		baseUrl = url;
	};

	this.$get = ['$log', '$http', function($log, $http){
		$log.log("instantiating calcService...")
		var oCalcService = {};

		//oCalcService.getSum = function(a,b){
		//	return parseInt(a) + parseInt(b);
		//};

		//oCalcService.getSum = function(a, b, cb){
		//	var s = parseInt(a) + parseInt(b);
		//	cb(s);	
		//};

		oCalcService.getSum = function(a, b, cb){

			$http({
				url: baseUrl + '/Sum?a=' + a + '&b=' + b,
				method: 'GET'
			}).then(function(resp){
				$log.log(resp.data);
				cb(resp.data);
			},function(resp){
				$log.error("ERROR occurred");
			});
		};		

		return oCalcService;
	}];

});

app.config(['calcServiceProvider', function(calcServiceProvider){
	calcServiceProvider.config("http://localhost:4467");
}]); 

Son olarak, yukar─▒daki hizmetlerden herhangi biriyle ├žal─▒┼čan kullan─▒c─▒ aray├╝z├╝:

 <html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
	<script type="text/javascript" src="t03.js"></script>
</head>
<body ng-app="app">
	<div ng-controller="emp">
		<div>
			Value of a is {{a}},
			but you can change
			<input type=text ng-model="a" /> <br>

			Value of b is {{b}},
			but you can change
			<input type=text ng-model="b" /> <br>

		</div>
		Sum = {{sum}}<br>
		<button ng-click="doSum()">Calculate</button>
	</div>
</body>
</html> 


10







Sadece i┼čleri a├ž─▒kl─▒─ča kavu┼čturmak i├žin, AngularJS kayna─č─▒ndan, bir servisin sadece sa─člay─▒c─▒ i┼člevini ├ža─č─▒ran fabrika i┼člevini ├ža─č─▒rd─▒─č─▒n─▒ g├Ârebilirsiniz:

 function factory(name, factoryFn) { 
    return provider(name, { $get: factoryFn }); 
}

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
}
 

10







AngularJS'deki i┼č mant─▒─č─▒n─▒ ele alman─▒n ├╝├ž yolunu basit bir ┼čekilde ele alal─▒m: ( Yaakov's Coursera AngularJS kursundan ilham al─▒nd─▒ )

H─░ZMET :

S├Âzdizimi:

app.js

  var app = angular.module('ServiceExample',[]);
 var serviceExampleController =
              app.controller('ServiceExampleController', ServiceExampleController);
 var serviceExample = app.service('NameOfTheService', NameOfTheService);

 ServiceExampleController.$inject = ['NameOfTheService'] //protects from minification of js files

function ServiceExampleController(NameOfTheService){
     serviceExampleController = this;
     serviceExampleController.data = NameOfTheService.getSomeData();
 }

function NameOfTheService(){
     nameOfTheService = this;
     nameOfTheService.data = "Some Data";
     nameOfTheService.getSomeData = function(){
           return nameOfTheService.data;
     }     
}
 

index.html

 <div ng-controller = "ServiceExampleController as serviceExample">
   {{serviceExample.data}}
</div>
 

Hizmetin ├ľzellikleri:

  1. Lazily Instantiated : Enjekte edilmediyse, hi├žbir zaman ba┼člat─▒lmaz. Bu y├╝zden kullanmak i├žin bir mod├╝le enjekte etmek zorunda kalacak.
  2. Singleton : Birden fazla mod├╝le enjekte edilirse, hepsinin yaln─▒zca belirli bir ├Ârne─če eri┼čimi olacakt─▒r. Bu nedenle farkl─▒ kontrol cihazlar─▒nda veri payla┼čmak i├žin ├žok uygun.

FABR─░KA

─░lk ├Ânce s├Âzdizimine bakal─▒m:

app.js :

 var app = angular.module('FactoryExample',[]);
var factoryController = app.controller('FactoryController', FactoryController);
var factoryExampleOne = app.factory('NameOfTheFactoryOne', NameOfTheFactoryOne);
var factoryExampleTwo = app.factory('NameOfTheFactoryTwo', NameOfTheFactoryTwo);

//first implementation where it returns a function
function NameOfTheFactoryOne(){
   var factory = function(){
      return new SomeService();
    }
   return factory;
}

//second implementation where an object literal would be returned
function NameOfTheFactoryTwo(){
   var factory = {
      getSomeService : function(){
          return new SomeService();
       }
    };
   return factory;
}
 

┼×imdi yukar─▒daki ikisini kontrol cihaz─▒nda kullanarak:

  var factoryOne = NameOfTheFactoryOne() //since it returns a function
 factoryOne.someMethod();

 var factoryTwo = NameOfTheFactoryTwo.getSomeService(); //accessing the object
 factoryTwo.someMethod();
 

Fabrikan─▒n ├ľzellikleri:

  1. Fabrika tasar─▒m desenini takip eder. Fabrika, yeni nesneler veya i┼člevler ├╝reten merkezi bir yerdir.
  2. Yaln─▒zca singleton de─čil, ├Âzelle┼čtirilebilir hizmetler de ├╝retir.
  3. .service() Y├Ântem oldu─ču fabrika her zaman tekil olan hizmetin ayn─▒ t├╝r, ├╝retir ve 's davran─▒┼č─▒n─▒ yap─▒land─▒rmak i├žin herhangi bir kolay yolu olmadan. Bu .service() y├Ântem genellikle herhangi bir yap─▒land─▒rma gerektirmeyen bir ┼čeyin k─▒sayolu olarak kullan─▒l─▒r.

SA─×LAYICI

─░lk ├Ânce s├Âzdizimine bir g├Âz atal─▒m:

 angular.module('ProviderModule', [])
.controller('ProviderModuleController', ProviderModuleController)
.provider('ServiceProvider', ServiceProvider)
.config(Config); //optional

Config.$inject = ['ServiceProvider'];
function Config(ServiceProvider) {
  ServiceProvider.defaults.maxItems = 10; //some default value
}


ProviderModuleController.$inject = ['ServiceProvider'];
function ProviderModuleController(ServiceProvider) {
  //some methods
}

function ServiceProvider() {
  var provider = this;

  provider.defaults = {
    maxItems: 10
  };

  provider.$get = function () {
    var someList = new someListService(provider.defaults.maxItems);

    return someList;
  };
}

}
 

Sa─člay─▒c─▒ ├ľzellikleri:

  1. Sa─člay─▒c─▒, A├ž─▒sal'da hizmet yaratman─▒n en esnek y├Ântemidir.
  2. Yaln─▒zca dinamik olarak yap─▒land─▒r─▒labilir bir fabrika yaratabiliriz, ancak fabrika kullan─▒m─▒ s─▒ras─▒nda, sa─člay─▒c─▒ y├Ântemiyle, fabrikay─▒ t├╝m uygulamam─▒z─▒n a├ž─▒l─▒┼č─▒nda ├Âzel olarak yap─▒land─▒rabiliriz.
  3. Fabrika daha sonra ├Âzel ayarlarla uygulama boyunca kullan─▒labilir. Ba┼čka bir deyi┼čle, bu fabrikay─▒ uygulama ba┼člamadan ├Ânce yap─▒land─▒rabiliriz. Asl─▒nda, a├ž─▒sal belgelerde, hizmetlerimizi ya .service da .factory y├Ântemleriyle yap─▒land─▒rd─▒─č─▒m─▒zda, ger├žekte ger├žekte uygulanan─▒n sa─člay─▒c─▒ y├Ânteminden bahsedilmi┼čtir .
  4. $get ┼×irketinden sa─člay─▒c─▒ ├Ârne─čine ba─čl─▒ olan bir fonksiyondur. Bu i┼člev bir fabrika i┼člevidir. Ba┼čka bir deyi┼čle, metoda sa─člamak i├žin kulland─▒─č─▒m─▒z gibi .factory . Bu fonksiyonda kendi hizmetimizi yarat─▒r─▒z. Bu $get ├Âzellik, bu bir i┼člevdir, sa─člay─▒c─▒y─▒ sa─člay─▒c─▒ yapan ┼čeydir . AngularJS, sa─člay─▒c─▒n─▒n de─čeri, Angular'─▒n fabrika i┼člevi olarak kullanaca─č─▒ bir i┼člev olan bir $ get ├Âzelli─čine sahip olmas─▒n─▒ bekler. Ancak, t├╝m bu sa─člay─▒c─▒ kurulumunu ├žok ├Âzel yapan ┼čey config , servis sa─člay─▒c─▒ i├žinde bir nesne sa─člayabilece─čimiz ve genellikle uygulaman─▒n tamam─▒n─▒ yap─▒land─▒rabilece─čimiz ad─▒mda ├╝zerine yazaca─č─▒m─▒z varsay─▒lanlarla birlikte gelmesidir.

9







Fabrika: Fabrika asl─▒nda fabrikan─▒n i├žinde bir nesne yarat─▒r ve geri g├Ânderir.
servis: Servis, tan─▒mlamak i├žin bu anahtar kelimeyi kullanan standart bir fonksiyona sahiptir.
sa─člay─▒c─▒: Sa─člay─▒c─▒ tan─▒mlad─▒─č─▒n─▒z bir $ get var ve verileri d├Ând├╝ren nesneyi almak i├žin kullan─▒labilir.


7







Temel olarak, Tedarik├ži, Fabrika ve Servis, t├╝m Servislerdir. Bir Fabrika, ihtiyac─▒n─▒z olan tek ┼čey bir $ get () i┼člevi oldu─čunda, daha az kodla yazman─▒za izin veren bir Hizmet i├žin ├Âzel bir durumdur.

Hizmetler, Fabrikalar ve Tedarik├žiler aras─▒ndaki en b├╝y├╝k farklar karma┼č─▒kl─▒klar─▒d─▒r. Hizmetler en basit ┼čeklidir, Fabrikalar biraz daha sa─člamd─▒r ve Sa─člay─▒c─▒lar ├žal─▒┼čma zaman─▒nda yap─▒land─▒r─▒labilir.

Her birinin ne zaman kullan─▒laca─č─▒n─▒n bir ├Âzeti:

Fabrika : Verdi─činiz de─čerin di─čer verilere g├Âre hesaplanmas─▒ gerekiyor.

Hizmet : Bir nesneyi y├Ântemlerle d├Ând├╝r├╝yorsunuz.

Sa─člay─▒c─▒ : Yap─▒land─▒rma a┼čamas─▒nda, olu┼čturulmadan ├Ânce olu┼čturulacak nesneyi yap─▒land─▒rabilmek istiyorsunuz. Uygulama tam olarak ba┼člat─▒lmadan ├Ânce sa─člay─▒c─▒y─▒ ├žo─čunlukla uygulama yap─▒land─▒rmas─▒nda kullan─▒n.


7







1. Servisler gerekti─činde olu┼čturulan ve uygulama ya┼čam d├Âng├╝s├╝n├╝n sonuna kadar (taray─▒c─▒ kapal─▒yken) asla temizlenmeyen tekil nesnelerdir. Denetleyiciler art─▒k ihtiya├ž duyulmad─▒─č─▒nda imha edilir ve temizlenir.

2.Hizmet yaratman─▒n en kolay yolu factory () metodunu kullanmakt─▒r. Factory () y├Ântemi, servis fonksiyonlar─▒ ve servis verilerini i├žeren bir nesneyi d├Ând├╝rerek bir servisi tan─▒mlamam─▒z─▒ sa─člar. Hizmet tan─▒m─▒ i┼člevi, $ http ve $ q gibi enjekte edilebilir hizmetlerimizi yerle┼čtirdi─čimiz yerdir. ├ľr:

 angular.module('myApp.services')
.factory('User', function($http) { // injectables go here
var backendUrl = "http://localhost:3000"; var service = {
    // our factory definition
user: {},
setName: function(newName) {
      service.user['name'] = newName;
    },
setEmail: function(newEmail) { service.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', { user: service.user
}); }
};
return service; });
 

Bizim app fabrika () kullanma

Uygulamam─▒zda fabrikay─▒ kullanmak kolayd─▒r ├ž├╝nk├╝ ├žal─▒┼čma s─▒ras─▒nda ihtiya├ž duydu─čumuz yere kolayca enjekte edebiliriz.

 angular.module('myApp')
.controller('MainController', function($scope, User) {
  $scope.saveUser = User.save;
});
 
  1. Service () y├Ântemi ise yap─▒c─▒ i┼člevini tan─▒mlayarak bir hizmet olu┼čturmam─▒z─▒ sa─člar. Hizmetimizi tan─▒mlamak i├žin ham bir javascript nesnesi yerine prototipik bir nesne kullanabiliriz. Factory () y├Ântemine benzer ┼čekilde, i┼člev tan─▒m─▒ndaki enjekte edilebilirleri de ayarlayaca─č─▒z.
  2. Hizmet yaratman─▒n en d├╝┼č├╝k d├╝zey yolu, supply () y├Ântemini kullanmakt─▒r. .Config () i┼člevini kullanarak yap─▒land─▒rabilece─čimiz bir hizmet olu┼čturman─▒n tek yolu budur. ├ľnceki y├Ântemlerden farkl─▒ olarak, enjekte edilebilirleri tan─▒mlanm─▒┼č bir. $ Get () i┼člev tan─▒m─▒nda ayarlayaca─č─▒z.

4







S├Âzdizimsel ┼×eker fark─▒d─▒r . Sadece sa─člay─▒c─▒ gerekli. Veya ba┼čka bir deyi┼čle, yaln─▒zca sa─člay─▒c─▒ ger├žek a├ž─▒sald─▒r, di─čerlerinin t├╝m├╝ (kodu azaltmak i├žin) t├╝retilir. Sadece de─čeri d├Ând├╝ren, hesaplama veya i┼člev olmayan, Value () ad─▒ verilen basit bir s├╝r├╝m├╝ de vard─▒r. De─čer bile sa─člay─▒c─▒dan elde edilir!

Peki neden bu t├╝r komplikasyonlar, neden sadece sa─člay─▒c─▒y─▒ kullan─▒p di─čer her ┼čeyi unutam─▒yoruz? Kolayca kod yazmam─▒za ve daha iyi ileti┼čim kurmam─▒za yard─▒mc─▒ olmas─▒ gerekiyor. Ve yanaktan toungue cevap olurdu, ne kadar karma┼č─▒k olursa o kadar iyi bir ├žer├ževe satar.


  • De─čer verebilen bir sa─člay─▒c─▒ = De─čer
  • Sadece somutla┼čt─▒r─▒p iade edebilen bir sa─člay─▒c─▒ = Fabrika (+ De─čer)
  • Ba┼člatabilecek + bir ┼čeyler yapabilecek bir sa─člay─▒c─▒ = Servis (+ Fabrika, + De─čer)
  • Bir sa─člay─▒c─▒ = $ get (+ Factory, + Service, + Value) ad─▒nda bir ├Âzellik i├žermelidir

A├ž─▒sal enjeksiyon bize bu sonuca ula┼čmada ilk ipucunu veriyor.

"$ enjekt├Âr, sa─člay─▒c─▒ taraf─▒ndan tan─▒mland─▒─č─▒ gibi nesne ├Ârneklerini almak i├žin kullan─▒l─▒r " servis de─čil fabrika de─čil sa─člay─▒c─▒d─▒r.

Ve daha iyi bir cevap ┼čudur: "Bir servis fabrikas─▒ taraf─▒ndan bir A├ž─▒sal servis olu┼čturulur. Bu servis fabrikalar─▒, bir servis sa─člay─▒c─▒ taraf─▒ndan yarat─▒lan fonksiyonlard─▒r. Servis sa─člay─▒c─▒lar, yap─▒c─▒ fonksiyonlard─▒r. "servis fabrika i┼člevini tutan $ get"

B├Âylece ana sa─člay─▒c─▒ ve enjekt├Âr ve hepsi yerlerine d├╝┼čecek :). Ayr─▒ca, IServiceProvider'dan miras alarak $ get bir sa─člay─▒c─▒da uygulanabiliyorken Typescript'te ilgin├žle┼čiyor.


-3