Bases angulaires : signaux

L’API Signals d’Angular est un puissant outil axé sur la réactivité pour gérer l’état. Dans cet article, nous apprendrons comment utiliser les signaux, les signaux et effets calculés, ainsi que les fonctionnalités expérimentales telles que les signaux et les ressources liés introduits dans Angular 19.

Angular, un framework robuste pour la création d’applications Web dynamiques et évolutives, fournit aux développeurs des outils puissants pour créer des applications efficaces et performantes. Parmi ses nombreuses capacités, on retrouve le API de signauxune approche utile pour gérer l’état réactif. Dans cet article, nous explorerons ce que sont les signaux, comment ils fonctionnent et certaines des mises à jour récentes introduites dans Angular 19. Allons-y !

Signaux

À la base, un signal est un wrapper léger autour d’une valeur qui informe ses consommateurs lorsqu’elle change. Les signaux introduisent une approche déclarative et axée sur la réactivité de la gestion de l’état. Contrairement à d’autres solutions de gestion de l’état du framework, les signaux suivent explicitement les dépendances, ce qui rend notre code plus prévisible et plus facile à déboguer.

Les signaux sont idéaux pour gérer état local au sein des composants, en créant des valeurs calculées à partir d’un autre état et en exécutant des effets secondaires lorsque l’état change. Ils proposent trois constructions principales : signal, calcul et effet. Examinons du code pour mieux comprendre le fonctionnement de ces constructions.

Utilisation de signaux dans les composants

Signaux contenir une valeur qui peut être mise à jour et lue de manière réactive. Pour créer un signal, nous pouvons importer le signal fonction de @angular/core et utiliser le signal() fonction pour définir un signal qui contient une valeur. Nous pouvons ensuite accéder à la valeur du signal dans le modèle en appelant la fonction signal et en utilisant le update() méthode pour modifier la valeur de manière réactive.

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Counter: {{ count() }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
})
export class CounterComponent {
  
  count = signal(0);

  
  increment() {
    this.count.update(value => value + 1);
  }
}

Dans l’exemple ci-dessus :

• Le count le signal est initialisé avec la valeur 0.
• Le increment() la fonction met à jour la valeur de count en ajoutant 1 à la valeur précédente.
• Le modèle affiche le courant count valeur et comprend un bouton pour déclencher le increment() fonction.

Signaux calculés

Signaux calculés nous permettent de créer un nouveau signal dont la valeur est dérivée d’autres signaux. Cela est utile dans les scénarios où nous avons besoin d’une valeur qui dépend de l’état de plusieurs signaux. Pour créer un signal calculé, nous importons le computed fonction de @angular/core et utiliser le computed() fonction pour définir un signal qui dérive sa valeur d’autres signaux.

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

