TL; DR
1) Bir Fabrika kullanırken bir nesne yaratırsınız, ona özellikler ekler ve sonra aynı nesneyi döndürürsünüz. Bu fabrikayı denetleyicinize ilettiğinizde, nesne üzerindeki 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) Hizmet'i kullandığınızda , Angular 'yeni' anahtar kelimesi ile sahne arkasını başlatır. Bu nedenle, 'this' öğesine özellikler eklersiniz ve hizmet 'this' öğesini döndürür. Hizmeti denetleyicinize ilettiğinizde, 'bu' öğesindeki özellikler artık hizmetiniz üzerinden bu denetleyicide kullanılabilir.
app.controller('myServiceCtrl', function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service('myService', function(){
var _artist = 'Nelly';
this.getArtist = function(){
return _artist;
}
});
TL olmayan; DR
1) Fabrika
Fabrikaları bir hizmet oluşturmak ve yapılandırmak için en popüler yoldur. TL'nin söylediğinden çok daha fazlası yok; DR. Sadece bir nesne yaratırsınız, ona bir özellik eklersiniz, sonra aynı nesneyi döndürürsünüz. Ardından fabrikayı denetleyicinize ilettiğinizde, nesne üzerindeki bu özellikler artık o denetleyicide fabrikanız aracılığıyla kullanılabilir olacaktır. Daha kapsamlı bir örnek aşağıdadır.
app.factory('myFactory', function(){
var service = {};
return service;
});
Artık 'myFactory' ürününü denetleyicimize ilettiğimizde, 'servise' eklediğimiz özellikleri kullanabiliriz.
Şimdi geri arama fonksiyonumuza bazı 'özel' değişkenler ekleyelim. Bunlara kontrolörden doğrudan erişilemez, ancak sonunda bu 'özel' değişkenleri gerektiğinde 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 'servise' eklemediğimizi göreceksiniz. Daha sonra kullanmak veya değiştirmek için bunları oluşturuyoruz.
- baseUrl, iTunes API'nın gerektirdiği temel URL'dir
- _artist aramak istediğimiz sanatçı
- _finalUrl, iTunes'a çağrı yapacağımız nihai ve tam olarak oluşturulmuş URL'dir makeUrl, iTunes dostu URL'imizi oluşturacak ve geri gönderecek bir işlevdir.
Artık yardımcı / özel değişkenlerimiz ve işlevimiz yerinde olduğuna göre, 'service' nesnesine bazı özellikler ekleyelim. Ne 'hizmet' koymak ne olursa olsun, 'myFactory' hangi denetleyici geçerse doğrudan kullanabilirsiniz.
Sadece sanatçıyı döndüren veya ayarlayan setArtist ve getArtist yöntemlerini oluşturacağız. Oluşturulan URL'mizle iTunes API'sini çağıracak bir yöntem de oluşturacağız. Bu yöntem, veriler iTunes API'sından geri geldiğinde yerine getirecek bir söz verecektir. Angular'da vaatler kullanma konusunda fazla deneyiminiz yoksa, onlara derin bir dalış yapmanızı şiddetle tavsiye ederim.
Aşağıda setArtist bir sanatçı kabul eder ve izin verir sen sanatçı ayarlamak için. getArtist , $ http isteğimizle kullanacağımız URL'yi oluşturmak için sanatçı callItunes ilk önce makeUrl () öğesini çağırır. Daha sonra bir söz nesnesi kurar, nihai URL'mizle $ http isteği yapar, daha sonra $ http bir söz verdiğinden, isteğimizden sonra .success veya .error öğesini çağırabiliriz. Daha sonra iTunes verileriyle olan sözümüzü çözüyoruz veya 'Bir hata oluştu' mesajını 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 neslimize (setArtist, getArtist ve callItunes) eklediğimiz yöntemlerimizi ç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örde 'myFactory' servisine enjekte ediyoruz. Daha sonra 'myFactory' verilerinden gelen $ scope nesnemizdeki özellikleri ayarlıyoruz. Yukarıdaki tek zor kod, daha önce hiç söz vermediyseniz. CallItunes bir söz veriyorsa, .then () yöntemini kullanabiliriz ve sözümüzü iTunes verileriyle yerine getirdikten sonra yalnızca $ scope.data.artistData ayarlayabiliriz. Denetleyicimizin çok 'ince' olduğunu fark edeceksiniz. Tüm mantık ve kalıcı verilerimiz denetleyicimizde değil, hizmetimizde bulunmaktadır.
2) Hizmet
Bir Hizmet oluştururken bilinmesi gereken en büyük şey, "yeni" anahtar kelimeyle somutlaştırılmasıdır. Sizin için JavaScript guruları, bu size kodun doğası hakkında büyük bir ipucu vermelidir. JavaScript'te sınırlı bir arka plana sahip olanlar veya 'yeni' anahtar kelimenin gerçekte ne yaptığına aşina olmayanlar için, sonunda bir Hizmetin doğasını anlamamıza yardımcı olacak bazı JavaScript temellerini inceleyelim.
'Yeni' anahtar kelimeyle bir işlevi çağırdığınızda meydana gelen değişiklikleri gerçekten görmek için, bir işlev oluşturalım ve onu 'yeni' anahtar kelimeyle çağıralım, ardından yorumlayıcının 'yeni' anahtar kelimeyi gördüğünde ne yaptığını gösterelim. Sonuçların her ikisi de aynı olacaktır.
Önce Yapımcımızı yaratalım.
var Person = function(name, age){
this.name = name;
this.age = age;
}
Bu tipik bir JavaScript yapıcı işlevidir. Şimdi "yeni" anahtar kelimesini kullanarak Kişi işlevini her çağırdığımızda, "bu" yeni oluşturulan nesneye bağlanır.
Şimdi Kişimizin prototipine bir yöntem ekleyelim, böylece Kişinin 'sınıfının' her örneğinde kullanılabilir.
Person.prototype.sayName = function(){
alert('My name is ' + this.name);
}
Şimdi, sayName işlevini prototipe koyduğumuz için, Person'in her örneği, söz konusu adın adını uyarmak için sayName işlevini çağırabilecektir.
Şimdi kendi prototip üzerinde Kişi yapıcı fonksiyonumuza ve sayName fonksiyonumuza sahip olduğumuza göre, aslında bir Person örneği oluşturalım ve sonra sayName fonksiyonunu çağıralım.
var tyler = new Person('Tyler', 23);
tyler.sayName(); //alerts 'My name is Tyler'
Yani hep birlikte, bir Kişi yapıcısı oluşturma, prototipine bir işlev ekleme, bir Person örneği oluşturma ve daha sonra işlevi kendi prototipinde çağırmanın kodu şuna benzer.
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 JavaScript'te 'yeni' anahtar kelimeyi kullandığınızda gerçekte neler olduğuna bakalım. Dikkat etmemiz gereken ilk şey, örneğimizde 'new' kullandıktan sonra, tıpkı bir nesne gibi sanki 'tyler' üzerinde bir yöntemi (sayName) çağırabileceğimizdir - çünkü. İlk olarak, Kişi kurucumuzun bunu kodda görsün veya görmesek de bir nesneyi döndürdüğünü biliyoruz. İkincisi, sayName işlevimizin doğrudan Person örneğinde değil, prototip üzerinde yer alması nedeniyle, Person işlevinin döndürdüğü nesnenin başarısız aramalardaki prototipine temsilci olması gerektiğini biliyoruz. Daha basit bir ifadeyle, tyler.sayName () öğesini çağırdığımızda yorumlayıcı “Tamam, az önce oluşturduğumuz 'tyler' nesnesine bakacağım, sayName işlevini bulup onu çağıracağım. Bir dakika, burada görmüyorum - tek gördüğüm isim ve yaş, prototipi kontrol edeyim. Yup, prototipte gibi görünüyor, bırak diyeyim. ”.
Aşağıda, 'yeni' anahtar kelimenin JavaScript'te gerçekte ne yaptığını nasıl düşünebileceğinize ilişkin kod bulunmaktadır. Temel olarak yukarıdaki paragrafın bir kod örneğidir. 'Tercüman görünümünü' veya tercümanın notları içindeki kodu görme şeklini koydum.
var Person = function(name, age){
//The line below this creates an obj object 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 'yeni' anahtar kelimenin JavaScript'te gerçekte ne yaptığına dair bu bilgiye sahipken, Açısal bir Hizmet oluşturmak daha kolay olmalıdır.
Hizmet oluştururken anlamanız gereken en büyük şey, Hizmetlerin 'yeni' anahtar kelimesiyle somutlaştırıldığını bilmektir. Bu bilgiyi yukarıdaki örneklerimizle birleştirdiğinizde, şimdi özelliklerinizi ve yöntemlerinizi doğrudan 'bu' hizmete ekleyeceğinizi fark etmelisiniz ki bu daha sonra Hizmet'in kendisinden döndürülecektir. Buna eylemde bir göz atalım.
Başlangıçta Fabrika örneğiyle yaptığımızın aksine, bir nesne oluşturmamıza ve o nesneyi döndürmemize gerek yoktur, çünkü daha önce birçok kez belirtildiği gibi, 'yeni' anahtar kelimesini kullandık, böylece yorumlayıcı bu nesneyi oluşturacak, temsilci olsun bu prototip, o zaman biz işi yapmadan bizim için iade et.
İlk önce 'özel' ve yardımcı fonksiyonumuzu oluşturalım. Fabrikamızla aynı şeyi yaptığımız için bu çok tanıdık görünmelidir. Burada her satırın ne yaptığını açıklamayacağım çünkü fabrika örneğinde bunu yaptım, kafanı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, kontrol cihazımızda mevcut olacak tüm yöntemlerimizi 'buna' 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, myService'i hangi denetleyiciye iletirsek kontrol edebiliriz. İşte myService denetleyicisi (neredeyse fabrika denetleyicimizle aynıdır).
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 bahsettiğim gibi, 'yeni'nin ne yaptığını gerçekten anladıktan sonra, Hizmetler Angular'daki fabrikalarla neredeyse aynı.
