एंगुलरजेएस - स्कोप्स

स्कोप एक विशेष जावास्क्रिप्ट ऑब्जेक्ट है जो कंट्रोलर को विचारों से जोड़ता है। स्कोप में मॉडल डेटा होता है। नियंत्रकों में, मॉडल डेटा को $ स्कोप ऑब्जेक्ट के माध्यम से एक्सेस किया जाता है।

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
</script>

निम्नलिखित महत्वपूर्ण बिंदुओं को उपरोक्त उदाहरण में माना जाता है -

$ गुंजाइश को इसके निर्माता की परिभाषा के दौरान नियंत्रक के पहले तर्क के रूप में पारित किया गया है।
$ स्कोप.मैसेज और $ स्कोप। टाइप ऐसे मॉडल हैं जो HTML पेज में उपयोग किए जाते हैं।
हम उन मॉडल को मान प्रदान करते हैं जो एप्लिकेशन मॉड्यूल में परिलक्षित होते हैं, जिसका नियंत्रक आकार नियंत्रक है।
हम कार्यों को $ दायरे में परिभाषित कर सकते हैं।

स्कोप इनहेरिटेंस

स्कोप नियंत्रक-विशिष्ट है। यदि हम नेस्टेड कंट्रोलर्स को परिभाषित करते हैं, तो चाइल्ड कंट्रोलर को अपने पेरेंट कंट्रोलर का दायरा विरासत में मिलता है।

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
   mainApp.controller("circleController", function($scope) {
      $scope.message = "In circle controller";
   });
	
</script>

निम्नलिखित महत्वपूर्ण बिंदुओं को उपरोक्त उदाहरण में माना जाता है -

हम आकारकंट्रोलर में मॉडल को मान प्रदान करते हैं।
हम सर्कल कंट्रोलर नाम के चाइल्ड कंट्रोलर में संदेश को ओवरराइड करते हैं । जब संदेश सर्कलकंट्रोलर नामक नियंत्रक के मॉड्यूल के भीतर उपयोग किया जाता है , तो ओवरराइड संदेश का उपयोग किया जाता है।

उदाहरण

निम्नलिखित उदाहरण उपरोक्त सभी निर्देशों का उपयोग करता है।

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "shapeController">
         <p>{{message}} <br/> {{type}} </p>
         
         <div ng-controller = "circleController">
            <p>{{message}} <br/> {{type}} </p>
         </div>
         
         <div ng-controller = "squareController">
            <p>{{message}} <br/> {{type}} </p>
         </div>
			
      </div>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller("shapeController", function($scope) {
            $scope.message = "In shape controller";
            $scope.type = "Shape";
         });
         mainApp.controller("circleController", function($scope) {
            $scope.message = "In circle controller";
         });
         mainApp.controller("squareController", function($scope) {
            $scope.message = "In square controller";
            $scope.type = "Square";
         });
			
      </script>
      
   </body>
</html>

उत्पादन

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