Hvordan lage tilpassede rør i vinkel for elegant datavisning

0 Shares

Pipes in Angular er en av setningene du vil møte ofte når du bygger brukergrensesnitt ved hjelp av Angular. Hva er de, og hvordan fungerer de?

Angular er blant de 5 mest ønskede nettrammene og teknologiene basert på StackOverflow-undersøkelse.

Den modulære arkitekturen gjør Angular til en elskling for utviklere, og lar dem dele opp applikasjonen i små, gjenbrukbare komponenter. En modulær kodebase er enkel å vedlikeholde og forbedrer også samarbeidet. Toveis databinding, kompatibilitet på tvers av nettlesere og det store økosystemet og fellesskapet er andre grunner til at Angular er blant de beste frontend-rammeverkene.

Denne artikkelen diskuterer hva Pipes in Angular er, deres brukstilfeller, ulike typer innebygde Pipes, og hvordan du lager tilpassede Pipes i Angular.

Innholdsfortegnelse

Hva er rør i Angular?

Pipes er en funksjon i Angular som transformerer og formaterer data i en applikasjon. Rør tar ganske enkelt en verdi som inngang og returnerer en transformert verdi som utgang. Transformasjon varierer, og det kan være så enkelt som å transformere en valuta eller dato eller sortere eller filtrere elementer fra en liste.

Pipes er designet for å forbedre brukeropplevelsen når de transformerer data og returnerer verdier som brukerne enkelt kan konsumere og samhandle med. Rør i Angular kan enten være innebygd eller tilpasset. Uavhengig av type, er dette noen av grunnene til at du bør bruke rør i Angular:

Transform data: Dette er hovedbruken av Pipes i Angular. Pipes er der for å transformere data slik at det som vises for brukerne er lesbart.
Kodelesbarhet og vedlikeholdbarhet: De fleste applikasjoner bygges gjennom samarbeid. Som sådan må du sørge for at de andre teammedlemmene forstår koden din. Rør gjør koden din mer kortfattet og enkel å vedlikeholde.
Lokalisering: Du kan lokalisere data for å passe målmarkedet. For eksempel finnes det forskjellige datoformater. Dermed kan du bruke DatePipe til å formatere data for å passe brukernes lokalitet.
Sortering og filtrering av data: Du kan bruke OrderPipe eller FilterPipe til å sortere eller filtrere dataene dine.

Typer innebygde rør i kantet

Angular har ulike innebygde rør designet for ulike formål. Dette er eksempler på noen du vil møte i din utviklingsreise.

PercentPipe: Dette er pipen som skal brukes når du vil transformere et tall til en prosentstreng.
DatePipe: Dette er pipen som skal brukes til å formatere en datoverdi basert på lokale regler.
LowerCasePipe: Transformer all teksten din til små bokstaver ved hjelp av denne pipen.
UpperCasePipe: Du kan bruke denne pipen når du vil endre all teksten til store bokstaver.
CurrencyPipe: Det er et perfekt valg når du vil endre et tall til en valutastreng basert på lokale regler.
Desimalrør: Dette røret bruker lokale regler for å transformere et tall til en streng med et desimaltegn.

Hvordan lage bindestreker, En bindestreker og Em bindestreker i Google Docs

Lag tilpassede rør i Angular

Vi har sett innebygde rør og deres brukstilfeller. Angular støtter imidlertid tilpassede rør. Slike rør er viktige når man skal få til noe de innebygde rørene ikke kan oppnå. Slike rør lar deg utvide funksjonaliteten til applikasjonen din.

Forutsetninger

Før du begynner å bygge tilpassede rør i Angular, trenger du følgende:

Node.js kjøretidsmiljø for Angular-applikasjonen din. Du kan last ned Node.js hvis du ikke har det.
Forståelse av hvordan Angular fungerer
Kantet CLI for å lage applikasjonen din og kjøre forskjellige kommandoer. Du kan installere den ved å bruke denne kommandoen;

npm install -g @angular/cli

Følg disse trinnene for å bygge et tilpasset rør i Angular:

#1. Opprett et nytt Angular-prosjekt. Du kan bruke denne kommandoen for å komme i gang:

ng nye rør

#2. Endre katalogen til den opprettede appen din og åpne den i din favorittkoderedigerer. Jeg bruker VsCode. Du kan kjøre disse kommandoene

cd rør && kode .

Prosjektmappen din vil ligne denne;

#3. Lag et tilpasset rør. Du kan bruke denne kommandoen til å generere et nytt tilpasset rør:

ng generere rør tilpasset rør

Hvis du sjekker prosjektmappen din, vil du legge merke til at disse to filene er opprettet:

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

src/app/custom-pipe.pipe.ts

#4. Definer rørets logikk

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

Vi kan nå lage en enkel logikk der vår egendefinerte pipe legges til en streng.

Du kan endre innholdet i filen til å være;

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

#5. Registrer det tilpassede røret. Åpne app.module.ts-filen og sjekk at du har @NgModule og deretter dekorasjoner.

