Modules AngularJS

Le module AngularJS définit une application.

Le module est le conteneur des différentes parties de l'application.

Le module est le conteneur du contrôleur de l'application.

Le contrôleur appartient toujours à un module.

Créer un module

En utilisant les fonctions AngularJS,angular.module Créer un module :

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Le paramètre "myApp" fait référence à l'élément HTML dans lequel l'application va s'exécuter.

Maintenant, vous pouvez ajouter des contrôleurs, des instructions, des filtres, etc. dans votre application AngularJS.

Ajouter un contrôleur

Ajoutez un contrôleur à votre application en utilisant ng-controller L'instruction se réfère à ce contrôleur :

Exemple

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

Essayer vous-même

Vous découvrirez plus d'informations sur les contrôleurs à la fin de ce tutoriel.

Ajouter des instructions

AngularJS dispose d'un ensemble d'instructions intégrées que vous pouvez utiliser pour ajouter des fonctionnalités à votre application.

Pour une référence complète, veuillez consulter notre référence des directives AngularJS.

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

Exemple

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "J'ai été fabriqué dans un constructeur de directive!"
  };
});
</script>

Essayer vous-même

Vous découvrirez en détail les directives dans la partie suivante de ce tutoriel.

Dans le fichier

Il est courant dans les applications AngularJS de placer les modules et les contrôleurs dans des fichiers JavaScript.

Dans cet exemple, "myApp.js" contient la définition du module de l'application, tandis que "myCtrl.js" contient le contrôleur :

Exemple

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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>

Essayer vous-même

myApp.js

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

Les paramètres [] dans la définition du module peuvent être utilisés pour définir les modules dépendants.

Si vous n'avez pas de paramètres [] , vous n'êtes pas en train de créer un nouveau module, mais de récupérer un module existant.

myCtrl.js

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

Les fonctions peuvent polluer l'espace de nom global

Il faut éviter d'utiliser des fonctions globales en JavaScript. Elles sont facilement couvertes ou endommagées par d'autres scripts.

Les modules AngularJS réduisent ce problème en conservant toutes les fonctions en local dans le module.

Quand charger la bibliothèque

Bien que dans les applications HTML, il soit courant de placer les scripts <body> Il est courant à la fin de l'élément <head> ou <body> au début du chargement de la bibliothèque AngularJS.

C'est parce que seules les fonctions appelées après le chargement de la bibliothèque peuvent être compilées. angular.module de l'appel.

Exemple

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/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 = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

Essayer vous-même