Présentation d’Angular

Angular est un framework applicatif JavaScript développé par Google, qui permet de créer des applications web monopages (c’est-à-dire complètement chargées sur le client avant toute utilisation par l’internaute). Ces applications ne sollicitent le serveur que pour échanger des données (et non pour charger des pages web) via des services web. Dans le cadre très fréquent d’une architecture MEAN, Angular est couplé avec un serveur Node.js (lui-même enrichi avec le framework Express) et en liaison avec un système de gestion de base de données NoSQL MongoDB.

1. Une évolution radicale d’AngularJS

Angular, rendu public en mars 2017, reprend de grandes fonctionnalités du framework Javascript AngularJS créé en 2009 par Google, dont il est l’héritier. Il en ajoute d’autres pour créer un framework beaucoup plus puissant. À l’heure de la rédaction cet ouvrage, la version courante d’Angular est Angular 8. À partir de la version 4.3, Angular assure une compatibilité ascendante des codes créés via Angular.

Angular reprend les grandes fonctionnalités suivantes d’AngularJS :

Le découpage net entre le côté client (géré donc par Angular) et le côté serveur (par exemple géré par Node.js dans le cadre d’une architecture MEAN) : Angular permet de créer des applications monopages.
L’extension du langage HTML avec de nouvelles balises et de nouveaux attributs, appelés des directives : les composants Angular peuvent être manipulés comme des balises.
L’injection de dépendances permettant à des services d’être alloués et utilisés par différents composants (notamment pour dialoguer avec le serveur).
Un système de routage via un contrôleur appelé un routeur.

Il amène les améliorations notables suivantes :

Une modularité parfaite des applications en les bâtissant sur une architecture à deux niveaux : les modules intégrant des composants.
De nouvelles directives.
Un système de routage beaucoup plus sophistiqué et la possibilité de contrôler finement l’activation...

Angular par rapport au framework MVC (voire MVVM)

Angular (considéré seul ou plus naturellement via son immersion dans une architecture MEAN qui l’associe à un serveur Node.js) s’inscrit dans le paradigme de conception modèle-vue-contrôleur (MVC). Ce modèle est le garant du découplage des interfaces des traitements, notamment en mettant en scène un contrôleur. Ce contrôleur doit, à partir d’une action effectuée sur la vue, sélectionner le traitement approprié, traitement qui peut à son tour mettre à jour les données. Si des données médiatisables sont mises à jour, le contrôleur doit alerter la vue pour qu’elle se rafraîchisse. Sous Angular, le contrôleur prend à la fois la forme d’un routeur, qui fait le lien entre une action et un ou plusieurs composants à activer, et la part de l’implémentation des composants en charge de l’interpolation des données dans les templates.

Ce contrôleur permet également de faire évoluer aisément une application en permettant facilement l’ajout, la suppression ou le remplacement d’un de ses constituants. En effet, l’invocation d’un composant à partir d’une action effectuée sur un premier composant est gérée par le contrôleur qui centralise...

Mise en place d’une application Angular

La mise en place d’une application Angular peut se faire de différentes façons :

En la créant ex nihilo, mais cela est totalement déconseillé vu la complexité des opérations à mener.
En recopiant l’ossature d’un projet existant, par exemple le quickstart de Google :

git clone https://github.com/angular/quickstart.git <nomProjet>

Ce n’est pas non plus conseillé, car les applications témoins comme celle-ci sont minimalistes et il sera difficile ensuite de comprendre comment les étendre.

En utilisant un utilitaire pour initier un projet Angular : c’est la voie que nous retiendrons ici en utilisant Angular CLI.

Les avantages de cette solution sont multiples :

Tous les modules « de base » de Node.js à installer le sont automatiquement lors de la création d’un nouveau projet.
Les ossatures de vos différents programmes sont créées à partir de nombreuses commandes.
Des tests unitaires ou d’intégration peuvent être spécifiés et exécutés.
Le passage de la version de développement à une version de production est très facile à effectuer.

Toutes les opérations structurelles sur les applications Angular décrites dans cet ouvrage seront donc effectuées via Angular CLI, qui peut être considéré comme un vrai gestionnaire de projets Angular.

1. Présentation d’Angular CLI

Angular CLI est un outil qui permet :

D’installer les modules incontournables de Node.js (des modules supplémentaires devront être installés suivant vos besoins).
De créer la structure d’un projet Angular (en spécifiant les dépendances liées à celui-ci, en créant les dossiers nécessaires...).
De créer les ossatures des différentes entités qui composent une application Angular et dont vous aurez besoin : les modules, les composants, les services, les directives, les pipes, les guards, les enums.
De spécifier et d’exécuter les tests unitaires ou d’intégration.
De créer la version de production de votre application.
Etc.

Une fois Angular CLI installé, exécutez vos actions via la commande ng en ligne de commande....

Génération du code JavaScript à partir de TypeScript

Comme nous l’avons vu, les codes d’une application Angular sont écrits en TypeScript (et en HTML) et utilisent des modules. Un transpiler (ou transcompilateur, mais ce terme est très peu usité, ou aussi improprement désigné par le nom de compilateur) est donc nécessaire pour traduire ces codes en codes JavaScript (et HTML), qui seront ensuite regroupés entre eux après avoir été minifiés (c’est-à-dire empaquetés ou « bundlelisés »), et finalement transmis au navigateur.

