Jassif Team Institution

AngularJS கன்ட்ரோலர்கள்

AngularJS கன்ட்ரோலர்கள் AngularJS ஆப்ளிகேஷன்களின் டேட்டாவைக் கட்டுப்படுத்துகின்றன.

AngularJS கன்ட்ரோலர்கள் சாதாரண JavaScript Objects ஆகும்.

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" attribute ஒரு AngularJS டைரக்டிவ் ஆகும்
• இது ஒரு கன்ட்ரோலரை வரையறுக்கிறது
• myCtrl function ஒரு JavaScript function ஆகும்
• AngularJS $scope object உடன் கன்ட்ரோலரை அழைக்கும்
• AngularJS இல், $scope ஆப்ளிகேஷன் object ஆகும்
• கன்ட்ரோலர் scope இல் இரண்டு properties (மாறிகள்) உருவாக்குகிறது
• ng-model டைரக்டிவ்கள் input fields ஐ கன்ட்ரோலர் properties உடன் bind செய்கின்றன

கன்ட்ரோலர் மெதட்கள்

மேலே உள்ள எடுத்துக்காட்டு இரண்டு properties கொண்ட ஒரு கன்ட்ரோலர் object ஐ நிரூபித்தது: lastName மற்றும் firstName.

ஒரு கன்ட்ரோலருக்கு மெதட்களும் இருக்கலாம் (மாறிகள் functions ஆக):

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

வெளிப்புற Files இல் கன்ட்ரோலர்கள்

பெரிய ஆப்ளிகேஷன்களில், கன்ட்ரோலர்களை வெளிப்புற files இல் சேமிப்பது பொதுவானது.

<script> tags இடையே உள்ள குறியீட்டை personController.js என்ற வெளிப்புற file இல் நகலெடுக்கவும்:

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

மற்றொரு எடுத்துக்காட்டு

அடுத்த எடுத்துக்காட்டுக்கு நாம் ஒரு புதிய கன்ட்ரோலர் file உருவாக்குவோம்:

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>

பயிற்சிகள் மூலம் கற்றல்

சிறந்த நடைமுறைகள்