AngularJS ডেটা বাইন্ডিং

অ্যাংগুলারজসতে ডাটা বাইন্ডিং হল মডেল এবং ভিউর মধ্যের সিঙ্ক্রোনাইজেশন。

ডাটা মডেল

অ্যাংগুলারজসতে অ্যাপ্লিকেশন সাধারণত একটি ডাটা মডেল রয়েছে। ডাটা মডেল হল অ্যাপ্লিকেশনের জন্য ব্যবহার্য ডাটার সংকলন。

ইনস্ট্যান্স

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

HTML ভিউ

অ্যাংগুলারজসতে অ্যাপ্লিকেশনের একটি এইচটিএমএল কন্টেনারকে ভিউ বলা হয়。

ভিউ মডেলকে পরিবেশিত করতে পারে এবং ভিউতে মডেল ডাটা প্রদর্শনের একাধিককর পদ্ধতি রয়েছে。

আপনি ng-bind ইনসক্রিপশন, যা এলিমেন্টের innerHTML কে নির্দিষ্ট মডেল অ্যাট্রিবিউটকে বাইন্ড করে

ইনস্ট্যান্স

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

আপনাদের নিজেদের চেষ্টা করুন

আপনি দ্বিগুণ বড় ডগার ব্যবহার করতে পারেন {{ }} মডেলের ডাটা দেখানোর জন্য

ইনস্ট্যান্স

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

আপনাদের নিজেদের চেষ্টা করুন

বা, আপনি এক্সটার্নাল কন্ট্রোলের উপর ng-model ইনসক্রিপশন মডেলকে ভিউতে বাইন্ড করে

ng-model ইনসক্রিপশন

ব্যবহার করে ng-model ইনসক্রিপশন মডেলের ডাটা ভিউতে এক্সটার্নাল কন্ট্রোল করা হয় (input, select, textarea)।

ইনস্ট্যান্স

<input ng-model="firstname">

আপনাদের নিজেদের চেষ্টা করুন

ng-model ইনসক্রিপশন মডেল এবং ভিউর মধ্যের দ্বিপক্ষীয় বাইন্ডিং প্রদান করে。

দ্বিপক্ষীয় বাইন্ডিং

অ্যাংগুলারজসতে ডাটা বাইন্ডিং হল মডেল এবং ভিউর মধ্যের সিঙ্ক্রোনাইজেশন。

যখন মডেলের ডাটা পরিবর্তিত হয়, তখন ভিউও এই পরিবর্তনকে প্রতিফলিত করবে, এবং ভিউতে ডাটা পরিবর্তিত হলে, মডেলও অপদাত্ত হবে। এটা তাত্ক্ষণিক এবং স্বয়ংক্রিয়ভাবে ঘটে, যার ফলে মডেল এবং ভিউ সর্বদা অপদাত্ত থাকে。

ইনস্ট্যান্স

<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 কন্ট্রোলার

অ্যাংগুলারজসতে অ্যাপ্লিকেশন কন্ট্রোলার দ্বারা নিয়ন্ত্রিত। কন্ট্রোলার এর বিষয়ে অধিক জানতে অ্যাংগুলারজসতে কন্ট্রোলার চাপ্তার পড়ুন。

মডেল এবং ভিউর এর তাত্ক্ষণিক সিঙ্ক্রোনাইজেশনের কারণে, কন্ট্রোলার ভিউ থেকে সম্পূর্ণভাবে বিচ্ছিন্ন থাকতে পারে এবং শুধুমাত্র মডেল ডাটা উপর নজর রাখতে হয়। অ্যাংগুলারজসতে ডাটা বাইন্ডিংর কারণে, ভিউ কন্ট্রোলারের কোনও পরিবর্তনকেও প্রতিফলিত করবে。

ইনস্ট্যান্স

<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>

আপনাদের নিজেদের চেষ্টা করুন