Maison >interface Web >js tutoriel >Expliquez les modules dans AngularJS avec examples_AngularJS

Expliquez les modules dans AngularJS avec examples_AngularJS

WBOYoriginal: 2016-05-16 15:54:41876parcourir

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", []);

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

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>

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>

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

Sortie

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

201561794640977.png (644×450)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript implémente un effet de défilement transparent dans quatre directionsArticle suivant：JavaScript implémente un effet de défilement transparent dans quatre directions

Articles Liés

Voir plus