TL; DR
1) जब आप किसी फैक्ट्री का उपयोग कर रहे होते हैं तो आप एक ऑब्जेक्ट बनाते हैं, उसमें गुण जोड़ते हैं, फिर उसी ऑब्जेक्ट को वापस करते हैं। जब आप इस कारखाने को अपने नियंत्रक में पास करते हैं, तो ऑब्जेक्ट पर मौजूद गुण अब आपके कारखाने के माध्यम से उस नियंत्रक में उपलब्ध होंगे।
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) जब आप सेवा का उपयोग कर रहे होते हैं , तो कोणीय उसे 'नए' कीवर्ड वाले दृश्यों के पीछे कर देता है। उसके कारण, आप 'इस' में गुण जोड़ेंगे और सेवा 'यह' वापस आ जाएगी। जब आप सेवा को अपने नियंत्रक में पास करते हैं, तो 'यह' पर वे गुण अब आपकी सेवा के माध्यम से उस नियंत्रक पर उपलब्ध होंगे।
app.controller('myServiceCtrl', function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service('myService', function(){
var _artist = 'Nelly';
this.getArtist = function(){
return _artist;
}
});
गैर टीएल, डॉ
1) फैक्ट्री
फैक्ट्री किसी सेवा को बनाने और कॉन्फ़िगर करने का सबसे लोकप्रिय तरीका है। वास्तव में टीएल से बहुत अधिक नहीं है; डीआर ने कहा। आप बस एक ऑब्जेक्ट बनाते हैं, उसमें गुण जोड़ते हैं, फिर उसी ऑब्जेक्ट को वापस करते हैं। फिर जब आप कारखाने को अपने नियंत्रक में पास करते हैं, तो ऑब्जेक्ट पर मौजूद गुण अब आपके कारखाने के माध्यम से उस नियंत्रक में उपलब्ध होंगे। एक अधिक व्यापक उदाहरण नीचे है।
app.factory('myFactory', function(){
var service = {};
return service;
});
अब हम जो भी गुण us सेवा ’से जोड़ते हैं, वह हमारे लिए तब उपलब्ध होगा जब हम 'myFactory’ को अपने नियंत्रक में पास करेंगे।
अब हमारे कॉलबैक फ़ंक्शन में कुछ 'निजी' चर जोड़ते हैं। ये कंट्रोलर से सीधे नहीं मिलेंगे, लेकिन हम अंततः 'सर्विस' पर कुछ गेटटर / सेटर के तरीकों को सेट कर देंगे, ताकि जरूरत पड़ने पर इन 'प्राइवेट' वेरिएबल को बदल सकें।
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;
});
यहाँ आप देखेंगे कि हम उन चर / फ़ंक्शन को 'सेवा' में संलग्न नहीं कर रहे हैं। हम उन्हें केवल उपयोग करने या बाद में संशोधित करने के लिए बना रहे हैं।
- बेस यूआरएल वह आधार URL है जो आईट्यून्स एपीआई की आवश्यकता होती है
- _artist वह कलाकार है जिसे हम देखना चाहते हैं
- _finalUrl एक अंतिम और पूरी तरह से निर्मित URL है जिससे हम आईट्यून्स को कॉल करेंगे MakeUrl एक ऐसा फंक्शन है जो हमारे आईट्यून्स फ्रेंडली URL को बनाएगा और वापस करेगा।
अब जबकि हमारे सहायक / निजी चर और कार्य स्थान पर हैं, तो आइए कुछ गुणों को 'सेवा' ऑब्जेक्ट में जोड़ें। हम जो कुछ भी 'सेवा' में डालते हैं, हम सीधे 'myFactory' में पास करने वाले नियंत्रक में उपयोग करने में सक्षम होंगे।
हम सेटआर्टिस्ट और गेटआर्टिस्ट तरीके बनाने जा रहे हैं जो बस कलाकार को लौटाते हैं या सेट करते हैं। हम एक ऐसी विधि भी बनाने जा रहे हैं जो हमारे बनाए गए URL के साथ iTunes API को कॉल करेगी। यह विधि एक वादा वापस करने जा रही है जो आइट्यून्स एपीआई से डेटा वापस आने के बाद पूरा होगा। यदि आपके पास कोणीय में वादों का उपयोग करने का अधिक अनुभव नहीं है, तो मैं उन पर एक गहरा गोता लगाने की सलाह देता हूं।
नीचे setArtist आप कलाकार स्थापित करने के लिए एक कलाकार स्वीकार करता है और अनुमति देता है। getArtist कलाकार callItunes को पहले कॉल करता है makeUrl () उस URL को बनाने के लिए जिसे हम अपने $ http अनुरोध के साथ उपयोग करेंगे। फिर यह एक वादा वस्तु सेट करता है, हमारे अंतिम url के साथ $ http अनुरोध करता है, फिर क्योंकि $ http एक वादा वापस करता है, हम हमारे अनुरोध के बाद .suor या .error को कॉल करने में सक्षम हैं। फिर हम आईट्यून्स डेटा के साथ अपने वादे को हल करते हैं, या हम इसे एक संदेश के साथ अस्वीकार करते हुए कहते हैं कि 'एक त्रुटि थी'।
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;
});
अब हमारा कारखाना पूरा हो गया है। अब हम 'myFactory' को किसी भी कंट्रोलर में इंजेक्ट करने में सक्षम हैं और फिर हम अपने तरीकों को कॉल करने में सक्षम होंगे जो हमने अपनी सर्विस ऑब्जेक्ट (setArtist, getArtist, और callItunes) से जुड़ी थी।
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);
})
}
});
ऊपर दिए गए नियंत्रक में हम 'myFactory' सेवा में इंजेक्शन लगा रहे हैं। फिर हम अपने $ स्कोप ऑब्जेक्ट पर गुण सेट करते हैं जो 'myFactory' के डेटा से आते हैं। ऊपर केवल ट्रिकी कोड है यदि आपने पहले कभी वादों को निपटाया नहीं है। क्योंकि callItunes एक वादा वापस कर रहा है, हम .then () विधि का उपयोग करने में सक्षम हैं और केवल एक बार हमारा स्कोप iTunes डेटा के साथ पूरा होने पर $ गुंजाइश.data.artistData सेट करते हैं। आप देखेंगे कि हमारा नियंत्रक बहुत 'पतला' है। हमारे सभी तर्क और निरंतर डेटा हमारी सेवा में स्थित हैं, हमारे नियंत्रक में नहीं।
2) सेवा
किसी सेवा को बनाते समय यह जानना सबसे बड़ी बात है कि यह 'नए' कीवर्ड के साथ त्वरित है। आपके लिए जावास्क्रिप्ट गुरु यह आपको कोड की प्रकृति में एक बड़ा संकेत देना चाहिए। आपके लिए जावास्क्रिप्ट में एक सीमित पृष्ठभूमि के साथ या उन लोगों के लिए जो वास्तव में 'नया' कीवर्ड से परिचित नहीं हैं, आइए कुछ जावास्क्रिप्ट बुनियादी बातों की समीक्षा करें जो अंततः एक सेवा की प्रकृति को समझने में हमारी मदद करेंगे।
जब आप किसी फ़ंक्शन को 'नए' कीवर्ड से जोड़ते हैं, तो वास्तव में एक फ़ंक्शन बनाते हैं और 'नए' कीवर्ड के साथ इसे लागू करते हैं, तो चलिए देखते हैं कि इंटरप्रेटर क्या करता है जब वह 'नया' कीवर्ड देखता है। अंतिम परिणाम दोनों समान होंगे।
पहले हम अपना कंस्ट्रक्टर बनाएं।
var Person = function(name, age){
this.name = name;
this.age = age;
}
यह एक विशिष्ट जावास्क्रिप्ट कंस्ट्रक्टर फ़ंक्शन है। अब जब भी हम 'नया' कीवर्ड का उपयोग करके व्यक्ति फ़ंक्शन को आमंत्रित करते हैं, तो 'यह' नए बनाए गए ऑब्जेक्ट के लिए बाध्य होगा।
अब हम अपने व्यक्ति के प्रोटोटाइप पर एक विधि जोड़ते हैं ताकि यह हमारे व्यक्ति 'वर्ग' के हर उदाहरण पर उपलब्ध होगा।
Person.prototype.sayName = function(){
alert('My name is ' + this.name);
}
अब, क्योंकि हम प्रोटोटाइप पर SayName फ़ंक्शन डालते हैं, इसलिए पर्सन का हर इंस्टेंस, उस नाम के नाम से क्रम अलर्ट में SayName फ़ंक्शन को कॉल करने में सक्षम होगा।
अब जब हमारे पास हमारा व्यक्ति निर्माण कार्य है और इसके प्रोटोटाइप पर हमारा नामनाम कार्य है, तो वास्तव में व्यक्ति का एक उदाहरण बनाएं और फिर नामनाम फ़ंक्शन को कॉल करें।
var tyler = new Person('Tyler', 23);
tyler.sayName(); //alerts 'My name is Tyler'
तो सभी एक साथ एक व्यक्ति निर्माणकर्ता बनाने के लिए कोड, एक फ़ंक्शन को इसे प्रोटोटाइप में जोड़कर, एक व्यक्तिगत उदाहरण बना रहा है, और फिर फ़ंक्शन को इसके प्रोटोटाइप पर कॉल करना इस तरह दिखता है।
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'
अब देखते हैं कि जब आप जावास्क्रिप्ट में 'नए' कीवर्ड का उपयोग करते हैं तो वास्तव में क्या हो रहा है। पहली बात जो आपको ध्यान देनी चाहिए वह यह है कि हमारे उदाहरण में 'नया' का उपयोग करने के बाद, हम 'टायलर' पर एक विधि (SayName) को कॉल करने में सक्षम हैं जैसे कि यह एक वस्तु थी - ऐसा इसलिए है क्योंकि यह है। तो सबसे पहले, हम जानते हैं कि हमारा व्यक्ति निर्माता एक ऑब्जेक्ट लौटा रहा है, चाहे हम कोड में देख सकते हैं या नहीं। दूसरा, हम जानते हैं कि क्योंकि हमारा फ़ंक्शन नाम प्रोटोटाइप पर स्थित है, न कि सीधे व्यक्ति के उदाहरण पर, वह वस्तु जो व्यक्ति फ़ंक्शन वापस कर रहा है, उसे विफल लुकअप पर अपने प्रोटोटाइप में प्रतिनिधि होना चाहिए। अधिक सरल शब्दों में, जब हम tyler.sayName कहते हैं () दुभाषिया कहता है, "ठीक है, मैं 'tyler' ऑब्जेक्ट को देखने जा रहा हूं जिसे हमने अभी बनाया है, SayName फ़ंक्शन का पता लगाएं, फिर कॉल करें। एक मिनट रुकिए, मैं इसे यहाँ नहीं देखता - मैं देख रहा हूँ कि मेरा नाम और उम्र है, मुझे प्रोटोटाइप की जाँच करने दें। हाँ, ऐसा लगता है कि यह प्रोटोटाइप पर है, मुझे इसे कॉल करने दें। ”
नीचे इस बात के लिए कोड है कि आप कैसे सोच सकते हैं कि 'नया' कीवर्ड वास्तव में जावास्क्रिप्ट में क्या कर रहा है। यह मूल रूप से उपरोक्त पैराग्राफ का एक कोड उदाहरण है। मैंने 'इंटरप्रेटर व्यू' डाला है या जिस तरह से इंटरप्रेटर ने नोटों के अंदर कोड देखा है।
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;
}
अब 'नया' कीवर्ड वास्तव में जावास्क्रिप्ट में क्या करता है, इसका ज्ञान होने से, कोणीय में एक सेवा तैयार करना आसान हो जाना चाहिए।
सेवा बनाते समय समझने वाली सबसे बड़ी बात यह है कि सेवाओं को 'नए' कीवर्ड के साथ त्वरित किया जाता है। उस ज्ञान को ऊपर दिए गए हमारे उदाहरणों के साथ जोड़ते हुए, अब आपको यह पहचानना चाहिए कि आप अपने गुणों और विधियों को सीधे 'इस' से जोड़ देंगे, जिसे बाद में सेवा से वापस कर दिया जाएगा। आइए इस पर एक नज़र डालें।
मूल रूप से हमने फ़ैक्टरी उदाहरण के साथ जो किया था, उसके विपरीत, हमें एक ऑब्जेक्ट बनाने की ज़रूरत नहीं है, फिर उस ऑब्जेक्ट को वापस लौटाएं, क्योंकि पहले कई बार उल्लेख किया गया था, हमने 'नए' कीवर्ड का उपयोग किया था, इसलिए दुभाषिया उस ऑब्जेक्ट का निर्माण करेगा, क्या इसे प्रतिनिधि के पास भेजना है यह प्रोटोटाइप है, तो काम किए बिना हमारे लिए इसे वापस कर दें।
पहले चीजें पहले, चलो हमारे 'निजी' और सहायक समारोह बनाएँ। यह बहुत परिचित लगना चाहिए क्योंकि हमने अपने कारखाने के साथ सटीक काम किया है। मैं यह नहीं बताऊंगा कि प्रत्येक पंक्ति यहाँ क्या करती है क्योंकि मैंने कारखाने के उदाहरण में, यदि आप भ्रमित हैं, तो कारखाने के उदाहरण को फिर से पढ़ें।
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;
}
});
अब, हम अपने सभी तरीकों को संलग्न करेंगे जो हमारे नियंत्रक में 'इस' के लिए उपलब्ध होंगे।
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;
}
});
अब हमारे कारखाने की तरह, सेटआर्टिस्ट, गेटआर्टिस्ट, और कॉल इट्यून्स उपलब्ध होंगे जो भी नियंत्रक हम myService में पास करते हैं। यहाँ myService कंट्रोलर (जो लगभग हमारे फैक्ट्री कंट्रोलर की तरह ही है)।
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);
})
}
});
जैसा कि मैंने पहले उल्लेख किया है, एक बार जब आप वास्तव में समझते हैं कि mentioned नया ’क्या करता है, तो सेवाएं लगभग कोणीय में कारखानों के समान हैं।
