English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
AngularJS supporte la méthode modulaire. Les modules sont utilisés pour séparer la logique (par exemple, les services, les contrôleurs, les applications, etc.) du code et maintenir l'ordre du code. Nous définissons les modules dans des fichiers js séparés et les nommons selon le fichier module.js. Dans l'exemple suivant, nous créerons deux modules-
Module d'application (Module d'application)− utilisé pour initialiser l'application.controller(s).
Module de contrôleur(Module de contrôleur) − utilisé pour définir le contrôleur.
Voici un fichier nommé mainApp.js qui contient le code suivant-
var mainApp = angular.module("mainApp", []);Ici, nous déclarons un module d'application mainApp en utilisant la fonction angular.module et lui passons un tableau vide. Cet tableau contient généralement les modules pertinents.
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
500,
sujets:[
{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 déclarons un contrôleur studentController en utilisant la fonction mainApp.controller.
<div ng-app = "mainApp" ng-controller = "studentController" ... <script src="mainApp.js"></script> <script src="studentController.js"></script> </div>
Ici, nous utilisons-Module d'application de l'instruction app et le contrôleur utilisant l'instruction ngcontroller. Nous importons mainApp.js et studentController.js dans la page principale HTML.
L'exemple suivant montre l'utilisation de tous les modules mentionnés précédemment.
<html>
<head>
<title>Angular JS Modules</title>/title>
<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
<script src = "/run/angularjs/src/module/mainApp.js"></script>
<script src = "/run/angularjs/src/module/studentController.js"></script>
<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>Example of AngularJS module usage</h/h2>
<div ng-app = "mainApp" ng-controller = "studentController"
<table border = "0">
<tr>
<td>Enter name:</td>/td>
<td><input type = "text" ng-model = "student.firstName"/td>
</tr>
<tr>
<td>Enter surname: </td>/td>
<td><input type = "text" ng-model = "student.lastName"/td>
</tr>
<tr>
<td>Name: </td>/td>
<td>{{ student.fullName() }}</td>/td>
</tr>
<tr>
<td>Subject:</td>/td>
<td>
<table>
<tr>
<th>Name</th>/th>
<th>Score</th>/th>
</tr>
<tr ng-repeat = "subject in student.subjects"
<td>{{ subject.name }}</td>/td>
<td>{{ subject.marks }}</td>/td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>Testez pour voir‹/›var mainApp = angular.module("mainApp", []);mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Sea",
lastName: "Gull",
500,
sujets:[
{name:'Physique',marks:70},
{name:'Chimie',marks:80},
{name:'Mathématiques',marks:65},
{name:'Anglais',marks:75},
{name:'Chinois',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
});
});Résultat de la sortie
Ouvrir le fichier dans le navigateur webtextAngularJS.htm.