Intercepteurs fonctionnels et interface utilisateur Kendo pour Angular Loader

Découvrez comment migrer un intercepteur de classe existant vers un intercepteur fonctionnel et améliorer une application avec Kendo UI pour Angular Loader.

Angulaire 15 est venu avec de grandes améliorations. L’un d’eux est la façon dont les intercepteurs sont écrits. Ils sont passés des classes aux fonctions, le rendant amusant et facile, avec moins de passe-partout et aucun @Injectable plus – juste une fonction.

Dans un article précédent, nous avons appris à propos des intercepteurs et comment ils contribuent à simplifier la façon dont nous travaillons avec les requêtes et les réponses HTTP pour mettre en un seul endroit le contrôle de tous les appels d’API.

Aujourd’hui, nous allons apprendre à travers un scénario réel comment migrer un intercepteur de classe existant vers un intercepteur fonctionnel et améliorer une application en utilisant Progress Interface utilisateur Kendo pour angulaire Chargeur pour améliorer l’expérience de chargement dans nos applications.

Scénario

Dans l’article précédent, nous avons créé une application qui affichait une liste de joueurs et d’équipes NBA effectuant deux requêtes HTTP. Il affiche un message de chargement et le masque lorsque le serveur répond à l’aide d’un intercepteur de classe et d’un chargeur de base.

Pour créer un nouvel intercepteur fonctionnel et le combiner avec Kendo UI pour Angular Loader, nous devons suivre les étapes suivantes :

• Mettez à jour l’application vers Angular 15.
• Convertir l’application en sans module.
• Créez et enregistrez un intercepteur fonctionnel.
• Installez et enregistrez l’interface utilisateur Kendo pour Angular Loader.

Allons-y!!

Configurer le projet

Tout d’abord, clonez le projet et installez les dépendances en exécutant la commande suivante dans le terminal :

git clone https://github.com/danywalls/play-with-interceptors

Allez au play-with-interceptor répertoire et installez les dépendances.

Pour utiliser les modules fonctionnels, nous devons mettre à jour vers Angular 15 en utilisant le logiciel officiel Guide de mise à jour angulaire. C’est la meilleure façon de suivre les étapes d’une mise à jour, mais dans notre cas, nous pouvons simplement exécuter la commande suivante pour mettre à jour notre application vers la dernière version d’Angular :

ng update @angular/core@15 @angular/cli@15

Convertir en sans module

À partir d’Angular 15.2, nous disposons d’un moyen simple de convertir notre application en application sans module, en exécutant la commande ng g @angular/core:standalone. Il effectue pour nous les actions suivantes :

• Convertir le composant App en un Autonome.
• Retirer le app.module
• Mettre à jour le main.ts utiliser le bootstrapApplication fonction pour enregistrer les dépendances.

Exécutez la commande et choisissez l’option Bootstrap the application by using standalone API's

Il modifie le main.ts à l’aide de bootstrapApplication et enregistre le App.component et les intercepteurs basés sur les classes.

Il serait peut-être prudent, à ce stade, de lancer une npm install. Ensuite, nous pouvons enregistrer et exécuter la commande ng s -o pour ouvrir l’application dans le navigateur.

ng s -o est la version courte de ng serve -o

Parfait! Nous avons mis à jour l’application vers Angular 15 et sommes passés à un système sans module. Notre prochaine étape consiste à créer notre intercepteur fonctionnel.

Pour apprendre à travailler avec des composants autonomes et convertir vos applications angulaires en applications sans module, je vous recommande de consulter les ressources suivantes :

Intercepteurs fonctionnels dans Angular 15

Nous allons créer notre premier intercepteur fonctionnel. Cependant, nous voulons voir à quoi ressemble l’intercepteur de classe avant de le faire.

Ouvrez le projet avec VS Code ou votre éditeur préféré, et ouvrez le loader.interceptor.tsqui est une classe précédée du @Injectable décorateur et utilise le service de chargement.

