AngularJS Module

Un module définit une application.

Les modules sont des conteneurs pour les différentes parties d'une application.

Les modules sont des conteneurs pour les contrôleurs d'application.

Les contrôleurs appartiennent généralement à un module.

Créer un module

Vous pouvez utiliser la fonctionangular.moduled'AngularJS pour créer un module :

<div ng-app="myApp">...</div>

<script>

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

</script>

Le paramètre "myApp" correspond à l'élément HTML qui exécute l'application.

Vous pouvez maintenant ajouter des contrôleurs, des directives, des filtres, etc. à votre application AngularJS.

Ajouter un contrôleur

Vous pouvez utiliser la directiveng-controllerpour ajouter un contrôleur à l'application :

Exemple AngularJS

<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>

Essayez-le vous-même »

Pour en savoir plus sur les contrôleurs, consultez le chapitreContrôleurs AngularJS.

Ajouter une directive

AngularJS fournit de nombreuses directives intégrées que vous pouvez utiliser pour ajouter des fonctionnalités à votre application.

Pour une référence complète, consultez leManuel de référence AngularJS。

De plus, vous pouvez utiliser des modules pour ajouter vos propres directives à votre application :

Exemple AngularJS

<div ng-app="myApp" example-directive></div>

<script>

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

app.directive("exampleDirective", function() {
    return {
        template : "J'ai été créé dans le constructeur de la directive !"
    };
});
</script>

Essayez-le vous-même »

Vous pouvez, dans le chapitreAngularJS Directives, en apprendre davantage sur les directives.

Les modules et les contrôleurs sont inclus dans les fichiers JS

Habituellement, les applications AngularJS incluent les modules et les contrôleurs dans des fichiers JavaScript.

Dans l'exemple suivant, "myApp.js" contient la définition du module d'application, et le fichier "myCtrl.js" contient le contrôleur :

Exemple AngularJS

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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>

Essayez-le vous-même »

myApp.js

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

Note Dans la définition du module, le paramètre [] est utilisé pour définir les dépendances du module.
Les crochets [] indiquent que le module n'a pas de dépendances ; s'il y a des dépendances, les noms des modules dépendants sont écrits entre les crochets.

myCtrl.js

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

Les fonctions affectent l'espace de noms global

Les fonctions globales doivent être évitées en JavaScript, car elles peuvent facilement être écrasées par d'autres fichiers de script.

Les modules AngularJS définissent la portée de toutes les fonctions sous le module, ce qui évite ce problème.

Quand la bibliothèque doit-elle être chargée ?

Note Dans nos exemples, toutes les bibliothèques AngularJS sont chargées dans l'en-tête du document HTML.

Pour les applications HTML, il est généralement recommandé de placer tous les scripts en bas de l'élément <body>.

Cela améliore la vitesse de chargement de la page, car le chargement HTML n'est pas contraint par le chargement des scripts.

Dans beaucoup de nos exemples AngularJS, vous verrez que la bibliothèque AngularJS est chargée dans la section <head> du document.

Dans nos exemples, AngularJS est chargé dans l'élément <head> parce que les appels à angular.module ne peuvent être effectués qu'après le chargement complet de la bibliothèque.

Une autre solution consiste à charger la bibliothèque AngularJS dans l'élément <body>, mais elle doit être placée avant vos scripts AngularJS :

Exemple AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<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>

Essayez-le vous-même »
Autres extensions