AngularJS - नियंत्रकों

AngularJS एप्लिकेशन मुख्य रूप से एप्लिकेशन में डेटा के प्रवाह को नियंत्रित करने के लिए नियंत्रकों पर निर्भर करता है। एक नियंत्रक एनजी-नियंत्रक निर्देश का उपयोग करके परिभाषित किया गया है । एक नियंत्रक एक जावास्क्रिप्ट ऑब्जेक्ट है जिसमें विशेषताएँ / गुण और फ़ंक्शन शामिल हैं। प्रत्येक नियंत्रक एक पैरामीटर के रूप में $ गुंजाइश को स्वीकार करता है, जो एप्लिकेशन / मॉड्यूल को संदर्भित करता है जिसे नियंत्रक को संभालने की आवश्यकता होती है।

<div ng-app = "" ng-controller = "studentController">
   ...
</div>

यहां, हम एनजी-कंट्रोलर निर्देश का उपयोग करके, एक छात्र को कंट्रोलर नाम का नियंत्रक घोषित करते हैं। हम इसे इस प्रकार परिभाषित करते हैं -

<script>
   function studentController($scope) {
      $scope.student = {
         firstName: "Mahesh",
         lastName: "Parashar",
         
         fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
         }
      };
   }
</script>

StudentController को एक तर्क के रूप में $ गुंजाइश के साथ जावास्क्रिप्ट ऑब्जेक्ट के रूप में परिभाषित किया गया है।
$ गुंजाइश आवेदन को संदर्भित करता है जो छात्रकंट्रोलर ऑब्जेक्ट का उपयोग करता है।
$ गुंजाइश.student छात्रकंट्रोलर ऑब्जेक्ट की एक संपत्ति है।
पहला नाम और अंतिम नाम $ गुंजाइश के दो गुण हैं। स्थिर वस्तु। हम उनके लिए डिफ़ॉल्ट मान पास करते हैं।
संपत्ति का पूरा नाम $ स्कोप.स्टूडेंट ऑब्जेक्ट का कार्य है, जो संयुक्त नाम देता है।
FullName फ़ंक्शन में, हम छात्र ऑब्जेक्ट प्राप्त करते हैं और फिर संयुक्त नाम वापस करते हैं।
एक नोट के रूप में, हम एक अलग JS फाइल में कंट्रोलर ऑब्जेक्ट को भी परिभाषित कर सकते हैं और HTML पेज में उस फाइल को संदर्भित कर सकते हैं।

अब हम एनकॉन-मॉडल का उपयोग करके या निम्नानुसार अभिव्यक्ति का उपयोग करके छात्रकंट्रोलर की छात्र संपत्ति का उपयोग कर सकते हैं -

Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

हम दो इनपुट बॉक्स के लिए student.firstName और student.lastname को बाध्य करते हैं।
हम HTML में student.fullName () को बाध्य करते हैं।
अब जब भी आप पहले नाम और अंतिम नाम इनपुट बॉक्स में कुछ भी लिखते हैं, तो आप पूरा नाम स्वचालित रूप से अपडेट होते हुए देख सकते हैं।

उदाहरण

निम्न उदाहरण नियंत्रक के उपयोग को दर्शाता है -

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br>
         <br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         You are entering: {{student.fullName()}}
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

उत्पादन

एक वेब ब्राउज़र में फ़ाइल testAngularJS.htm खोलें और परिणाम देखें।