Jassif Team Institution

AngularJS কন্ট্রোলার

AngularJS কন্ট্রোলার AngularJS অ্যাপ্লিকেশনের ডেটা নিয়ন্ত্রণ করে।

AngularJS কন্ট্রোলার হল প্লেইন জাভাস্ক্রিপ্ট অবজেক্ট।

AngularJS উদাহরণ

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

আবেদন বিবরণ

• AngularJS অ্যাপ্লিকেশনng-app="myApp"দ্বারা সংজ্ঞায়িত
• আবেদন<div>ভিতরে দৌড়াচ্ছে
• ng-controller="myCtrl"অ্যাট্রিবিউট হল একটি AngularJS নির্দেশিকা
• এটি একটি নিয়ামক সংজ্ঞায়িত করে
• myCtrlফাংশন একটি জাভাস্ক্রিপ্ট ফাংশন
• AngularJS $scopeঅবজেক্ট সহ কন্ট্রোলারকে কল করবে
• AngularJS এ,$scopeঅ্যাপ্লিকেশন বস্তু
• কন্ট্রোলার সুযোগে দুটি বৈশিষ্ট্য (ভেরিয়েবল) তৈরি করে
• ng-modelনির্দেশাবলী ইনপুট ক্ষেত্রগুলিকে কন্ট্রোলার বৈশিষ্ট্যের সাথে আবদ্ধ করে

কন্ট্রোলার পদ্ধতি

উপরের উদাহরণটি দুটি বৈশিষ্ট্য সহ একটি নিয়ামক বস্তু প্রদর্শন করেছে:lastNameএবংfirstName.

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

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

এক্সটার্নাল ফাইলে কন্ট্রোলার

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

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

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{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'}
    ];
});

<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>

ব্যায়ামের মাধ্যমে শেখা

সর্বোত্তম অনুশীলন