Résumé :
Qu'est-ce qu'Angular ?
En bref, Angular est un framework JavaScript qui vous permet de développer des
applications "efficaces et sophistiquées", comme dit la documentation. Il permet
notamment de créer ce qu'on appelle des Single Page Applications (ou SPA) : des
applications entières qui tournent dans une seule page HTML grâce au JavaScript.
● Le framework Angular utilise le HTML, le SCSS et le TypeScript.
● Le TypeScript est un langage qui ajoute des syntaxes au JavaScript,
notamment pour le typage strict.
Installez les dépendances :
● Pour installer le CLI d'Angular, il vous faut une version LTS de Node et npm.
● On installe le CLI avec la commande npm i -g @angular/cli
● On peut vérifier la version installée du CLI avec ng v
Construisez une application Angular avec le CLI
● Une nouvelle application Angular se crée avec ng new
● ng serve exécute le serveur de développement.
● La balise <app-root> correspond à AppComponent.
Construisez votre premier component
*Une application Angular peut être vue comme une arborescence de
components.
● Un component lie un template HTML et des styles SCSS à du comportement
TS.
● Pour créer un component, on utilise la commande ng generate
component nom-du-component
● Le sélecteur d'un component correspond à la balise HTML personnalisée
qu'on utilisera pour l'insérer dans l'application.
Affichez des données
● On déclare les propriétés d'un component en haut de sa classe, et on les
initialise dans la méthode ngOnInit()
● La méthode ngOnInit() est appelée une fois par instance de component
au moment de la création de cette instance.
● La string interpolation avec les doubles accolades {{ }} permet d'insérer la
valeur d'une propriété TypeScript dans le template.
● L'attribute binding permet de lier la valeur d'une propriété TypeScript à un
attribut HTML, en mettant l'attribut entre crochets [] et en passant le nom
de la propriété.
Réagissez aux événements
● Pour lier une méthode à un événement d'un élément du template, mettez
l'événement entre parenthèses () et passez la méthode en argument ; ex. :
(click)="onClickButton()"
Ajoutez des propriétés personnalisées
● N'hésitez pas à créer vos propres types, sous forme de classe par exemple,
pour faciliter la manipulation de données dans votre application.
● Une propriété personnalisée est rendue injectable depuis l'extérieur grâce au
décorateur @Input()
● Une propriété en @Input() est utilisable comme n'importe quelle autre
propriété : on peut en afficher les éléments, les modifier…
● On lie ensuite une valeur à cette propriété depuis le component parent avec
l'attribute binding, c'est-à-dire le nom de la propriété entre crochets [] en
passant la valeur entre les guillemets ; ex. : [faceSnap]="mySnap"
Conditionnez l'affichage des éléments
● Vous pouvez ajouter des propriétés optionnelles à une classe en y ajoutant un
point d'interrogation ?
● Ajouter la directive *ngIf à un élément (qui peut aussi être un component)
dit à Angular d'ajouter ou non cet élément au DOM selon la condition que
vous lui passez, par exemple <p *ngIf="size === 'large'">
Affichez des listes
● La directive *ngFor vous permet d'insérer un élément dans le DOM pour
chaque élément dans un tableau.
● La syntaxe let element of array vous donne accès à l'élément de
chaque itération, vous permettant de l'injecter dans un component, par
exemple.
Ajoutez du style dynamique
● La directive [ngStyle] permet d'appliquer des styles qui dépendent de
valeurs dynamiques, comme un texte qui, plus il y a de snaps, devient de plus
en plus vert.
● La directive [ngStyle] prend comme argument un objet où les clés
correspondent aux styles CSS à modifier, et les valeurs aux valeurs que
doivent prendre ces styles.
Mettez de la classe
● La directive [ngClass] permet d'ajouter dynamiquement des classes à des
éléments HTML.
● [ngClass] prend un objet en argument où les clés sont des noms de classe
CSS, et les valeurs sont les conditions selon lesquelles les classes doivent
être appliquées.
<div class="face-snap-card" [ngClass]="{ snapped: buttonText === 'Oops, unSnap!' }">
Changez la casse
● Un pipe permet de formater l'affichage d'une donnée sans modifier la donnée
sous-jacente.
● Angular fournit trois pipes pour modifier la casse affichée d'une chaîne de
caractères : UpperCasePipe, LowerCasePipe, et TitleCasePipe pour les
majuscules, les minuscules et le mélange type "titre".
● DatePipe permet de formater les dates, et sans configuration fournit un
formatage par défaut.
● DatePipe fournit des configurations prédéfinies avec des noms comme
short, longDate ou mediumTime
● DatePipe permet également de personnaliser totalement le format d'affichage
des dates avec des chaînes de caractères qui encodent le format souhaité,
par exemple 'à HH:mm, le d MMMM yyyy'
Formatez les chiffres
On peut aussi demander à DecimalPipe d'arrondir pour l'affichage, par exemple à
l'entier le plus proche :
Unset
<p>{{ 4346234.36 | number: '1.0-0' }}</p>
La configuration signifie :
● au moins un chiffre pour les entiers ;
● minimum 0 chiffres après la virgule – maximum 0 chiffres (Angular arrondira
donc à l'entier le plus proche).
PercentPipe arrondit par défaut les pourcentages à l'entier le plus proche. Vous
pouvez cependant le configurer de la même manière que DecimalPipe :
Unset
<p>{{ 0.336 | percent: '1.0-1' }}</p>
Quand les nombres dans votre application correspondent à des montants d'argent,
CurrencyPipe facilite leur affichage. Si vous utilisez l'affichage par défaut :
Unset
<p>{{ 344.36 | currency }}</p>
● DecimalPipe (mot-clé number ) vous permet d'afficher un nombre selon les
règles de la locale de l'application.
● PercentPipe affiche un nombre entre 0 et 1 sous forme de pourcentage,
arrondi par défaut à l'entier le plus proche.
● DecimalPipe et PercentPipe acceptent un argument de configuration sous la
forme
'[Link]èsVirgule-chiffres
MaxAprèsVirgule' ex. : '1.0-1'
● CurrencyPipe facilite l'affichage des montants d'argent, et accepte plusieurs
arguments de configuration séparés par des deux-points :
<span>422.467 | number</span> :
422.467
Notes:
*C'était un piège ! Je n'ai pas mis le contenu du <span> entre doubles accolades,
donc le nombre apparaîtra exactement comme il est écrit en HTML : 422.467 ! En
tout, on verra le texte "422.467 | number".
*Pour mieux organiser votre code, pour éviter de répéter des blocs et pour toujours
avoir des données à jour partout dans l'application, ce serait intéressant de pouvoir
regrouper les données et leurs méthodes ensemble, de les centraliser. En Angular,
cette centralisation se fait dans des services.
*Dans une application Angular, AppComponent ne sert généralement qu'aux
éléments structuraux principaux. Tout ce qui est plus "spécialisé" va dans un
component à part.
Partagez des données avec les Services
Vous allez maintenant créer un service qui va centraliser toutes les interactions
avec les FaceSnaps, afin que tous les éventuels components de votre application
dépendent des mêmes données.
Un service est une classe, et la façon la plus simple de déclarer une classe comme
étant un service est d'utiliser le décorateur @Injectable() qui s'importe depuis
@angular/core
● Les services permettent de centraliser les données et la logique pour les
différents domaines de votre application.
● Créer un service est aussi simple qu'ajouter le décorateur @Injectable()
à une classe.
● Pour injecter un service dans un component, ajoutez un argument au
constructor du component qui a le type du service, par exemple private
userService: UserService
L'objet de configuration qui spécifie providedIn: 'root' dit à Angular
d'enregistrer ce service à la racine de l'application. Ce sera très souvent le cas pour
vos services, car ça permet de s'assurer de n'avoir qu'une seule instance du service,
partagée par tous les partis intéressés.
Le premier élément que vous allez déporter dans votre service est le tableau des
FaceSnaps. Il est important de savoir qu'un service n'a pas de méthode
ngOnInit(), car les services ne sont pas instanciés de la même manière que les
components.
Pour pouvoir utiliser un service dans un component, il faut utiliser le système
d'injection de dépendances (dependency injection ou DI) que vous fournit Angular.
C'est très simple : vous passez un argument du type du service au constructor du
component, et Angular vous mettra à disposition la bonne instance du service.
Unset
import { FaceSnapsService } from '../services/[Link]';
constructor(private faceSnapsService: FaceSnapsService) { }
Pour rappel, ajouter un modificateur d'accès comme public ou private à un
argument du constructor crée une propriété avec ce nom-là dans la classe.
Vous aurez donc accès au service via la propriété faceSnapsService.
Unset
import { FaceSnapsService } from '../services/[Link]';
constructor(private faceSnapsService: FaceSnapsService) { }
Pour rappel, ajouter un modificateur d'accès comme public ou private à un
argument du constructor crée une propriété avec ce nom-là dans la classe.
Vous aurez donc accès au service via la propriété faceSnapsService.
Centralisez votre logique avec les Services
● Centraliser les interactions dans un service sous forme de méthodes crée une
structure plus modulaire, qui facilite la maintenance et les évolutions de votre
application.
● Comme dans toute base de code, refactorisez pour éviter de répéter des
blocs de code (le principe DRY : Don't Repeat Yourself).
● Les literal types permettent de créer rapidement des types personnalisés,
souvent utilisés pour limiter les choix pour un argument de méthode, par
exemple : fileType: 'image' | 'video'
Passez en SPA avec le routing
● Un module de routing contient un tableau de type Routes qui contient les
routes de l'application.
● Une route est un objet de type { path: 'myPath', component:
MyComponent } qui spécifie le component à afficher pour chaque route.
● On appelle [Link]() en passant le tableau de routes
pour enregistrer les routes dans le routeur Angular.
● On enregistre le module de routing dans AppModule pour ajouter le routeur
configuré à l'application.
● On ajoute une balise <router-outlet> pour dire à quel niveau du
template le component de la route active doit être inséré.
● Pour ajouter des fichiers statiques à une application (comme des images), on
les stocke dans le dossier assets .
Passez d'une route à l'autre
● Créez des liens qui permettent de passer d'une route à l'autre avec la
directive routerLink.
● Ajoutez des classes CSS aux liens correspondants à la route activée avec
routerLinkActive.
● Ignorez l'activation des routes enfants avec
[routerLinkActiveOptions]="{ exact: true }".
● Injectez le Router dans vos components et utilisez sa méthode
navigateByUrl() pour de la navigation programmatique.
Activez les routes avec ActivatedRoute
● On récupère les paramètres de la route activée en injectant ActivatedRoute,
et via son objet [Link].
● Pour naviguer vers une route absolue (et non relative), n'oubliez pas d'ajouter
un / au début de la route demandée.
Autre chapitre à apprendre:
● les Observables : un sujet énorme en Angular, qui permet de créer des
applications réactives et performantes ;
● les formulaires : permettez à vos utilisateurs d'interagir de manière
totalement dynamique avec l'application ;
● les requêtes HTTP : quasiment toute application moderne a besoin de
communiquer avec un serveur d'une manière ou d'une autre ;
● les modules : améliorez la structure et les performances de vos
applications, en les séparant en modules et en implémentant le lazy
loading.