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

by
Tweet
Share
Share
Pin

Пипес у Ангулару је једна од фраза са којима ћете се често сусрести док правите корисничке интерфејсе користећи Ангулар. Шта су и како функционишу?

Ангулар је међу 5 најпожељнијих веб оквира и технологија заснованих на СтацкОверфлов анкета.

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

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

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

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

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

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

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

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

  • ПерцентПипе: Ово је цев за употребу када желите да трансформишете број у процентуални низ.
  • ДатеПипе: Ово је цев који се користи за форматирање вредности датума на основу правила локализације.
  • ЛоверЦасеПипе: Трансформишите сав свој текст у мала слова помоћу ове цеви.
  • УпперЦасеПипе: Ову линију слова можете користити када желите да промените сав свој текст у велика слова.
  • ЦурренциПипе: То је савршен избор када желите да промените број у низ валуте на основу локалних правила.
  • ДецималПипе: Ова цев користи правила локализације да трансформише број у стринг са децималним зарезом.

Направите прилагођене цеви у Ангулар-у

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

Предуслови

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

  • Ноде.јс рунтиме окружење за вашу Ангулар апликацију. Можете преузми Ноде.јс ако га немате.
  • Разумевање како Ангулар функционише
  • Ангулар ЦЛИ да креирате своју апликацију и покренете различите команде. Можете га инсталирати помоћу ове команде;

нпм инсталл -г @ангулар/цли

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

#1. Направите нови Ангулар пројекат. Можете користити ову команду да бисте започели:

нг нове цеви

#2. Промените директоријум у креирану апликацију и отворите је у свом омиљеном уређивачу кода. Користим ВсЦоде. Можете покренути ове команде

цд цеви && код .

Фасцикла вашег пројекта ће бити слична овој;

#3. Направите прилагођену цев. Можете користити ову команду да генеришете нову прилагођену цев:

нг генерисати цев прилагођену цев

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

срц/апп/цустом-пипе.пипе.спец.тс

срц/апп/цустом-пипе.пипе.тс

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

Отворите датотеку цустом-пипе.пипе.тс и наћи ћете овај код:

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

Можете променити садржај своје датотеке да буде;

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

#5. Региструјте прилагођену цев. Отворите датотеку апп.модуле.тс и проверите да ли имате @НгМодуле, а затим и украсе.

  5 основних и бесплатних алата за обавештавање о конкуренцији

Потврдите да ова датотека има овај код;

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. Отворите апп.цомпонент.хтмл, избришите сав садржај и додајте овај ред;

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

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

нг служе

Ово ће бити приказано у вашем претраживачу;

Како спојити цеви у угао

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

Ми можемо ланчати цеви из следећих разлога:

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

Своју прилагођену цев можете повезати са другом или уграђеном цеви. Могу да повежем цев коју смо раније креирали цустомПипе са уграђеном лулом малим словима. Ево како то можемо да урадимо:

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

Пуре вс. Импуре Пипес

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

Чисте цеви

Цеви у Ангулару су подразумевано чисте. Очекује се да ће чиста цев дати исти излаз за исти улаз. Очекује се да ће таква цев бити детерминистичка и без држављанства.

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

Овако лулу проглашавате чистом;

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

})

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

Као што видите, поставили смо чисто својство декоратора @Пипе на труе.

Нечисте цеви

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

  Како да прилагодите почетни екран вашег иПхоне-а помоћу виџета и икона

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

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

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

Као што видите, поставили смо чисто својство декоратора @Пипе на фалсе, што нашу цев чини нечистом.

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

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

ФАКс

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

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

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

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

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

ДатеПипе, УпперЦасеПипе, ЛоверЦасеПипе, ЦурренциПипе, ДецималПипе и ПерцентПипе

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

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

Закључак

Верујемо да сада можете да опишете цеви у свом следећем интервјуу, јер је ово редовно питање у Ангулар често постављаним питањима. Такође смо покрили различите уграђене цеви и како да креирате прилагођене цеви у Ангулар-у.

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

Такође можете истражити неке Ангулар УИ библиотеке да бисте створили корисничко искуство светске класе.