@Component({
  selector: 'app-double-counter',
  template: `
    <p>Double Counter: {{ doubleCount() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class DoubleCounterComponent {
  
  count = signal(0);

  
  doubleCount = computed(() => this.count() * 2);

  
  increment() {
    this.count.update(value => value + 1);
  }
}

Dans cet exemple :

• Le doubleCount le signal est calculé basé sur la valeur de count.
• Chaque fois que count des changements, doubleCount est automatiquement recalculé. Cela facilite la gestion de l’état dérivé sans écrire de logique supplémentaire pour mettre à jour manuellement les valeurs.

Effets

Effets sont utilisés pour exécuter du code chaque fois que la valeur d’un signal change. Ceci est utile pour les effets secondaires tels que la journalisation ou la mise à jour de données externes.

Pour créer un effet, nous importons le effect fonction de @angular/core et utiliser le effect() fonction pour définir le code qui s’exécute chaque fois que la valeur d’un signal change.

import { Component, signal, effect } from '@angular/core';

@Component({
  selector: 'app-logger',
  template: `
    <button (click)="increment()">Increment</button>
  `,
})
export class LoggerComponent {
  
  count = signal(0);

  constructor() {
    
    effect(() => {
      console.log(`The count is: ${this.count()}`);
    });
  }

  
  increment() {
    this.count.update(value => value + 1);
  }
}

Dans cet exemple :

• Le effect la fonction enregistre la valeur de count à la console chaque fois qu’il change.
• Les effets sont utiles pour tout code qui doit réagir aux changements du signal, comme la mise à jour manuelle du DOM ou le déclenchement de requêtes réseau.

Les principaux signaux dans Angular sont souvent signal, computed et effectqui sont utilisés respectivement pour créer un état réactif, dériver des valeurs et gérer les effets secondaires. Cependant, d’autres types de signaux jouent également un rôle important dans la création d’applications réactives. Ceux-ci incluent, mais ne sont pas limités à signaux d’entrée, signaux de sortie et afficher les requêteschacun servant un objectif distinct en améliorant la réactivité et l’interaction des composants. Depuis Angular v19, plusieurs de ces types de signaux ont maintenant été déplacé vers stable et nous passerons du temps dans un article de suivi à en discuter.

Avec Angular v19, l’API Signals introduit deux nouvelles fonctionnalités expérimentales actuellement en avant-première pour les développeurs : les signaux et les ressources liés.

Signaux liés [Experimental]

Un signal lié est un signal inscriptible qui dépend d’un autre état réactif. Souvent, dans les interfaces utilisateur, un état mutable est nécessaire qui suit toujours un état de niveau supérieurcomme dans une interface utilisateur de sélection où la « sélection actuelle » doit être réinitialisée si la liste des options change. Le linkedSignal primitive capture efficacement ce type de dépendance.

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

@Component({
  selector: 'app-linked-signal',
  template: `
    <p>Options: {{ options() }}</p>
    <p>Current Choice: {{ choice() }}</p>
    <button (click)="updateOptions()">Update Options</button>
  `,
})
export class LinkedSignalComponent {
  options = signal(['apple', 'banana', 'fig']);

  
  choice = linkedSignal(() => this.options()[0]);

  
  updateOptions() {
    this.options.set(['peach', 'kiwi']);
  }
}

Dans l’exemple ci-dessus :

• Le options le signal contient un tableau d’éléments.
• Le choice le signal est lié au premier élément du options liste par défaut.
• Quand options sont mis à jour, choice se réinitialise automatiquement au nouveau premier élément, démontrant la relation réactive entre les signaux.

Le linkedSignal primitif exprime la relation entre options et choice clairement, sans avoir besoin d’un effet pour gérer cette dépendance manuellement.

Ressources [Experimental]

L’API de ressources est une fonctionnalité expérimentale d’Angular 19 qui intègre des signaux avec une gestion asynchrone des données. Cela simplifie le travail avec les opérations asynchrones tout en conservant l’architecture réactive d’Angular.

Une ressource est constituée d’un demande fonction qui définit les données à récupérer en fonction des signaux, un chargeur qui effectue la tâche asynchrone lorsque la demande change, et un instance de ressource qui expose des signaux pour la valeur, l’état de chargement et l’état d’erreur, permettant à l’application de répondre de manière réactive à l’état des données.

Voici un exemple de code :

import { Component, signal, resource } from '@angular/core';

export class ResourceComponent {
  query = signal('initial query');
  data = resource({
    request: this.query,
    loader: async ({ request }) => {
      const response = await fetch(`https://api.example.com/data?q=${request}`);
      return response.json();
    },
  });

  
}

Le resource L’API récupère les données en fonction du query signal dans l’exemple ci-dessus. Le nouvellement créé data La ressource reflète les différents états de l’opération asynchrone, y compris le chargement, l’erreur et les données réellement récupérées. Quand le query Si la valeur change, la ressource déclenche automatiquement une nouvelle demande, gardant le composant synchronisé avec les données mises à jour.

Les API pour les signaux et les ressources liés sont encore au stade expérimental et Angular sollicite les commentaires des développeurs pour les affiner davantage. Si vous souhaitez essayer des signaux et des ressources liés, consultez la documentation officielle suivante : état dépendant avec linkedSignal et réactivité asynchrone avec les ressources.

Conclure

L’API Signals d’Angular fournit un moyen puissant et déclaratif de gérer l’état et la réactivité. Les développeurs peuvent contrôler le flux d’état dans leurs applications à l’aide de signaux, de signaux calculés et d’effets. Angular 19 s’appuie sur cela avec des fonctionnalités telles que les signaux d’entrée et de sortie, les requêtes d’affichage et les nouveaux signaux liés et l’API de ressources, améliorant encore les capacités réactives d’Angular.

Pour plus d’informations sur les signaux angulaires et les nouvelles fonctionnalités introduites dans Angular 19, assurez-vous de consulter les ressources suivantes :