एंगुलरजेएस - मॉड्यूल

AngularJS मॉड्यूलर दृष्टिकोण का समर्थन करता है। मॉड्यूल का उपयोग कोड से सेवाओं, नियंत्रकों, एप्लिकेशन आदि को अलग करने के लिए किया जाता है और कोड को साफ बनाए रखता है। हम मॉड्यूल को अलग js फाइलों में परिभाषित करते हैं और उन्हें मॉड्यूल के अनुसार नाम देते हैं। जेएस फाइल। निम्नलिखित उदाहरण में, हम दो मॉड्यूल बनाने जा रहे हैं -

Application Module - कंट्रोलर के साथ एक एप्लिकेशन को इनिशियलाइज़ करने के लिए इस्तेमाल किया जाता है।
Controller Module - नियंत्रक को परिभाषित करने के लिए उपयोग किया जाता है।

आवेदन मॉड्यूल

यहाँ एक फाइल है जिसका नाम mainApp.js है जिसमें निम्नलिखित कोड है -

var mainApp = angular.module("mainApp", []);

यहां, हम एक आवेदन घोषित करते हैं mainAppमॉड्यूल angular.module फ़ंक्शन का उपयोग कर रहा है और इसके लिए एक खाली सरणी पास करता है। इस सरणी में आम तौर पर निर्भर मॉड्यूल होते हैं।

नियंत्रक मॉड्यूल

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

यहां, हम एक नियंत्रक घोषित करते हैं studentController मॉड्यूल mainApp.controller फ़ंक्शन का उपयोग कर रहा है।

मॉड्यूल का उपयोग करें

<div ng-app = "mainApp" ng-controller = "studentController">
   ...
   <script src = "mainApp.js"></script>
   <script src = "studentController.js"></script>
	
</div>

यहां, हम एनजी-कॉन्ट्रैक्ट डायरेक्शन का उपयोग करके एप्लिकेशन मॉड्यूल का उपयोग करते हैं, और एनकॉन्स्ट्रोलर डायरेक्टिव का उपयोग करके नियंत्रक। हम मुख्य HTML पृष्ठ में mainApp.js और studentController.js आयात करते हैं।

उदाहरण

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

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Modules</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "/angularjs/src/module/mainApp.js"></script>
      <script src = "/angularjs/src/module/studentController.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
            <tr>
               <td>Name: </td>
               <td>{{student.fullName()}}</td>
            </tr>
            <tr>
               <td>Subject:</td>
               
               <td>
                  <table>
                     <tr>
                        <th>Name</th>
                        <th>Marks</th>
                     </tr>
                     <tr ng-repeat = "subject in student.subjects">
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.marks }}</td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </div>
      
   </body>
</html>

mainApp.js

var mainApp = angular.module("mainApp", []);

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

उत्पादन

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