Expliquez les modules dans AngularJS avec examples

Expliquez les modules dans AngularJS avec examples_AngularJS

WBOY

Libérer： 2016-05-16 15:54:41

original

875 Les gens l'ont consulté

AngularJS prend en charge l'approche modulaire. Les modules sont utilisés pour représenter les services, les contrôleurs, les applications, etc. dans une logique distincte et garder le code propre. Nous définissons le module dans un fichier js séparé et le nommons selon le fichier module.js. Dans cet exemple, nous créons deux modules.

Module d'application - utilisé pour initialiser l'application du contrôleur
Module de contrôleur - utilisé pour définir les contrôleurs

Module applicatif

mainApp.js

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

Copier après la connexion

Ici, nous avons déclaré le module mainApp de l'application en utilisant la fonctionnalité angulaire.module. Nous lui avons transmis un tableau vide. Ce tableau contient généralement des modules dépendants.
Module contrôleur

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

Copier après la connexion

Ici, nous avons déclaré un contrôleur qui adopte la fonction mainApp.controller du module studentController.
Utiliser les modules

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

Copier après la connexion

Ici, nous utilisons la directive ng-app et le module d'application du contrôleur utilisant la directive ng-controller. Nous avons importé mainApp.js et studentController.js dans la page HTML principale.
Exemple

L'exemple suivant démontrera tous les modules ci-dessus.

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>

Copier après la connexion

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

Copier après la connexion

Sortie

Ouvrez textAngularJS.htm dans votre navigateur Web. Voir les résultats ci-dessous.

201561794640977.png (644×450)