By localhost - juin, 1st 2015

Hello la communauté c’est la fête du travail aujourd’hui mais n’empêche  il faut que certains travaillent lol. Comme d’habitude on va parler de développement WEB mais ça ne sera pas du PHP et cela va vous intéresser.

Avez-vous déjà entendu parlé de AngularJS??

Non! C’est quoi AngularJS ???

Voilà ! je vous disiez que ça allait vous intéresser. AngularJS est un framework javascript créé  en 2010 par un développeur  chez Google du nom de Misko HEVERY. Angular js est un framework puissant basé sur le design pattern MVW( Model-View-Whatever) pour des SPA (Single Page Application), autrement dit des applications web où la navigation se fait sur une même et unique page (exemple : Gmail, Dropbox, iCloud, etc.).

Il a été créé avec la philosophie suivante :

“Le HTML est très bien pensé pour les documents statiques mais il n’est pas du tout adapté pour un usage dynamique tel qu’on le voit dans les applications web. AngularJS enrichie le HTML avec une grammaire similaire, spécialement conçue pour des RIA (Rich Internet Application)”.

La principale caractéristique de ce framework  est qu’un grand nombre d’actions effectuées sur le serveur tel que le rendu du moteur de template, la récupération des données, leur (pré) validation et la navigation dans une application, sont désormais déportés côté client.

Le serveur se limite à traiter, vérifier, valider et envoyer les données aux clients dans un format générique (JSON, XML, etc.)

Cela permet d’avoir une charge sur les serveurs nettement moins importante et une fluidité de navigation chez le client.

Concepts fondamentaux

Pour ce démarquer  des autres framework angularJs utilise les concepts suivants:

Directives:  Les directives permettent d’ajouter à votre code HTML de la flexibilité tout en restant simple. Les directives prédéfinies dans le framework sont ajoutées sous forme d’attributs. La syntaxe est sous la forme (ng-*) . Exemple: <input type=”text” ng-model=”my-name”/>

Les directives permettent d’effectuer une action tel qu’appeler une fonction, assigner une valeur à une variable, choisir une classe suite à un évènement (clic, survol, envoi de formulaire) ou à un changement de variable.

Services: Les services sont des fonctions qui exécutent des tâches communes aux contrôleurs. Ils permettent d’éviter une redondance du code. Les services fournissent aussi de la data aux controllers qui va les traiter pour les rendre à la vue après.

Controllers: Les contrôleurs sont tout simplement des fonctions qui acceptent en paramètre des services prédéfinis. Les controllers jouent le rôle de manager. Ils récupèrent les données fournies par les services les traitent pour faciliter leur utilisation de celles ci  dans la vue . Les controllers font la liaison entre les vues et les service. Un controller  peut être défini pour un élément de la vue à l’aide de l’attribut “ng-controller”

Le routing

Le système de gestion de la navigation d’une RIA s’appelle le « routing ». Dans AngularJS, on peut paramétrer le choix du contrôleur et le template choisi pour la vue (valeur en dur ou page externe) pour une route donnée.

Un peu de pratique!

On va faire une petite application test qui va nous permettre de lister des utilisateurs.

• Il faut d’abord télécharger le  fichier angular.js sur le site  officiel (download here )
• Faire joindre le fichier téléchargé dans votre page html avec la balise <srcipt src=””> </script>

On  va créer un module pour notre application dans un fichier app.js :

On va créer un service qui va fournir de la donnée à notre controller dans un fichier service.js

On va créer le controller pour notre application  dans un fichier controller.js

On va faire ici une injection de dépendance dans notre controller pour récupérer les données provenant de notre service.

A ce stade notre application peut fonctionner même si on a pas encore définie le routing. Maintenant nous allons joindre nos 3 fichiers dans le fichier ” index.html” pour tester.

et le résultat donne ceci:

Là vous êtes un pro en AngularJs . On va finir maintenant utiliser le routing  pour rendre notre application plus professionnel.

On va créer un routeur pour notre application dans un fichier routing.js

Avant de le créer il faut télécharger le module angular-route.js (here) .Dans le fichier app.js je vous avez dit que les“[ ]” servaient pour les injections de dépendances. Entre les crochets on ajoute le module comme ceci:  var app=angular.module(‘test’,[‘ngRoute’]);. Now on est prêt Goooo.

Notre fichier “listeUser.html” donne ceci

Notre “Index.html” redevient:

et le rendu donne :

 

Remarque

AngularJS est un bon framework mais cependant il ne propose pas une organisation de gestion d’un projet comme l’aurait fait Symfony ou ROR. Sa sera à vous de le dompter et de trouver une bonne organisation pour bien gérer vos projets. Dans notre exemple on fait les choses simplement mais je vais vous proposer une organisation que j’utilise. Elle va vous permettre d’apporter plus de logique et de rigueur dans vos projets et de séparer votre application en couche.

 

Voila nous arrivons à la fin de cet article ,j’espère que vous avez pris du plaisir à le lire et que vous allez approfondir pour mieux cerner ce framework très puissant.

 

#FrameWork always work 😉