AngularJS - Module

AngularJS unterstützt den modularen Ansatz. Module werden verwendet, um Logik wie Dienste, Controller, Anwendungen usw. vom Code zu trennen und den Code sauber zu halten. Wir definieren Module in separaten js-Dateien und benennen sie gemäß der Datei module.js. Im folgenden Beispiel werden zwei Module erstellt:

Application Module - Dient zum Initialisieren einer Anwendung mit Controllern.
Controller Module - wird verwendet, um die Steuerung zu definieren.

Anwendungsmodul

Hier ist eine Datei mit dem Namen mainApp.js , die den folgenden Code enthält:

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

Hier erklären wir einen Antrag mainAppModul mit der Funktion angle.module und übergeben Sie ein leeres Array. Dieses Array enthält im Allgemeinen abhängige Module.

Controller-Modul

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;
      }
   };
});

Hier deklarieren wir einen Controller studentController Modul mit der Funktion mainApp.controller.

Verwenden Sie Module

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

Hier verwenden wir das Anwendungsmodul mit der Anweisung ng-app und den Controller mit der Anweisung ngcontroller. Wir importieren die mainApp.js und studentController.js in die Haupt-HTML-Seite.

Beispiel

Das folgende Beispiel zeigt die Verwendung aller oben genannten Module.

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;
      }
   };
});

Ausgabe

Öffnen Sie die Datei textAngularJS.htm in einem Webbrowser. Siehe das Ergebnis.