Lorsque la requête démarre, elle appelle le show() méthode. Lorsque l’observable émet, il canalise les données en utilisant le finalize opérateur de RxJS et appelle le hide méthode.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';
import { finalize, Observable } from 'rxjs';
import { LoaderService } from '../services/loader.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
  constructor(private loader: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loader.show();
    return next.handle(req).pipe(
      finalize(() => {
        this.loader.hide();
    }));
  }
}

Il faut faire de même pour l’intercepteur fonctionnel pour en créer un nouveau en utilisant Angular/CLI avec le flag --functional.

ng g interceptor interceptors/fn-loader --functional

CREATE src/app/interceptors/fn-loader.interceptor.spec.ts (493 bytes)

CREATE src/app/interceptors/fn-loader.interceptor.ts (153 bytes)

La CLI a généré un modèle de base pour l’intercepteur en utilisant le HttpInterceptorFn tapez pour notre intercepteur de fonction :

Pour que cela fonctionne, comme notre intercepteur de classe, nous devons injecter le service Loader, en utilisant le inject fonction et appelez le show méthode, en utilisant la finalize opérateur de RxJS et en appelant le hide méthode.

Le code final ressemble à ceci :

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { finalize } from 'rxjs';
import { LoaderService } from '../services/loader.service';

export const fnLoaderInterceptor: HttpInterceptorFn = (req, next) => {
  let loaderService = inject(LoaderService);
  loaderService.show();
  return next(req).pipe(
    finalize(() => {
      loaderService.hide();
    })
  );
};

En savoir plus sur de générer et injecter.

Enregistrer l’intercepteur

Angular 15 fournit une nouvelle fonction appelée provideHttpClient, ce qui simplifie l’enregistrement du client HTTP dans l’application. Il présente également le withInterceptors fonction, vous permettant d’ajouter des intercepteurs fonctionnels au client HTTP.

Pour enregistrer notre intercepteur fonctionnel, ouvrez le main.ts et localisez le bootstrapApplication. Dans la section fournisseurs, supprimez l’intercepteur de classe existant (supprimez les lignes 18 et 19). Importer provideHttpClient, withInterceptors et fnLoaderInterceptor pour vous inscrire dans l’application.

Si vous vous sentez fringant, vous pouvez nettoyer vos importations. Votre nouveau main.ts devrait donc ressembler à ceci :

import { enableProdMode, importProvidersFrom } from  '@angular/core';
import { environment } from  './environments/environment';
import { AppComponent } from  './app/app.component';
import { BrowserModule, bootstrapApplication } from  '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from  '@angular/common/http';
import { fnLoaderInterceptor } from  './app/interceptors/fn-loader.interceptor';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserModule),
    provideHttpClient(withInterceptors([fnLoaderInterceptor])),
  ],
}).catch((err) =>  console.error(err));  

Une fois sauvegardé, tout continue de fonctionner grâce à notre nouvel intercepteur fonctionnel.

Note: Les intercepteurs fonctionnels peuvent coexister avec des intercepteurs basés sur les classes dans les applications modulaires, permettant une transition fluide et progressive pour l’application.

En savoir plus sur fournirHttpClient et avecIntercepteurs.

Installez l’interface utilisateur Kendo pour Angular Loader

L’interface utilisateur Kendo pour Angular Chargeur est un indicateur visuel qui affiche un temps d’attente indéterminé, informant les utilisateurs de l’état des processus en cours, tels que le chargement d’une candidature, la soumission d’un formulaire, l’enregistrement de mises à jour ou la récupération de données.

Le Loader fait partie de Kendo Angular Indicateursqui fournit un ensemble de composants (Badge, Skeleton et Loader) à utiliser avec d’autres composants ou comme éléments de base pour nos applications.

Installer kendo-angular-indicators dans le projet en utilisant les schémas :

ng add @progress/kendo-angular-indicators

