AngularJS डेटा बाइंडिंग

AngularJS में डाटा बाइंडिंग मॉडल और व्यू के बीच का सिंक्रोनाइज़ेशन है。

डाटा मॉडल

AngularJS अनुप्रयोग के लिए एक डाटा मॉडल होता है। डाटा मॉडल अनुप्रयोग के लिए उपयोगी डाटा के सेट है।

इंस्टैंस

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

HTML व्यू

AngularJS अनुप्रयोग के HTML कंटेनर को व्यू कहा जाता है。

व्यू मॉडल को एक्सेस कर सकता है, और व्यू में मॉडल डाटा को दिखाने के कई तरीके हैं。

आप ng-bind इस डिरेक्टिव के द्वारा एलिमेंट के innerHTML को निर्दिष्ट मॉडल अट्रिब्यूट के साथ बाइंड किया जाता है:

इंस्टैंस

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

स्वयं आयात करें

आप अधिकतर दूरी के लिए दो बड़े बारे का उपयोग कर सकते हैं {{ }} का उपयोग करके मॉडल में के सामग्री को दिखाया जा सकता है:

इंस्टैंस

<p>First name: {{firstname}}</p>

स्वयं आयात करें

या, आप HTML नियंत्रक पर ng-model इस डिरेक्टिव के द्वारा मॉडल को व्यू से बाइंड किया जाता है。

ng-model डिरेक्टिव

उपयोग करके ng-model इस डिरेक्टिव के द्वारा मॉडल में के डाटा को HTML नियंत्रक (input, select, textarea) के व्यू पर बाइंड किया जाता है。

इंस्टैंस

<input ng-model="firstname">

स्वयं आयात करें

ng-model डिरेक्टिव डाटा और व्यू के बीच द्विपक्षीय बाइंडिंग प्रदान करते हैं。

द्विपक्षीय बाइंडिंग

AngularJS में डाटा बाइंडिंग मॉडल और व्यू के बीच का सिंक्रोनाइज़ेशन है。

मॉडल में डाटा के बदलाव के मामले में, व्यू इस बदलाव को प्रतिबिंबित करेगा, और जब व्यू में डाटा के बदलाव होता है, तो मॉडल भी अपडेट होगा। यह तत्काल और स्वचालित होता है, इससे यह सुनिश्चित होता है कि मॉडल और व्यू हमेशा अपडेट होते रहें।

इंस्टैंस

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

स्वयं आयात करें

AngularJS कंट्रोलर

AngularJS में अनुप्रयोग को कंट्रोलर द्वारा नियंत्रित किया जाता है। कृपया AngularJS कंट्रोलर चैप्टर में कंट्रोलर के बारे में पढ़ें。

मॉडल और व्यू के तत्काल सिंक्रोनाइज़ेशन के कारण, कंट्रोलर केवल मॉडल डाटा पर केंद्रित होता है, और व्यू से पूरी तरह से अलग होता है। AngularJS में डाटा बाइंडिंग के कारण, व्यू नियंत्रक में किए गए किसी भी बदलाव को प्रतिबिंबित करेगा。

इंस्टैंस

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

स्वयं आयात करें