Како да направите прилагођене цеви у Ангулару за елегантан приказ података

by
Tweet
Share
Share
Pin

У Ангулару, појам „pipes“ (цеви) је нешто на шта ћете наилазити често приликом израде корисничких интерфејса. Али, шта су заправо цеви и како раде?

Ангулар се налази у самом врху листе најпопуларнијих веб фрејмворка и технологија, према анкети StackOverflow.

Његова модуларна архитектура је један од разлога зашто га програмери преферирају, јер омогућава разбијање апликације на мање, поновно употребљиве компоненте. Ова модуларност олакшава одржавање кода и побољшава сарадњу. Двосмерно повезивање података, компатибилност са различитим прегледачима и велика заједница су такође важни фактори који Ангулар чине једним од најбољих фронт-енд фрејмворка.

Овај чланак ће детаљније објаснити шта су цеви у Ангулару, како се користе, које врсте уграђених цеви постоје и како креирати сопствене, прилагођене цеви.

Шта су цеви у Ангулару?

Цеви у Ангулару представљају механизам за трансформацију и форматирање података у оквиру апликације. У суштини, цеви прихватају неку вредност као улаз и враћају њену трансформисану верзију као излаз. Ове трансформације могу бити једноставне, попут форматирања валуте или датума, или сложеније, попут сортирања или филтрирања ставки са листе.

Цеви су дизајниране да побољшају корисничко искуство, трансформишући податке на начин који је лак за разумевање и употребу. У Ангулару постоје уграђене и прилагођене цеви. Без обзира на врсту, цеви су корисне из следећих разлога:

  • Трансформација података: Ово је примарна функција цеви. Оне омогућавају да се подаци приказују у формату који је једноставан и читак за кориснике.
  • Чистоћа и одржавање кода: Већина апликација се развија тимски, па је важно да код буде разумљив осталим члановима тима. Цеви чине код концизнијим и лакшим за одржавање.
  • Локализација: Помоћу цеви можете прилагодити приказ података тако да одговара циљном тржишту. На пример, формати датума се разликују од места до места, а DatePipe цев омогућава форматирање датума у складу са корисниковом локацијом.
  • Сортирање и филтрирање: Цеви као што су OrderPipe и FilterPipe омогућавају лако сортирање и филтрирање података.

Врсте уграђених цеви у Ангулару

Ангулар нуди разне уграђене цеви за различите намене. У наставку су наведени неки од примера на које ћете наићи током развоја.

  • PercentPipe: Користи се за претварање бројева у процентуалне низове.
  • DatePipe: Користи се за форматирање вредности датума у складу са правилима локализације.
  • LowerCasePipe: Претвара сав текст у мала слова.
  • UpperCasePipe: Претвара сав текст у велика слова.
  • CurrencyPipe: Користи се за претварање бројева у валутне низове, у складу са локалним правилима.
  • DecimalPipe: Користи правила локализације за претварање бројева у низове са децималним зарезом.

Креирање прилагођених цеви у Ангулару

Поред уграђених цеви, Ангулар подржава и прилагођене цеви. Оне су корисне када желите да постигнете нешто што уграђене цеви не могу. Прилагођене цеви омогућавају проширење функционалности апликације.

Предуслови

Пре него што почнете са израдом прилагођених цеви, потребно је да имате следеће:

  • Node.js окружење за покретање Ангулар апликације. Можете преузети Node.js ако га немате.
  • Основно разумевање како Ангулар функционише.
  • Angular CLI за креирање апликација и извршавање команди. Можете га инсталирати следећом командом:

npm install -g @angular/cli

Пратите следеће кораке да бисте креирали прилагођену цев у Ангулару:

1. Креирајте нови Ангулар пројекат користећи команду:

ng new pipes

2. Промените тренутни директоријум на новокреирану апликацију и отворите је у омиљеном уређивачу кода. Користићемо VsCode, а можете покренути ове команде:

cd pipes && code .

Структура вашег пројекта би требало да изгледа слично следећем:

3. Генеришите прилагођену цев користећи следећу команду:

ng generate pipe custom-pipe

У фасцикли вашег пројекта, приметићете да су креиране следеће две датотеке:

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

src/app/custom-pipe.pipe.ts

4. Дефинишите логику цеви.

Отворите датотеку custom-pipe.pipe.ts и видећете следећи код:

Сада можемо да додамо једноставну логику, где ће наша прилагођена цев разложити низ на карактере.

Можете променити садржај датотеке да изгледа овако:

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

5. Региструјте прилагођену цев. Отворите датотеку app.module.ts и уверите се да поседујете @NgModule декоратор.