Trouble au paradis

Si vous rencontrez des difficultés pour utiliser le schéma ng add, vous pouvez toujours effectuer une installation manuelle. (Instructions d’installation manuelle de l’indicateur de chargement trouvées ici.) Cependant, comme nous allons sans module, il existe quelques différences dans les détails d’installation.

1. Essentiellement, vous devez installer le package d’indicateurs et toutes ses dépendances :

npm install --save @progress/kendo-angular-indicators @progress/kendo-angular-l10n @progress/kendo-angular-common @progress/kendo-licensing

2. Ensuite, ajoutez le module de chargement et le module d’indicateur aux importations de composants d’application :

imports: [NgFor, NgIf, AsyncPipe, LoaderModule, IndicatorsModule]

3. Ensuite, nous devons ajouter le style des indicateurs en choisissant un thème parmi les thèmes disponibles de l’interface utilisateur Kendo : Kendo UI par défaut,
   Matériel d’interface utilisateur Kendo, Bootstrap de l’interface utilisateur de Kendo ou Flux de l’interface utilisateur du Kendo. Pour commencer à utiliser un thème, installez son package en exécutant la commande :

npm install --save @progress/kendo-theme-default

4. Enfin, enregistrez le thème à charger par angular.json. Dans le processus de construction, nous devons ajouter dans la section style : node_modules/@progress/kendo-theme-default/dist/all.css.

Consultez mon dépôt GitHub à la fin de l’article pour connaître le code de l’application entièrement terminé.

Utilisation de l’interface utilisateur Kendo pour Angular Loader

La dernière étape consiste à utiliser le kendo-loader au lieu du courant loading message dans le modèle app.component. Depuis le AppComponent est autonome, il faut importer le IndicatorsModule et LoaderModule dans la section importations pour nous permettre d’utiliser le kendo-loader dans le modèle.

Le chargeur fournit un ensemble d’options d’apparence prédéfinies, telles que différents types d’animation, tailles et couleurs de thème.

• Type de chargeur: Différentes animations peuvent être configurées en utilisant le type propriété d’entrée. Les valeurs de type disponibles sont : pulsing (défaut), infinite-spinner et converging-spinner.

• Couleur du thème: Le Loader vous permet de spécifier des couleurs de thème prédéfinies. Le disponible themeColor les valeurs sont : primary (défaut), secondary,
  tertiary, info, success,
  warning, error, dark, light et inverse.

• Taille: Le Loader vous permet de définir différentes tailles. Les valeurs de taille disponibles sont : small, medium (par défaut) et large.

En savoir plus sur la façon de personnaliser l’apparence du Loader.

Ajouter le div avec la classe loader-wrapperet personnalisez le chargeur avec vos préférences comme size="large", themeColor="warning" et type de chargeur
infinite-spinner.

<div class="loading" *ngIf="loading$ | async">
<kendo-loader
type="infinite-spinner"
themeColor="warning"
size="large"
>
</div>

Enregistrez les modifications et exécutez l’application.

Parfait! Nous montrons une superbe animation en utilisant le Kendo Angular Loader combiné à l’intercepteur fonctionnel ! Super!!!

Conclusion

Nous avons appris à créer facilement un intercepteur fonctionnel avec Angular CLI et à le combiner avec Kendo UI pour Angular Loader pour améliorer l’expérience de chargement dans nos applications. Mais même s’il est très simple à utiliser, il offre un haut degré de personnalisation et de flexibilité.

Kendo UI pour Angular offre une large gamme d’options d’apparence et une facilité d’intégration dans nos composants, nous pouvons donc l’utiliser dans notre application pour améliorer l’expérience utilisateur.

Ce n’est que le début de ce que vous pouvez faire avec Kendo UI pour Angular Loader. Vérifiez documentation officielle avec de nombreux exemples et personnalisations, et n’oubliez pas que vous pouvez essayez Kendo UI gratuitement.

Ressources