Як створити власні канали в Angular для елегантного відображення даних

Зміст

В Angular, “пайпи” є ключовим поняттям, з яким ви часто будете стикатися при розробці інтерфейсів користувача. Що ж вони собою являють і як вони функціонують?

Angular входить до п’ятірки найпопулярніших веб-фреймворків та технологій, що підтверджується дослідженням StackOverflow.

Модульна структура Angular робить його улюбленцем серед розробників, оскільки вона дозволяє поділяти проєкт на невеликі, багаторазово використовувані компоненти. Така модульна організація коду полегшує його підтримку та сприяє ефективній командній роботі. Двостороннє зв’язування даних, сумісність з різними браузерами, розгалужена екосистема та велика спільнота є додатковими факторами, що роблять Angular одним з провідних фреймворків для фронтенд-розробки.

У цій статті ми розглянемо, що таке пайпи в Angular, як їх застосовувати, різноманітні вбудовані пайпи, а також як створювати свої власні.

Що таке пайпи в Angular?

Пайпи в Angular – це функціональність, що дозволяє трансформувати і форматувати дані у вашому додатку. Вони працюють, приймаючи певне значення як вхідний параметр і повертаючи його у зміненому вигляді. Трансформації можуть бути різноманітними, від простих, як перетворення валюти чи форматування дати, до складніших, як сортування або фільтрування елементів списку.

Основна мета пайпів – покращити взаємодію користувача з інтерфейсом, перетворюючи дані в зрозумілий і зручний для сприйняття формат. Пайпи в Angular можуть бути як вбудованими, так і спеціально створеними. Незалежно від типу, ось декілька причин, чому вам варто використовувати їх у ваших Angular-проектах:

Перетворення даних: Це головне призначення пайпів. Вони дозволяють представляти дані користувачам у читабельному вигляді.
Поліпшення читабельності коду та спрощення обслуговування: Більшість програм розробляється у співпраці. Тому важливо, щоб ваш код був зрозумілий для інших членів команди. Пайпи роблять код більш лаконічним і простим у підтримці.
Локалізація: За допомогою пайпів можна адаптувати дані до потреб конкретного регіону. Наприклад, різні країни можуть використовувати різні формати дат. DatePipe дозволяє форматувати дати з урахуванням мови користувача.
Сортування та фільтрація даних: За допомогою таких пайпів, як OrderPipe або FilterPipe, можна легко сортувати або фільтрувати необхідну інформацію.

Види вбудованих пайпів в Angular

Angular пропонує різноманітні вбудовані пайпи, призначені для різних завдань. Нижче наведено приклади деяких з них, з якими ви найчастіше зустрічатиметеся:

PercentPipe: Використовується для перетворення числа у рядок, що відображає відсотки.
DatePipe: Форматує значення дати відповідно до мовних стандартів.
LowerCasePipe: Перетворює текст на нижній регістр.
UpperCasePipe: Перетворює текст на верхній регістр.
CurrencyPipe: Перетворює число на рядок, що відображає валюту відповідно до мовних стандартів.
DecimalPipe: Форматує число з десятковою комою, використовуючи мовні стандарти.

Створення власних пайпів в Angular

Ми розглянули вбудовані пайпи та їхнє застосування. Однак Angular також підтримує створення власних, кастомних пайпів. Це важливо, коли потрібно досягти чогось, що неможливо зробити за допомогою стандартних інструментів. Власні пайпи розширюють функціональні можливості вашого додатка.

Передумови

Перед тим, як приступити до створення кастомних пайпів в Angular, переконайтеся, що ви маєте наступне:

Встановлене середовище виконання Node.js для вашого Angular-проекту. Ви можете завантажити Node.js, якщо воно ще не встановлене.
Базове розуміння принципів роботи Angular.
Angular CLI для створення проєкту та виконання різних команд. Встановити його можна за допомогою команди:

npm install -g @angular/cli

Для створення кастомного пайпу в Angular виконайте наступні кроки:

#1. Створіть новий Angular-проєкт. Використайте наступну команду:

ng new pipes

#2. Перейдіть до каталогу створеного проекту та відкрийте його у своєму улюбленому редакторі коду. Наприклад, у VsCode. Використайте наступні команди:

cd pipes && code .

Структура вашого проєкту буде приблизно такою:

#3. Створіть кастомний пайп. Для цього скористайтеся командою:

ng generate pipe custom

Після виконання цієї команди ви побачите, що в папці проєкту з’явилися два файли:

src/app/custom.pipe.spec.ts

src/app/custom.pipe.ts

#4. Визначте логіку пайпу

Відкрийте файл custom.pipe.ts. Його початковий вміст виглядає так:

Тепер ми можемо додати просту логіку, де наш кастомний пайп буде розділяти рядок на масив символів.

