🚴🏾 ⭕️ 📋 शुरुआती लोगों के लिए AngularJS में कुछ उपयोगी टोटके 🔃 🌂 🎡

AngularJS पर एप्लिकेशन बनाते समय, नौसिखिया डेवलपर के पास कई सवाल होते हैं, खासकर अगर, एक निश्चित समय तक, वह jQuery या प्रोटोटाइप के समान पुस्तकालयों का उपयोग करता है। इस पोस्ट में मैं कुछ तरकीबें साझा करना चाहूंगा जो शुरुआती AngularJS Developers के लिए उपयोगी होंगी।

आवेदन डाउनलोड और राज्य प्रबंधक

जब तक फ्रेमवर्क को लोड नहीं किया जाता है, तब तक इसकी निर्भरताएं और सभी अनुरोध पृष्ठभूमि में संसाधित होते हैं, एप्लिकेशन बहुत निराशाजनक लग सकता है। और यहां तक कि एनजी-क्लोक भी ज्यादातर मामलों में मदद करने में सक्षम नहीं होगा। आमतौर पर ऐसे उद्देश्यों के लिए एक div का उपयोग किया जाता है जिसमें साइट की मुख्य सामग्री की तुलना में एक बड़ा z-index होता है और इसे तब तक ओवरलैप करता है जब तक कि सभी घटक और राज्य लोड नहीं हो जाते। यह इस तरह लग सकता है:

<div class="loader" ng-show="loader"><div class="loader-content">Loading...</div></div>

और उनकी शैली इस तरह हैं:

  .loader { position: fixed; width: 100%; height: 100%; z-index: 9; } .loader-content { width: 128px; height: 128px; overflow: auto; margin: auto; position: absolute; z-index: 10; top: 0; left: 0; bottom: 0; right: 0; }

AngularJS में, हम लोडर चर का उपयोग करेंगे, जो $ rootScope में स्थित होगा, और इसके मूल्य के आधार पर, हमारा div ब्राउज़र विंडो में छिपा या प्रदर्शित होगा। लगातार $ rootScope में एक चर के मूल्य को बदलना असुविधाजनक है, जबकि हमारे पास कई ऑपरेशन हो सकते हैं जो एक ही समय में किए जाएंगे, और जिस समय उनमें से एक काम करता है, दूसरा अपना काम पूरा नहीं कर सकता है। इस स्थिति में, बूटलोडर छिपा होगा।

ऐसे मामलों से बचने के लिए, आप एक ऐसी सेवा बना सकते हैं जो सभी राज्यों को संग्रहीत करने के लिए ज़िम्मेदार होगी, और इस बात पर निर्भर करती है कि ऑपरेशन में कोई भी संचालन है, $ rootScope.loader के मूल्य को नियंत्रित करें। अपने सरलतम रूप में, इसे निम्नानुसार वर्णित किया जा सकता है:

 'use strict'; app.factory('StateManager', function StatemManager($rootScope, $log) { var stateContainer = []; return { add: function (service) { stateContainer.push(service); $rootScope.globalLoader = true; $log.log('Add service: ' + service); }, remove: function (service) { stateContainer = _.without(stateContainer, service); $log.log('Remove service: ' + service); if (stateContainer.length === 0) { $rootScope.globalLoader = false; $log.log('StateContainer is empty.'); } }, getByName: function (service) { return _.include(stateContainer, service) }, clear: function () { stateContainer.length = 0; $log.log('StateContainer clear.'); return true; } } });

यह उदाहरण अंडरस्कोर लाइब्रेरी का उपयोग करता है। सीधे शब्दों में कहें, यह सेवा एक पारित प्रक्रिया नाम को एक सरणी में लिखती है और अनुरोध पर इसे हटा देती है। यदि सरणी खाली है, तो $ rootScope.loader गलत पर सेट है। और उपयोग का एक उदाहरण:

 StateManager.add('Load_json_data'); var request = $http.get('/data.josn'); request.success(function(response) { console.log(response); StateManager.remove('Load_json_data'); });

बेशक, यह एक आदर्श विकल्प नहीं है, लेकिन ऑपरेशन के सिद्धांत को समझने के लिए पर्याप्त है।

घटनाएँ प्राप्त करना

ऐसी स्थितियाँ हैं, जब हमें एनकाउंटर पर, किसी फंक्शन कंट्रोलर से इवेंट या एलिमेंट लेने की जरूरत होती है। बेशक, इन उद्देश्यों के लिए निर्देशों का उपयोग करना बेहतर है, लेकिन कुछ भी होता है। सौभाग्य से, हमारे पास हमारे निपटान में $ घटना है:

 <ul> <li ng-repeat="name in names" ng-bind="name" ng-click="setActive($event);"></li> </ul>

 $scope.names = ['John', 'Peter', 'Joe']; $scope.setActive = function (evt) { angular.element(evt.target).addClass('active'); }

