javascript - Angular.js में मॉडल राज्य को कहां रखा जाना चाहिए




model angularjs state (4)

कोणीय के बारे में कोई राय नहीं है कि आप "मॉडल ऑब्जेक्ट्स" कहां स्टोर करते हैं। कोणीय नियंत्रक $scope पूरी तरह से आपके यूआई के प्रबंधन के प्रयोजनों के लिए "मॉडल देखें" के रूप में मौजूद है। मैं आपके कोड में इन दो अवधारणाओं को अलग करने का सुझाव देता हूं।

यदि आप कोणीय दायरे में परिवर्तन अधिसूचना ( $watch ) की var myScope = $rootScope.$new() चाहते हैं, तो आप चाहें तो अपने मॉडल डेटा को स्टोर करने के लिए एक स्कोप ऑब्जेक्ट का उपयोग कर सकते हैं ( var myScope = $rootScope.$new() )। बस उसी यूआईपी का उपयोग न करें जिस पर आपका यूआई बाध्य है।

मैं इस अंत में कस्टम सेवाओं को लिखने की सलाह देते हैं। तो डेटा प्रवाह इस तरह चला जाता है:

AJAX -> कस्टम सेवा -> मॉडल स्कोप ऑब्जेक्ट -> नियंत्रक -> यूआई स्कोप ऑब्जेक्ट -> डोम

या यह:

AJAX -> कस्टम सेवाएं -> सादा पुरानी जावास्क्रिप्ट ऑब्जेक्ट्स -> नियंत्रक -> यूआई स्कोप ऑब्जेक्ट -> डोम

मुझे कोणीय मॉडलों के भ्रमित करने का उपयोग मिल रहा है। कोणीय दृष्टिकोण को लेता प्रतीत होता है कि एक मॉडल आपके जैसा कुछ भी हो सकता है - आईई कोणीय में एक स्पष्ट मॉडल वर्ग शामिल नहीं है और आप वेनिला जावास्क्रिप्ट ऑब्जेक्ट्स को मॉडल के रूप में उपयोग कर सकते हैं।

मैंने देखा है कि लगभग हर कोणीय उदाहरण में, मॉडल प्रभावी रूप से एक वस्तु है, या तो हाथ से बनाया गया है, या एक संसाधन के माध्यम से एक एपीआई कॉल से वापस आ गया है। चूंकि मैंने देखा है कि लगभग हर कोणीय उदाहरण सरल है, आमतौर पर नियंत्रक में $ स्कोप पर संग्रहीत मॉडल डेटा और मॉडल से संबंधित किसी भी राज्य, उदाहरण के लिए, नियंत्रक में $ स्कोप पर भी संग्रहीत किया जाता है। यह सरल ऐप्स / उदाहरणों के लिए ठीक काम करता है, लेकिन जब ऐप्स अधिक जटिल हो जाते हैं तो यह ओवरम्प्लिफिकेशन की तरह लगता है। एक नियंत्रक में संग्रहीत मॉडल स्थिति प्रासंगिक होने का जोखिम है और संदर्भ में परिवर्तन होने पर खो जाना है, उदाहरण के लिए; selectedPhoto गैलरी और selectedPhoto फोटो संग्रह करने वाला एक नियंत्रक केवल वैश्विक selectedImage छवि को स्टोर कर सकता है, प्रति गैलरी selectedPhoto नहीं है। ऐसी स्थिति में, प्रति गैलरी नियंत्रक का उपयोग इस समस्या को अस्वीकार कर सकता है, लेकिन यूआई परिप्रेक्ष्य से अपर्याप्त और शायद अनुचित और अनावश्यक लगता है।

मॉडल की कोणीय की परिभाषा उस वीओ / डीटीओ पर विचार करने के करीब दिखाई देती है जो कि सर्वर और क्लाइंट के बीच एक गूंगा वस्तु है। मेरा वृत्ति ऐसी वस्तु को लपेटना है जो मैं मॉडल पर विचार करूंगा - एक वर्ग जो डीटीओ / वीओ (जैसे चयन) से संबंधित राज्य को बनाए रखता है, डीटीओ / वीओ में हेरफेर करने के लिए आवश्यक म्यूटेटर प्रदान करता है, और बाकी के बारे में सूचित करता है अंतर्निहित डेटा में परिवर्तन का आवेदन। जाहिर है कि इस आखिरी हिस्से को एंगुलर की बाइंडिंग की अच्छी तरह से देखभाल की जाती है, लेकिन मुझे पहले दो जिम्मेदारियों के लिए अभी भी एक मजबूत उपयोग-मामले दिखाई देता है।

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

तो मुझे मॉडल डेटा पर राज्य कैसे रखना चाहिए?

[संपादित करें] इस प्रश्न का दूसरा जवाब दिलचस्प है और जो मैं वर्तमान में उपयोग कर रहा हूं उसके करीब है।


