एंगुलरजेएस अपने दो-तरफा डेटा बाध्यकारी तंत्र को कैसे कार्यान्वित करता है?

Question

AngularJS आप दो तरह से डेटा बाइंडिंग को लागू करने की अनुमति देता है। हालांकि, दिलचस्प हिस्सा यह है कि यह मॉडल परिवर्तनों का पता कैसे लगाता है? मॉडल आमतौर पर नीचे दिए गए कोड की तरह एक सादा वस्तु है। हम $scope.user की नाम संपत्ति बदल सकते हैं लेकिन एंगुलरजेएस मॉडल का पता कैसे लगाता है? AngularJS $scope ऑब्जेक्ट के सभी गुणों को enum enum?

angular.module('myApp', []) 
     .controller('BusinessCardController', function($scope){ 
     $scope.user = { 
      name: 'Tanay Pant' 
     } 
     }); 

<input type="text" ng-model="user.name" placeholder="Full Name" /> 

Answer 1

एक पाचन चक्र है, जहां दायरा सभी $ घड़ी अभिव्यक्तियों की जांच करता है और उन्हें पिछले मूल्य के साथ तुलना करता है। यह परिवर्तन के लिए ऑब्जेक्ट मॉडल को देखता है, यदि पुराना मान नए मान के समान नहीं है, तो AngularJS उचित स्थानों, ए.के.ए. गंदे जांच को अपडेट करेगा।

पाचन चक्र को निष्पादित करने के क्रम में $apply(fn) को चलाने के लिए, इस प्रकार आप जावास्क्रिप्ट से कोणीय दुनिया में प्रवेश करते हैं। आने के लिए एक घटना के लिए

1. ब्राउज़र की घटना लूप प्रतीक्षा करता है: (AngularJS integration with browser से लिया गया) कैसे कहा जाता हो $apply(fn) करता है। एक घटना एक उपयोगकर्ता इंटरैक्शन, टाइमर घटना, या नेटवर्क घटना (सर्वर से प्रतिक्रिया) है।
2. घटना के कॉलबैक मार डाला जाता है। यह जावास्क्रिप्ट संदर्भ में प्रवेश करता है। कॉलबैक डीओएम संरचना को संशोधित कर सकता है।
3. एक बार कॉलबैक कार्यान्वित करता है, ब्राउज़र JavaScript का संदर्भ छोड़ देता है और फिर से renders डोम के आधार पर दृश्य बदल जाता है।

Data Binding

Digest Cycle Explanation

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

<h1> {{ ::vm.title }} </h1>

यहाँ यह काफी स्पष्ट है पृष्ठ का शीर्षक शायद जबकि उपयोगकर्ता पृष्ठ पर है बदला नहीं जाएगा कि - या नया एक को देखने के लिए अगर यह होता है की जरूरत है बदला हुआ। तो हम टेम्पलेट लिंकिंग चरण के दौरान एक तरफा बाध्यकारी रजिस्टर करने के लिए :: का उपयोग कर सकते हैं।

मुख्य मुद्दों मैं पर नजर रखने वालों के विस्फोट के साथ देखा है पंक्तियों के सैकड़ों के साथ ग्रिड कर रहे हैं। यदि इन पंक्तियों में कुछ कॉलम हैं और प्रत्येक सेल में दो-तरफा डेटा बाध्यकारी है, तो आप एक इलाज के लिए हैं। आप वापस बैठ सकते हैं और पृष्ठ लोड होने के लिए मॉडेम समय की तरह इंतजार कर सकते हैं!

Answer 2

दो-तरफा बंधन तत्वों कि ng-model उपयोग करने के लिए लगभग विशेष रूप से सीमित है। दृश्य से मॉडल में जाने वाली दिशा मॉडल के भीतर अपडेट किए जाने वाले परिवर्तनों का पता लगाने के लिए मानक ईवेंट हैंडलर का उपयोग करती है (उदा।, onchange)। मॉडल से वापस देखने की दिशा $digest के दौरान अपडेट की गई है। लेकिन हम सीधे $digest पर कॉल नहीं करते हैं।

