Pojem „pipes“ (trubky) se v Angularu objevuje velmi často při vývoji uživatelských rozhraní. Co přesně znamenají a jak fungují?
Angular se řadí mezi pět nejoblíbenějších webových frameworků a technologií, jak ukazuje průzkum StackOverflow.
Díky své modulární architektuře je Angular oblíbený mezi vývojáři, protože umožňuje rozdělit aplikaci na malé, opakovaně použitelné komponenty. Tato modulární struktura kódu usnadňuje údržbu a zlepšuje spolupráci. Obousměrná datová vazba, kompatibilita s různými prohlížeči a rozsáhlý ekosystém a komunita jsou další důvody, proč je Angular považován za jeden z nejlepších front-end frameworků.
Tento článek se zaměřuje na vysvětlení, co jsou trubky v Angularu, jejich typické použití, různé druhy vestavěných trubek a postup vytváření vlastních trubek.
Co jsou to trubky v Angularu?
Trubky v Angularu jsou funkce, které transformují a formátují data v aplikaci. Jednoduše řečeno, trubka přijme hodnotu jako vstup a vrátí její transformovanou podobu jako výstup. Způsoby transformace se liší a mohou zahrnovat jednoduché operace, jako je převod měny nebo formátování data, stejně jako složitější úkoly, jako je řazení nebo filtrování položek seznamu.
Cílem trubek je zlepšit uživatelské rozhraní tím, že transformují data do podoby, která je pro uživatele snadno srozumitelná a použitelná. V Angularu existují vestavěné trubky, ale také je možné vytvářet vlastní. Zde jsou některé důvody, proč byste měli trubky v Angularu používat:
- Transformace dat: Hlavní účel trubek. Zajišťují, že data zobrazená uživatelům jsou čitelná a srozumitelná.
- Čitelnost a udržovatelnost kódu: Většina aplikací je vyvíjena týmově, takže je důležité, aby byl kód srozumitelný pro všechny. Trubky zjednodušují kód a usnadňují jeho údržbu.
- Lokalizace: Umožňují přizpůsobit data potřebám cílového trhu. Například formát data se liší v závislosti na lokalitě. DatePipe umožňuje formátovat data podle preferencí uživatele.
- Řazení a filtrování dat: Pro řazení nebo filtrování dat lze použít například OrderPipe nebo FilterPipe.
Typy vestavěných trubek v Angularu
Angular nabízí řadu vestavěných trubek pro různé účely. Níže uvádíme některé z nich, se kterými se pravděpodobně během vývoje setkáte:
- PercentPipe: Transformuje číselnou hodnotu na řetězec s procenty.
- DatePipe: Formátuje hodnotu data podle pravidel specifických pro danou lokalitu.
- LowerCasePipe: Převede celý text na malá písmena.
- UpperCasePipe: Převede celý text na velká písmena.
- CurrencyPipe: Transformuje číslo na řetězec měny podle lokálních pravidel.
- DecimalPipe: Transformuje číslo na řetězec s desetinnou čárkou s ohledem na pravidla dané lokality.
Vytvoření vlastních trubek v Angularu
Kromě vestavěných trubek Angular umožňuje vytvářet vlastní. Tyto trubky jsou užitečné, když potřebujete dosáhnout něčeho, co vestavěné trubky neumožňují. Vlastní trubky vám dávají možnost rozšiřovat funkčnost vaší aplikace.
Předpoklady
Před tím, než začnete vytvářet vlastní trubky v Angularu, budete potřebovat následující:
- Prostředí Node.js pro vaši aplikaci. Pokud ho ještě nemáte, můžete si ho stáhnout.
- Znalost základních principů fungování Angularu.
- Angular CLI pro vytváření aplikací a spouštění různých příkazů. Můžete si ho nainstalovat pomocí příkazu:
npm install -g @angular/cli
Postup vytvoření vlastní trubky v Angularu:
#1. Vytvořte nový projekt Angular. Můžete použít následující příkaz:
ng new pipes
#2. Přepněte se do adresáře vytvořené aplikace a otevřete ji ve svém oblíbeném editoru kódu. Například pomocí příkazů:
cd pipes && code .
Struktura vašeho projektu by měla vypadat podobně:
#3. Vytvořte vlastní trubku. K tomu můžete použít tento příkaz:
ng generate pipe custom-pipe
V adresáři projektu by se měly objevit tyto dva soubory:
src/app/custom-pipe.pipe.spec.ts
src/app/custom-pipe.pipe.ts
#4. Definujte logiku trubky.
Otevřete soubor custom-pipe.pipe.ts. Uvidíte tam následující kód:
Nyní můžeme implementovat jednoduchou logiku, která rozdělí řetězec na jednotlivé znaky.
Změňte obsah souboru tak, aby vypadal takto:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
transform(value: string): string[] {
return value.split('');
}
}
#5. Zaregistrujte vlastní trubku. Otevřete soubor app.module.ts a zkontrolujte, jestli máte deklarace v @NgModule.
Ujistěte se, že soubor obsahuje následující:
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. Otevřete soubor app.component.html, smažte veškerý jeho obsah a přidejte následující řádek:
<header>{{ '12345' | customPipe }}</header>
Spusťte server pomocí příkazu:
ng serve
Ve vašem prohlížeči by se mělo zobrazit:
Řetězení trubek v Angularu
Řetězení trubek umožňuje provádět více transformací na jednom výrazu. K kombinaci trubek v Angularu se používá operátor trubka (|).
Důvody pro použití řetězení trubek:
- Podpora opětovného použití a modularity kódu: Každou trubku lze nastavit pro specifickou transformaci, kterou je možné opakovaně použít v celé aplikaci.
- Udržování čistého kódu: Řetězením se kód stává stručnější, přehlednější a snadněji čitelný.
- Přizpůsobení: Řetězení umožňuje kombinovat vlastní a vestavěné trubky pro dosažení požadované funkcionality.
- Složitější transformace: Namísto jedné složité trubky, lze vytvořit několik jednodušších, které se vzájemně doplňují.
Vlastní trubku lze řetězit s jinou vlastní trubkou nebo s vestavěnou. Můžeme například zřetězit dříve vytvořenou customPipe s vestavěnou lowercase:
<p>{{ dataValue | customPipe | lowercase }}</p>
Čisté a nečisté trubky
V Angularu existují dva typy trubek: čisté a nečisté.
Čisté trubky
Standardně jsou trubky v Angularu čisté. Čistá trubka by měla pro stejný vstup vždy vrátit stejný výstup. Očekává se, že je deterministická a bezstavová.
Mechanismus detekce změn v Angularu čisté trubky automaticky optimalizuje. Angular nespouští transformaci čisté trubky znovu, pokud se vstup do ní nezmění.
Příklad definice čisté trubky:
@Pipe({
name: 'uppercase',
pure: true
})
export class UppercasePipe {
transform(value: string): string {
return value.toUpperCase();
}
}
Všimněte si, že vlastnost pure dekorátoru @Pipe je nastavena na true.
Nečisté trubky
Nečistá trubka se spustí pokaždé, když Angular detekuje změnu. Tato změna nemusí pocházet ze vstupů trubky. Nečisté trubky jsou vhodné pro situace, které vyžadují přístup k aktuálnímu stavu aplikace. Příklady použití zahrnují přístup k databázi nebo odesílání HTTP požadavků.
Příklad nečisté trubky:
@Pipe({
name: 'sort',
pure: false
})
export class SortPipe {
transform(array: any[]): any[] {
return array.sort();
}
}
Zde jsme vlastnost pure dekorátoru @Pipe nastavili na false, čímž je trubka nečistá.
Vytváření trubek v Angularu: Nejlepší postupy
- Používejte camelCase pro pojmenování trubek: Všimněte si, že jsem svou trubku pojmenoval
customPipe. Vždy dodržujte tento přístup, pokud název trubky sestává z více slov. - Testujte trubky: Vytvoření trubky nezaručuje, že bude fungovat správně. Vždy ji otestujte, abyste se ujistili, že funguje podle očekávání. Můžete automatizovat testování pomocí různých knihoven.
- Vyhýbejte se složitým trubkám: Může se zdát lákavé vytvořit trubku, která provádí více úkolů najednou. Není to však dobrá praxe. Vytvářejte různé trubky pro různé transformace.
- Používejte čisté trubky: Čisté trubky pro stejný vstup vždy vrátí stejný výstup. Angular může ukládat výsledky čistých trubek do mezipaměti, což má za následek zlepšení výkonu a odezvy.
Často kladené otázky
Proč potřebujeme trubky v Angularu?
Trubky transformují a formátují data v aplikaci. Přijímají hodnotu jako vstup a vracejí transformovanou hodnotu jako výstup. Transformace se mohou týkat například formátování měny nebo data, nebo řazení či filtrování položek seznamu.
Co je to vlastní trubka?
Vlastní trubka je uživatelsky definovaná trubka, která se vytváří pro provádění specifických transformací. Můžete je kombinovat s vestavěnými trubkami pomocí řetězení.
Uveďte příklady vestavěných trubek v Angularu.
DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe a PercentPipe.
Co je řetězení trubek?
Řetězení trubek je proces spojování několika trubek. Umožňuje provádět více operací s jedním výrazem. K tomuto účelu slouží operátor trubka (|). Vlastní trubky lze řetězit s vestavěnými i s dalšími vlastními trubkami.
Závěr
Doufáme, že nyní dokážete vysvětlit koncept trubek během pohovoru, protože je to častá otázka. Popsali jsme různé vestavěné trubky a ukázali, jak vytvořit vlastní.
Vlastní trubky jsou užitečné pro specifické potřeby aplikace a rozšiřují její dynamiku. Pro efektivní využití trubek je ovšem nutné porozumět základním principům fungování Angularu.
Doporučujeme prozkoumat knihovny Angular UI, které umožňují vytvořit uživatelské rozhraní na světové úrovni.