राज्य (और मॉडल) $ गुंजाइश में संग्रहीत हैं

$ गुंजाइश कोणीय डेटा भंडारण वस्तु है। यह डेटाबेस के समान है। $ स्कोप स्वयं मॉडल नहीं है, लेकिन आप $ स्कोप में मॉडल स्टोर कर सकते हैं।

प्रत्येक $ स्कोप में माता-पिता का दायरा होता है, रूट रूटस्कोप तक सभी तरह से एक पेड़ संरचना बनाते हैं जो आपके डोम को ढीला रूप से प्रतिबिंबित करता है। जब आप एक निर्देश कहते हैं जिसके लिए एक नया $ स्कोप की आवश्यकता होती है, जैसे कि एनजी-कंट्रोलर, एक नया $ स्कोप ऑब्जेक्ट बनाया जाएगा और पेड़ में जोड़ा जाएगा।

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

नियंत्रक $ गुंजाइश शुरू करते हैं

नियंत्रक का उद्देश्य $ गुंजाइश शुरू करना है । एक ही नियंत्रक पृष्ठ के विभिन्न हिस्सों में कई $ स्कोप ऑब्जेक्ट्स प्रारंभ कर सकता है। नियंत्रक को तुरंत चालू किया जाता है, $ स्कोप ऑब्जेक्ट सेट करता है और फिर बाहर निकलता है। आप पेज के विभिन्न हिस्सों में कई $ स्कोप शुरू करने के लिए एक ही नियंत्रक का उपयोग कर सकते हैं।

आपकी छवि गैलरी के मामले में, आपके पास एक छवि गैलरी नियंत्रक होगा जिसे आप डीओएम के प्रत्येक भाग पर लागू करेंगे जिसे आप एनजी-नियंत्रक निर्देश का उपयोग करके गैलरी बनना चाहते हैं। पृष्ठ के उस हिस्से को इसका अपना $ स्कोप मिलेगा, जिसका उपयोग आप चयनित फोटो विशेषता को संग्रहीत करने के लिए करेंगे।

प्रोटोटाइपिकल स्कॉप्स

सादा पुरानी प्रोटोटाइपिक विरासत का उपयोग करके अपने माता-पिता से $ scope $ रूट तक पहुंच जाता है, ताकि आप अपनी ऑब्जेक्ट्स को पदानुक्रम पर कहीं भी स्टोर कर सकें जो समझ में आता है। आपको $ स्कोप ऑब्जेक्ट्स का पेड़ मिलता है जो मोटे तौर पर आपके वर्तमान डोम से संबंधित है। यदि आपका डोम बदलता है, तो आवश्यकतानुसार आपके लिए नई $ स्कोप ऑब्जेक्ट्स बनाई गई हैं।

$ गुंजाइश सिर्फ एक सादा जावास्क्रिप्ट वस्तु है। एकाधिक वर्तमान छवि वस्तुओं के साथ एक सरणी बनाने के लिए यह एकाधिक $ स्कोप ऑब्जेक्ट्स बनाने के लिए और अधिक अपर्याप्त नहीं है। यह आपके कोड को व्यवस्थित करने का एक समझदार तरीका है।

इस तरह कोणीय पुराने "मैं अपना डेटा कहां स्टोर करूं" समस्या से दूर करता हूं जिसे हम अक्सर जावास्क्रिप्ट में पाते हैं। यह वास्तव में बड़ी उत्पादकता लाभों में से एक का स्रोत है जिसे हम कोणीय से प्राप्त करते हैं।

वैश्विक डेटा मिला (उदाहरण के लिए एक उपयोगकर्ता आईडी)? $ rootScope पर इसे स्टोर करें। स्थानीय डेटा मिला (उदाहरण के लिए एक गैलरी में एक मौजूदा छवि जहां कई गैलरी उदाहरण हैं)? इसे उस गैलरी से संबंधित $ स्कोप ऑब्जेक्ट पर स्टोर करें।

टेम्पलेट के सही हिस्से में $ स्कोप स्वचालित रूप से आपके लिए उपलब्ध है।

कोणीय मॉडल पतले हैं

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

एक कोणीय मॉडल बस एक जावास्क्रिप्ट वस्तु या आदिम है।

कोई वस्तु एक मॉडल हो सकती है। मॉडल आमतौर पर नियंत्रक में JSON का उपयोग करके परिभाषित किए जाते हैं, या सर्वर से AJAXed। एक मॉडल एक JSON ऑब्जेक्ट हो सकता है, या हो सकता है कि केवल एक स्ट्रिंग, सरणी, या यहां तक ​​कि एक संख्या हो।

