AngularJS में सूचियों के साथ काम करने के तरीकों का एक सेट

अक्सर आपको आदिम सूचियों के साथ काम करना पड़ता है, इसलिए समान तरीकों को न लिखने के लिए, मैंने उन्हें एक सेवा में एकत्र किया। मैं नियंत्रकों से कार्यक्षमता लेने के उदाहरण के रूप में उनके बारे में थोड़ी बात करूँगा।

डेमो , सैंडबॉक्स (कई डेमो के साथ खेले जाते हैं, इसलिए डेटा डाउनलोड किया जा सकता है)

जैसा कि आप उदाहरण से देख सकते हैं, हमारे पास एक समस्या है: समान कार्यक्षमता वाली बहुत सी सूचियाँ (जोड़ना, हटाना, आइटम सॉर्ट करना - सूची में और क्या हो सकता है :-))।

सेवा

नियंत्रकों में समान विधियों का वर्णन करना स्पष्ट रूप से एक अच्छा विचार नहीं है। सौभाग्य से, कोणीय सेवाओं का उपयोग करके सामान्य कोड बनाने के कई तरीके प्रदान करता है। उनके बारे में यहाँ और पढ़ें।

हमारे कार्य के लिए, सबसे सरल प्रकार का उपयोग किया जाता है: कारखाना:

angular.module('oi.list', []) .factory('oiList', function () { return function (scope, Resource) { scope.items = Resource.query() scope.add = Resource.add() ... } } 

अब, नियंत्रक में अपनी सेवा का परिचय देते हुए, हमें एक ऐसा कार्य मिलता है जो सभी आवश्यक विधियों को कार्यक्षेत्र में लिखता है।

 .controller('MyCtrl', ['$scope', 'ListRes', function ($scope, ListRes) { oiList($scope, ListRes); }]) 

कैशिंग

अच्छा है, लेकिन अभी भी सुधार किया जा सकता है। जब अजाक्स ($ संसाधन, $ http) के साथ डेटा प्राप्त करते हैं, तो प्राप्त आंकड़ों को डिफ़ॉल्ट रूप से कोणीय करता है। इसका मतलब है, उदाहरण के लिए, जो डेटा पेज को एनजी-व्यू में लोड कर रहा है, उसे छोड़कर और फिर से लौटने पर डेटा को फिर से लोड नहीं करना पड़ेगा, क्योंकि उन्हें कैश से लिया गया है।

दुर्भाग्य से, यह केवल प्राथमिक मामलों में काम करता है। कोणीय कैश अनुरोध करता है, लेकिन एक मॉडल नहीं। यानी resArr[0].get() Resource.query() का उपयोग करके डेटा ऐरे को लोड और कैश्ड करने के बाद, resArr[0].get() कैश से डेटा नहीं लेगा यदि आप इसे resArr[0].get() का उपयोग करके किसी व्यक्तिगत तत्व के लिए अनुरोध करते हैं, क्योंकि अनुरोध पहले से ही अलग होगा। चूंकि कैश किसी भी तरह से मॉडल से जुड़ा नहीं है, इसलिए अपडेट करते समय मॉडल को अपडेट करना गैर-तुच्छ कार्य में बदल जाता है।

इन समस्याओं को हल करने के लिए, अनुप्रयोग के लिए टाइप value एक oiListCache सेवा जोड़ें। यह मॉडल के लिए एक लिंक स्टोर करेगा। यदि डेटा लोड करते समय हम देखते हैं कि लिंक खाली है, तो हम सर्वर से लोड करते हैं, अन्यथा हम संदर्भ द्वारा मॉडल लेते हैं।

 .value('oiListCache', {cacheRes: {}}) .factory('oiList', ['oiListCache', function (oiListCache) { return function (scope, cache, Resource) { if (angular.equals(oiListCache.cacheRes[cache], [])) { //        scope.items = oiListCache.cacheRes[cache] = Resource.query(); } else { //    scope.items = oiListCache.cacheRes[cache]; } } } 

प्रत्येक मॉडल के लिए, हम इसे cache वाली cache लाइन का उपयोग करते हैं, ताकि विभिन्न मॉडलों में एक अलग कैश हो।

तरीकों

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

सबसे अच्छा तरीका नए तत्व को तुरंत दिखाना है, और प्रतिक्रिया प्राप्त करने के बाद इसे डेटाबेस में संलग्न करना है। और यहाँ एक बड़ी पकड़ है। यदि किसी उपयोगकर्ता ने अभी तक कोई पहचानकर्ता नहीं हटाया है, तो मुझे क्या करना चाहिए? या एक ही समय में कई तत्वों को जोड़ा? इस मामले में, मैं जोड़ा / हटाए गए आइटम के काउंटर का उपयोग करता हूं। जोड़ने / हटाने के लिए अनुरोध भेजते समय, काउंटर बढ़ जाता है, जब एक प्रतिक्रिया प्राप्त होती है तो यह घट जाती है। मैं कोड नहीं दूंगा, सैंडबॉक्स में ढूंढना आसान है ।

ज्ञात मुद्दे

मैंने मॉड्यूल को एक खुली परियोजना बनाने की योजना नहीं बनाई थी, लेकिन चूंकि मैंने इसे लेख में पोस्ट किया था, इसलिए मुझे मेरे द्वारा ज्ञात समस्याओं का भी उल्लेख करना होगा। इसके अलावा, अचानक कोई समझदार को सलाह देगा।

1. कैश ऑब्जेक्ट के लिए Resource ऑब्जेक्ट और कुंजी पैरामीटर के रूप में स्वीकार किए जाते हैं। यदि संसाधन का नाम निकाला जा सकता है, तो यह पूरी तरह से कैश कुंजी को बदल देगा। दुर्भाग्य से, मुझे नहीं पता कि इसे कैसे प्राप्त किया जाए।
   
   
2. हर बार जब सूची बदली जाती है, तो तत्वों की एक नई व्यवस्था सर्वर को सॉर्ट () फ़ंक्शन द्वारा भेजी जाती है। समस्या यह है कि बिना scope.$$phase || scope.$apply() scope.$$phase || scope.$apply() परिवर्तन एक बार होता है।
   
   
3. अब मॉडल को स्कोप नाम के दायरे में लिखा गया है। मैं नाम को मापदंडों में एक अलग सेटिंग नहीं बनाना चाहता। मैं नियंत्रक में $scope.modelname = oiList($scope, 'list', ListRes) लिखना चाहता हूं, लेकिन बाध्यकारी टूट जाता है क्योंकि सर्वर से डेटा प्राप्त करते समय, उन्हें सीधे दायरे में नहीं सौंपा जाता है।