AngularJS: Modules et Contrôleurs

Introduction:

Dans notre premier article concernant AngularJs, on a vu les concepts de base de ce dernier pour avoir une idée générale sur le Framework et son fonctionnement. Aujourd’hui nous allons voir le rôle des modules et des contrôleurs avec des exemples illustrant comment les utiliser. Si c’est la première fois que vous utilisez cette bibliothèque n’hésitez pas à consulter l’article précédent :

https://leprogrammeurmarocain.com/introduction-angular-js/

Les Modules :

Dans une application AngularJS est un conteneur pour les contrôleurs, les directives, les filtres, les services, etc. nous pouvons organiser l’application dans plusieurs modules et les faire travailler ensemble en utilisant l’injection des dépendances. Voyons comment faire pour le créer.

var myModule = angular.module('moduleName',['dependency1','dependency2']); 

Le premier paramètre de la fonction angular.module() est le nom du module et le second paramètre est un tableau dans lequel nous pouvons ajouter des dépendances. Dans notre exemple, nous n’allons ajouter aucune dépendance externe car nous essayons de rendre cet exemple aussi simple que possible.

Créez un fichier app.js (ce fichier est réservé aux modules) et tapez ceci:

Et sur votre page HTML:

La directive ng-app indique que c’est l’élément racine de l’application AngularJS. C’est-à-dire que cet élément (body dans notre cas) peut contenir du code AngularJS.

Par la suite, on peut ajouter à notre module des contrôleurs, des filtres, des services, etc.

Les contrôleurs :

Est défini par une fonction constructeur JavaScript. il contrôle et agit comme un cerveau pour l’application View en AngularJS. Le contrôleur est attaché au DOM à l’aide du $scope qui est un objet Javascript spécial jouant le rôle de jointure entre ces deux.

Créez un autre fichier controllers.js (ce fichier est réservé aux contrôleurs) et tapez ceci:

Sur votre page HTML:

La directive ng-controller permet de lier notre contrôleur à la div. C’est-à-dire que tout ce qui appartient à monCtrl ne sera appliqué qu’à l’intérieur de cette dernière. Pour bien comprendre cela voilà cet exemple:

Comme vous remarquez on peut affecter au $scope des valeurs, des fonctions, de tableaux etc.

Ici on a un nom, une profession, un petit tableau de quelques langages de programmation et une fonction qui retourne un message selon le langage choisi.

Sur votre page HTML:

Dans la première partie on a un formulaire où vous pouvez entrer votre nom, votre profession et choisir le langage que vous maîtrisez. Les éléments de ce formulaire sont liés au contrôleur grâce à la directive ng-model et l’élément select est rempli grâce à la directive ng-options en utilisant le contenu du tableau langages de monCtrl. 

Dans la deuxième partie, on affiche vos informations par des expressions {{}} ou parla directive ng-bind. Les deux ont le même rôle d’assurer le data-binding qu’on a vu dans l’article précédent.

Toutes ces directives feront l’objet d’un autre article qui sera réservé spécialement pour ce sujet vu la multitude de celles-ci.

Essayez maintenant votre application sur un navigateur, vous aurez ceci:

Modifiez les entrées de votre formulaire et vous allez remarquer la grande valeur ajoutée aux applications Web par AngularJS.

Conclusion:

Notre article a pris fin, vous avez vu comment ajouter un module et un contrôleur à notre application AngularJS avec quelques directives (ng-app, ng-controller, ng-model…). Rendez-vous la prochaine fois avec d’autres fonctionnalités d’AngularJS.

Merci!