एंगुलरजेएस नियंत्रक
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> के अंदर चलता है।
एनजी-नियंत्रक = "myCtrl" विशेषता एक AngularJS निर्देश है। यह एक नियंत्रक को परिभाषित करता है।
myCtrl फ़ंक्शन एक जावास्क्रिप्ट फ़ंक्शन है।
AngularJS एक साथ नियंत्रक लागू करेगा $ गुंजाइश वस्तु।
AngularJS में, $scope एप्लिकेशन ऑब्जेक्ट (एप्लिकेशन वैरिएबल और फ़ंक्शंस का स्वामी) है।
नियंत्रक दायरे में दो गुण (चर) बनाता है ( firstName और lastName )।
एनजी-मॉडल निर्देश इनपुट फ़ील्ड को नियंत्रक गुणों (प्रथम नाम और अंतिम नाम) से बांधते हैं ।
नियंत्रक तरीके
उपरोक्त उदाहरण ने दो गुणों के साथ एक नियंत्रक वस्तु का प्रदर्शन किया: अंतिम नाम और प्रथम नाम।
एक नियंत्रक में विधियां भी हो सकती हैं (कार्य के रूप में चर):
एंगुलरजेएस उदाहरण
<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'}
];
});
के रूप में फ़ाइल सहेजें namesController.js :
और फिर किसी एप्लिकेशन में नियंत्रक फ़ाइल का उपयोग करें:
एंगुलरजेएस उदाहरण
<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>