Tutoriel : Créer une app basique avec Angular

Dans ce tutoriel nous allons créer une application concrète de A à Z avec Angular. La documentation officielle est bien faite, mais on a souvent besoin de voir des examples concrets pour avancer.

Nous allons donc partir de zéro pour créer une application pragmatique qui va afficher des résultats de matchs de foot (c’est un exemple, la même méthode peut nous aider à récupérer n’importe quelle donnée). Nous irons chercher ces résultats sur une API externe et les afficherons dans notre app. Voici donc les différentes étapes:

1. Installer Angular
2. Configuration SCSS
3. Installation kit UI
4. Création des composants
5. Routing
6. Création des services
7. Interfaces
8. Appels HTTP
9. Affichage des variables dans les templates

Info: Le code source de l’application est disponible ici. Cet article est le résumé des 2 vidéos suivantes :

1ère vidéo : Installation, SCCS, Kit UI, Composants et Routes

2ème vidéo : Récupération des données avec Services HTTP, Interfaces et Affichage des données

Installer Angular

Pour créer un nouveau projet Angular, vous avez besoin de la CLI d’Angular et de NodeJS. CLI signifie Command Line Interface, c’est un outil qui vous permettra de taper des commandes commençant par “ng” sur votre terminal.

Une fois ces dépendances téléchargées, tapez dans votre terminal :

ng new angular-tutorial

Ce qui va créer un nouveau dossier à votre emplacement actuel et installer un projet Angular dedans. Cela va prendre quelque temps à s’installer, puis vous pouvez vérifier en servant l’app :

cd angular-tutorial
ng serve

Et en allant sur http://localhost:4200 avec votre navigateur. Vous devriez maintenant voir un gros logo Angular. Tout va bien pour l’instant.

Configuration SCSS sur Angular

Par défaut les fiches de style sont en .css sur Angular. Si on veut passer à SASS par défaut (je vous le recommande), il faut modifier les paramètres du fichier angular.json :

"schematics": {        
  "@schematics/angular:component": {          
    "styleext": "scss"        
  }
}

A partir de maintenant, lorsque vous allez créer un composant, sa fiche de style sera par défaut en SCSS. Il me semble que la même configuration permet de faire la même chose pour du LESS.

Installer un kit UI (framework CSS) sur Angular

Dans notre example nous allons utiliser un kit UI très puissant et très simple qui s’appelle Bulma. Installons le avec une commande NPM. Dans le terminal à la racine du projet faites :

npm i bulma --save

Angular prône une philosophie d’encapsulation de ses composants, y compris pour le style. Ce principe permet d’éviter que vos déclarations “débordent” des composants, par exemple vous pouvez appeler un élément “title” sur chacun de vos composants et lui donner des propriétés différentes sans qu’elles se superposent. Chaque composant contient sont “title” et ses définitions qui se limitent à lui-même. Chacun chez soi, tout le monde est content.

Ceci est très bien et très utile, surtout sur les grosses apps, mais nous voulons faire une seule exception à la règle pour que notre kit impacte tous les composants avec un style par défaut. Chaque composant pourra ensuite ajouter ou surcharger ces propriétés avec des déclarations spécifiques et limitées à lui-même.

Nous allons donc retirer l’encapsulation du composant principal et de faire un lien vers une nouvelle feuille de style qui importe notre kit :

Utilisation de la propriété “encapsulation” du décorateur @Composant

Dans cet example, on a crée un fichier main.scss dans /assets/styles. Ce fichier ne comprend qu’une ligne qui importe notre kit Bulma :

@import '../../../node_modules/bulma/bulma';

Et voilà, en retournant sur notre page d’accueil on doit déjà voir que le style à légèrement changé (typo plus ronde et couleur plus grisées). On avance !

Création de composants

Créons un composant pour le header afin de diviser nos templates :

ng g c partials/header

La commande “generate component” (abrégée “g c”) va créer un composant header que nous allons pouvoir appeler dans app.component.html avec la balise app-header.

<app-header></app-header>