Потврдите да датотека садржи следећи код:

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. Отворите app.component.html, обришите сав садржај и додајте следећу линију:

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

Покрените сервер користећи команду:

ng serve

У вашем прегледачу ће се приказати следеће:

Како спојити цеви у Ангулару

Повезивање цеви омогућава извршавање више операција на једном изразу. Користи се оператор цеви (|) за комбиновање различитих цеви у Ангулару.

Разлози за повезивање цеви су следећи:

  • Промовише поновну употребу и модуларност: Свака цев може бити подешена да изврши одређену трансформацију, коју је могуће поново користити у апликацији.
  • Одржавање чистог кода: Шаблони повезивања чине код концизним, чистим и лаким за читање.
  • Прилагођавање: Повезивање омогућава комбиновање прилагођених и уграђених цеви и прилагођавање потребама апликације.
  • Сложене трансформације: Уместо једне цеви за више трансформација, могуће је подесити више цеви за постизање сложенијих трансформација.

Могуће је повезати сопствену прилагођену цев са другом цеви или уграђеном цеви. На пример, можемо да повежемо нашу претходно креирану customPipe цев са уграђеном lowercase цеви. То можемо урадити на следећи начин:

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

Чисте vs. Нечисте цеви

У Ангулару постоје две врсте цеви: чисте и нечисте цеви.

Чисте цеви

Подразумевано, цеви у Ангулару су чисте. Чиста цев за исти улаз увек даје исти излаз. Чиста цев је детерминистичка и без стања.

Ангулар аутоматски оптимизује чисте цеви. Ангулар не покреће трансформацију чисте цеви поново осим ако се њен улаз не промени.

Овако се цев декларише као чиста:

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

})

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

Као што се види, својство pure у @Pipe декоратору је постављено на true.

Нечисте цеви

Нечиста цев се извршава сваки пут када Ангулар детектује промену. Та промена не мора бити од самог улаза. Нечисте цеви су корисне у ситуацијама које захтевају приступ тренутном стању апликације. Приступи базама података или слање HTTP захтева су добри примери употребе нечистих цеви.

Ово је пример нечисте цеви:

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

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

Као што се види, својство pure у @Pipe декоратору је постављено на false, што цев чини нечистом.

Креирање цеви у Ангулару: Најбоље праксе

  • Користите camelCase за називе цеви: Као што можете приметити, моја цев се зове customPipe. Увек користите овај приступ када назив цеви садржи више од једне речи.
  • Тестирајте цеви: Само креирање цеви не гарантује да ће она радити. Увек тестирајте цеви да бисте били сигурни да раде како се очекује. Можете аутоматизовати овај процес користећи различите библиотеке.
  • Избегавајте сложене цеви: Можда ћете бити у искушењу да једна цев изврши више од једне радње. Међутим, боље је креирати засебне цеви за различите радње.
  • Користите чисте цеви: Чиста цев ће увек давати исти излаз за исти улаз. Ангулар може кеширати резултате чистих цеви, што побољшава перформансе и време одзива.

Често постављана питања

Зашто су нам потребне цеви у Ангулару?

Цеви се користе за трансформацију и форматирање података у апликацији. Узимају вредност као улаз и враћају трансформисану вредност. Трансформације могу бити једноставне, попут форматирања валуте или датума, или сложеније, као што је сортирање или филтрирање ставки са листе.

Шта је прилагођена цев?

Прилагођена цев је цев коју дефинише корисник и која се креира за извршавање специфичних трансформација. Прилагођене цеви је могуће комбиновати са уграђеним цевима преко повезивања цеви.

Наведите примере уграђених цеви у Ангулару.

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

Шта је повезивање цеви?

Повезивање цеви је процес комбиновања неколико цеви. Омогућава извршавање више операција на једном изразу. Користимо оператор цеви (|) да комбинујемо различите цеви. Можете повезати прилагођене цеви са другим цевима, или са уграђеним цевима.

Закључак

Надамо се да сте сада спремни да објасните концепт цеви на следећем интервјуу, с обзиром да је ово често постављано питање када је у питању Ангулар. Покрили смо различите уграђене цеви, као и процес креирања прилагођених цеви у Ангулару.

Прилагођене цеви су веома корисне када желите да одговорите на специфичне потребе или учините апликацију динамичнијом. Међутим, важно је разумети како Ангулар функционише да би се креирале и користиле прилагођене цеви.

Такође, можете истражити неке Ангулар UI библиотеке за креирање корисничког искуства светске класе.