suchen

Heim >Web-Frontend >js-Tutorial >Erklären Sie die Module in AngularJS mit examples_AngularJS

Erklären Sie die Module in AngularJS mit examples_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:54:41894Durchsuche

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.

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

Anwendungsmodul

mainApp.js

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

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

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>

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>

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 textAngularJS.htm in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse unten an.

201561794640977.png (644×450)

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript implementiert einen nahtlosen Scrolleffekt für Text in vier RichtungenNächster Artikel：JavaScript implementiert einen nahtlosen Scrolleffekt für Text in vier Richtungen

In Verbindung stehende Artikel

Mehr sehen