Nouvelle version: Angular V19 et Top Fonctions

Le 19 novembre 2024, Angular a officiellement publié la version 19, poursuivant son engagement à améliorer l’expérience du développeur et à repousser les limites de application Web efficacité. Chaque année, Angular présente des fonctionnalités innovantes, et cette version ne fait pas exception.

Angular 19 est une version stable, apportant des améliorations clés des performances et des améliorations de la productivité des développeurs ainsi que quelques caractéristiques expérimentales. Dans leur annonce officielle, a déclaré l’équipe angulaire, «Voir la réponse positive de la communauté et l’engagement accru dans nos événements de développeur valident que nous avons évolué dans la bonne direction.»

Cette mise à jour se concentre sur l’optimisation de la vitesse d’application, la raffinement des flux de travail des développeurs et l’intégration de certaines des fonctionnalités les plus demandées de la communauté. Avec Angular 19, la construction d’applications Web modernes et hautes performances n’a jamais été aussi transparente.

Dans cet article, nous plongerons dans les mises à jour clés d’Angular 19 et explorerons des exemples du monde réel qui montrent comment profiter pleinement de ces nouvelles fonctionnalités dans nos propres applications angulaires. 🚀

Construit pour la vitesse – Angular 19

Angular 19 fait passer les performances au niveau supérieur en se concentrant sur l’optimisation des applications sensibles aux performances et en intégrant les meilleures pratiques prêtes à l’emploi. Cette version introduit une hydratation incrémentielle pour le rendu côté serveur (SSR), permettant des charges de page initiales plus rapides et des interactions plus lisses. De plus, la configuration de l’itinéraire du serveur, la relecture des événements (désormais activée par défaut) et d’autres améliorations poussent encore plus les capacités SSR d’Angular.

Dans le passé, de grandes applications angulaires ont souvent expédié un JavaScript excessif aux utilisateurs, ce qui a un impact négatif sur les performances. Avec des vues différées, précédemment utilisées pour le rendu côté client, désormais étendue au rendu côté serveur, Angular optimise les performances en reportant le chargement JavaScript non critique. Ces progrès, ainsi que la configuration de l’itinéraire du serveur et la relecture automatique des événements, garantissent qu’Angular 19 fournit des applications Web modernes à haute performance plus efficacement que jamais.

Quoi de neuf dans Angular 19?

La dernière version d’Angular 19 apporte une multitude d’améliorations et de nouvelles fonctionnalités conçues pour améliorer les performances, réduire les dépendances et améliorer l’expérience des développeurs. Avec un fort accent sur les vitaux du Web de base et les meilleures pratiques modernes, Angular 19 présente plusieurs mises à jour passionnantes:

• Mode de rendu au niveau de l’itinéraire – Optimise les stratégies de rendu au niveau de l’itinéraire pour une meilleure flexibilité.
• Remplacement du module chaud (HMR) – accélère le développement avec des mises à jour en direct sans recharges de page complète.
• Par défaut autonomes – simplifie les projets angulaires en faisant des composants autonomes de la valeur par défaut.
• Composant de sélecteur de temps – Ajoute un sélecteur de temps personnalisé et personnalisable pour les formulaires et les améliorations de l’interface utilisateur.
• Traînée et chute bidimensionnelles – élargit la fonction de glisser-déposer pour soutenir le mouvement dans les deux sens.
• Sécurité: AUTOCSP pour les politiques de sécurité de contenu strictes
• Signaux liés – permet une meilleure gestion et réactivité de l’État.
• Relecture de l’événement – désormais activé par défaut, assurant des interactions utilisateur transparentes après l’hydratation.
• Code de modernisation avec service linguistique – Fournit une prise en charge améliorée des développeurs et une intelligence de code.
• État de zones – se dirige vers un avenir avec une amélioration des performances en réduisant la dépendance à la zone.js.
• Outils d’état de test – Améliore l’écosystème de test d’Angular avec des outils et des pratiques améliorés.
• Sécurité avec Google – Renforce les fonctionnalités de sécurité intégrées avec des améliorations soutenues par Google.
• API de ressources – introduit de nouvelles façons de gérer efficacement les ressources dans les applications angulaires.

Avec ces mises à jour, Angular 19 continue de repousser les limites du développement Web moderne, ce qui facilite la création d’applications de haute performance, évolutives et sécurisées.

Mode de rendu au niveau de l’itinéraire dans Angular 19

