AngularJS unterstützt modulare Methoden. Module werden verwendet, um separate logische Dienste, Controller, Anwendungen usw. darzustellen und den Code ordentlich zu halten. Wir definieren das Modul in einer separaten JS -Datei und benennen es in Form einer Module.js -Datei. In diesem Beispiel möchten wir zwei Module erstellen.
Anwendungsmodul - Wird zur Initialisierung von Controller -Anwendungen verwendet
Controller -Modul - Wird zum Definieren von Controllern verwendet
Anwendungsmodul
mainapp.js
var mainApp = angular.module ("mainApp", []);
Hier haben wir das MainApp -Modul für die Anwendung unter Verwendung der angular.module -Funktion deklariert. Wir haben ein leeres Array daran übergeben. Dieses Array enthält normalerweise Sklavenmodule.
Controller -Modul
mainapp.controller ("studentController", function ($ scope) {$ scope.student = {FirstName: "Mahesh", Lastname: "Parashar", Gebühren: 500, Fächer: [{Name: 'Physik', Marks: 70}, {Name: Chemistry ', Marken: 80}, 80}, {name' name 'math' mhat: marken ', marken', marken ', {name' math ' {Name: 'English', Marks: 75}, {Name: 'Hindi', Marks: 67}], Fullname: Funktion () {var studentObject;Hier haben wir einen Controller deklariert, der die Funktion mainapp.controller des StudentController -Moduls verwendet.
Mit Modul
<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 den Controller, um das Modul mithilfe der NG-Controller-Anweisung anzuwenden. Wir haben mainapp.js und studentController.js auf der Haupt -HTML -Seite importiert.
Beispiel
Die folgenden Beispiele zeigen alle oben genannten Module.
testangularJs.htm
<html> <Head> <titels> Angular JS -Module </title> <style> Tabelle, td, td {Border: 1PX Solid Grey; Grenzkollapse: Zusammenbruch; Padding: 5px;} Tabelle Tr: n-Child (ungerade) {Hintergrund-Color: #f2f2f2;} Tabelle Tr: N-Child (sogar) {Hintergrund-Color: #fffffff;} </style> </head> <body> <H2> AngularJs Beispielanwendung </h2> <divell ng-App = "Mainapp =" Mainapp = "Mainapp" ng-controller = "studentController"> <table> <tr> <td> Vorname eingeben: </td> <td> <input type = "text" ng-model = "student.firstname"> </td> </tr> <tr> <td> Eingibt den LN-Namen: </td> <td> <input type = "text" 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 = "Subjekt in student.subjects"> <td> {{subjekt.name}} </td> <td> {{{subjekt.marks}} </td> </tr> </table> </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> </script> </script> </html>mainapp.js
var mainApp = angular.module ("mainApp", []);
studentController.js
mainapp.controller ("studentController", function ($ scope) {$ scope.student = {FirstName: "Mahesh", Lastname: "Parashar", Gebühren: 500, Fächer: [{Name: 'Physik', Marks: 70}, {Name: Chemistry ', Marken: 80}, 80}, {name' name 'math' mhat: marken ', marken', marken ', {name' math ' {Name: 'English', Marks: 75}, {Name: 'Hindi', Marks: 67}], Fullname: Funktion () {var studentObject;Ausgabe
Öffnen Sie TextangularJs.htm in einem Webbrowser. Die Ergebnisse sind wie folgt.
Das obige ist die Informationen zum AngularJS -Modulbezogenen Wissen. Wir werden in Zukunft weiterhin relevantes Wissen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!