Makina Blog

Le blog Makina-corpus

Introduction à AngularJS


Cet article présente AngularJS, le framework de Google qui permet de réaliser des interfaces utilisateur pour vos applications web.

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épendanceles 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 :

Concept Description
Template Fichier HTML utilisant les directives.
Directives Extension du language HTML, permet de créer de nouveaux attributs et de nouveaux éléments.
Model La donnée affichée à l'utilisateur avec laquelle il peut interagir.
Scope Le contexte où le modèle et les fonctions sont stockées pour que les contrôleurs, les directives et les expressions puissent y accéder.
Expressions Manipulation et accès aux données et fonctions du scope.
Compiler Parseur HTML qui effectue la transformation en HTML des templates, directives et expressions.
Filter Formate la valeur d'une expression pour l'afficher à l'utilisateur.
View La vue, ce que l'utilisateur voit (le DOM).
Data Binding Synchronisation des données entre le modèle et la vue.
Controller Logique métier et orchestration du comportement décrit par les vues.
Dependency Injection L'injection de dépendance est responsable d'instancier les différents composants et de les relier.
Module Conteneur de composants; une application AngularJS est une initialisation d'un module.
Service Élément de logique métier indépendant des vues.

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 :

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
Mais la manière conseillée est d'utiliser les modes balise ou attribut et de laisser tomber les modes classe CSS et  commentaire sauf en cas de nécessité.
 

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

Formations associées

Formations Front end

Formation Angular

Nantes Du 22 au 24 mai 2024

Voir la formation

Formations Front end

Formation Angular avancé

Toulouse Du 29 au 31 mai 2024

Voir la formation

Actualités en lien

Image
Encart article DrupalCamp 2024
06/03/2024

Makina Corpus, parte­naire de la Drupal­Camp 2024

Nous sommes fiers d’an­non­cer que Makina Corpus est le spon­sor de la Drupal­Camp à Rennes. Notre expert vous y propose une confé­rence « migrer de Drupal 7 à Drupal 10 ».

Voir l'article
Image
AFUP Meet-up DBToolsBundle
15/02/2024

Meetup AFUP Nantes de février : parlons anony­mi­sa­tion avec le DbTools­Bundle Symfony

Notre expert Symfony / PHP prend la parole au Meet-up de l’AFUP Nantes le 21 février pour présen­ter le nouveau bundle Symfony déve­loppé par Makina Corpus : le DbTools­Bundle !

Voir l'article
Image
Encart référence Prospective
10/01/2024

Connaissez-vous la "Prospective" ?

Lors de l'Assemblée Générale du réseau MFQM au mois de juin dernier, nous avons eu la chance d'assister à une intervention de Pamela Bellier et Emmanuel Turbé sur la définition même de la Prospective et de ses enjeux.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus