Erklären Sie die Module in AngularJS mit examples

Erklären Sie die Module in AngularJS mit examples_AngularJS

WBOY

Freigeben： 2016-05-16 15:54:41

Original

868 Leute haben es durchsucht

AngularJS unterstützt den modularen Ansatz. Module werden verwendet, um Dienste, Controller, Anwendungen usw. in separater Logik darzustellen und den Code sauber zu halten. Wir definieren das Modul in einer separaten js-Datei und benennen es gemäß der Datei module.js. In diesem Beispiel erstellen wir zwei Module.

Anwendungsmodul – wird zum Initialisieren der Controller-Anwendung verwendet
Controller-Modul – wird zum Definieren von Controllern verwendet

Anwendungsmodul

mainApp.js

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

Nach dem Login kopieren

Hier haben wir das mainApp-Modul der Anwendung mithilfe der Angular.module-Funktionalität deklariert. Wir haben ihm ein leeres Array übergeben. Dieses Array enthält normalerweise 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;
   }
  };
});

Nach dem Login kopieren

Hier haben wir einen Controller deklariert, der die mainApp.controller-Funktion des studentController-Moduls übernimmt.
Module verwenden

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

Nach dem Login kopieren

Hier verwenden wir die NG-App-Direktive und das Controller-Anwendungsmodul, das die NG-Controller-Direktive verwendet. Wir haben mainApp.js und studentController.js in die Haupt-HTML-Seite importiert.
Beispiel

Das folgende Beispiel demonstriert alle oben genannten Module.

testAngularJS.htm

<html>
  <head>
 <title>Angular JS Modules</title>
 <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>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
 <script src="mainApp.js"></script>
 <script src="studentController.js"></script>
</body>
</html>

Nach dem Login kopieren

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

Nach dem Login kopieren

Ausgabe

Öffnen Sie textAngularJS.htm in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse unten an.

201561794640977.png (644×450)