बेशक, आपके मॉडल में अतिरिक्त फ़ंक्शंस जोड़ने और जेएसओएन ऑब्जेक्ट में उन्हें संग्रहीत करने के लिए कुछ भी नहीं है, लेकिन यह एक प्रतिमान में पोर्टिंग होगा जो वास्तव में कोणीय के साथ फिट नहीं है।

कोणीय वस्तुएं आम तौर पर डेटा के भंडार होते हैं, न कि कार्य।

सामने के अंत में मॉडल वास्तविक मॉडल नहीं है

बेशक मॉडल जो आप क्लाइंट पर रखते हैं वह वास्तविक मॉडल नहीं है। आपका वास्तविक मॉडल, सत्य का आपका एकल स्रोत सर्वर पर रहता है। हम इसे एपीआई का उपयोग करके सिंक्रनाइज़ करते हैं, लेकिन यदि आपके डेटाबेस में दोनों मॉडल के बीच कोई संघर्ष है तो स्पष्ट रूप से अंतिम विजेता है।

यह आपको डिस्काउंट कोड इत्यादि जैसी चीजों के लिए गोपनीयता देता है। आपके सामने वाले मॉडल में जो मॉडल आप पाते हैं वह वास्तविक मॉडल के सार्वजनिक गुणों का एक सिंक्रनाइज़ संस्करण है, जो रिमोट है।

व्यापार तर्क सेवाओं में रह सकते हैं।

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

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

किसी सेवा में उदाहरण के लिए एक विश्वसनीय API से बात करने के लिए विधियां हो सकती हैं, या आपके डेटा को सत्यापित करने के लिए, या किसी अन्य काम को करने के लिए आपको शायद आवश्यकता हो सकती है।

सेवाएं मॉडल नहीं हैं

बेशक आपको सेवाओं के रूप में सेवाओं का उपयोग नहीं करना चाहिए। उन्हें वस्तुओं के रूप में उपयोग करें जो सामान कर सकते हैं। कभी-कभी वे आपके मॉडल में सामान करते हैं। यह सोचने का एक अलग तरीका है, लेकिन एक व्यावहारिक है।


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

कोणीय आपके लिए अपने राज्य को जारी रखने के लिए वास्तव में आसान बनाता है:

  1. एक विश्वसनीय $ संसाधन के लिए एक कॉल
  2. एक यूआरएल आपके मॉडल के उदाहरण का प्रतिनिधित्व करता है

आपके सरल उदाहरण में, selectedGallery क्रियाओं जैसे selectedGallery और selectedPhoto फोटो का संग्रह यूआरएल का उपयोग करके कुछ इस प्रकार किया जा सकता है:

// List of galleries
.../gallery

// List of photos in a gallery
.../gallery/23

// A specific photo
.../gallery/23/photo/2

यूआरएल महत्वपूर्ण है क्योंकि यह आपके उपयोगकर्ता को back और forward बटन का उपयोग करके ब्राउज़र इतिहास पर नेविगेट करने की इजाजत देता है। यदि आप इस एप्लिकेशन को अपने आवेदन के दूसरे भाग के साथ साझा करना चाहते हैं, तो वेब एप्लिकेशन आपके द्वारा कुकी / लोकल स्टोरेज, छुपा फ्रेम / फ़ील्ड या यहां तक ​​कि अपने सर्वर में संग्रहीत करने के लिए विधियों की धनराशि प्रदान करता है।

एक बार जब आप अपने आवेदन की अलग-अलग स्थिति को कायम रखने के तरीके पर अपनी रणनीति को परिभाषित कर लेते हैं, तो यह तय करना आसान होना चाहिए कि क्या आप इन .factory ऑब्जेक्ट का उपयोग करके .factory ऑब्जेक्ट का उपयोग करना चाहते हैं .factory या .factory माध्यम से एक उदाहरण।


मेरे मामले में, मैं बूटस्ट्रैप टूलटिप को डबग करना चाहता हूं। लेकिन ऊपर दिए गए तरीके मेरे लिए काम नहीं करते हैं। मुझे लगता है कि बूटस्ट्रैप ने इसे माउस इन / आउट इवेंट जैसे कुछ द्वारा कार्यान्वित किया है।

वैसे भी, जब मैं एक बटन पर होवर करता हूं, तो यह बटन के नीचे एक भाई HTML तत्व उत्पन्न करेगा, इसलिए मैं "डेवलपर टूल" विंडो के "तत्व" टैब में बटन के मूल तत्व का चयन करता हूं, बटन को होवर करता हूं, और "Ctrl + C" तो मैं स्रोत कोड पेस्ट कर सकता हूं जिसमें जेनरेट कोड शामिल है। अंत में जेनरेट कोड ढूंढें, और इसे "एलिमेंट्स" टैब में "HTML के रूप में संपादित करें" द्वारा स्रोत कोड में जोड़ें।

उम्मीद है कि यह किसी की मदद कर सकता है।





javascript model angularjs state