Замініть вміст вашого файлу на наступний:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customPipe'
})
export class CustomPipe 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 { CustomPipe } from './custom.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipe
  ],

  imports: [
    BrowserModule,
    AppRoutingModule
  ],

  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

#6. Відкрийте файл app.component.html, видаліть його вміст та додайте наступний код:

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

Запустіть сервер за допомогою команди:

ng serve

У вашому браузері ви побачите наступне:

Як з’єднувати пайпи в Angular

З’єднання пайпів дозволяє виконувати кілька перетворень за допомогою одного виразу. Для комбінування різних пайпів використовується оператор “|”.

З’єднання пайпів має ряд переваг:

Перевикористання коду та модульність: Кожен пайп виконує певну операцію, яку можна використовувати в різних частинах програми.
Чистота коду: Ланцюжки пайпів роблять код лаконічним, охайним і зрозумілим.
Гнучкість налаштування: Ви можете поєднувати як власні, так і вбудовані пайпи, адаптуючи їх під свої потреби.
Складні перетворення: Замість створення одного складного пайпу для виконання кількох операцій, можна об’єднати кілька простих для досягнення потрібного результату.

Ви можете об’єднувати свій кастомний пайп з іншими, як зі вбудованими, так і створеними. Наприклад, ви можете з’єднати створений раніше `customPipe` зі вбудованим `lowercase` пайпом. Ось як це можна зробити:

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

Чисті проти нечистих пайпів

В Angular існує два типи пайпів: чисті та нечисті.

Чисті пайпи

В Angular за замовчуванням всі пайпи є чистими. Очікується, що чистий пайп повертає один і той самий результат при однакових вхідних даних. Такий пайп має бути детермінованим і не повинен мати внутрішнього стану.

Система виявлення змін Angular оптимізує чисті пайпи. Angular не виконує повторне перетворення, якщо вхідні дані для чистого пайпу не змінилися.

Ось приклад оголошення чистого пайпу:

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

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

Як бачите, властивість `pure` декоратора `@Pipe` встановлено у значення `true`.

Нечисті пайпи

Нечистий пайп буде виконуватися щоразу, коли Angular виявить зміни в додатку. Ці зміни не обов’язково мають бути пов’язані зі вхідними даними. Нечисті пайпи призначені для ситуацій, коли потрібно отримати доступ до поточного стану програми. Наприклад, доступ до бази даних або виконання HTTP-запитів є прикладами, де можуть використовуватися нечисті пайпи.

Ось приклад нечистого пайпу:

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

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

Як бачите, властивість `pure` декоратора `@Pipe` встановлено у значення `false`, що робить наш пайп нечистим.

Створення пайпів в Angular: Кращі практики

Використовуйте camelCase для назв пайпів: Як ви помітили, я назвав мій пайп `customPipe`. Завжди використовуйте цей стиль, якщо назва вашого пайпу складається з кількох слів.
Тестуйте свої пайпи: Створення пайпу не гарантує його коректної роботи. Завжди тестуйте пайпи, щоб переконатися, що вони працюють належним чином. Ви можете автоматизувати цей процес за допомогою різних бібліотек.
Уникайте складних пайпів: Вам може знадобитися, щоб один пайп виконував декілька операцій. Проте, це не найкращий підхід. Краще створювати окремі пайпи для кожної операції.
Використовуйте чисті пайпи: Чистий пайп завжди повертає один і той самий результат при однакових вхідних даних. Angular може кешувати результати для чистих пайпів, що підвищує продуктивність і швидкість відгуку.

Поширені питання

Для чого потрібні пайпи в Angular?

Пайпи перетворюють і форматують дані в програмі. Вони приймають значення на вході і повертають перетворене значення на виході. Трансформація може бути різною, від форматування валюти та дати до сортування та фільтрування списків.

Що таке кастомний пайп?

Це пайп, визначений користувачем, який створюється для виконання нестандартних перетворень. Кастомні пайпи можна поєднувати з вбудованими за допомогою ланцюжків.

Наведіть приклади вбудованих пайпів в Angular.

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe та PercentPipe.

Що таке ланцюжок пайпів?

Ланцюжок пайпів — це процес з’єднання кількох пайпів. З’єднання дозволяє виконувати кілька операцій з одним виразом. Оператор “|” використовується для об’єднання пайпів. Можна об’єднувати як власні, так і вбудовані пайпи.

Висновок

Сподіваємося, що тепер ви зможете легко розповісти про пайпи під час вашого наступного співбесіди, оскільки це є досить поширеним питанням. Ми також розглянули різні вбудовані пайпи та навчилися створювати власні.

Кастомні пайпи стануть вам у нагоді, коли потрібно задовольнити специфічні потреби вашого проєкту. Однак, для ефективного створення та використання кастомних пайпів, потрібно розуміти внутрішній механізм роботи Angular.

Ви також можете вивчити різні бібліотеки інтерфейсу користувача Angular для створення сучасних інтерфейсів світового рівня.