AngularJS : Découverte du framework Javascript

AngularJS

AngularJS : Niveau de compétence

Présentation

AngularJs est un framework MVC côté client, développé en JavaScript qui permet de créer des applications ou des sites web modernes à page unique. Ses concurrents directe sont Backbone.js et Ember.js pour ne citer que les plus connus. Il est inscrit dans un mouvement d’innovation côté client qui nous fait découvrir un autre aspect de la programmation JavaScript. En comparaison avec JQuery qui n’est qu’une forme de librairie, AngularJS est un framework à part entière : il va structurer votre code et vous imposer une architecture. Sa création date de 2009 et Misko Hevery en est l’auteur. Il l’a créé suite à un gros projet ou il s’est aperçu q’un code non structuré avait vite des limites.

Le concept

C’est un framework MVC (Model View Controller) mais également appelé un framework MVW (Model View Wathever), ce qui signifie que la logique doit être englobé dans des contrôleurs et des directives.

Les différents éléments que l’on retrouve dans une application développé avec AngularJS sont :

  • L’application
  • Le contrôleur
  • Le scope
  • Le data binding
  • Les directives

 L’application

Une application est une collection de contrôleurs et de directives.

Par exemple, dans une page HTML, on indique à quelle application on veut relier notre porttion de DOM (une seule déclaration d’application par page).

<html ng-app="monApplication">

</html>

Et dans le fichier JS, on créé notre application.

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

 Le contrôleur

Le contrôleur va permettre d’écrire son code et sa logique et il est relié à une partie du DOM, et tous les contrôleurs sont reliés à une application.

// On ajoute à notre application un contrôleur MyCtrl
myApp.controller('MyCtrl', function($scope) {
});

Pour rattacher ensuite ce contrôleur au DOM, afin de lui donner un contexte d’exécution, on va utiliser l’attribut (en vérité, la directive : voir plus loin) ng-controller dans notre HTML :

<div ng-controller="MyCtrl">
</div>

En résumé :

Dans le HTML, on définit un contrôleur à l’aide de la directive ng-controller, et dans notre fichier JS on définit un contrôleur grâce à la fonction controller() de notre application.

Le scope

Quand on définit un contrôleur, on a un scope qui est défini.

Le scope est le modèle de notre application. Il va contenir les variables et les fonctions qui peuvent être utilisées.

myApp.controller('MyCtrl', function($scope) {
$scope.name = 'monApplication';
});

Le data binding bi-directionnel

Quand on lit ce nom, on se dit : quel est ce nom barbare mais cela cache un concept très pratique. Quand le scope dans le JS est modifié, le scope dans le HTML l’est également et vice-versa. C’est une synchronisation entre le modèle et la vue.

Dans notre exemple précédent, on va donc pouvoir avoir :

<div ng-controller="MyCtrl">

<p>Hello {{name}}</p>

</div>

Ce qui va nous afficher un “Hello monApplication”, car dans le JS nous avons initialisé la variable name de notre scope à “monApplication”. Maintenant, si on modifie cette variable dans le JS, la modification va se reporter immédiatement dans le HTML (la vue). Si on avait relié cette variable name à un champ <input/> pour la modifier, la modification se serait également reportée directement dans le modèle (et donc récupérable dans le contrôleur).

<div ng-controller="MyCtrl">

<input type=”text” ng-model=”name”  />

<p>Hello {{name}}</p>

</div>

Ici, on va dire à notre champ input qu’il est relié à la variable name de notre scope (grâce à la directive ng-model). Ainsi, quand on va modifier sa valeur, le modèle va se mettre à jour, et la vue va récupérer cette valeur : le “Hello monApplication” va donc se changer en “Hello”, suivi de ce qu’on tape dans le champ input, tout ça en direct et sans s’occuper de rien.

Qu’est ce que ça apporte concrètement : terminé les sélecteurs CSS dans notre code JS, c’est Angular qui s’occupe de la cohérence du modèle entre la vue et le contrôleur, et ça, c’est une très bonne nouvelle !

En résumé :

Le data-binding bi-directionnel permet une synchronisation automatique entre le modèle et la vue.

Les directives

Les directives sont l’évolution majeur en terme de script. Elles permettent de rendre le code extensible et modulable à volonté. L’organisation des directives est un concept assez particulier : dans le code HTML, la directive aura un identifiant sous la forme d’un attribut, d’une balise HTML ou encore d’une classe CSS. Cet identifiant servira de lien pour lui attacher un comporte spécifique défini dans l’application, au niveau d’AngularJS. Des directives sont déjà prédéfinies dans les sources d’AngularJS.

Origine de ma compétence

J’ai découvert ce langage sur le site Vidéo2Brain où je suis activement les dernières technologies du web qui y paraissent.  J’ai donc effectué 2 formations vidéo sur AngularJS disponible sur ce site.

Les projets utilisant cet outils

J’ai utilisé Angular pour la première fois dans le projet GSB pour créer des fonctionnalités dynamique (création d’un pseudo par rapport au nom et prénom du visiteur, ou affichage de la barre de progression en fonction de la force d’un mot de passe).

GSB Changer de mdp

Formulaire de changement de mot de passe dans l’application GSB avec mise en pratique d’AngularJS pour l’affichage de la barre de complexité du mot de passe.

GSB Ajouter un utilisateur

Formulaire de création d’un utilisateur avec mise à jour automatique du login.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *