La version 19 d'Angular marque une nouvelle ère pour le framework avec la stabilisation des API basées sur les signaux et des améliorations significatives de l'expérience développeur (DX). Tout cela pour permettre de créer des applications encore plus performantes.

Input signals, output functions, Signal Queries, computed signals, linkedSignal, resources... Ce sont des termes dont vous avez probablement entendu parler récemment, mais que vous n'avez peut-être pas encore eu l'occasion d'explorer à travers des exemples concrets ou un projet pratique.

Ce workshop interactif est l'occasion idéale ! Nous construirons ensemble une application complète à partir de zéro, en mettant en pratique toutes ces notions clés. Si vous avez manqué les évolutions d'Angular depuis la version 16, ce sera également l'opportunité parfaite pour vous remettre à jour.

À l'issue de ce workshop, les participants disposeront des connaissances essentielles pour développer une application complète et moderne en tirant parti des fonctionnalités de la dernière version d'Angular.

git clone https://github.com/ahasall/ng-dishes
cd ng-dishes
npm install

ng serve --open

npm run start:server

Découvrir les primitives signal, computed et effect.

Nous allons principalement travailler sur le composant DishListPage.

1. Convertir toutes les propriétés de la classe DishListPage en signal.
2. Utiliser computed pour créer des signaux dérivés.
3. Utiliser effect pour observer des signaux et déclencher des side effects comme ouvrir une notification en cas d'erreur (voir ToastService) ou loguer la valeur de dishes.

Utiliser input, output et model.

Nous allons principalement travailler sur les composants DishCardComponent, FavoriteComponent et DishDeleteComponent.

1. Convertir tous les @Input en input.
2. Convertir tous les @Output en output.

Comprendre comment naviguer entre le monde des signaux et celui des observables.

1. Remplacer le pipe async par toSignal dans DishDetailsPage.
2. Implémenter un typeahead pour le filtre dans DishListPage en utilisant toObservable.

Comprendre comment intégrer du code asynchrone dans le monde des signaux.

1. Utiliser rxResource dans DishListPage.

Comprendre comment les signaux s'intègrent avec le client HTTP d'Angular.

1. Utiliser httpResource dans DishDetailsPage.

Consolider nos connaissances sur les signaux.

1. Utiliser tout ce qu'on a appris pour implémenter DishDiscountCalculatorPage.