Angular : L’échafaudage avec angular-cli

Angular est rendu un véritable buzz word. Méconnu il y a quelques années, l’industrie se l’approprie maintenant de plus en plus. Force est d’amettre qu’il a fait ses preuves et que les premiers à avoir adhéré au framework portent maintenant un certain bagage en expérience.

Angular quoi?

AngularJS est un framework open source développé chez Google et publié pour la première fois en version stable en juin 2012. Il permet entre-autre de créer des applications mono-page pour décharger les serveurs applicatifs en séparant complètement le tier de présentation du code responsable de la logique d’affaires. Ces derniers peuvent alors devenir plus petits et plus cohésifs, optimisant ainsi la performance de chaque composante. En date du 9 septembre 2017, AngularJS est disponible à la version 1.6.5, publiée le 3 juillet dernier.

En septembre 2016, Google a relâché une version 2.0 du framework, une refonte totale axée sur le courant mobile-first. On parle alors d’Angular, sans « JS », puisque le langage principal est désormait TypeScript. Hum… les développeurs chez Google n’aimaient plus les IIFE et l’héritage par prototype? 😉

Il est donc important de différencier AngularJS et Angular (2, 2+, 4, 5…), parce qu’ils sont assez différents, mais les concepts généraux restent les mêmes. Cet article traite du dernier.

L’échafaudage avec angular-cli

L’échafaudage est un concept qui permet de générer du code rapidement sans se soucier des configurations. Il ne faut pas confondre avec ce que Microsoft Frontpage et autres WYSIWYG faisaient à l’époque. Ici, on divise une application en plusieurs modules interagissant les uns avec les autres. Ces modules peuvent donc être développés parallèlement et indépendament.

Prérequis

Pour débuter, assurez-vous d’avoir:

• NodeJS

Si vous voulez développer avec SASS:

• Ruby
• SASS

Les concepts

Composant : Une pièce du puzzle. Un composant est élément de l’application. Par exemple, un menu peut être un composant. Il se constitue d’une classe décorée de @Component et de sa vue pouvant jouer un rôle semblable à celui de l’étoile dans MV*. Le visuel du composant est sous forme de gabarit en html et chacune des vues possède sa propre feuille de styles (CSS ou SCSS) qui ne s’appliquent qu’aux éléments de la vue du composant. Tout est isolé par un couplage faible, ce qui facilite l’échafaudage rapide par plusieurs membres de l’équipe.

Services : Dans l’optique d’une architecture orientée-services, ces classes s’occupent de l’exécution des règles d’affaires et communiquent avec le/les serveurs d’API. Certaines applications utilisent le localStorage ou le sessionStorage. Les services sont appropriés pour cette tâche.

Module : Assemblages services, composants et autres fonctionnalités du framework qui dépassent le sujet de cet article.

angular-cli

angular-cli est un outil permettant de faire de l’échafaudage rapidement d’une application Angular. Il permet notamment de générer le code nécessaire pour mettre en place une application complète.

Installation

Générer l’application démo

Démarrer l’application

Accéder à l’application à http://localhost:4200.

Développer un premier module

Voilà. T’es rendu l’expert Angular! Voyons un peu ce qui s’est passé :

• La structure de répertoire est créée
• Le module, le composant d’application sont créés
• npm, TypeScript, tslint, protractor, karma et webpack sont installés
• Tout est préconfiguré
• Les dépendances principales d’Angular sont installées

Développer un module

Le composant créé à l’étape précédente est celui de l’application. Son rôle est d’orchestrer les différents modules d’une application et il a accès aux composants enfants. Un composant enfant est simplement un composant utilisé dans un autre.

Créons l’entête de l’application. Depuis la racine du projet, exécuter:

Développer un premier composant

En supposant ici que l’entête de l’application contient un espace dédié à l’affichage du nom de l’application, nous allons générer un composant qui sera responsable de cette tâche. À titre de deuxième exemple, nous pourrions vouloir créer un composant de menu et l’ajouter au module d’entête.

Le composant est créé sous le module header. Pour que la vue du composant soit affichée dans l’application, il faut exporter le composant et l’utiliser grâce à son sélecteur. Dans le dossier header, sous le répertoire name-display, le fichier name-display.component.ts contient une classe décorée de l’annotation @Component() qui contient un attribut sélecteur 'app-name-display'. Celui-ci est généré avec le nom du composant utilisé lors de sa création via la commande ng avec un préfix qui est définit dans .angular-cli.json :

Dans le composant, ajoutons le titre. Ouvrir src/app/header/name-display/name-display.component.ts. Angular possède une annotation d’attribut @Input() qui permet de lier la propriété du composant à notre vue. Pour ce faire, ajouter au composant :

Finalement, dans la vue du composant, afficher le contenu de l’attribut du composant:

Exportation ou « exposition »

Afin de pouvoir utiliser le composant à partir du module, il faut exposer son code via l’attribut export de l’annotation @Module de la classe module. Pour se faire, éditer src/app/header/header.module.ts :

Ceci va rendre disponible le composant dans l’application qui inclut le module.

Utilisation du module dans l’application

Dernière étape, il faut simplement définir un provider pour le module. Dans app.module.ts, importer le nouveau module :

Pour afficher le titre, puisque nous avons définit un attribut d’entrée dans le composant name-display, il sera possible de faire un two-way binding entre notre composant d’application et le name-display du module header. Pour se faire, ajouter un attribut au composant d’application (app.component.ts) :

Puis, lier au name display depuis la vue via le two-way binding d’Angular. Ceci se fait en définissant un attribut à la balise qui porte le même nom que la propriété du composant, soit displayTitle. Effacer le contenu de app.component.html et ajouter :

La vue devrait afficher « My first Angular application » dans un titre.

En conclusion

Voilà qu’en environ 10-15 minutes, nous avons créé un squelette d’application modularisée prêt à être déployé dans un conteneur ou sur un serveur web. Ce qui est intéressant avec angular-cli, c’est que nous n’avons aucune configuration à faire puisque tout le code est généré en conséquence. De plus, l’outil et l’architecture proposée facilitent la création de modules d’application indépendants (SRP, DIP) et cohésifs.

Il faut noter que cet article n’est qu’un survol d’Angular. Pour plus de détails, consulter la documentation officielle d’Angular.

N’hésitez pas à nous donner votre avis en réagissant avec les emojis ci-dessous et en partageant cet article!