Quoi de neuf dans les composants autonomes angulaires, les signaux et plus encore !

Quoi de neuf dans Angular 19 ?

Angular continue son évolution rapide (avec de nouvelles versions majeures tous les ~6 mois). Désormais en novembre 2024, Angular 19 arrive, doté de fonctionnalités puissantes qui améliorent l'expérience des développeurs et les performances des applications. De l’hydratation améliorée aux signaux améliorés. Plongeons dans les moments forts de l'événement de lancement d'Angular 19.

1. Les composants autonomes sont désormais la valeur par défaut

La première fois que nous rencontrons un composant autonome, c'était dans Angular 14 et a été amélioré à chaque version depuis. Avec Angular 19, tous les composants, directives et tuyaux sont désormais autonomes par défaut, éliminant ainsi le besoin de définir explicitement standalone : true.
De plus, les mises à jour sont transparentes, la commande ng update refactorise automatiquement les bases de code existantes, garantissant une transition fluide et sans tracas.

2. Signaux : Réactivité améliorée

Dans Angular 16, nous avons eu notre première rencontre avec Angular Signals, et ce fut le coup de foudre, et ils ont continué à remodeler le système de réactivité d'Angular. Avec Angular 19, plusieurs API basées sur les signaux ont été promues au statut stable, notamment input(), output(), model(), viewChild(), viewChildren(), contentChild, contentChildren(), takeUntilDestroyed(), outputFromObservable(). , et outputToObservable().
De plus, Jeremy Elbourne a introduit deux nouvelles API Signal expérimentales :

A. Signal lié

• Active l'état local lié à une expression calculée.
• Fournit une valeur initiale.
• Revient automatiquement à la valeur calculée lorsque l'expression change.

B. API de ressources

• Simplifie la gestion des valeurs asynchrones telles que les données du serveur.
• S'intègre parfaitement au système de réactivité d'Angular.
• Offre à la fois les résultats de la demande et le statut sous forme de signaux.

Pour faciliter la transition, des commandes comme ng g @angular/core:signal-input-migration, ng g @angular/core:signal-queries-migration et ng g @angular/core:output-migration automatisent le code refactoriser avec facilité. Les signaux angulaires ressemblent vraiment à un match créé au paradis des développeurs.

3. Matériau angulaire : thématisation plus simple et nouveaux composants

Angular Material continue d'évoluer à chaque version, et Angular 19 ne fait pas exception. Cette mise à jour introduit des améliorations dans deux domaines clés :

Nouvelle API de thème

• Simplifiez les thèmes personnalisés avec moins de lignes de code à l'aide de l'API mat.theme.
• Générez des palettes de couleurs personnalisées avec un nouvel outil schématique, prenant désormais en charge une palette étendue de 12 couleurs.

Nouveaux composants et fonctionnalités

• Glisser-déposer 2D : Prend désormais en charge la réorganisation horizontale pour une flexibilité encore plus grande.
• Composant Time Picker : Un ajout très attendu.
• Documentation thématique améliorée : Guides adaptés aux débutants et instructions détaillées spécifiques aux composants.

4. Hydratation incrémentielle : une fonctionnalité de performance qui change la donne

L'hydratation est l'une des meilleures fonctionnalités d'Angular, évoluant au fil des dernières versions avec des innovations telles que hydratation complète de l'application, vues différées et relecture d'événements. S'appuyant sur cette base, Jessica Janiuk a introduit l'un des ajouts les plus intéressants d'Angular 19 hydratation incrémentielle, désormais disponible en aperçu développeur.

Comment ça marche

• Le serveur affiche le contenu réel au lieu des espaces réservés.
• Sur le client, le contenu reste déshydraté jusqu'à ce qu'il soit déclenché (par exemple, via une interaction ou en entrant dans la fenêtre d'affichage).

Avantages

• Temps de chargement initial plus rapides.
• Packs JavaScript plus petits.
• Déplacements de mise en page et scintillement réduits pour une expérience utilisateur plus fluide.

Conclusion

C'est tout pour le moment ! J’apprécie que vous ayez pris le temps de lire mon article et j’aimerais entendre vos réflexions et vos commentaires. Alors que je continue d’améliorer mon écriture, vos idées sont inestimables.

Vous pouvez me contacter sur :

• Bluesky : mohamedlamine.bsky.social
• X (Twitter) : @Mohamed_LamineF
• LinkedIn : mohamedlaminef

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!