Modules AngularJS
Un module AngularJS définit une application.
Le module est un conteneur pour les différentes parties d'une application.
Le module est un conteneur pour les contrôleurs d'application.
Les contrôleurs appartiennent toujours à un module.
Création d'un module
Un module est créé en utilisant la fonction AngularJS angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Le paramètre "myApp" fait référence à un élément HTML dans lequel l'application va s'exécuter.
Vous pouvez désormais ajouter des contrôleurs, des directives, des filtres, etc. à votre application AngularJS.
Ajout d'un contrôleur
Ajoutez un contrôleur à votre application et faites référence au contrôleur avec la
ng-controllerdirective :
Exemple
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var
app
= angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
Vous en apprendrez plus sur les contrôleurs plus tard dans ce didacticiel.
Ajout d'une directive
AngularJS possède un ensemble de directives intégrées que vous pouvez utiliser pour ajouter des fonctionnalités à votre application.
Pour une référence complète, visitez notre référence de directive AngularJS .
De plus vous pouvez utiliser le module pour ajouter vos propres directives à vos applications :
Exemple
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Vous en apprendrez plus sur les directives plus loin dans ce didacticiel.
Modules et contrôleurs dans les fichiers
Il est courant dans les applications AngularJS de mettre le module et les contrôleurs dans des fichiers JavaScript.
Dans cet exemple, "myApp.js" contient une définition de module d'application, tandis que "myCtrl.js" contient le contrôleur :
Exemple
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
monApp.js
var app = angular.module("myApp", []);
Le paramètre [] dans la définition de module peut être utilisé pour définir des modules dépendants.
Sans le paramètre [], vous ne créez pas un nouveau module, mais en récupérez un existant.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Les fonctions peuvent polluer l'espace de noms global
Les fonctions globales doivent être évitées en JavaScript. Ils peuvent facilement être écrasés ou détruits par d'autres scripts.
Les modules AngularJS réduisent ce problème, en gardant toutes les fonctions locales au module.
Quand charger la bibliothèque
Bien qu'il soit courant dans les applications HTML de placer des scripts à la fin de l'
<body>élément, il est recommandé de charger la bibliothèque AngularJS soit dans le <head>ou au début du <body>.
En effet, les appels à angular.modulene peuvent être compilés qu'après le chargement de la bibliothèque.
Exemple
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>