AngularJS
पाँव को चलना

वाक्य - विन्यास

• $ गुंजाइश। $ घड़ी (watchExpression, कॉलबैक, [गहरी तुलना])
• $ गुंजाइश। $ पचाने ()
• $ गुंजाइश। $ लागू ([exp])

दो तरह से डेटा बाइंडिंग

कोणीय अपने हुड के नीचे कुछ जादू है। यह DOM को वास्तविक js वेरिएबल्स में बाँधने में सक्षम बनाता है।

कोणीय एक लूप का उपयोग करता है, जिसका नाम " डाइजेस्ट लूप " है, जिसे चर के किसी भी परिवर्तन के बाद कहा जाता है - कॉलबैक जो DOM को अपडेट करता है।

उदाहरण के लिए, ng-model निर्देश एक keyup इवेंटलिंटर को इस इनपुट में संलग्न करता है:

<input ng-model="variable" />

हर बार जब keyup इवेंट फायर होता है, तो डाइजेस्ट लूप शुरू होता है।

कुछ बिंदु पर, डाइजेस्ट लूप एक कॉलबैक पर प्रसारित होता है जो इस स्पैन की सामग्री को अपडेट करता है:

<span>{{variable}}</span>

इस उदाहरण का मूल जीवन-चक्र, सारांशित करता है (बहुत योजनाबद्ध तरीके से) कि कोणीय कैसे काम करता है ::

1. कोणीय स्कैन html
   • ng-model निर्देश इनपुट पर एक keyup श्रोता बनाता है
   • स्पैन के अंदर expression चक्र को पचाने के लिए कॉलबैक जोड़ता है
2. उपयोगकर्ता इनपुट के साथ इंटरैक्ट करता है
   • keyup श्रोता चक्र को पचाने लगता है
   • डाइजेस्ट साइकिल कॉलबैक कहती है
   • कॉलबैक स्पैन की सामग्री को अपडेट करता है

$ पच और $ घड़ी

पिछले उदाहरण से परिणाम प्राप्त करने के लिए दो-तरफ़ा-डेटा-बाइंडिंग को लागू करना, दो मुख्य कार्यों के साथ किया जा सकता है:

• उपयोगकर्ता के संपर्क के बाद $ डाइजेस्ट कहा जाता है (DOM => वैरिएबल को बाइंड करना)
• परिवर्तनशील परिवर्तन (बाध्यकारी चर => DOM) के बाद कॉल करने के लिए $ वॉच कॉलबैक सेट करती है

ध्यान दें: यह उदाहरण एक प्रदर्शन है, न कि वास्तविक कोणीय कोड

<input id="input"/>
<span id="span"></span>

हमें जिन दो कार्यों की आवश्यकता है:

var $watches = [];
function $digest(){
    $watches.forEach(function($w){
        var val = $w.val();
        if($w.prevVal !== val){
            $w.callback(val, $w.prevVal);
            $w.prevVal = val;
        }
    })
}
function $watch(val, callback){
    $watches.push({val:val, callback:callback, prevVal: val() })
}

अब हम डोम के लिए एक चर को हुक करने के लिए इन कार्यों का उपयोग कर सकते हैं (कोणीय अंतर्निहित निर्देशों के साथ आता है जो आपके लिए यह करेंगे):

var realVar;    
//this is usually done by ng-model directive
input1.addEventListener('keyup',function(e){
    realVar=e.target.value; 
    $digest()
}, true);

//this is usually done with {{expressions}} or ng-bind directive
$watch(function(){return realVar},function(val){
    span1.innerHTML = val;
});

ऑफ-कोर्स, वास्तविक कार्यान्वयन अधिक जटिल हैं, और समर्थन पैरामीटर जैसे कि किस तत्व को बांधना है, और किस चर का उपयोग करना है

एक चल उदाहरण यहाँ पाया जा सकता है: https://jsfiddle.net/azofxd4j/

$ गुंजाइश पेड़

पिछला उदाहरण काफी अच्छा है जब हमें एक एकल HTML तत्व को एक ही चर में बांधने की आवश्यकता है।

वास्तविकता में - हमें कई तत्वों को कई चर में बाँधने की आवश्यकता है:

<span ng-repeat="number in [1,2,3,4,5]">{{number}}</span>

यह ng-repeat 5 तत्वों को number 5 चर से बांधता है, जिनमें से प्रत्येक के लिए एक अलग मूल्य है!

जिस तरह से कोणीय इस व्यवहार को प्राप्त करता है वह प्रत्येक तत्व के लिए एक अलग संदर्भ का उपयोग कर रहा है जिसे अलग-अलग चर की आवश्यकता होती है। इस प्रसंग को एक दायरा कहा जाता है।

प्रत्येक स्कोप में गुण होते हैं, जो डोम से बंधे हुए चर होते हैं, और $digest और $watch फ़ंक्शन को स्कोप के तरीकों के रूप में लागू किया जाता है।

DOM एक पेड़ है, और चर को पेड़ के विभिन्न स्तरों में उपयोग करने की आवश्यकता होती है:

<div>
    <input ng-model="person.name" />
    <span ng-repeat="number in [1,2,3,4,5]">{{number}} {{person.name}}</span>
</div>

लेकिन जैसा कि हमने देखा, ng-repeat अंदर वेरिएबल्स का संदर्भ (या स्कोप) इसके ऊपर के संदर्भ से अलग है। इसे हल करने के लिए - कोणीय एक पेड़ के रूप में स्कोप्स लागू करता है।

प्रत्येक स्कोप में बच्चों की एक सरणी होती है, और इसकी $digest विधि को कॉल करने से इसके सभी बच्चों की $digest विधि चलेगी।

इस तरह - इनपुट बदलने के बाद - $digest को डिवो के दायरे के लिए बुलाया जाता है, जो तब अपने 5 बच्चों के लिए $digest चलाता है - जो इसकी सामग्री को अपडेट करेगा।

एक गुंजाइश के लिए एक सरल कार्यान्वयन, इस तरह दिख सकता है:

function $scope(){
    this.$children = [];
    this.$watches = [];
}

$scope.prototype.$digest = function(){
    this.$watches.forEach(function($w){
        var val = $w.val();
        if($w.prevVal !== val){
            $w.callback(val, $w.prevVal);
          $w.prevVal = val;
        }
    });
    this.$children.forEach(function(c){
        c.$digest();
    });
}

$scope.prototype.$watch = function(val, callback){
    this.$watches.push({val:val, callback:callback, prevVal: val() })
}

ध्यान दें: यह उदाहरण एक प्रदर्शन है, न कि वास्तविक कोणीय कोड