Slik utfører du Bethesda-kontogjenoppretting

Bekreft at denne filen har denne koden;

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 denne linjen;

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

Kjør serveren med denne kommandoen;

ng tjene

Dette er hva som vises i nettleseren din;

Hvordan kjetting rør i kantet

Rørkjeding lar deg utføre flere operasjoner med ett enkelt uttrykk. Vi bruker røroperatøren ( | ) for å kombinere ulike rør i Angular.

Vi kan kjede rør av følgende grunner:

Kjede rør fremmer kodegjenbrukbarhet og modularitet: Du kan stille inn hvert rør til å utføre en spesifikk transformasjon du kan gjenbruke i applikasjonen din.
Oppretthold ren kode: Kjedemaler lar deg holde koden din kortfattet, ren og lesbar.
Tilpasning: Rørkjeding lar deg kombinere tilpassede og innebygde rør og tilpasse dem for å passe dine behov.
Komplekse transformasjoner: I stedet for å sette ett rør til å utføre flere transformasjoner, kan du sette opp flere rør for å oppnå komplekse transformasjoner.

Du kan kjede ditt tilpassede rør med et annet eller et innebygd rør. Jeg kan lenke røret vi laget tidligere customPipe med en innebygd liten pipe. Slik kan vi gjøre det:

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

Rene vs. urene rør

Det er to typer rør i Angular: rene og urene rør

Rene rør

Rør i Angular er rene som standard. Et rent rør forventes å returnere samme utgang for samme inngang. Et slikt rør forventes å være deterministisk og statsløst.

Angulars endringsdeteksjonsmekanisme optimerer automatisk rene rør. Angular kjører ikke rørtransformasjonen på nytt med mindre inngangen til et rent rør endres.

Slik erklærer du en pipe som ren;

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

})

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

Som du kan se, har vi satt den rene egenskapen til @Rørdekoratøren til sann.

Urene rør

Et urent rør vil utføres hver gang Angular oppdager en endring. En slik endring trenger ikke være fra inngangene. Urene rør passer til situasjoner som krever tilgang til appens nåværende tilstand. Å få tilgang til en database eller lage en HTTP-forespørsel er perfekte eksempler på hvor du kan bruke urene rør.

Natural Language Processing (NLP) Algoritmer forklart

Dette er et eksempel på en uren pipe:

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

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

Som du kan se, har vi satt den rene egenskapen til @Pipe-dekoratøren til å falskt gjøre pipen vår uren.

Lage rør i vinkel: Beste praksis

camelCase dine rør: Hvis du har notert, har jeg kalt pipen min customPipe. Bruk alltid denne tilnærmingen hvis pipen din har mer enn ett ord.
Test rørene dine: Å lage et rør garanterer ikke at det vil fungere. Test alltid rørene dine for å sikre at de fungerer som forventet. Du kan automatisere denne prosessen ved å bruke ulike biblioteker.
Unngå komplekse rør: Det kan hende du vil at ett rør skal utføre mer enn én handling. Dette er imidlertid ikke en god tilnærming, og den beste praksisen er å lage forskjellige rør for å utføre forskjellige handlinger.
Bruk rene rør: Et rent rør vil alltid returnere samme utgang fra samme inngang. Angular kan cache resultater for rene rør, noe som resulterer i en forbedring i ytelse og responstid.

Vanlige spørsmål

Hvorfor trenger vi Pipes in Angular?

Rør transformerer og formaterer data i en applikasjon. Rør tar en verdi som inngang og returnerer en transformert verdi som utgang. Transformasjon varierer, og det kan være så enkelt som å transformere en valuta eller dato eller sortere eller filtrere elementer fra en liste.

Hva er et tilpasset rør?

Dette er en brukerdefinert pipe som du oppretter for å utføre tilpassede transformasjoner. Du kan kombinere et tilpasset rør med innebygde rør gjennom rørkjetting.

Gi eksempler på innebygde rør i Angular.

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe og PercentPipe

Hva er rørkjetting?

Rørkjetting er prosessen med å kombinere flere kjeder. Rørkjeding lar deg utføre flere operasjoner med ett enkelt uttrykk. Vi bruker røroperatøren ( | ) for å kombinere ulike rør i Angular. Du kan kjede tilpassede rør med andre eller kjede dem med innebygde rør

Konklusjon

Vi tror du nå kan beskrive rør i ditt neste intervju, da dette er et vanlig spørsmål i Angular ofte stilte spørsmål. Vi har også dekket de forskjellige innebygde rørene og hvordan du lager tilpassede rør i Angular.

Tilpassede rør vil være nyttige når du ønsker å imøtekomme spesifikke behov eller gjøre applikasjonen mer dynamisk. Du må imidlertid forstå hvordan Angular fungerer under panseret for å lage og bruke tilpassede rør.

Du kan også utforske noen Angular UI-biblioteker for å skape en brukeropplevelse i verdensklasse.