Cum se creează conducte personalizate în Angular pentru afișarea elegantă a datelor

Pipes in Angular este una dintre expresiile pe care le veți întâlni des pe măsură ce construiți interfețe cu utilizatorul folosind Angular. Ce sunt acestea și cum funcționează?

Angular se numără printre primele 5 cadre și tehnologii web cele mai dorite bazate pe Sondaj StackOverflow.

Arhitectura modulară face din Angular un dragut pentru dezvoltatori, permițându-le să împartă aplicația în componente mici, reutilizabile. O bază de cod modulară este ușor de întreținut și, de asemenea, îmbunătățește colaborarea. Legarea bidirecțională a datelor, compatibilitatea între browsere și ecosistemul mare și comunitatea sunt alte motive pentru care Angular se numără printre cele mai bune framework-uri front-end.

Acest articol discută ce sunt țevile în Angular, cazurile lor de utilizare, diferitele tipuri de țevi încorporate și cum să creați țevi personalizate în Angular.

Cuprins

Ce sunt țevile în unghiular?

Conductele sunt o caracteristică din Angular care transformă și formatează datele într-o aplicație. Conductele pur și simplu iau o valoare ca intrare și returnează o valoare transformată ca ieșire. Transformarea variază și poate fi la fel de simplă ca transformarea unei monede sau a unei date sau sortarea sau filtrarea articolelor dintr-o listă.

Conductele sunt concepute pentru a îmbunătăți experiența utilizatorului, deoarece transformă datele și returnează valori pe care utilizatorii le pot consuma și cu care pot interacționa cu ușurință. Țevile în Angular pot fi fie încorporate, fie personalizate. Indiferent de tip, acestea sunt câteva dintre motivele pentru care ar trebui să utilizați țevi în Angular:

Transformați datele: aceasta este principala utilizare a Pipes în Angular. Conductele sunt acolo pentru a transforma datele, astfel încât ceea ce este afișat utilizatorilor să fie lizibil.
Lizibilitatea și mentenabilitatea codului: Majoritatea aplicațiilor sunt construite prin colaborare. Ca atare, trebuie să vă asigurați că ceilalți membri ai echipei vă înțeleg codul. Conductele vă fac codul mai concis și mai ușor de întreținut.
Localizare: puteți localiza datele pentru a se potrivi pieței țintă. De exemplu, există diferite formate de dată. Astfel, puteți utiliza DatePipe pentru a formata datele în funcție de localitatea utilizatorilor.
Sortarea și filtrarea datelor: puteți utiliza OrderPipe sau FilterPipe pentru a sorta sau filtra datele.

10 moduri de a vă personaliza contul Slack

Tipuri de țevi încorporate în unghiular

Angular are diverse conducte încorporate concepute pentru scopuri diferite. Acestea sunt exemple de unele pe care le vei întâlni în călătoria ta de dezvoltare.

PercentPipe: Aceasta este conducta de utilizat atunci când doriți să transformați un număr într-un șir procentual.
DatePipe: Acesta este canalul de utilizat pentru a formata o valoare a datei pe baza regulilor locale.
LowerCasePipe: Transformați tot textul în minuscule folosind acest pipe.
UpperCasePipe: Puteți utiliza acest pipe atunci când doriți să schimbați tot textul în majuscule.
CurrencyPipe: Este o alegere perfectă atunci când doriți să schimbați un număr într-un șir de monedă pe baza regulilor locale.
DecimalPipe: Această conductă utilizează reguli locale pentru a transforma un număr într-un șir cu un punct zecimal.

Creați țevi personalizate în Angular

Am văzut țevi încorporate și cazurile lor de utilizare. Cu toate acestea, Angular acceptă țevi personalizate. Astfel de țevi sunt importante atunci când doriți să obțineți ceva ce țevile încorporate nu pot realiza. Astfel de conducte vă permit să extindeți funcționalitatea aplicației dvs.

Cerințe preliminare

Înainte de a începe să construiți țevi personalizate în Angular, aveți nevoie de următoarele:

Mediul de rulare Node.js pentru aplicația dvs. Angular. Puteți descărcați Node.js daca nu il ai.
Înțelegerea modului în care funcționează Angular
CLI unghiular pentru a vă crea aplicația și a rula diferite comenzi. Îl puteți instala folosind această comandă;

npm install -g @angular/cli

Urmați acești pași pentru a construi o conductă personalizată în Angular:

#1. Creați un nou proiect Angular. Puteți folosi această comandă pentru a începe:

ng țevi noi

#2. Schimbați directorul în aplicația creată de dvs. și deschideți-o în editorul de cod preferat. Eu folosesc VsCode. Puteți rula aceste comenzi

conducte cd && cod .

Dosarul dvs. de proiect va fi similar cu acesta;

#3. Creați o conductă personalizată. Puteți folosi această comandă pentru a genera o nouă conductă personalizată:

ng generate pipe custom-pipe

Dacă verificați folderul proiectului, veți observa că aceste două fișiere au fost create:

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

src/app/custom-pipe.pipe.ts

#4. Definiți logica conductei

Deschideți fișierul custom-pipe.pipe.ts și veți găsi acest cod:

Acum putem crea o logică simplă în care conducta noastră personalizată este atașată unui șir.

Puteți schimba conținutul fișierului dvs. pentru a fi;

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

