Aangepaste pijpen maken in Angular

Pipes zijn een krachtige Angular-functie waarmee je gegevens in je applicatie kunt transformeren en opmaken. Ze bieden een handige manier om gegevens te manipuleren voordat ze worden weergegeven aan de gebruiker, waardoor je applicatie dynamischer en gebruiksvriendelijker wordt.

Angular biedt een reeks vooraf gedefinieerde pipes die bekend staan als “ingebouwde pipes”, waaronder DatePipe, CurrencyPipe en UpperCasePipe. Daarnaast hebben ontwikkelaars de flexibiliteit om hun eigen op maat gemaakte pipes te ontwerpen waarmee ze informatie kunnen manipuleren volgens specifieke vereisten.

Uw Angular-project opzetten

Om effectief gepersonaliseerde pipes binnen het Angular-framework op te zetten, is een goed begrip van het pipingmechanisme noodzakelijk. Voordat u verder gaat, moet u ervoor zorgen dat u bekend bent met de pipe-implementatie in Angular. De eerste vereiste voor het opzetten van een Angular project is dat de Angular Command Line Interface (CLI) op uw systeem is geïnstalleerd. Dit kan worden bereikt door gebruik te maken van Node Package Manager (npm).

Om de Angular Command Line Interface (CLI) te installeren, voert u de volgende instructie uit:

 npm install -g @angular/cli

Om een Angular-project te starten met een specifieke versie van het framework en de ontwikkelomgeving in te stellen, voert u de volgende stappen uit in uw terminal of opdrachtprompt:

 ng new my-app

Nadat u het project hebt opgezet, gaat u naar de map met het project in uw geïntegreerde ontwikkelomgeving (IDE) en start u de toepassing daarbinnen.

Een aangepaste pijp maken

Om een Angular-applicatie te ontwikkelen, moet u een basis leggen door het project op te zetten en de vereiste afhankelijkheden te configureren. Zodra dit proces is voltooid, bestaat de volgende stap uit het maken van een aangepast filter door gebruik te maken van de Angular Command Line Interface (CLI). Hiermee kan een uniek onderdeel worden gemaakt dat kan worden geïntegreerd in de sjablonen van de applicatie om specifieke taken uit te voeren of gegevens op een bepaalde manier te manipuleren.

Voer de volgende instructie uit binnen de respectieve projectdirectory met behulp van een terminalinterface:

 ng generate pipe customPipe

De uitvoering van deze opdracht resulteert in de aanmaak van twee bestanden, namelijk “custom-pipe.pipe.ts” en “custom-pipe.pipe.spec.ts”, in de map “src/app”. De eerste is een TypeScript-bestand dat de implementatie van uw aangepaste pipe bevat, terwijl de tweede dient als een testomgeving voor het verifiëren van de functionaliteit van deze aangepaste pipe door middel van verschillende testscenario’s.

Binnen het script custom-pipe.pipe.ts komt men de volgende reeks programmeerinstructies tegen:

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

De huidige code importeert de Pipe decorator en de PipeTransform interface van de @angular/core module. De eerder genoemde Pipe decorator is verantwoordelijk voor het afbakenen van de metadata die betrekking hebben op de pipe, terwijl de pipe’s class voldoet aan de eerder genoemde PipeTransform interface.

In de implementatie van de klasse CustomPipePipe voldoen we aan de vereisten van de interface PipeTransform door een uitvoering van de transform-methode te bieden. Deze methode heeft de essentiële taak om een transformatie op de invoergegevens uit te voeren.

De methode “transform” bevat in totaal twee invoervariabelen, namelijk de parameter “value”, die de transformatiewaarde van de pijp aangeeft, en de parameter “args”, die dient als toewijzing voor eventuele aanvullende specificaties die men wenst op te nemen.

Als je de fundamentele structuur van het bestand custom-pipe.pipe.ts begrijpt, kun je het bijgeleverde codefragment als volgt vervangen:

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  transform(value: string): string[] {
    return value.split('');
  }
}

In dit stukje code accepteert de functie transform een waarde parameter van het type string , die als argument aan de methode wordt doorgegeven. Deze functie gebruikt vervolgens de methode splitsen om de invoerstring te verdelen in een matrix van afzonderlijke tekens en retourneert deze matrix uiteindelijk.

De aangepaste pijp in je toepassing integreren

Gefeliciteerd! U hebt met succes een gepersonaliseerde pipe gemaakt die naadloos kan worden geïntegreerd in uw Angular-sjablonen. Voordat u de aangepaste pipe in uw project kunt gebruiken, moet u deze eerst opnemen en registreren in uw app.module.ts bestand. Om dit te bereiken, vervangt u simpelweg de huidige inhoud van het bestand app.module.ts door het volgende codefragment:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPipePipe } from './custom-pipe.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Men kan nu inderdaad de pijp opnemen in het bestand app.component.html van de sjabloon door de bovengenoemde opmaak op te nemen, wat de implementatie van de gewenste functionaliteit vergemakkelijkt terwijl de gevestigde standaarden voor webontwikkeling en beste praktijken worden nageleefd.

 <p>{{ 'apple' | CustomPipe }}</p>

In deze illustratie wordt de CustomPipe gebruikt om de individuele tekens van de string ‘apple’ om te zetten in een array.

Test uw aangepaste pijplijn

Om de functionaliteit van uw op maat gemaakte pijplijn te observeren, moet u de Angular-ontwikkelingsserver starten door het bovengenoemde terminalcommando uit te voeren.

 ng serve

Open uw browser en navigeer naar http://localhost:4200 . Je zou de getransformeerde string op de pagina moeten zien:

Til uw Angular-applicaties naar het volgende niveau

Pipelines dienen als een eminente bron binnen het Angular-framework, waarmee u informatie in uw applicatie kunt manipuleren en herstructureren. Door op maat gemaakte pijplijnen te ontwikkelen, kunt u de veelzijdigheid van uw software vergroten en deze dynamischer maken.

Om je vaardigheid met Angular te vergroten, is het essentieel om het routingmechanisme te begrijpen. Routebeheer speelt een integrale rol bij het sturen van de gebruikersnavigatie door de applicatie, waardoor zowel de bruikbaarheid als de efficiëntie van toepassingen met één pagina worden verbeterd.