Angular Js - Modules et Contrôleurs

Table Des Matières

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 :

http://www.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:

AngularJS

Et sur votre page HTML:

AngularJS

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:

AngularJS

Sur votre page HTML:

AngularJS

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:

AngularJS

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:

AngularJS

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:

AngularJS

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!

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.