#5. Înregistrați conducta personalizată. Deschideți fișierul app.module.ts și verificați dacă aveți @NgModule și apoi decorațiuni.

Cum să limitați timpul de ecran pe o Xbox One

Confirmați că acest fișier are acest cod;

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. Deschideți app.component.html, ștergeți tot conținutul și adăugați această linie;

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

Rulați serverul folosind această comandă;

ng servi

Acesta este ceea ce va fi afișat în browserul dvs.;

Cum să înlănțuiți țevile în unghiular

Înlănțuirea țevilor vă permite să efectuați mai multe operații cu o singură expresie. Folosim operatorul de conducte ( | ) pentru a combina diferite conducte în Angular.

Putem înlănțui țevi din următoarele motive:

Conductele înlănțuite promovează reutilizarea codului și modularitatea: puteți seta fiecare conductă să efectueze o anumită transformare pe care o puteți reutiliza în aplicația dvs.
Mențineți codul curat: șabloanele de înlănțuire vă permit să vă păstrați codul concis, curat și lizibil.
Personalizare: Înlănțuirea țevilor vă permite să combinați țevile personalizate și încorporate și să le personalizați în funcție de nevoile dvs.
Transformări complexe: în loc să setați o țeavă pentru a efectua mai multe transformări, puteți configura mai multe țevi pentru a realiza transformări complexe.

Puteți lega țeava personalizată cu o altă țeavă sau cu o țeavă încorporată. Pot înlănțui țeava creată mai devreme customPipe cu o țeavă cu litere mici încorporate. Iată cum o putem face:

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

Țevi pure vs. impure

Există două tipuri de țevi în Angular: țevi pure și impure

Țevi pure

Țevile din Angular sunt pure în mod implicit. Se așteaptă ca o conductă pură să returneze aceeași ieșire pentru aceeași intrare. Se așteaptă ca o astfel de conductă să fie deterministă și apatridă.

Mecanismul de detectare a schimbării Angular optimizează automat conductele pure. Angular nu reluează transformarea conductei decât dacă intrarea într-o conductă pură se modifică.

Așa declari o țeavă ca fiind pură;

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

})

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

După cum puteți vedea, am setat proprietatea pură a decoratorului @Pipe la true.

Conducte impure

O conductă impură se va executa oricând Angular detectează o schimbare. O astfel de modificare nu trebuie să fie din intrări. Țevile impure se potrivesc situațiilor care necesită acces la starea actuală a aplicației. Accesarea unei baze de date sau efectuarea unei cereri HTTP sunt exemple perfecte de unde puteți utiliza conducte impure.

Cum se creează un flux de la zero

Acesta este un exemplu de conductă impură:

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

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

După cum puteți vedea, am setat proprietatea pură a decoratorului @Pipe pentru a ne face pipa impură.

Crearea conductelor în Angular: Cele mai bune practici

camelCase your pipes: Dacă ați notat, mi-am numit pipe customPipe. Utilizați întotdeauna această abordare dacă țeava dvs. are mai mult de un cuvânt.
Testați-vă țevile: crearea unei țevi nu garantează că va funcționa. Testați întotdeauna conductele pentru a vă asigura că funcționează conform așteptărilor. Puteți automatiza acest proces folosind diferite biblioteci.
Evitați țevile complexe: poate doriți ca o țeavă să efectueze mai multe acțiuni. Cu toate acestea, aceasta nu este o abordare bună, iar cea mai bună practică este crearea de conducte diferite pentru a efectua diferite acțiuni.
Utilizați țevi pure: o țeavă pură va returna întotdeauna aceeași ieșire de la aceeași intrare. Angular poate stoca în cache rezultatele pentru conducte pure, ceea ce are ca rezultat o îmbunătățire a performanței și a timpului de răspuns.

Întrebări frecvente

De ce avem nevoie de țevi în Angular?

Conductele transformă și formatează datele într-o aplicație. Conductele iau o valoare ca intrare și returnează o valoare transformată ca ieșire. Transformarea variază și poate fi la fel de simplă ca transformarea unei monede sau a unei date sau sortarea sau filtrarea articolelor dintr-o listă.

Ce este o țeavă personalizată?

Acesta este un conduct definit de utilizator pe care îl creați pentru a efectua transformări personalizate. Puteți combina o țeavă personalizată cu țevi încorporate prin înlănțuirea țevilor.

Dați exemple de țevi încorporate în Angular.

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe și PercentPipe

Ce este înlănțuirea țevilor?

Înlănțuirea țevilor este procesul de combinare a mai multor lanțuri. Înlănțuirea țevilor vă permite să efectuați mai multe operații cu o singură expresie. Folosim operatorul de conducte ( | ) pentru a combina diferite conducte în Angular. Puteți lega țevi personalizate cu altele sau le puteți lega cu țevi încorporate

Concluzie

Credem că acum puteți descrie conductele în următorul interviu, deoarece aceasta este o întrebare obișnuită în întrebările frecvente Angular. Am acoperit, de asemenea, diferitele țevi încorporate și cum să creați țevi personalizate în Angular.

Conductele personalizate vor fi utile atunci când doriți să răspundeți unor nevoi specifice sau să faceți aplicația mai dinamică. Cu toate acestea, trebuie să înțelegeți cum funcționează Angular sub capotă pentru a crea și utiliza țevi personalizate.

De asemenea, puteți explora câteva biblioteci Angular UI pentru a crea o experiență de utilizator de clasă mondială.