AngularJS কন্ট্রোলার

AngularJS কন্ট্রোলারঅ্যাংগুলারজেস অ্যাপলিকেশনের ডাটা নিয়ন্ত্রণ。

অ্যাংগুলারজেস কন্ট্রোলার সাধারণ জেভাস্ক্রিপ্ট অবজেক্ট。

AngularJS কন্ট্রোলার

অ্যাংগুলারজেস অ্যাপলিকেশন কন্ট্রোলার দ্বারা নিয়ন্ত্রিত

ng-controller ইনডাক্ট অ্যাপলিকেশন কন্ট্রোলার নির্দিষ্ট করে

কন্ট্রোলার স্ট্যান্ডার্ড জেভাস্ক্রিপ্ট অবজেক্ট কন্সট্রাক্টর দ্বারা তৈরি জেভাস্ক্রিপ্ট অবজেক্ট。

AngularJS ইনস্ট্যান্স

<div ng-app="myApp" ng-controller="myCtrl">  
নাম: <input type="text" ng-model="firstName"><br>  
পরিবারনাম: <input type="text" ng-model="lastName"><br>  
<br>  
পূর্ণ নাম: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

আপনার হাতে পরীক্ষা করুন

অ্যাপলিকেশন বিবরণ:

অ্যাংগুলারজেস অ্যাপলিকেশন কন্ট্রোলার দ্বারা নির্মিত ng-app="myApp" সংজ্ঞায়ন: অ্যাপলিকেশন <div> এখানে চালানো হয়。

ng-controller="myCtrl" একটি অ্যাঙ্গুলার জিএস ইনস্ট্রাকশন।এটি একটি কন্ট্রোলার নির্দিষ্ট করে।

myCtrl ফাংশন একটি JavaScript ফাংশন।

AngularJS একটি ফাংশন ব্যবহার করবে, $scope অবজেক্ট কন্ট্রোলার কেলেঙ্কারী করে।

AngularJS-এ, $scope হল অ্যাপলিকেশন অবজেক্ট (অ্যাপলিকেশন ভিন্ন বিন্যাস এবং ফাংশনের মালিক)।

কন্ট্রোলার রেঞ্জ (firstName এবং lastNameএকটি নামকরণ (ভিন্ন বিন্যাস) একটি প্রতিমান তৈরি করে:

ng-model ইনপুট ফিল্ডকে কন্ট্রোলার অ্যাট্রিবিউট (firstName এবং lastName) সাথে বাঁধা হয়েছে।

কন্ট্রোলার মধ্যেমান

উপরোক্ত উদাহরণটি একটি কন্ট্রোলার অবজেক্টকে দুটি বৈশিষ্ট্য: lastName এবং firstName দেখায়。

কন্ট্রোলারটি মধ্যেমান ফাংশন (ফাংশনের ভিত্তিতে ভিন্ন বিন্যাস) প্রদান করতে পারে:

AngularJS ইনস্ট্যান্স

<div ng-app="myApp" ng-controller="personCtrl">  
নাম: <input type="text" ng-model="firstName"><br>  
পরিবারনাম: <input type="text" ng-model="lastName"><br>  
<br>  
পূর্ণ নাম: {{fullName()}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  };  
});  
</script>

আপনার হাতে পরীক্ষা করুন

বাইরের ফাইলের কন্ট্রোলার

বড় অ্যাপলিকেশনে, কন্ট্রোলারকে বাইরের ফাইলে সংরক্ষণ করা অত্যন্ত সাধারণ।

শুধুমাত্র <script> ট্যাগের মধ্যের কোডটিকে একটি নামকরণ করে কপি করুন, personController.js এর বাইরের ফাইলে:

AngularJS ইনস্ট্যান্স

<div ng-app="myApp" ng-controller="personCtrl">  
নাম: <input type="text" ng-model="firstName"><br>  
পরিবারনাম: <input type="text" ng-model="lastName"><br>  
<br>  
পূর্ণ নাম: {{fullName()}}  
</div>  
<script src="personController.js"></script>

আপনার হাতে পরীক্ষা করুন

আরেকটি উদাহরণ

আগামী উদাহরণের জন্য, আমরা একটি নতুন কন্ট্রোলার ফাইল তৈরি করবো:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  
});

ফাইলটিকে namesController.js:

তারপর অ্যাপ্লিকেশনে কন্ট্রোলার ফাইল ব্যবহার করুন:

AngularJS ইনস্ট্যান্স

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="namesController.js"></script>

আপনার হাতে পরীক্ষা করুন