1. লিখেছেন সুদীপ্ত সাহা
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট কন্ট্রোলারস
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট কন্ট্রোলারস অ্যাঙ্গুলার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনের ডাটাগুলো কন্ট্রোল করে। এগুলো জাভাস্ক্রিপ্টের রেগুলার অবজেক্ট।
অ্যাঙ্গুলার জাভাস্ক্রিপ্টের অ্যাপ্লিকেশনগুলো কন্ট্রোলার দ্বারা নিয়ন্ত্রণ করা হয়। ng-controller ডিরেকটিভ অ্যাপ্লিকেশন কন্ট্রোলকে নির্দেশ করে। কন্ট্রোলার হল জাভাস্ক্রিপ্টের অবজেক্ট যা অবজেক্ট কন্সট্রাক্টর গঠনের মাধ্যমে তৈরি করা হয়।
personController">
First Name: <input type="text" ng-model="firstName">
Last Name: <input type="text" ng-model="lastName">
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
function personController($scope) {
$scope.firstName="John",
$scope.lastName="Doe"
}
</script>
অ্যাপ্লিকেশনের বর্ণনাঃ
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন ng-app দ্বারা নির্দেশ করা হয়। এটি <div> এর ভেতরে রান হয়। ng-controller কন্ট্রোলার অবজেক্টের নাম নির্দেশ করে।
personController ফাংশন হচ্ছে জাভাস্ক্রিপ্টের একটি ষ্ট্যাণ্ডার্ড অবজেক্ট কন্সট্রাক্টর। অ্যাঙ্গুলার জাভাস্ক্রিপ্টে personControllerকে $scope অবজেক্ট দ্বারা কল করা হয়। এখানে $scope হল একটি অ্যাপ্লিকেশন অবজেক্ট (অ্যাপ্লিকেশনের ভ্যারিয়েবল এবং ফাংশনের ধারক)। personController, $scope অবজেক্টে দুইটি প্রপার্টি (ভ্যারিয়েবল) তৈরি করে, firstName এবং lastName।
ng-model ইনপুট ফিল্ডের কন্ট্রোলার প্রপার্টি (firstName এবং lastName) কে নির্দিষ্ট করে দেয়।
কন্ট্রোলার মেথডসঃ
এই উদাহরণটিতে কন্ট্রোলার অবজেক্টের দুইটি প্রপার্টিসহ কার্যপদ্ধতি দেখানো হয়েছেঃ lastName এবং firstName। একটি কন্ট্রোলারের মেথডও থাকতে পারে (ফাংশন অবজেক্ট প্রপার্টি হিসেবে)
<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="firstName">
Last Name: <input type="text" ng-model="lastName">
<br>
Full Name: {{fullName()}}
</div>
<script>
function personController($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
}
</script>
এক্সটারনাল ফাইলের কন্ট্রোলারঃ
বড় ধরনের অ্যাপ্লিকেশনে কন্ট্রোলারগুলো সাধারনত এক্সটারনাল ফাইলে রাখা হয়। নিচের কোডটি personController.js নামের একটি এক্সটারনাল ফাইলে <script> ট্যাগের মধ্যে কপি করে রাখতে হবে।
অ্যাঙ্গুলার জাভাস্ক্রিপ্ট উদাহরনঃ
<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="firstName">
Last Name: <input type="text" ng-model="lastName">
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
আরেকটি উদাহরণঃ
এই উদাহরণটির জন্য আমরা প্রথমে একটি নতুন কন্ট্রোলার ফাইল তৈরি করবঃ
function namesController($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
এবং তারপর এই কন্ট্রোলার ফাইলটি অ্যাপ্লিকেশনে ব্যবহার করবঃ
<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
