Modules AngularJS


Le module

définit une application.

Les modules sont des conteneurs pour différentes parties de votre 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 créer un module via la fonction angular.module d'AngularJS :

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

<script>

var app = angulaire.module("monApp", []);

</script>

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

Vous pouvez désormais ajouter des contrôleurs, des directives, des filtres, etc. dans votre application AngularJS.

Ajouter un contrôleur

Vous pouvez utiliser la directive ng-controller pour ajouter un contrôleur d'application :

Instance

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

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Vous pouvez en apprendre davantage dans le Chapitre sur le contrôleur AngularJS En savoir plus sur les contrôleurs.

Ajouter des directives

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

Pour des instructions complètes, veuillez vous référer au manuel de référence AngularJS.

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

Instance

<!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" php-directive></div>

<script>

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

app.directive("phpDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour voir l'exemple en ligne

Vous pouvez en savoir plus sur les directives dans le chapitre Directives AngularJS.

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

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

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

Exemple

<!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 src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

myApp.js

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

NoteDans la définition du module, le paramètre [] est utilisé pour définir les dépendances du module.
Note在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。
Les crochets [] indiquent que le module n'a pas de dépendances. S'il y a des dépendances, le nom du module dépendant sera écrit entre crochets.

myCtrl.js

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

la fonction affectera Global espace de noms

Les fonctions globales doivent être évitées en JavaScript. Parce qu'ils peuvent facilement être écrasés par d'autres fichiers de script.

Le module AngularJS rend toutes les fonctions limitées à ce module, évitant ainsi ce problème.

Quand charger la bibliothèque ?

Note在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。

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

Cela augmentera la vitesse de chargement des pages car le chargement HTML n'est pas soumis au chargement de script.

Dans nos multiples instances AngularJS, vous verrez que la bibliothèque AngularJS est chargée dans la zone <head>

Dans notre exemple, AngularJS est chargé dans l'élément <head> car l'appel à angulaire.module ne peut être effectué qu'après le chargement 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 votre script AngularJS :

Instance

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

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne