AngularJS je m'y mets !

Modules

On peut faire beaucoup de choses avec des contrôleurs mais quand une application devient conséquente le code dans les contrôleurs est rapidement lourd et confus. D'autre part les contrôleurs que nous avons créés jusque là l'étaient dans le contexte global, ce qui peut aboutir à des conflits pas faciles à détecter. Pour isoler convenablement le code et le rendre plus lisible il faut envisager de créer des modules. Un module est une collection de blocs de configuration et de blocs d'exécution. Il est facile de créer un module, ça se fait à partir de la directive ngApp. Jusqu'à présent on l'a utilisée sans paramètre, pour créer un module il faut déjà déclarer le nom d'une application au niveau de cette directive :

<html ng-app="monApplication">

Il faut ensuite déclarer le module avec la méthode module de l'application :

var monModule = angular.module('monApplication', []);

Il faut ensuite configurer le module selon ce qu'on veut faire. Je vous propose de commencer par quelque chose de simple, on va partager une information entre deux contrôleurs :

<div ng-app="monApplication">
    <div ng-controller="Controleur1">
    	<p>Valeur dans le contrôleur 1 : {{ message }}</p>
    </div>
    <div ng-controller="Controleur2">
    	<p>Valeur dans le contrôleur 2 : {{ message }}</p>
    </div>
    <script>
		var monModule = angular.module('monApplication', []);
		monModule.value('data', 'Je suis un message !');
		monModule.controller('Controleur1', ['$scope', 'data', 
			function ($scope, data) {
				$scope.message = data;
			}
		]);
		monModule.controller('Controleur2', ['$scope', 'data', 
			function ($scope, data) {
				$scope.message = data;
			}
		]);
    </script>
</div>

Valeur dans le contrôleur 1 : {{ message }}

Valeur dans le contrôleur 2 : {{ message }}

On crée un module monApplication et on le configure avec une constante data avec la valeur Je suis un message !. Ensuite on crée les deux contrôleurs en injectant la constante. Les contrôleurs sont créés en utilisant la méthode controller du module pour éviter qu'ils soient placés dans le contexte global. On peut ensuite utiliser cette constante dans les deux contrôleurs pour renseigner le scope. Cette notion d'injection est importante dans AngularJS parce qu'elle est intensivement utilisée.

Dans une application un peu volumineuse on aura évidemment plusieurs modules pour répartir le code : services, directives, filtres et même sans doute un module général pour gérer tout ça. La syntaxe vue ci-dessus ne sera alors plus satisfaisante, nous verrons dans une étape ultérieure comment procéder.

Suivant

Retour à l'accueil...