पाचन चक्र का जवाब देने के लिए आपके पृष्ठ पर मौजूद प्रत्येक तत्व, कहीं भी श्रोता और $watch का उपयोग करके अपने दायरे को अभिव्यक्ति करेगा। जब आप {{ foo() }} लिखते हैं, या जब आप ng-model='user.name' उपयोग करते हैं, आंतरिक रूप से वहाँ $watch के लिए एक कॉल एक जावास्क्रिप्ट अभिव्यक्ति है कि हर बार एक डाइजेस्ट चक्र चलाया जाता है चलाया जाएगा साथ अपनी ओर से किया जाता है।यह पंजीकरण टेम्पलेट (हमारे पहले उदाहरण) के संकलन के दौरान हो सकता है, या यह निर्देश के लिंक चरण (हमारे दूसरे) के दौरान हो सकता है।

यहां कोई जादू नहीं है। जुड़े हुए श्रोताओं नियमित कार्य होते हैं - हमारे उदाहरण में, foo() अभिव्यक्ति के लिए श्रोता आपके लिए प्रदान किया जाता है, और यह पृष्ठ पर HTML टेक्स्ट अपडेट करेगा, जबकि user.name अभिव्यक्ति के श्रोता setText, या setOption पर कॉल करेंगे, या जो विशेष इनपुट द्वारा आवश्यक है ng-model संलग्न किया गया है।

जबकि कोणीय अधिकांश सुनने को संभाल सकता है, आप अपने स्वयं के श्रोताओं के साथ अपने स्वयं के श्रोताओं को मैन्युअल रूप से किसी भी फ़ंक्शन के अंदर संलग्न कर सकते हैं, जो किसी दायरे तक पहुंच है (गुंजाइश महत्वपूर्ण है क्योंकि हम उन हिस्सों को फाड़ देंगे यदि संबंधित भाग पृष्ठ हटा दिया गया है)। अधिक ध्यान रखें। बाइंडिंग मुक्त नहीं हैं, और अधिक चीजें जो बाध्य हैं, धीमे पृष्ठ का जवाब देगा। एक बार बाइंडिंग इस लागत को कम करने का एक तरीका है। $on$emit और $broadcast के साथ 0 का उपयोग कर रहे हैं।

तो कब पाचन कहा जाता है? यह निश्चित रूप से स्वचालित नहीं है। यदि पाचन चक्र चल रहा है, तो इसका मतलब है कि किसी को कहीं भी $apply को उनके दायरे या रूट दायरे पर बुलाया जाता है। ng-model हैंडलर को जोड़ता है जो नियमित एचटीएमएल कार्यक्रमों का जवाब देंगे और आपकी ओर से $apply पर कॉल करेंगे। लेकिन foo(), दूसरी तरफ, कभी भी कॉल नहीं किया जाएगा जब तक कि कुछ अन्य स्क्रिप्ट कहीं भी $apply पर कॉल न करें। सौभाग्य से, जिन कार्यों को आप कोणीय के लिए भरते हैं, वे $apply पर कॉल के साथ उन कार्यों को लपेटते हैं, इसलिए आपको अक्सर कॉल करना नहीं पड़ता है (उदाहरण के लिए, $timeout$apply के साथ लपेटा गया है, यही कारण है कि हम इसे setTimeout के बजाय उपयोग करते हैं) । लेकिन अगर आप कोणीय के दायरे से बाहर कुछ उपयोग कर रहे थे (एक तृतीय पक्ष लाइब्रेरी जो घटनाओं से जुड़ती है), तो आपको $apply स्वयं को कॉल करना याद रखना होगा, और बस ऊपर की तरह, आप कहीं भी $apply पर कॉल करके इसे मैन्युअल रूप से एक्सेस कर सकते हैं एक गुंजाइश के लिए।

Answer 3

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

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

डिफ़ॉल्ट रूप से, एक दायरे पर प्रत्येक चर को कोणीय द्वारा देखा जाता है। इस तरह, अनावश्यक चर को भी कोणीय द्वारा देखा जाता है जो समय लेने वाला होता है और परिणामस्वरूप पृष्ठ धीमा हो रहा है।