Mester Angular Pipes: Lag Tilpassede & Innebygde Rør!

by
Tweet
Share
Share
Pin
0 Shares

I utviklingen av brukergrensesnitt med Angular, er begrepet «Pipes» noe man ofte støter på. Men hva er egentlig disse «Pipes», og hvordan fungerer de?

Angular er anerkjent som et av de fem mest etterspurte rammeverkene og teknologiene innen webutvikling, ifølge en undersøkelse fra StackOverflow.

Den modulære strukturen er en sentral årsak til Angulars popularitet blant utviklere, da den gjør det mulig å dele applikasjoner opp i små, gjenbrukbare komponenter. Dette fremmer enkel vedlikeholdelse og forbedrer samarbeidet. Andre faktorer som toveis databinding, kompatibilitet på tvers av nettlesere og det store økosystemet bidrar til at Angular regnes som et av de beste frontend-rammeverkene.

Denne artikkelen vil utforske hva Pipes i Angular er, deres anvendelsesområder, de forskjellige typene innebygde Pipes, og hvordan du kan utvikle dine egne, tilpassede Pipes i Angular.

Hva er Pipes i Angular?

Pipes er en funksjonalitet i Angular som brukes til å transformere og formatere data i en applikasjon. En Pipe mottar en verdi som input og returnerer en transformert verdi som output. Denne transformasjonen kan være så enkel som å formatere valuta eller dato, eller mer avansert som å sortere eller filtrere elementer i en liste.

Pipes er designet for å forbedre brukeropplevelsen ved å sørge for at dataene som presenteres for brukeren er lettfattelige og enkle å interagere med. I Angular finnes det både innebygde og tilpassede Pipes. Her er noen av grunnene til hvorfor du bør bruke Pipes i Angular:

  • Dataomforming: Hovedformålet med Pipes i Angular er å konvertere data til et presentasjonsklart format.
  • Økt lesbarhet og vedlikeholdbarhet: Siden de fleste applikasjoner utvikles gjennom samarbeid, er det viktig at koden er lett å forstå. Pipes bidrar til mer konsis og vedlikeholdbar kode.
  • Lokalisering: Pipes tillater lokalisering av data for å tilpasses målgruppen. For eksempel kan DatePipe brukes til å formatere datoer i henhold til brukerens regionale preferanser.
  • Datafiltrering og sortering: Med Pipes som OrderPipe eller FilterPipe, kan du enkelt sortere eller filtrere dataene dine.

Typer innebygde Pipes i Angular

Angular tilbyr en rekke innebygde Pipes for ulike formål. Her er noen eksempler du vil støte på under utviklingen:

  • PercentPipe: Formaterer tall som prosentstrenger.
  • DatePipe: Formaterer datoer basert på lokale regler.
  • LowerCasePipe: Konverterer all tekst til små bokstaver.
  • UpperCasePipe: Konverterer all tekst til store bokstaver.
  • CurrencyPipe: Formaterer tall som valutastrenger basert på lokale regler.
  • DecimalPipe: Formaterer tall til strenger med desimaltegn basert på lokale regler.

Lag tilpassede Pipes i Angular

I tillegg til de innebygde Pipes, lar Angular deg lage dine egne, tilpassede Pipes. Dette er spesielt nyttig når du trenger å utføre transformasjoner som de eksisterende Pipes ikke dekker. Dette utvider funksjonaliteten til applikasjonen din.

Forutsetninger

Før du starter å lage tilpassede Pipes i Angular, trenger du følgende:

  • Node.js kjøretidsmiljø for din Angular applikasjon. Du kan laste ned Node.js hvis du ikke har det installert.
  • Grunnleggende forståelse av hvordan Angular fungerer.
  • Angular CLI for å generere applikasjonen din og utføre ulike kommandoer. Du kan installere CLI ved å kjøre kommandoen:

npm install -g @angular/cli

Følg disse stegene for å bygge en tilpasset Pipe i Angular:

#1. Opprett et nytt Angular prosjekt. Bruk denne kommandoen for å starte:

ng new pipes

#2. Naviger til prosjektkatalogen og åpne prosjektet i din foretrukne kodeeditor. Jeg bruker VsCode. Du kan bruke disse kommandoene:

cd pipes && code .

Prosjektmappen din vil se omtrent slik ut:

#3. Lag en tilpasset Pipe. Du kan generere en ny Pipe ved å bruke kommandoen:

ng generate pipe custom-pipe

I prosjektmappen vil du se at to nye filer har blitt opprettet:

src/app/custom-pipe.pipe.spec.ts

src/app/custom-pipe.pipe.ts

#4. Definer logikken for din Pipe

Åpne filen custom-pipe.pipe.ts, og du vil finne denne koden:

La oss lage en enkel logikk der vår tilpassede Pipe splitter en streng inn i en array.

Du kan endre innholdet i filen til følgende:

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

#5. Registrer den tilpassede pipen. Åpne app.module.ts filen og se etter @NgModule dekoratoren.

Sørg for at filen inneholder følgende kode:

  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 { }

#6. Åpne app.component.html, slett alt innholdet og legg til følgende linje:

<header>{{ '12345' | customPipe }}</header>

Start serveren med følgende kommando:

ng serve

