Introduction

AngularJS est un framework web qui a été créé par Miško Hevery au sein de Google en 2009. C'est un logiciel libre (licence MIT) dont l'essentiel des contributeurs travaillent pour Google.

Il permet de réaliser des applications web en mode Single Page Application. C'est à dire une seule page qui ne se recharge jamais.

L'idée de base est d'augmenter le langage HTML pour permettre la représentation des données métiers, qui sont elles traitées et gérées avec le langage Javascript.

AngularJS par rapport à jQuery ?

AngularJS est une bibliothèque très riche, elle couvre 100% des besoins fondamentaux dans la réalisation d'une application web. Ceci est un avantage dans le sens ou vous n'aurez pas à partir à la recherche d'autres bibliothèques qui fonctionnent de pair avec. En revanche ceci est aussi un désavantage dans le sens où vous ne pourrez pas la mixer simplement avec d'autre bibliothèques. Il est ainsi déconseillé d'utiliser des bibliothèques modifiant le DOM tel que jQuery avec AngularJS, qui ne suit pas du tout la même philosophie. Pour mieux comprendre cet aspect je vous conseille la lecture d'une superbe réponse sur stackoverflow à la question : Comment 'penser AngularJS' si je connais jQuery'.

Ainsi AngularJS embarque jQLite et le remplace par jQuery si celui ci est présent, afin de pouvoir manipuler des éléments. Pour en savoir plus vous pouvez lire dans la documentation officielle le chapitre sur angular.element.

Les composants, fonctionnalités et architecture d'AngularJS

Dans son architecture, AngularJS utilise plusieurs patrons de conception comme par exemple l'injection de dépendance, les promesses (pour éviter l'enfer des callbacks) et une architecture MVC qui vous sera familière si vous avez déjà l'habitude de la conception logicielle.

Ci dessous un tableau des différents concepts :

Essayons maintenant de comprendre l'orchestration de ces différents composants.

Durant la phase d'initialisation, AngularJS crée son gestionnaire de dépendances puis les instances des modules associés aux directives ng-app présentes dans la page, ainsi que l'ensemble de leurs dépendances. Donc, si un contrôleur n'est pas nécessaire, il ne sera pas instancié.

Les templates nécessaires sont téléchargés et compilés de la même manière que la page principale, ainsi toutes les directives sont exécutées.

Les chemins de l'application sont décrits comme toute application Ajax par l'identificateur de fragment (#/foo/bar). Ce chemin est associé à une vue par la configuration de l'application qui associe ce chemin à un contrôleur et à un template.

Les services sont utilisés pour la logique métier et pour le maintien des données sur le serveur. Ce sont des singletons, qui peuvent donc être également exploités pour maintenir des modèles à travers plusieurs contrôleurs.

Les contrôleurs sont des chefs d'orchestre. Un contrôleur déclare une liste de dépendances, la plus courante étant $scope. Ainsi, si vous ajoutez une fonction à $scope, vous pouvez y accéder dans vos templates.

Tous les noms préfixés par '$' correspondent à des composants du cœur d' AngularJS. Une bonne pratique est de ne pas utiliser $ dans les noms des composants de votre application pour bien les distinguer.

Quelques composants clés :

• $scope
• $q (promesses)
• $http (requête ajax)
• $location (gestionnaire de l'URL)
• $routeParams (la route actuelle)

Les directives

C'est ce que vous allez chercher le plus sur Internet. Il s'agit du type de composant responsable de l'affichage de votre application et de son comportement. C'est une approche similaire aux web components permettant de réutiliser un snippet HTML / CSS / JS sans avoir à le copier/coller.

Vous trouverez en premier lieu les directives du projet AngularJS qui couvrent l'ensemble des balises  et attributs du langage HTML.

Une même directive peut généralement être appelée de plusieurs façon :

• via un attribut (<div madirective>)
• via une balise spécifique (<madirective>)
• via une classe
• via un commentaire

Exemple d'application AngularJS

Vous trouverez des exemples sur la page d'accueil d'AngularJS : un hello 'YOU' qui illustre le databinding, une todo-list qui illustre les contrôleurs, des exemples d'applications traduites, donc allez y ! 

Quelques modules communautaires

Angular-UI

Le projet Angular-UI a pour but de fournir des outils "classiques" dans le développement web (onglet, boite de dialogue, …). Ce projet héberge par exemple les directives de UI Bootstrap du projet Twitter Bootstrap, qui est une implémentation des composants sans jQuery comme par exemple les onglets, accordéons, boites de dialogue, etc…

Ce n'est pas le cas de l'ensemble des directives de ce projet, donc regardez bien à chaque fois les dépendances. Certaines directives sont un wrapper pur et simple d'une bibliothèque connue, c'est le cas des directives suivantes:

• ui-ace
• ui-calendar (fullcalendar)
• ui-select2
• ui-codemirror
• ui-map (google maps)
• ui-datepicker (jqueryui's datepicker)
• ui-sortable (jqueryui's sortable)

Restangular

Restangular est un projet communautaire permettant d'utiliser une REST API dans AngularJS sans avoir à faire soit même l'ensemble des opérations HTTP (GET/POST/PUT/DELETE). Ce projet est très utilisé et très pratique. Il permet d'éviter la création de services pour manipuler ce genre d'API.

angular-gettext

Angular-gettext met à disposition une intégration de gettext dans votre application AngularJS. Il permet de réaliser la traduction de votre application via sa directive 'translate'. Des extracteurs pour gulp et grunt existent et permettent de créer vos fichiers POT et de prendre tous les fichiers PO pour en faire une version JSON qu'angular-gettext pourra consommer pour afficher votre application dans une autre langue.

angular-file-upload

angular-file-upload est une des implémentations de l'upload de fichiers en ajax réalisée par Danial Farid. Vous la retrouverez sur bower sous le nom danialfarid-angular-file-upload.

angular-leaflet

angular-leaflet met à disposition la directive 'leaflet' pour faire une carte interactive en utilisant la bibliothèque leaflet. Les usages habituels comme par exemple afficher une liste de point d'intérêt deviennent extrêmement simple. Le module ajoute également un service qui permet de récupérer l'instance d'une carte pour ainsi pouvoir directement utiliser son API.

Liens pour aller plus loins

• AngularJS le site officiel
• Yeoman Angular Generator
• Angular Seed
• AngularJS Batarang (Extension Chrome)
• ng-inspector (Extension Chrome)
• les applications réalisées avec AngularJS
• Vidéo de présentation au conférences ng-conf de 2014
• karma le framework de tests unitaires
• protractor le framework de tests fonctionnels
• ng-book, le livre AngularJS de référence (en anglais)