AngularJS कंट्रोलर

AngularJS कंट्रोलरAngularJS अनुप्रयोग के डाटा को नियंत्रित करता है。

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>

अपने आप से प्रयास करें

अनुप्रयोग वर्णन:

AngularJS अनुप्रयोग ng-app="myApp" वर्णन: अनुप्रयोग <div> के अंदर चलता है。

ng-controller="myCtrl" गुण एक AngularJS इंडिकेशन है। यह एक नियंत्रक निर्धारित करता है।

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>

अपने आप से प्रयास करें