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 sera exécutée.
Maintenant, vous pouvez ajouter des contrôleurs, des directives, des filtres, et plus, à votre application AngularJS.
Ajout d'un contrôleur
Ajouter un contrôleur à votre application, et reportez - vous au contrôleur avec le ng-controller directive:
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>
Essayez - le vous - même » Vous en apprendrez plus sur les contrôleurs plus loin dans ce tutoriel.
Ajout d'une directive
AngularJS a 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 AngularJS Directive référence .
En outre, 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> Essayez - le vous - même » Vous en apprendrez plus sur les directives plus loin dans ce tutoriel.
Modules et contrôleurs dans les fichiers
Il est courant dans les applications AngularJS pour mettre le module et les contrôleurs dans les fichiers JavaScript.
Dans cet exemple, "myApp.js" contient une définition du module d'application, tandis que "myCtrl.js" contient le contrôleur:
Exemple
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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" , []);
 | Le paramètre [] dans la définition du module peut être utilisé pour définir des modules dépendants. |
|---|
| Sans le paramètre [], vous ne créez pas un nouveau module, mais la récupération d' 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 devraient être évitées en JavaScript. Ils peuvent facilement être remplacés ou détruits par d'autres scripts.
AngularJS modules réduit ce problème, en gardant toutes les fonctions locales au module.
Quand Charger la bibliothèque
Alors qu'il est commun dans les applications HTML pour placer des scripts à la fin de la <body> élément, il est recommandé de charger la bibliothèque AngularJS soit dans le <head> ou au début de la balise <body> .
Ceci est parce que les appels à angular.module ne peuvent être compilées après la bibliothèque a été chargée.
Exemple
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Essayez - le vous - même »