Il est possible d’en faire de même pour le footer ou d’autres éléments de l’app. Il vaut mieux beaucoup de petits fichiers qu’un seul gros fichier.

Routes et URLs dans Angular

Maintenant nous allons créer 2 vues différentes : MatchList et MatchDetail pour afficher respectivement la liste des matches et le détail d’un match

ng g c resources/matches/match-detail
ng g c resources/matches/match-list

Et nous allons créer un nouveau fichier app.routes dans /app avec le contenu suivant :

app.routes.ts

Puis l’importer dans app.module.ts avec appRoutes en paramètre de forRoot :

imports: [BrowserModule, RouterModule.forRoot(appRoutes)]

Pour finir, il nous faut ajouter une balise dans le HTML (app.component.html) qui va nous indiquer ce qui va changer en changeant de route :

<app-header></app-header> 
<router-outlet></router-outlet> 
<p>FOOTER</p>

Dans cet example, le header et le <p> footer vont rester là tandis que le contenu de <router-outlet> sera remplacé par le contenu de nos composants si la route change.

Créer des services HTTP dans Angular

Pour cette étape nous allons utiliser un outil gratuit nommé Bridge, qui va nous permettre de créer des APIs en JSON depuis un tableau CSV.

Vision de Postman

L’API est ouverte est accessible à l’URL :
- https://bridge.buddyweb.fr/api/tutorials/matches pour la liste des matchs
- https://bridge.buddyweb.fr/api/tutorials/matches/1 pour le détail

Nous allons donc créer un service qui va récupérer ces données là.

ng g s common/services/match

Et nous voilà avec un MatchService.

Interfaces

Les interfaces sont une fonctionnalité de TypeScript qui va nous permettre de définir précisément ce qu’on va recevoir, en l’occurrence un “match”. Qu’est ce qu’un match ? Pour notre application nous allons définir ce concept en créant une interface Match dans un fichier match.ts :

L’interface Match détaille les différentes propriétés d’un Match.

Appels HTTP depuis les services Angular

Maintenant que nous savons quel type de données nous allons recevoir et l’URL à laquelle nous allons les recevoir, il ne manque plus qu’à passer l’appel. Commençons par doter notre service de 2 fonctions, une pour récupérer la liste de matchs (sans paramètres), et l’autre qui va récupérer un seul match en fonction de son ID.

Tout d’abord nous avons besoin d’ajouter le HttpClientModule dans app.module.ts, nous avions déjà touché cette ligne pour ajouter les routes :

imports: [BrowserModule, RouterModule.forRoot(appRoutes), HttpClientModule],

Voici le service avec nos 2 fonctions :

La fonction list() retourne un Observable qui se résout en array de Match tandis que la fonction show(id) renvoie un Observable qui se résout par un Match unique.

Les outils sont prêts, il ne reste plus qu’à s’en servir. Utilisons la fonction ngOnInit() pour lancer notre requête HTTP instantanément en arrivant sur la MatchList :

NgOnInit() nous permet de charger la liste des Matchs et de la stocker dans la propriété matches de MatchListComponent.

Même combat pour la MatchDetail, avec cette fois-ci une différence: le paramètre “id” sera récupéré directement depuis l’URL grâce à ActivatedRoute.

Pour tester les 2 réponses, il suffit de se rendre sur l’url http://localhost:4200 et sur http://localhost:4200/matches/1 par exemple. Ensuite regarder si l’appel HTML a bien été réalisé dans la console/DevTools de votre navigateur.

Afficher les variables dans les templates

Et le plus facile pour la fin ! Une fois les matches disponibles, il suffit de les appeler en utilisant la double accolade, ainsi que les directives Angular nécessaires comme *ngFor ou *ngIf

match-list-component.html

Je vous laisse faire de même (ou mieux que moi) pour le match-detail-comonent.html

Conclusion

Nous avons parcouru beaucoup de chemin depuis l’installation de Angular ! Ces fonctionnalités sont basiques et utilisées dans la plupart des projets Angular.