Dans les versions précédentes d’Angular, l’activation du rendu côté serveur (SSR) signifiait que tout itinéraires paramétrés ont été rendus dynamiquement sur le serveur, tandis que routes statiques étaient prépendus. Cependant, avec Angular 19, une nouvelle fonctionnalité appelée Serveur Fournit un contrôle à grain fin sur la façon dont les routes individuelles sont rendues.

Ce Serveur L’interface permet aux développeurs de Personnaliser le comportement de rendu Pour chaque itinéraire, spécifiant si cela devrait être:

• Serré (SSR) pour les performances et la sécurité améliorées.
• Rendu client pour une expérience utilisateur plus interactive et dynamique.
• Prétendu Pour améliorer la vitesse de chargement de la page initiale.

Définition des modes de rendu

Voici un exemple de la façon de configurer le rendu au niveau de l’itinéraire en utilisant serverrouteConfig:

Exemple de dactylographie: Définition des modes de rendu

export const serverRouteConfig: ServerRoute[] = [
{ path: '/login', mode: 'server' }, // Render login on the server for better security
{ path: '/dashboard', mode: 'client' }, // Render dashboard on the client for a dynamic UI
{ path: '/**', mode: 'prerender' }, // Prerender all other routes for faster loading
];

• • Le se connecter L’itinéraire est rendu sur le serveur pour assurer la gestion sécurisée de l’authentification.
  • Le tableau de bord l’itinéraire est rendu sur le client pour permettre des interactions en temps réel et une expérience dynamique.
  • Tous restant Les routes sont prétendu Pour optimiser les performances de charge de page initiales.

Prérencier avec les paramètres d’itinéraire

Angular 19 permet également des itinéraires de prétention qui incluent des paramètres dynamiques à l’aide de la méthode GetPrerenderPaths. Ceci est utile pour les pages qui nécessitent une optimisation SEO, comme pages de produits, articles de blog ou profils d’utilisateurs.

Exemple de dactylographie: Prérencier les routes dynamiques

export const serverRouteConfig: ServerRoute[] = [
{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
  const productService = inject(ProductService);
  const productIds = await productService.getProductIds(); // Fetch product IDs (e.g., ["1", "2", "3"])
  return productIds.map(id => ({ id })); // Generate static URLs (e.g., ["/product/1", "/product/2", "/product/3"])
 },
},
];

• Chemins GetPrerender Récupère dynamiquement les ID de produit et génère des pages préenduées pour chaque produit (par exemple, / produit / 1, / produit / 2).
• Cette approche significativement stimule le référencement et améliore les temps de chargementen particulier pour le commerce électronique ou les sites Web de contenu.

Remplacement du module chaud en angulaire 19

Angular 19 introduit une amélioration majeure avec Remplacement du module chaud (HMR) Pour les styles et les modèles, rationaliser le flux de travail de développement en éliminant les rafraîchissements en pleine page après les modifications.

Auparavant, toute modification du style ou du modèle d’un composant a déclenché une reconstruction complète d’application et un rechargement du navigateur – un processus inefficace, en particulier pour les grands projets.

Avec HMR, angulaire maintenant Compilez et correctifs sélectifs Des styles ou des modèles mis à jour en temps réel tout en préservant l’état de l’application. Il en résulte Cycles de développement plus rapides et un Expérience utilisateur plus lisse et ininterrompue

Composants autonomes par défaut dans Angular 19

Quoi de neuf
Dans Angular 19, autonome composants, directives et tuyaux Maintenant, par défaut, en éliminant le besoin de autonome: vrai métadonnées.

Pourquoi ça compte
Cette mise à jour simplifie les métadonnées des composants, améliorant la lisibilité du code et la modularité tout en réduisant la buissier.

Migration
Lors de la course de la mise à jourla CLI angulaire retirera automatiquement autonome: vrai des composants qui ne le nécessitent plus, assurant une transition transparente.

Comment activer

Ajoutez ce qui suit à votre tsconfig.json:

{ 
  "angularCompilerOptions": { 
    "strictStandalone": true 
  } 
}

Composant de sélecteur de temps

Angular Material fournit un composant TimePicker intégré qui permet aux utilisateurs de sélectionner une période spécifique. Il s’agit de la fonctionnalité la plus demandée et offre des options de personnalisation pour les formats de temps, la validation et l’accessibilité. Vous pouvez facilement l’intégrer dans vos applications angulaires pour fournir une expérience de sélection de temps conviviale.

EX: datetimepicker.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
  <span>
    {{date | date:'medium'}}
  </span>
