Vous ne le savez peut-être pas encore, mais Angular propose une panoplie impressionante d’outils pour permettre aux développeurs de réaliser leurs propres animations. Et la documentation d’Angular est très bien fournie là-dessus !
Malheureusement, il existe très peu de ressources en Français sur la mise en place des animations avec Angular… c’est pourquoi je vous propose de voir ensemble un des nombreux cas d’utilisation des animations, afin de réaliser de belles transitions de routes pour nos pages !
Allez, en avant !
Quelques prérequis avant de commencer…
Avant de commencer, vérifions que nous avons bien installé tout ce qu’il faut sur notre machine. Nous aurons besoin de NodeJS et d’Angular CLI pour la réalisation de ce tutoriel. Je vous invite donc à vous rendre sur la page officielle de NodeJS pour télécharger NodeJS si ce n’est pas déjà fait.
Une fois cette étape réalisée, nous allons ouvrir une invite de commande, et entrer la commande :
npm --v
Vous devriez obtenir la version de NodeJS actuellement installée sur votre ordinateur.
La suite de cette étape va être l’installation d’Angular CLI. Retournons sur notre invite de commande, et entrons cette fois :
npm install -g @angular/cli
ng --version
Si tout c’est bien passé, vous devriez voir la version de votre client. Félicitations, vous voilà fin prêts pour démarrer !
Angular CLI est bien installé sur notre poste de travail.
Étape 1. Initialiser un nouveau projet Angular avec Angular CLI
Commençons par démarrer un nouveau projet. Toujours avec l’invite de commande, placez-vous dans le dossier de votre choix (je me place dans un dossier nommé « Workspace » dans mon cas), et exécutez :
ng new animation-app
La création du projet va prendre un petit moment, il vous sera demandé si vous souhaitez installer Angular routeur, je vous invite à répondre oui (yes), puis de choisir le style par défaut en css ou scss (mais cela n’as pas d’importance pour la suite). Une fois notre projet initié, nous allons nous déplacer à l’intérieur de ce dernier :
cd animation-app
Puis lancer la compilation de votre application Angular :
ng serve --open
Vous pourrez ensuite admirer le résultat suivant :
Notre application Angular est en place, c’est parti !
Étape 2. Intégrer Angular Router pour la navigation
Nous allons maintenant ouvrir notre projet dans notre éditeur de code préféré, j’utilise Visual Studio Code pour ma part. Commençons par faire un peu de ménage, ouvrons le fichier : src/app/app.component.html puis supprimons l’intégralité du contenu. Nous allons ensuite créer une nouvelle div avec un paramètre et une classe, qui contiendra la balise router-outlet (Angular router) :
Vous devriez avoir une erreur, pas d’inquiétude, c’est normal, nous n’avons pas encore défini ce paramètre ! Ouvrons donc le fichier app.component.ts pour remédier à cela. Dans la classe du composant AppComponent, écrivons ces quelques lignes supplémentaires afin de rectifier notre erreur précédente :
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss']})
export class AppComponent { title = 'app'; prepareRoute(outlet: RouterOutlet) {
return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
}}
Ensuite, vous êtes prêt à passer à la suite !
Étape 3 : Ajouter le module « Angular Animations »
Cette nouvelle étape va consister à ajouter des nouveaux components à notre application en utilisant Angular CLI. Ouvrons une nouvelle invite de commande à la racine de notre projet (ctrl+ù sur vs code), puis faisons la commande suivante : ng g c page1 --skipTest et répétons l’opération en nommant cette fois-ci la page2. En faisant cela, vous demandez à Angular de générer un composant nommé page1 en ne créant pas de fichier de test. Profitons d’être sur une invite de commande pour installer « angular animation », « bootstrap » et « bootswatch » qui nous permettrons de gagner du temps.
Ouvrons le fichier app.module.ts afin d’importer le module Angular dédié aux animations, le BrowserAnimationsModule :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
// ?import { Page2Component } from './page2/page2.component';
// ? @NgModule({ declarations: [ AppComponent, Page1Component,
// ? Page2Component // ? ],
imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule ],
providers: [], bootstrap: [AppComponent]})
export class AppModule { }
Étape 4 : Naviguer dans notre application
Nous allons désormais installer une barre de navigation et naviguer de la page 1 vers la page 2. Ouvrons d’abord le fichier style.scss et ajoutons deux imports, « bootstrap » et « bootswatch » :
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
Vous devriez obtenir le code suivant dans votre éditeur de code :
Pour vous donner quelques explications, le « path » correspond à la route que l’on appellera pour naviguer sur la page demandée, nous appelons ensuite le component souhaité qui devra apparaître, puis nous assignons le paramètre data : animation qui servira pour les belles transitions.
Rendez-vous ensuite dans le app.component.html et ajouter le code suivant qui servira de NavBar (menu) :
Si vous redémarrez votre application (terminal : ng s –open) vous devriez normalement pouvoir naviguer de la page 1 vers la page 2. Si c’est bien le cas encore un petit effort nous attaquons la partie la plus intéressante !
Étape 5 : Animer les transitions entre nos pages !
Nous voilà à la dernière étape, celle qui va enfin déterminer le petit effet de transition lorsque nous allons aller d’une page à une autre ! Rendez-vous dans le fichier app.component.ts, puis importons les différents modules dont nous aurons besoin juste après :
import { trigger, animate, transition, style, query } from '@angular/animations';
Rendons-nous ensuite dans le @Component([ ]) et ajoutons une nouvelle ligne appelée « animation » juste après le styleUrls. Ensuite nous allons écrire le code suivant qui sera notre animation dans le cadre de ce projet, vous pouvez essayer de vous amuser à créer différents effets à partir de cette étape !
Les animations fonctionnent grâce à la transition de deux états. Le trigger exposé ci-dessus, permet de nommer notre animation. Ensuite nous définissons via le terme transition quelles seront les routes affectées par cette animation, dans notre cas le « *<=>* » signifie que cet effet pourra s’exécuter sur n’importe quelle route; enfin le query met l’accent sur le point d’entrée et de sortie.
Le style correspond tout simplement à du CSS classique, il suffit d’y appliquer tous les effets que nous souhaitons voir dans notre transition, puis d’y spécifier une durée ainsi qu’un assouplissement via la formule animate.
Voici le code final de notre app.component.ts :
Nous pouvons enfin relancer notre application et admirer le résultat ! Nous pouvons éventuellement ouvrir les fichiers page1.component.html et page2.component.html afin d’y ajouter un peu de texte pour avoir un meilleur rendu :
<div class="container mt-5">
<h1>page1 works!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Iste possimus soluta, suscipit veritatis harum placeat,
hic consectetur laboriosam amet aliquam accusantium modi nam?
Accusantium non unde magnam reprehenderit sapiente. Delectus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Sunt earum dicta officia numquam minima ad necessitatibus inventore sint molestiae aut aperiam,
ea odio natus explicabo ab omnis repellat vel obcaecati?
</p>
</div>
Vous êtes allés jusqu’au bout, félicitations !
Vous êtes désormais capable de réaliser vos propres transitions avec Angular. Vous pouvez trouver un aperçu sur l’application Pokémon de ce qui peut être réalisé simplement avec ce que vous venez d’apprendre !
