AngularJS
डेटा बाइंडिंग कैसे काम करती है

टिप्पणियों

डेटा बाइंडिंग उदाहरण

<p ng-bind="message"></p>

यह 'संदेश' वर्तमान तत्वों नियंत्रक के दायरे से जुड़ा होना है।

$scope.message = "Hello World";

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

स्कोप की कोई आवधिक जाँच नहीं है कि क्या इसमें संलग्न वस्तुओं में कोई बदलाव है या नहीं। गुंजाइश से जुड़ी सभी वस्तुओं को नहीं देखा जाता है। स्कोप प्रोटोटाइप $ $ वॉचर्स ऐरे को बनाए रखता है। स्कोप केवल इस वॉचअर्स के माध्यम से पुनरावृत्ति करता है जब $ डाइजेस्ट कहा जाता है।

कोणीय इनमें से प्रत्येक के लिए वॉचर्सअरे के लिए एक चौकीदार जोड़ता है

1. {{अभिव्यक्ति}} - आपके टेम्पलेट्स में (और कहीं भी जहां एक अभिव्यक्ति है) या जब हम एनजी-मॉडल को परिभाषित करते हैं।
   
2. $ गुंजाइश। $ घड़ी ('अभिव्यक्ति / कार्य') - आपके जावास्क्रिप्ट में हम केवल कोणीय वस्तु देखने के लिए एक गुंजाइश वस्तु संलग्न कर सकते हैं।

$ घड़ी समारोह तीन मापदंडों में लेता है:

1. पहला एक वॉचर फ़ंक्शन है जो केवल ऑब्जेक्ट लौटाता है या हम केवल एक अभिव्यक्ति जोड़ सकते हैं।
   

2. दूसरा एक श्रोता फ़ंक्शन है जिसे ऑब्जेक्ट में परिवर्तन होने पर बुलाया जाएगा। इस फ़ंक्शन में DOM परिवर्तन जैसी सभी चीजें लागू की जाएंगी।
   

3. तीसरा एक वैकल्पिक पैरामीटर है जो बूलियन में लेता है। यदि इसका सही, कोणीय गहन वस्तु को देखता है और यदि इसका झूठा कोणीय सिर्फ वस्तु पर एक संदर्भ देखता है। $ घड़ी का रफ इम्प्लीमेंटेशन इस तरह दिखता है

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

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

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

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

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};