Syntaxe de modèle améliorée angulaire et migrations rationalisées

Angular 18.2 est arrivé et, même s'il s'agit peut-être d'une version mineure, elle contient des améliorations précieuses qui améliorent l'expérience des développeurs. Cet article explore ces fonctionnalités intéressantes, en se concentrant sur la syntaxe @let raffinée et l'introduction de nouveaux schémas de migration.

@let améliore

La syntaxe @let, une préférée parmi de nombreux développeurs Angular, continue d'évoluer dans la version 18.2. Il propose deux approches distinctes pour définir des variables de modèle, apportant une plus grande flexibilité et lisibilité à votre code :

Dynamic @let : Adoptez la possibilité d'utiliser des variables de référence de modèle dans les directives @for et @if. Imaginez accéder sans effort à la valeur d'un formulaire dans le modèle :

<input #myForm name="my-from" [maxlength]="maxLength" />
@let formValue = myForm.value

Async @let : Dans les versions précédentes, l'accès à la dernière valeur émise à partir d'un observable nécessitait une directive ngIf.

@if ({ tasks:  tasks$ | async }; as taskData) {

//shows the @if block before the 1st tasks$ emit
 @for (task of taskData.tasks; track task.id) {
    [...]
  } @empty {
    No Tasks pending.
  }
}

Maintenant, obtenez le même résultat avec moins de lignes et une clarté améliorée

@let tasks = tasks$ | async;
@for (task of tasks; track task.id) {
  [...]
}
@empty {
  No Tasks pending.
}

N'oubliez pas que les variables @let sont en lecture seule et ne peuvent pas être réaffectées. Cependant, leurs valeurs seront automatiquement mises à jour à chaque cycle de détection de changement. Bien qu'il soit techniquement possible d'utiliser les mêmes noms dans le composant de modèle et de classe, les implications à long terme de cette pratique nécessitent une exploration plus approfondie.

La migration facilitée : de nouveaux schémas en ville

À partir d'Angular 17, nous avons rencontré trois schémas de migration principaux :

• Flux de contrôle de la syntaxe du modèle : ng g @angular/core:control-flow
• Nouveau générateur d'applications : ng update @angular/cli --name use-application-builder
• Composants autonomes : ng g @angular/core:standalone

Angular 18.2 étend cette boîte à outils avec des outils encore plus utiles :

• Conversion d'itinéraires de composants autonomes : Créez facilement des itinéraires chargés paresseux à partir de composants autonomes à l'aide de ng g @angular/core:route-lazy-loading.
• Migration DI : Simplifiez la transition de l'injection de dépendances basée sur le constructeur à la nouvelle approche fonctionnelle inject() avec ng g @angular/core:inject-migration.

Conclusion et perspectives

Angular 18.2 est peut-être une version mineure, mais elle offre des améliorations significatives pour ceux qui aiment travailler avec @let et apprécient les processus de migration rationalisés. Alors que nous attendons avec impatience les fonctionnalités majeures prévues pour Angular 19 en novembre 2024, la version 18.3, qui arrivera dans les six prochaines semaines, promet d'être un autre tremplin passionnant. Alors, restez calme, continuez à coder et profitez des progrès d'Angular !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!