À partir de la version 8 d’Angular, une nouvelle chaîne de production (comprenant plusieurs transpilers) nommée Ivy est disponible, en remplaçant notamment le transpiler originel nommé tsc.

Ivy est en effet beaucoup plus efficace qu’auparavant, car si son but est toujours de traduire en code JavaScript et HTML les classes TypeScript inhérentes aux composants ainsi que les templates associés, elle génère de plus faibles empreintes mémoire (notamment pour améliorer l’efficience des applications Angular sur les appareils mobiles). Il est par ailleurs à noter que les codes générés par Ivy vont créer un DOM incrémental beaucoup plus efficace car ré-instanciant moins d’objets...

Les décorateurs

Un composant ou un module est implémenté via une classe TypeScript. Dans le monde d’Angular, il y a d’autres briques logicielles implémentées par une classe : par exemple, les services, les directives ou les pipes. Toutes ces classes sont annotées par des décorateurs. Les décorateurs sont des fonctions préfixées par une arobase (@), qui admettent en paramètres des métadonnées regroupées dans un objet et qui définissent le comportement de la classe. Ces fonctions sont très particulières : ce sont des factories qui produisent « en seconde main » des classes spécifiques à la nature que leur confère le décorateur.

TypeScript étant une extension de JavaScript, avant toute mise en œuvre effective de la logique métier d’un composant (ou d’un module, d’un service...), la classe correspondante va être consommée par le transpiler tsc pour produire du code JavaScript « pur » (cette phase est cachée lors de l’utilisation d’Angular CLI).

Parmi tous les décorateurs proposés par Angular, voici les sept plus usuels (nous en verrons d’autres dans cet ouvrage).

Trois décorateurs structurent les traitements métier :

Le décorateur @NgModule() crée un module.
Le décorateur...

Création d’un nouveau composant qui affiche un message

Vous voulez créer un nouveau composant qui s’intégrera dans le template du composant de plus haut niveau déjà créé par Angular CLI (le template du composant AppComponent sera donc modifié en conséquence).

1. Création du composant

Vous voulez créer un composant qui affiche un message dont le texte est contenu dans une variable déclarée dans la classe qui l’implémente.

Pour créer le composant, utilisez la commande ng avec l’option generate et le paramètre component :

ng generate component mycomponent

Voici la même commande en écriture abrégée :

ng g c mycomponent

Cette commande a pour effet de créer un sous-dossier du nom du composant dans le dossier app.

Voici ce qu’Angular CLI affiche :

create src/app/mycomponent/mycomponent.component.css 
create src/app/mycomponent/mycomponent.component.html 
create src/app/mycomponent/mycomponent.component.spec.ts 
create src/app/mycomponent/mycomponent.component.ts 
update src/app/app.module.ts

Comme vous l’avez déjà constaté, un composant a donc une triple facette : la classe TypeScript qui l’implémente, son template et la feuille de style associée à celui-ci (le fichier d’extension .spec.ts est un fichier de spécification de tests unitaires pour le framework JavaScript Jasmine à exécuter avec l’outil Karma).

Voici le code...

Le cycle de vie d’un composant

Un composant passe par différentes étapes de sa naissance à sa mort. Il est possible d’intercepter ces étapes et d’y associer du code via des méthodes prédéfinies (et déclarées dans des interfaces de programmation). Ces méthodes sont appelées des hooks.

Voici la liste des quatre hooks les plus importants :

ngOnChanges() : cette méthode est appelée à la création du composant, puis à chaque changement de valeur d’un attribut scalaire décoré par @Input().
ngOnInit() : cette méthode est appelée lors de la création du composant (juste après le premier appel de ngOnChanges()).
ngDoCheck() : cette méthode est mise en œuvre pour connaître les changements des valeurs internes d’objets ou de listes, changements de valeurs non identifiables par le hook ngOnChanges().
ngOnDestroy() : cette méthode est appelée juste avant que le composant ne soit désalloué.

Pour utiliser un de ces hooks, il faut importer l’interface implémentant la méthode correspondante.

Par exemple, si vous voulez intercepter l’initialisation du composant pour exécuter du code à sa création, vous devez :

importer l’interface de programmation : import { OnInit } from ’@angular/core’;

implémenter la méthode...

Bilan des acquis de ce chapitre

Dans ce chapitre, après avoir expliqué la filiation d’Angular, nous avons examiné les deux principaux points forts du framework Angular.

Le premier point fort tient au fait que la partie client (l’application monopage réalisée avec Angular) et la partie serveur sont totalement découplées, le client et le serveur n’échangeant que des données (dans le cadre d’une architecture MEAN, le serveur associé à Angular est donc un serveur Node.js gérant des bases de données MongoDB).

Le second point fort est la modularité que ce framework organise à deux niveaux : au niveau des modules (qui représentent soit l’application - le root module -, soit l’implémentation de grandes fonctionnalités - les feature modules), et au niveau des composants (qui sont les briques logicielles). Tout feature module peut (doit ?) être conçu pour être réimporté dans un autre module d’une autre application.

Angular (et son immersion au sein d’une architecture MEAN) a été situé par rapport au prisme du modèle MVC. En nous rapprochant de ce modèle, nous comprenons qu’Angular permet une très bonne évolution structurelle d’une application web en découplant les interfaces des traitements et en permettant...