इस स्थिति में, जब आप सूची से किसी आइटम पर क्लिक करते हैं, तो यह कक्षा को सक्रिय रूप से प्राप्त करेगा। वास्तव में, angular.element jqLite है और आपको बहुत अधिक विधियों का उपयोग करने की अनुमति देता है जो jQuery के प्रेमियों के लिए उपयोग की जाती हैं।

AngularJS और PHP

AngularJS के कई नए लोग हैरान हैं कि php इसे भेजे गए POST अनुरोध को संसाधित नहीं कर सकता है। वह बस इसे नहीं देखता है। सब कुछ बहुत सरलता से समझाया गया है। जैसा कि डेवलपर्स खुद कहते हैं, AngularJS रूबी ऑन रेल्स के लिए डिज़ाइन किया गया है, इसलिए डेटा JSON प्रारूप में क्रमबद्ध है, जो php के लिए समझ से बाहर है। इस समस्या से छुटकारा पाने का एक तरीका बताने वाला एक उत्कृष्ट लेख है। यदि आप $ http सेवा को jQuery.ajax शैली में बनाना चाहते हैं, तो आपको निम्नलिखित कोड को अपने AngularJS एप्लिकेशन में शामिल करना होगा:

जावास्क्रिप्ट कोड

 angular.module('MyModule', [], function($httpProvider) { // Use x-www-form-urlencoded Content-Type $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; // Override $http service's default transformRequest $httpProvider.defaults.transformRequest = [function(data) { /** * The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj * @return {String} */ var param = function(obj) { var query = ''; var name, value, fullSubName, subName, subValue, innerObj, i; for(name in obj) { value = obj[name]; if(value instanceof Array) { for(i=0; i<value.length; ++i) { subValue = value[i]; fullSubName = name + '[' + i + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if(value instanceof Object) { for(subName in value) { subValue = value[subName]; fullSubName = name + '[' + subName + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if(value !== undefined && value !== null) { query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; } } return query.length ? query.substr(0, query.length - 1) : query; }; return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }]; });

कैशिंग ($ cacheFactory)

यहां तक कि किसी भी तरह से शुरुआती इस सेवा की उपेक्षा नहीं करते हैं। मान लीजिए कि आपके पास एक नियंत्रक है, जो किसी विशिष्ट मार्ग पर स्विच करते समय, एक POST अनुरोध करता है और कलाकार के एल्बम के बारे में डेटा प्राप्त करता है:

 var request = $http.get('/albums.json'); request.success(function (response) { $scope.albums = response; });

तथ्य यह है कि यदि उपयोगकर्ता किसी अन्य लिंक पर क्लिक करता है, और फिर वापस लौटता है, तो हमारे कोड को फिर से निष्पादित किया जाएगा, और एल्बम के लिए अनुरोध फिर से सबमिट किया जाएगा। काफी बार, पूरे एप्लिकेशन को डाउनलोड करने के बाद सर्वर को बार-बार अनुरोध का उपयोग करने की आवश्यकता नहीं है। कई स्थितियां हो सकती हैं। इसके लिए $ कैशफैक्ट है। आइए सरल कैश सेवा बनाने का प्रयास करें:

 app.factory('DataCache', function ($cacheFactory) { return $cacheFactory('dataCache', {}); });

और हमारे नियंत्रक में इसका उपयोग करें:

 app.controller('AlbumsCtrl', function (DataCache) { var $scope.albums = DataCache.get('albums'); if (!$scope.albums) { var request = $http.get('/albums.json'); request.success(function (response) { DataCache.put('albums', response); $scope.albums = response; }); } });

अब, यदि कैश में डेटा है, तो एल्बम के लिए अनुरोध निष्पादित नहीं किया जाएगा।

निष्कर्ष

ये तकनीक पहले उदाहरण में सही होने का दावा नहीं करती हैं। मुझे आपके द्वारा मेरे द्वारा प्रस्तावित किए गए तरीकों के अलावा टिप्पणियों में देखकर खुशी होगी।

शुरुआती लोगों के लिए AngularJS में कुछ उपयोगी टोटके

आवेदन डाउनलोड और राज्य प्रबंधक

घटनाएँ प्राप्त करना

AngularJS और PHP

कैशिंग ($ cacheFactory)

निष्कर्ष

More articles: