এঙ্গুলার জেস জাভাস্ক্রিপ্ট জেকুয়েরি এইচটিএমএল সিএসএস বুটস্ট্রাপ পিএইচপি সি প্রোগ্রামিং
ফোরাম
 

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>

ফলাফল