Nous sommes fiers de vous présenter la revue de code de l’application Tour of Heroes développée avec le cadriciel monopage Angular 7.

Vous y découvrirez les bases fondamentales pour développer une application de qualité ainsi qu’un glossaire qui présente les terme utilisées dans le monde Angular.

Tutoriels vidéos sur Angular

Introduction à Angular 7

Component et template

Tutoriel vidéo 1/3

Template et directives

Tutoriel vidéo 2/3

Tests avec Karma et Jasmin

Tutoriel vidéo 3/3

Glossaire du monde Angular

La section suivante décrit des concepts fondamentaux pour construire une application Angular. Dans ce glossaire, vous découvrirez le vocabulaire essentiel afin de bien comprendre une applacation Angular.

Module

Un module permet de regrouper plusieurs components de façon logique. Par exemples :

• Auth
  • Le component Auth pourrrait regroupe les components et suivices suivants :
    • LoginComponent
    • RegisterComponent
    • AuthService

Component

Un component est le « building block » d’une application Angular. C’est un élément d’interface utilisateur qui a une fonction bien précise.

Par exemples :

• Un moteur de recherche
• Une liste des résultats
• Un menu dynamique
• Une formulaire de connexion
• …

Template

Le template correspond au code HTML augmenté avec des directives Angular. Le template contient les éléments d’interface graphique à afficher à l’utilisateur.

Directive

Une directive est une instruction de template. Par exemple :

• *ngFor  permet de mettre en place un boucle dans le template
• *ngIf permet de mettre en place une instruction conditionnelle dans le template

Pipe

Comment dans le mon Unix, un pipe recoit de l’information et la transforme. Par exemple :

• heroes | JSON
  • Converti les données de la variable heroes en JSON. Bien utile pour le débogage
• {{ today | date:’fullDate’ }}
  • Traduit une date dans le format voulu.
• « ma.constante.de.traduction » | translate
  • Récupère la chaîne à afficher dans la bonne langue (français, anglais ou espagnol)

Découvrir les Pipes sur la documentation officielle de Angular.

CSS

Le CSS ou Cascading Style Sheets contient les feuilles de styles pour le component. Ces feuilles de styles permettent de modifier l’apparence d’un component. Par exemple :

• Changer la couleur
• Changer les bordures
• Changer la police de caractères
• …

TypeScript

Le TypeScript est un langage développé par Microsoft qui ressemble au JavaScript, mais qui permet la déclaration et l’utilisation de types. Le typage permet d’éviter certaines erreurs lors de l’exécution du code. Par Exemple :

• hereo: Hero;            // Variable hero de type Hero
• heroes: Hero[]        // Variable heroes de type tableau de Héros

Injection de dépendances ou DI

Patron de conception utilisé dans le cadriciel Angular qui permet d’injecter des dépendances dans les components ou services de l’application. Par exemple :

• constructor(private heroService: HeroService) { }

Grâce à cette déclaration de constructeur, la dépendance HeroService sera injectée dans le component HeroComponent automatiquement par Angular. Le développeur n’a donc pas à initialiser et instancier la classe, Angular s’en chargera.

Service

Un service permet de transférer la responsabilité d’un component à aller chercher des données à l’externe (Appel à un service Web). Plutôt que de faire un appel AJAX directement dans le component, il sera préférable de rassembler tous les appels externe dans un Service.Le component fera donc appel à un service qui lui, fera les appels au service Web.

Cette séparation facilite les tests et la maintenabilité.

Tests et assurance qualité

Afin de garantir la qualité du logiciel développé, des tests doivent être écrits. Nous savons qu’en méthodologie Agile, le code change continuellement, il faut donc une suite solide de tests afin de repérer les bogues et les erreurs avant le déploiement pour le client! Angular propose la bibliothèque Jasmine pour l’écriture des tests.