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) जब आप सेवा का उपयोग कर रहे होते हैं , तो AngularJS इसे 'नए' कीवर्ड के साथ पर्दे के पीछे कर देता है। उसके कारण, आप 'इस' में गुण जोड़ेंगे और सेवा 'यह' वापस आ जाएगी। जब आप सेवा को अपने नियंत्रक में पास करते हैं, तो 'यह' पर वे गुण अब आपकी सेवा के माध्यम से उस नियंत्रक पर उपलब्ध होंगे।
app.controller(‘myServiceCtrl’, function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service(‘myService’, function(){
var _artist = ‘Nelly’;
this.getArtist = function(){
return _artist;
}
});
3) प्रदाता एकमात्र सेवा है जिसे आप अपने .config () फ़ंक्शन में पास कर सकते हैं। जब आप उपलब्ध कराने से पहले अपनी सेवा वस्तु के लिए मॉड्यूल-वाइड कॉन्फ़िगरेशन प्रदान करना चाहते हैं तो एक प्रदाता का उपयोग करें।
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’;
});
गैर टीएल, डॉ
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 को बनाएगा और लौटाएगा।
अब जबकि हमारे सहायक / निजी चर और कार्य स्थान पर हैं, तो आइए कुछ गुणों को 'सेवा' ऑब्जेक्ट में जोड़ें। जो कुछ भी हम 'सेवा' पर डालते हैं, जिसका उपयोग सीधे 'नियंत्रक' में से किया जा सकता है।
हम सेटआर्टिस्ट और गेटआर्टिस्ट मेथड बनाने जा रहे हैं जो बस कलाकार को लौटाते हैं या सेट करते हैं। हम एक ऐसी विधि भी बनाने जा रहे हैं जो हमारे बनाए गए URL के साथ iTunes API को कॉल करेगी। यह विधि एक वादा वापस करने जा रही है जो आइट्यून्स एपीआई से डेटा वापस आने के बाद पूरा होगा। यदि आपको AngularJS में वादों का उपयोग करने का अधिक अनुभव नहीं है, तो मैं उन पर एक गहरा गोता लगाने की सलाह देता हूं।
नीचे setArtist आप कलाकार स्थापित करने के लिए एक कलाकार स्वीकार करता है और अनुमति देता है। getArtist कलाकार को लौटाता है। callItunes पहले URL बनाता है () हम अपने $ http अनुरोध के साथ उपयोग करेंगे URL बनाने के लिए। फिर यह एक वादा वस्तु सेट करता है, हमारे अंतिम 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 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;
}
अब 'नया' कीवर्ड वास्तव में जावास्क्रिप्ट में क्या करता है, इसका ज्ञान होने के बाद, AngularJS में एक सेवा का निर्माण करना आसान होना चाहिए।
सेवा बनाते समय समझने वाली सबसे बड़ी बात यह है कि सेवाओं को 'नए' कीवर्ड के साथ त्वरित किया जाता है। उस ज्ञान को ऊपर दिए गए हमारे उदाहरणों के साथ जोड़ते हुए, अब आपको यह पहचानना चाहिए कि आप अपने गुणों और विधियों को सीधे 'इस' से जोड़ देंगे, जिसे बाद में सेवा से वापस कर दिया जाएगा। आइए इस पर एक नज़र डालें।
मूल रूप से हमने फ़ैक्टरी उदाहरण के साथ जो किया था, उसके विपरीत, हमें एक ऑब्जेक्ट बनाने की ज़रूरत नहीं है, फिर उस ऑब्जेक्ट को वापस लौटाएं, क्योंकि पहले कई बार उल्लेख किया गया था, हमने 'नए' कीवर्ड का उपयोग किया था, इसलिए दुभाषिया उस ऑब्जेक्ट का निर्माण करेगा, क्या इसे प्रतिनिधि के पास भेजना है यह प्रोटोटाइप है, तो काम किए बिना हमारे लिए इसे वापस कर दें।
पहले चीजें पहले, चलो हमारे 'निजी' और सहायक समारोह बनाएँ। यह बहुत परिचित लगना चाहिए क्योंकि हमने अपने कारखाने के साथ सटीक काम किया है। मैं यह नहीं बताऊंगा कि प्रत्येक पंक्ति यहाँ क्या करती है क्योंकि मैंने कारखाने के उदाहरण में, यदि आप भ्रमित हैं, तो कारखाने के उदाहरण को फिर से पढ़ें।
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);
})
}
});
जैसा कि मैंने पहले उल्लेख किया है, एक बार जब आप वास्तव में समझते हैं कि 'नया' क्या करता है, तो सेवाएं लगभग AngularJS में कारखानों के समान हैं।
3) प्रदाता
प्रोवाइडर्स के बारे में याद रखने वाली सबसे बड़ी बात यह है कि वे एकमात्र ऐसी सेवा हैं, जिसे आप अपने एप्लिकेशन के ऐप में बदल सकते हैं। यदि आपके एप्लिकेशन में हर जगह उपलब्ध होने से पहले आपको अपनी सेवा वस्तु के कुछ हिस्से को बदलने की आवश्यकता हो तो यह बहुत महत्वपूर्ण है। हालाँकि बहुत कुछ सेवाओं / कारखानों के समान है, लेकिन कुछ अंतर हैं जिनकी हम चर्चा करेंगे।
पहले हमने अपने प्रदाता को उसी तरह स्थापित किया जैसे हमने अपनी सेवा और कारखाने के साथ किया था। नीचे दिए गए चर हमारे 'निजी' और सहायक समारोह हैं।
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;
}
}
* फिर से अगर उपरोक्त कोड का कोई भी भाग भ्रमित हो रहा है, तो फैक्टरी अनुभाग देखें, जहां मैं समझाता हूं कि यह सब अधिक विवरण क्या करता है।
आप तीन खंडों के रूप में प्रदाताओं के बारे में सोच सकते हैं। पहला खंड 'निजी' चर / कार्य हैं जिन्हें बाद में संशोधित / सेट किया जाएगा (ऊपर दिखाया गया है)। दूसरा खंड वे चर / कार्य हैं जो आपके app.config फ़ंक्शन में उपलब्ध होंगे और इसलिए वे कहीं और उपलब्ध होने से पहले बदलने के लिए उपलब्ध हैं (ऊपर दिखाए गए हैं)। यह ध्यान रखना महत्वपूर्ण है कि उन चर को 'इस' कीवर्ड से जोड़ना होगा। हमारे उदाहरण में, केवल 'thingFromConfig' app.config में परिवर्तन करने के लिए उपलब्ध होगा। तीसरा खंड (नीचे दिखाया गया है) सभी चर / कार्य हैं जो आपके नियंत्रक में उपलब्ध होंगे जब आप उस विशिष्ट नियंत्रक में 'myProvider' सेवा में पास होंगे।
प्रदाता के साथ एक सेवा बनाते समय, केवल गुण / विधियाँ जो आपके नियंत्रक में उपलब्ध होंगी, वे गुण / विधियाँ हैं जिन्हें $ get () फ़ंक्शन से लौटाया जाता है। नीचे दिया गया कोड 'इस' पर $ प्राप्त करता है (जिसे हम जानते हैं कि अंततः उस फ़ंक्शन से लौटा दिया जाएगा)। अब, कि $ get फंक्शन सभी विधियों / गुणों को लौटाता है जो हम नियंत्रक में उपलब्ध होना चाहते हैं। यहाँ एक कोड उदाहरण है।
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
}
}
अब पूर्ण प्रदाता कोड इस तरह दिखता है
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
}
}
});
अब हमारे कारखाने और सेवा की तरह, सेटआर्टिस्ट, गेटआर्टिस्ट और कॉल इट्यून्स उपलब्ध होंगे जो भी हमारे नियंत्रक से गुजरता है, जिसमें मैं myProvider पास करता हूं। यहाँ myProvider नियंत्रक (जो हमारे कारखाने / सेवा नियंत्रक के लगभग समान है)।
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;
});
जैसा कि पहले उल्लेख किया गया है, प्रदाता के साथ एक सेवा बनाने का पूरा बिंदु एप्लिकेशन के माध्यम से कुछ चर को बदलने में सक्षम होना है। अंतिम वस्तु को आवेदन से पहले पारित करने से पहले। चलिए इसका एक उदाहरण देखते हैं।
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';
});
अब आप देख सकते हैं कि हमारे प्रोवाइडर में 'thingFromConfig' कितनी खाली स्ट्रिंग है, लेकिन जब वह DOM में दिखाई देगा, तो यह 'यह वाक्य सेट किया गया ...' होगा।
