AngularJS কন্ট্রলার
AngularJS কন্ট্রলার(controller) AngularJS এপ্লিকেশনের ডাটাকে নিয়ন্ত্রণ(control) করে।
AngularJS কন্ট্রলার হলো জাভাস্ক্রিপ্ট অবজেক্ট(Object)।
AngularJS কন্ট্রলার
কন্ট্রলারের মাধ্যমে AngularJS এপ্লিকেশনকে নিয়ন্ত্রন করা হয়।
ng-controller ডিরেক্টিভ এপ্লিকেশনের কন্ট্রলারকে ডিফাইন্ড(defined) করে।
কন্ট্রলার হলো জাভাস্ক্রিপ্ট অবজেক্ট যা স্টান্ডার্ড জাস্ক্রিপ্ট অবজেক্ট কন্সট্রাক্টর(object constructor) এর মাধ্যমে সৃষ্টি হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<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 type="text" ng-model="fName"><br>
বয়সঃ <input type="text" ng-model="age"><br>
<br>
নাম ও বয়সঃ {{fName + " " + age}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fName= "Tamim";
$scope.age= "20";
});
</script>
</body>
</html>
ফলাফল
উপরের এপ্লিকেশনের ব্যাখ্যাঃ
AngularJS এপ্লিকেশনকে ng-app="myApp" এর মাধ্যমে ডিফাইন করা হয়েছে। <div> এলিমেন্টের মধ্যে এপ্লিকেশন রান(run) করে।
ng-controller="myCtrl" ডিরেক্টিভ AngularJS এপ্লিকেশনের কন্ট্রলার(controller) ডিফাইন করে।
myCtrl ফাংশন হলো জাভাস্ক্রিপ্ট ফাংশন।
$scope অবজেক্টের মাধ্যমে AngularJS কন্ট্রলারকে কল(call) করে। .
AngularJS এ $scope হলো এপ্লিকেশন অবজেক্ট। অর্থাৎ এপ্লিকেশনের ভ্যারিয়েবল এবং ফাংশনের মালিক।
AngularJS এর $scope অবজেক্টটি অন্যান্য প্রোগ্রামিং যেমন- জাভাস্ক্রিপ্ট, পিএইচপি, জাভা ইত্যাদির this অবজেক্টর মতই।
কন্ট্রলার স্কোপের মধ্যে দুটি প্রোপার্টি(variable) সৃষ্টি করেছে। যেমন- (
fName এবং
age)।
ng-model ডিরেক্টিভ ইনপুট ফিল্ডকে কন্ট্রলার প্রোপার্টি fName এবং age এর সাথে বন্ধন সৃষ্টি করে।
Controller এর মেথড
উপরের উদাহরণে কন্ট্রলার অবজেক্টের শুধুমাত্র দুটি প্রোপার্টি যেমন- age এবং fName ছিল। সেখানে কোনো মেথডের ব্যবহার ছিল না।
controller যেহেতু অবজেক্ট সুতরাং ইহার মেথডও থাকতে পারে। নিচের উদাহরণে information() মেথডকে controller অবজেক্টের ভ্যারিয়েবল হিসাবে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<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 type="text" ng-model="fName"><br>
বয়সঃ <input type="text" ng-model="age"><br>
<br>
নাম ও বয়সঃ {{information()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fName= "Tamim";
$scope.age= "20";
$scope.information= function() {
return $scope.fName + " " +$scope.age;
};
});
</script>
</body>
</html>
ফলাফল
এক্সটার্নাল ফাইলে কন্ট্রলারের ব্যবহার
আপনি যে পেজে এইচটিএমএল কন্টেন্ট(content) রাখেন যদি একই পেজে angularJS কন্ট্রলারকেও রাখেন তাহলে কোড হ-য-ব-র-ল দেখাবে। তাই বড় বড় এপ্লিকেশনের ক্ষেত্রে কন্ট্রলারকে এক্সটার্নাল ফাইলে রাখা হয়।
শুধুমাত্র <script> ট্যাগের মধ্যবর্তী কোডসমূহ কপি(copy) করে এক্সট্রার্নাল ফাইলে পেস্ট(paste) করে myController.js নামে সংরক্ষণ(save) করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<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 type="text" ng-model="fName"><br>
বয়সঃ <input type="text" ng-model="age"><br>
<br>
নাম ও বয়সঃ {{information()}}
</div>
<script src="myController.js"></script>
</body>
</html>
ফলাফল
আরোও উদাহরনঃ
পরবর্তী উদাহরণের জন্য আমরা নতুন একটি কন্ট্রলার namesController.js তৈরি করবো।
angular.module('myApp', []).controller('playerCtrl', function($scope) {
$scope.player = [
{name:'Tamim Iqbal',country:'Bangladesh'},
{name:'Steve Smith',country:'Australia'},
{name:'Chris Gayle',country:'West Indies'}
];
});
এখন কন্ট্রলারকে আপনার এপ্লিকেশনে ব্যবহার করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<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="namesCtrl">
<ul>
<li ng-repeat="a in player">
{{ a.name + ', ' + a.country }}
</li>
</ul>
</div>
<script src="playerController.js"></script>
</body>
</html>
ফলাফল