Dette er hva du ser i nettleseren:

Hvordan koble sammen Pipes i Angular

Pipeskjeding gir deg muligheten til å utføre flere transformasjoner i ett enkelt uttrykk. Vi bruker røroperatoren ( | ) for å koble sammen ulike Pipes i Angular.

Vi bruker Pipeskjeding av følgende årsaker:

  • Fremmer gjenbrukbarhet og modularitet: Hver Pipe kan designes for å utføre en bestemt transformasjon som kan brukes på nytt i hele applikasjonen.
  • Opprettholder ren kode: Skjeding bidrar til å holde koden kortfattet, ren og lett å lese.
  • Tilpasning: Du kan kombinere egendefinerte og innebygde Pipes for å tilpasse funksjonaliteten til dine spesifikke behov.
  • Komplekse transformasjoner: Istedenfor å bruke én Pipe til å utføre flere transformasjoner, kan du kjede flere Pipes for å oppnå komplekse resultater.

Du kan kombinere din egendefinerte Pipe med en annen eller en innebygd Pipe. For eksempel kan vi kombinere vår customPipe med en innebygd lowercase pipe. Dette kan gjøres på følgende måte:

<p>{{ dataValue | customPipe | lowercase }}</p>

Rene vs. Urene Pipes

Det finnes to typer Pipes i Angular: rene og urene.

Rene Pipes

I Angular er Pipes rene som standard. En ren Pipe forventes å returnere den samme verdien for den samme input. En slik Pipe er deterministisk og statsløs.

Angulars endringsdeteksjonsmekanisme optimaliserer automatisk rene Pipes. Angular kjører ikke transformasjonen på nytt før inputen til Pipen har endret seg.

Slik deklarerer du en Pipe som ren:

@Pipe({
  name: 'uppercase',
  pure: true
})

export class UppercasePipe {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Som du kan se, er egenskapen `pure` satt til `true` i @Pipe dekoratoren.

Urene Pipes

En uren Pipe utføres hver gang Angular oppdager en endring, uavhengig av om inputen er endret eller ikke. Urene Pipes passer godt i tilfeller hvor du trenger tilgang til applikasjonens nåværende tilstand. For eksempel er det å hente data fra en database eller å gjøre HTTP-forespørsler et godt eksempel på når du kan bruke urene Pipes.

Her er et eksempel på en uren Pipe:

@Pipe({
  name: 'sort',
  pure: false
})

export class SortPipe {
  transform(array: any[]): any[] {
    return array.sort();
  }
}

Her er egenskapen `pure` satt til `false` i @Pipe dekoratoren for å definere Pipen som uren.

Lage Pipes i Angular: Beste praksis

  • Bruk camelCase for dine Pipes: Hvis du har lagt merke til det, har jeg brukt `customPipe` som navn. Bruk alltid denne tilnærmingen når navnet på din Pipe har mer enn ett ord.
  • Test dine Pipes: Det at du har laget en Pipe, betyr ikke at den fungerer som den skal. Test alltid dine Pipes for å være sikker på at de fungerer korrekt. Du kan automatisere denne prosessen ved hjelp av forskjellige biblioteker.
  • Unngå komplekse Pipes: Du kan fristes til å lage en enkelt Pipe som utfører mange handlinger. Det anbefales imidlertid å lage flere, mindre Pipes som utfører én spesifikk oppgave.
  • Bruk rene Pipes: En ren Pipe vil alltid returnere samme resultat for samme input. Angular kan cache resultater for rene Pipes, noe som resulterer i forbedret ytelse og raskere responstid.

Ofte stilte spørsmål

Hvorfor trenger vi Pipes i Angular?

Pipes transformerer og formaterer data i en applikasjon. En Pipe tar en verdi som input og returnerer en transformert verdi som output. Transformasjonen kan være så enkel som å endre en valuta eller dato, eller mer komplisert, som å sortere eller filtrere elementer i en liste.

Hva er en tilpasset Pipe?

Dette er en brukerdefinert Pipe som du oppretter for å utføre tilpassede transformasjoner. Du kan kombinere en tilpasset Pipe med innebygde Pipes gjennom Pipeskjeding.

Gi eksempler på innebygde Pipes i Angular.

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe og PercentPipe.

Hva er Pipeskjeding?

Pipeskjeding er prosessen med å kombinere flere Pipes. Det gir deg muligheten til å utføre flere operasjoner i ett enkelt uttrykk. Vi bruker røroperatoren ( | ) for å koble sammen ulike Pipes i Angular. Du kan kjede tilpassede Pipes med andre eller kjede dem med innebygde Pipes.

Konklusjon

Vi tror at du nå har en god forståelse av hva Pipes er, og kan forklare dem i et jobbintervju, da dette er et vanlig spørsmål i Angular. Vi har også dekket de forskjellige innebygde Pipes og hvordan du kan lage egne tilpassede Pipes i Angular.

Egendefinerte Pipes er nyttige når du skal løse spesifikke behov eller ønsker å gjøre applikasjonen din mer dynamisk. Det er viktig at du forstår hvordan Angular fungerer for å lage og bruke egendefinerte Pipes på en effektiv måte.

Du kan også utforske ulike Angular UI-biblioteker for å skape en førsteklasses brukeropplevelse.