AngularJS ডাটা বাইন্ডিং(Data Binding)
AngularJS-এ ডাটা বাইন্ডিং হচ্ছে মডেল(model) এবং ভিউ(view)-এর মধ্যে সিনক্রোনাইজেশন(synchronization)
ডাটা মডেল(Data Model)
স্বাভাবিকভাবেই AngularJS এপ্লিকেশন-এ ডাটা মডেল থাকে। ডাটা মডেল হচ্ছে এপ্লিকেশনে ব্যবহৃত ডাটা/তথ্য সংগ্রহ।
উদাহরণ
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
এইচটিএমএল ভিউ(HTML View)
ভিউ(View) হচ্ছে এইচটিএমএল কন্টেইনার, যেখানে AngularJS এপ্লিকেশন প্রদর্শিত(displayed) হয়।
ভিউ(View) মডেলকে এক্সেস করতে পারে। ভিউ(View) এর মাধ্যমে মডেলকে প্রদর্শনীর বিভিন্ন পদ্ধতি আছে।
আপনি চাইলে ng-bind ডিরেক্টিভ ব্যবহার করতে পারেন। যা কোনো নির্দিষ্ট মডেল প্রোপার্টি এবং এইচটিএমএল এলিমেন্টের innerHTML এর মধ্যে বন্ধন তৈরি করেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="fname"></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fname = "Tamim";
$scope.age = "20";
});
</script>
</body>
</html>
ফলাফল
আপনি চাইলে দুইটা বন্ধনী/এক্সপ্রেশনও{{ }} ব্যবহার করেও মডেলের কন্টেন্ট প্রদর্শনী করাতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>নামঃ {{fname}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fname = "Tamim";
$scope.age = "20";
});
</script>
</body>
</html>
ফলাফল
অথবা ng-model ডিরেক্টিভ(directive) ব্যবহার করতে পারেন, যার মাধ্যমে ইনপুট ফিল্ডের ভ্যালু এবং ভিউ(view) এর মধ্যে বন্ধন তৈরি হয়।
ng-model ডিরেক্টিভ(directive)
এইচটিএমএল কন্ট্রলে (ইনপুট, সিলেক্ট, টেক্সট-এরিয়া ) মডেল থেকে ভিউতে ডাটা বাইন্ডের জন্য ng-model ডিরেক্টিভ ব্যবহার করুন।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="fname">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fname = "Tamim";
$scope.age = "20";
});
</script>
</body>
</html>
ফলাফল
ng-model ডিরেক্টিভ মডেল ও ভিউ এর মধ্যে two-way ডাটা বাইন্ডিং প্রদান করে।
Two-way ডাটা বাইন্ডিং
AngularJS এ মডেল ও ভিউ এর মধ্যে সিনক্রোনাইজেশন হলো ডাটা বাইন্ডিং।
যখন ডাটা model এ পরিবর্তন হয়, তখন view তেও পরিবর্তিত হয়। এমনকি যখন ডাটা viewতে পরিবর্তন হয়, তখন model এ পরিবর্তিত হয়। এটি তৎক্ষনাৎ স্বয়ংক্রিয়ভাবে ঘটে, যেটা মডেল ও ভিউ সবসময় আপডেট করা নিশ্চিত করে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<p> AngularJS এর প্রয়োগ দেখার জন্য নিচের বক্সে কিছু লিখুনঃ </p>
<div ng-app="myApp" ng-controller="myCtrl">
নামঃ <input ng-model="fname">
<h3>{{fname}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fname = "Tamim";
$scope.age = "23";
});
</script>
</body>
</html>
ফলাফল
AngularJS কন্ট্রলার
AngularJS এপ্লিকেশন কন্ট্রলার দ্বারা নিয়ন্ত্রিত হয়। বিস্তারিত জানতে AngularJS কন্ট্রলার অনুচ্ছেদ পড়ুন।
মডেল ও ভিউ এর তৎক্ষনাৎ সিনক্রোনাইজেশনের কারনে ভিউ থেকে কন্ট্রলারকে সম্পূর্ন আলাদা করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<p> AngularJS এর প্রয়োগ দেখার জন্য নিচের নামে ক্লিক করুনঃ </p>
<div ng-app="myApp" ng-controller="myCtrl">
<h3 ng-click="changeName()">{{fname}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fname = "Tamim";
$scope.changeName = function() {
$scope.fname = "Tahmid";
}
});
</script>
</body>
</html>
ফলাফল