<div>
  <button cdkOverlayOrigin 
          #trigger="cdkOverlayOrigin"
          (click)="isOpen = !isOpen">
          time
  </button>
</div>
<ng-template cdkConnectedOverlay
             [cdkConnectedOverlayOrigin]="trigger"
             [cdkConnectedOverlayOpen]="isOpen"
             [cdkConnectedOverlayHasBackdrop]="true"
             [cdkConnectedOverlayBackdropClass]="'backdrop'"
             (backdropClick)="isOpen = false">
  <app-time-picker [date]="date" (setDate)="onSetDate($event)"></app-time-picker>
</ng-template>

datetimepicker.component.ts

export class DatepickerOverviewExample {
  isOpen = false;
  date;
  public onSetDate(newDate: Date) {
    this.isOpen = false;
    this.date = newDate;
  }
}

Traînée et chute bidimensionnelles

Le CDK angulaire (Kit de développement de composants) offre de puissantes fonctionnalités de glisser-déposer, y compris la prise en charge de la glisser-déposer bidimensionnelle. Vous pouvez créer des interfaces de glisser-déposer flexibles et interactives pour divers cas d’utilisation, tels que le réarrangement des éléments dans une grille ou le transfert d’éléments entre différents conteneurs. Cette fonctionnalité peut être utilisée pour implémenter des dispositions complexes de glisser-déposer comme des grilles triables ou des cartes Kanban.

Ex: dragdropeg.component.html

 <div cdkDropList [cdkDropListData]="MoviesList"
    class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
  </div>

dragdropeg.component.ts

export class DragDropEg implements OnInit {
  // Transfer Items Between Lists
  MoviesList = [
    'The Far Side of the World',
    'Morituri',
    'Napoleon Dynamite',
    'Pulp Fiction',
    'Blade Runner',
    'Cool Hand Luke',
    'Heat',
    'Juice'    
  ];
  public onDrop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
    console.log(event.container.data);
    console.log(event.previousContainer.data);
  }
}

Signaux liés

Angular 19 présente Signaux liésune nouvelle fonctionnalité puissante conçue pour simplifier la gestion de l’État local lorsqu’elle dépend d’autres signaux. Cette fonctionnalité nous permet de créer un signal écrit qui peut réinitialiser automatiquement en fonction des modifications d’autres signaux, garantissant que l’état reste synchronisé avec des données dynamiques.

Comment ça marche

Les signaux liés fournissent un moyen efficace de suivre et de mettre à jour l’État local sans gérer manuellement les dépendances. Lorsqu’un signal dépendant change, le signal lié se met automatiquement à jour, réduisant le besoin d’une logique de gestion de l’état complexe.

Cas d’utilisation courants

• Gestion de réinitialisation du formulaire: Réinitialisez automatiquement les champs de formulaire lorsque les données associées changent.
• Filtrage et tri: Maintenir l’état d’interface utilisateur local pour les filtres qui s’adaptent aux modifications de données backend.
• Synchronisation de l’État: Gardez les composants d’interface utilisateur en synchronisation avec l’état global ou parent de dynamiquement.

Avec des signaux liés, la gestion de l’état réactif dans Angular 19 devient plus intuitif et efficace, ce qui en fait un ajout précieux pour les développeurs travaillant avec des données dynamiques.

import { computed, linkedSignal } from '@angular/core';

const timestampMs = signal(Date.now());

// computed(): Signal (not writable)
const timestampSeconds = computed(() => timestampMs() / 1000);
timestampSeconds.set(0); // ❌ compilation error

// linkedSignal(): WritableSignal
const timestampSecondsLinked = linkedSignal(() => timestampMs() / 1000);
timestampSecondsLinked.set(0); // ✅ works

Note: Il y a encore certaines fonctionnalités dans les aperçus des développeurs, dont nous discuterons plus tard; Pour plus d’informations, reportez-vous Docs angulaires

Ici, a également ajouté un lien github pour un application de démonstration d’Angular 19.

Conclusion

Angular 19 apporte une gamme d’améliorations puissantes conçues pour augmenter les performances, la sécurité et la productivité des développeurs. Des composants autonomes par défaut au nouveau composant Time Picker et aux prévisualistes des développeurs comme LinkedSignal et Resource (), il y a beaucoup à explorer.

Alors qu’Angular continue d’évoluer, ces mises à jour garantissent que vous êtes bien équipé pour construire des applications évolutives, sécurisées et haute performance avec une plus grande efficacité.