Search for a command to run...
No comments yet. Be the first to comment.
Depuis l'arrivée des Signals dans Angular, une question revient sans cesse dans les équipes : comment continuer à profiter de la puissance de RxJS, de ses opérateurs, de sa gestion fine des flux async
Si vous suivez l'actualité d'Angular avec la sortie de la version 20 du framework, vous avez probablement entendu de plus en plus ce terme. Mais au-delà du jargon, qu'est-ce que le Zoneless concrètement pour vos applications Angular ? Pourquoi est-il...
Si vous avez l’habitude de manipuler des formulaires réactifs (Reactive Forms) dans un projet Angular, vous connaissez certainement la méthode patchValue(…). Cette méthode, permet de mettre à jour les valeurs de votre formulaire. Cependant, son utili...
Depuis la sortie de la version 17 du framework Angular, on parle de la renaissance de Angular. Il y a eu beaucoup de changements majeurs depuis la version 16 du framework pour préparer le terrain à cette renaissance. Ces changements majeurs ont rendu...
Dans notre précédent article, nous avons vu ensemble ce qu'est un Signal Input et comment l'utiliser. Nous avons particulièrement remarqué sa similarité avec le décorateur @Input(). Dans ce nouvel article, nous verrons ensemble un nouveau type de inp...
Le 03 Mai 2023, la core team de Angular a effectué la sortie officielle de la version 16.0.0 de Angular. Aujourd'hui, nous verrons ensemble huit (08) nouveautés liées à cette version.
Si vous êtes à l'écoute de la communauté Angular, vous avez déjà certainement entendu parler du mot "Signals" qui a sucité beaucoup d'engouements. En effet, jusqu'à la version 15 de Angular c'est la bibliothèque Zone.js qui permet à Angular de détecter les changements dans l'application de manière plus efficace et de mettre à jour l'interface utilisateur de manière plus rapide, ce qui peut améliorer la réactivité de l'application. Cependant, Zone.js pose essentiellement quatre (04) problèmes qui sont :
Zone.jsa un surcoût d'environ100 Ko. Bien que négligeable pour les applications de grande taille, cette surcharge est rédhibitoire pour le déploiement de composants web légers.Avec
Zone.js, les objets du navigateur sont modifiés et les erreurs sont difficiles à diagnostiquer.
Zone.jsn'arrive pas à interprèterasyncetawaitpuisqu'il s'agit de mots-clés. Par conséquent, lors de la compilation, Angular convertit toujours ces déclarations en promesses, même si tous les navigateurs pris en charge supportent déjàasyncetawaiten mode natif.Lorsque des modifications sont apportées, des composants entiers, y compris leurs prédécesseurs, sont toujours vérifiés dans l'arborescence des composants. Il n'est actuellement pas possible d'identifier directement les composants modifiés ou de mettre à jour les parties modifiées d'un composant.
Afin de résoudre ces problèmes, ils ont pensé à la création de Signals. La bibliothèque Signals nous permet de définir des valeurs réactives et d'exprimer des dépendances entre elles. Elle est souple et simple à implémenter. Voyons ensemble un exemple d'implémentation :
@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
firstName = signal('Jane');
lastName = signal('Doe');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
constructor() {
effect(() => console.log('Name changed:', this.fullName()));
}
setName(newName: string) {
this.firstName.set(newName);
}
}
La core team de Angular a effectué une enquête annuelle afin d'avoir une idée des choses à améliorer dans les prochaines versions. Le résultat a démontré que les développeurs se plaignaient beaucoup du rendu côté serveur. Il y a donc eu naturellement des améliorations à ce niveau. En voici une preuve :
Précédemment, dans cet article, nous avons vu ensemble ce que c'est qu'un composant autonome (standalone). Avec la version 16 de Angular, il est possible via la CLI de créer une application Angular en précisant par défaut que nous voulons créer uniquement des composants autonomes. Voici ce qu'il faut faire :
ng new --standalone
Lorsque nous créons un composant réutilisable en Angular, nous utilisons le décorateur @Input() pour préciser les props de notre composant. Jusqu'à la version 15 de Angular, il n'est pas possible de rendre obligatoire nos propriétés lorsque notre composant réutilisable est appelé dans un composant parent. Pour améliorer donc cette expérience développeur, la communauté a suggéré ceci :
@Component(...)
export class App {
@Input({ required: true }) title: string = '';
}
Cette nouveauté facilite l'utilisation des Resolvers en Angular. Cela consiste tout simplement en ceci :
const routes = [
{
path: 'about',
loadComponent: import('./about'),
resolve: { contact: () => getContact() }
}
];
@Component(...)
export class About {
// The value of "contact" is passed to the contact input
@Input() contact?: string;
}
Nous remarquons que notre variable contact qui est un @Input() est directement liée à l'objet ayant pour clé le même nom que notre variable présent dans notre Resolver.
import { Injectable, DestroyRef } from '@angular/core';
@Injectable(...)
export class AppService {
destroyRef = inject(DestroyRef);
destroy() {
this.destroyRef.onDestroy(() => /* cleanup */ );
}
}
takeUntilDestroyed(), voici comment procédons-nous :destroyed$ = new ReplaySubject<void>(1);
data$ = http.get('...').pipe(takeUntil(this.destroyed$));
ngOnDestroy() {
this.destroyed$.next();
}
Aujourd'hui avec la version 16 de Angular, nous avons ceci :
data$ = http.get('…').pipe(takeUntilDestroyed());
La compilation NGCC n'est pas supportée par Angular 16. Il faudra faire attention lors de la montée en version. Il en est de même pour entryComponent qui était obsolète depuis Angular 9. Enfin, il est à souligner que Angular 16 ne supporte pas la version 14 de Node.js.
La version 16 de Angular supporte le TypeScript 5.0 qui inclut l'utilisation des décorateurs ECMAScript.
En somme, nous avons remarqué à travers cette première partie sur les nouveautés liées à Angular 16, qu'il y a eu beaucoup d'améliorations et que l'expérience développeur est toujours au coeur de ce dernier.
Pour plus d'informations :