Bonjour,<\/p>\n
Dans un article pr\u00e9c\u00e9dent, nous avons parl\u00e9 du c\u00f4t\u00e9 back-end de notre application. Mais si vous nous lisez et que vous ne venez pas du monde de l’informatique, alors cela ne vous a peut-\u00eatre pas vraiment interess\u00e9. Apr\u00e8s tout, nous avons parl\u00e9 d’une application API que vous n’utiliserez jamais ! Du moins, pas directement. :p<\/p>\n
En effet, l’application que vous utilisez est notre application dite \u00ab\u00a0front-end\u00a0\u00bb, et c’est elle qui communique avec l’API ! Nous allons vous pr\u00e9senter un peu les technologies utilis\u00e9es pour cette partie.<\/p>\n
AngularJS est un framework complet pour le d\u00e9veloppement d’applications web dynamiques. Via un service assez simplement mis en place, l’application AngularJS envoie des requ\u00eates \u00e0 notre application c\u00f4t\u00e9 serveur et affiche les donn\u00e9es \u00e0 l’utilisateur.
\nAngularJS est un outil utilis\u00e9 par beaucoup et je l’utilise notamment moi-m\u00eame en entreprise. Nous avons aussi eu des cours d\u2019initiation \u00e0 ce framework lors du Master.<\/p>\n
Angular est maintenu en grande partie par Google. Plus d’infos \u00e0 cette adresse : https:\/\/angularjs.org\/<\/a>.<\/p>\n Angular2 est sorti d\u00e9j\u00e0 depuis quelques temps mais n’est pas r\u00e9ellement la suite de Angular car cette version se base sur beaucoup de concepts diff\u00e9rents. De ce fait, conna\u00eetre AngularJS premier-du-nom n’est pas forc\u00e9ment d’une grande aide pour l’apprentissage d’Angular2 et ce dernier demande du temps pour se former. Pour construire notre application, nous avons utilis\u00e9 un outil nomm\u00e9 Yeoman (http:\/\/yeoman.io\/<\/a>). Ce programme est installable sur NodeJS avec NPM et permet en une ligne de commande de g\u00e9n\u00e9rer un squelette d’application AngularJS (ou autre framework) fonctionnel et pr\u00eat \u00e0 coder. Nous avons gagn\u00e9 du temps gr\u00e2ce \u00e0 cet outil pour les configurations pour le d\u00e9ploiement etc… tout en nous assurant de placer nos fichiers de fa\u00e7on propre en utilisant l’arborescence g\u00e9n\u00e9r\u00e9e par Yeoman.<\/p>\n Yeoman g\u00e9n\u00e8re aussi les fichiers de configuration de Grunt (https:\/\/gruntjs.com\/<\/a>) qui est un automatiseur de t\u00e2ches. En d\u00e9finissant des t\u00e2ches simples telles que \u00ab\u00a0Construire\u00a0\u00bb ou \u00ab\u00a0Lancer\u00a0\u00bb, il nous suffit d’une seule commande (par exemple Et pourquoi pas Angular 2 ?<\/h2>\n
\nNous avons donc d\u00e9cid\u00e9 de continuer sur une technologie dont on avait d\u00e9j\u00e0 eu une initiation, sachant qu’elle \u00e9tait encore grandement utilis\u00e9e dans le web et que celle-ci convenait amplement \u00e0 notre projet.<\/p>\nOutils divers pour AngularJS<\/h2>\n
Yeoman<\/h3>\n
Grunt<\/h3>\n
grunt build<\/code>) pour que Grunt lise les diff\u00e9rentes actions \u00e0 effectuer (dans notre exemple: minifier le code, compiler le code SASS, etc…) et ainsi r\u00e9cup\u00e9rer une application pr\u00eate \u00e0 \u00eatre d\u00e9pos\u00e9e en production !<\/p>\nSass<\/h3>\n