Programmation fonctionnelle en Angular : Exploration de l'injection et des ressources

L'écosystème évolutif d'Angular évolue vers un paradigme de programmation plus fonctionnelle et réactive. Avec des outils tels que Signals, l'API de ressources et la fonction d'injection, les développeurs peuvent simplifier la logique des applications, réduire le passe-partout et améliorer la réutilisabilité.

Cet article de blog explore comment les fonctionnalités modernes d'Angular permettent aux développeurs de gérer la logique asynchrone de manière propre, déclarative et réactive.

Principaux avantages des fonctionnalités fonctionnelles d'Angular

1. Fonctions réutilisables avec injection de dépendances : La fonction d'injection permet aux développeurs de créer des fonctions autonomes qui s'intègrent de manière transparente au système d'injection de dépendances d'Angular. Cela dissocie la logique métier des composants et des services, rendant les fonctions réutilisables dans toute l'application.
2. Gestion simplifiée des états : gérez automatiquement les états de chargement, de réussite et d'erreur.
3. Réactivité améliorée : met automatiquement à jour les données lorsque les dépendances changent.
4. Patron réduit : concentrez-vous sur la logique, pas sur les abonnements manuels ou la gestion du cycle de vie.
5. Lisibilité améliorée : les modèles déclaratifs facilitent la compréhension des transitions d'état de l'interface utilisateur.

---

Étape 1 : L'API et le modèle de données

Pour cet exemple, nous récupérerons les publications d'une API REST. Chaque message a la structure suivante :

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

L'URL de base de l'API est fournie via un InjectionToken :

import { InjectionToken } from '@angular/core';

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  providedIn: 'root',
  factory: () => 'https://jsonplaceholder.typicode.com',
});

---

Étape 2 : Définir les fonctions de récupération de données

1. Approche traditionnelle basée sur RxJS

La fonction suivante récupère une publication par son identifiant à l'aide du HttpClient d'Angular :

import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { Observable } from 'rxjs';
import { API_BASE_URL } from '../tokens/base-url.token';
import { Post } from './post.model';

export function getPostById(postId: number): Observable<Post> {
  const http = inject(HttpClient);
  const baseUrl = inject(API_BASE_URL);

  return http.get<Post>(`${baseUrl}/posts/${postId}`);
}

Pour utiliser cette fonction dans un composant, vous pouvez la lier à un observable et afficher le résultat avec le tube async :

import { AsyncPipe, JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { getPostById } from './shared/posts.inject';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, JsonPipe],
  template: `
    @if (post$ | async; as post) {
      <p>{{ post | json }}</p>
    } @else {
      <p>Loading...</p>
    }
  `,
})
export class AppComponent {
  private readonly postId = signal(1);

  protected readonly post$ = getPostById(this.postId());
}

Limites

• Problèmes de réactivité : les changements de signal (par exemple, postId) ne déclenchent pas automatiquement une nouvelle récupération.
• Gestion manuelle des erreurs : vous devez écrire une logique personnalisée pour le chargement et les états d'erreur.

---

2. Approche API de ressources basée sur le signal

L'API Resource simplifie la réactivité et la gestion des états. Voici une fonction qui utilise l'API Resource :

import { inject, resource, ResourceRef, Signal } from '@angular/core';
import { API_BASE_URL } from '../tokens/base-url.token';

export function getPostByIdResource(postId: Signal<number>): ResourceRef<Post> {
  const baseUrl = inject(API_BASE_URL);
  return resource<Post, { id: number }>({
    request: () => ({ id: postId() }),
    loader: async ({ request, abortSignal }) => {
      const response = await fetch(`${baseUrl}/posts/${request.id}`, {
        signal: abortSignal,
      });
      return response.json();
    },
  });
}

Cette approche :

• Recharge automatiquement les données lorsque le postId change.
• Gère les états de chargement, d'erreur et de réussite de manière déclarative.

Dans un composant :

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

---

Principales fonctionnalités de l'API de ressources

Gestion déclarative de l'état

L'API Resource gère automatiquement les états tels que le chargement, l'erreur et la réussite. Cela supprime le besoin d'indicateurs personnalisés et garantit des modèles plus propres.

Réactivité

L'API Resource est étroitement intégrée à Signals. Les modifications apportées à un signal déclenchent automatiquement la fonction de chargement, garantissant ainsi que votre interface utilisateur reflète toujours les dernières données.

Gestion des erreurs

Les erreurs sont centralisées et exposées via .error(), simplifiant ainsi la gestion des erreurs dans les modèles.

Gestion automatique du cycle de vie

L'API annule les requêtes en cours lorsque les dépendances (par exemple, postId) changent, évitant ainsi les conditions de concurrence et les données obsolètes.

---

RxJS vs Resource API : une comparaison rapide

Feature	RxJS (Observable)	Resource API (Signal)
State Management	Manual	Automatic (loading, error)
Reactivity	Requires custom setup	Built-in
Error Handling	Manual	Declarative
Lifecycle Handling	Requires cleanup	Automatic

---

Conclusion

La fonction d'injection d'Angular et l'API de ressources basées sur le signal représentent un pas en avant dans la simplification de la logique asynchrone. Avec ces outils, les développeurs peuvent :

1. Dissocier la logique métier des composants.
2. Écrivez des fonctions réutilisables qui s'intègrent parfaitement au système d'injection de dépendances d'Angular.
3. Éliminer le passe-partout pour la gestion de l'État.
4. Créez facilement des applications réactives et déclaratives.

L'API Resource, en particulier, est idéale pour les projets Angular modernes, offrant une réactivité automatique et une gestion déclarative de l'état. Commencez à explorer ces fonctionnalités dès aujourd'hui et faites passer votre développement angulaire au niveau supérieur !

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!