Шаблони та директиви Angular в мобільних додатках

Лекція: Шаблони та директиви Angular в мобільних додатках

Вступ

Шаблони та директиви є основними елементами створення інтерфейсу користувача в Angular-додатках. Вони дозволяють визначати вигляд компонентів, управляти їхньою логікою, а також додавати інтерактивність. У мобільних додатках на Ionic це особливо важливо, адже якісно реалізований інтерфейс впливає на досвід користувача.

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

1. Що таке шаблони в Angular?

Шаблон в Angular – це HTML-код, що визначає структуру і вигляд компонента. Шаблони доповнюються спеціальними синтаксичними конструкціями Angular, такими як:

• Data binding (зв'язування даних): синхронізація даних між компонентом і шаблоном.

• Директиви: для управління DOM-елементами та їхньою поведінкою.

• Pipe (трубопроводи): для форматування даних перед відображенням.

Приклад базового шаблону:

<ion-header>

<ion-toolbar>

<ion-title>{{ title }}</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<p>Вітаємо в {{ appName }}!</p>

</ion-content>

У цьому прикладі {{ title }} та {{ appName }} використовують односпрямоване зв'язування даних.

2. Типи директив Angular

Директиви – це інструменти для модифікації поведінки або зовнішнього вигляду елементів DOM. Вони діляться на три основні типи:

2.1. Компонентні директиви

Компоненти – це спеціальний тип директив, що мають шаблон та логіку. Вони є основним будівельним блоком Angular-додатків.

2.2. Структурні директиви

Структурні директиви змінюють структуру DOM, додаючи або видаляючи елементи.

Приклади:

• *ngIf: умовний рендеринг.

  <p ngIf="isLoggedIn">Ви увійшли до системи!</p>

  <p ngIf="!isLoggedIn">Будь ласка, увійдіть.</p>

• *ngFor: ітерація по масиву.

  <ul>

  <li *ngFor="let item of items">{{ item }}</li>

  </ul>

2.3. Атрибутивні директиви

Ці директиви змінюють вигляд або поведінку існуючих елементів без зміни їхньої структури.

Приклади:

• ngClass: динамічне застосування класів.

  <p [ngClass]="{'active': isActive, 'inactive': !isActive}">Статус</p>

• ngStyle: динамічне застосування стилів.

  <div [ngStyle]="{'background-color': bgColor}"></div>

3. Data Binding у шаблонах

Data binding – це процес синхронізації між даними компонента та його шаблоном. У Angular використовується чотири типи зв'язування даних:

1. Інтерполяція ({{ }}): Відображення даних у вигляді тексту.

   <h1>{{ userName }}</h1>

2. Зв'язування властивостей: Зв'язування даних з атрибутами HTML-елементів.

   <img [src]="imageUrl" alt="Фото">

3. Зв'язування подій: Виконання логіки у відповідь на події.

   <button (click)="onClick()">Клікни мене</button>

4. Двоcпрямоване зв'язування: Одночасна синхронізація даних між шаблоном і компонентом.

   <input [(ngModel)]="userInput">

4. Як створювати та використовувати директиви?

4.1. Створення директив

Директиву можна створити за допомогою Angular CLI:

ng generate directive highlight

Файл highlight.directive.ts:

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({

selector: '[appHighlight]'

})

export class HighlightDirective {

constructor(private el: ElementRef, private renderer: Renderer2) {}

@HostListener('mouseenter') onMouseEnter() {

this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');

}

@HostListener('mouseleave') onMouseLeave() {

this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');

}

}

4.2. Використання директив

<p appHighlight>Наведіть курсор, щоб побачити ефект!</p>

5. Особливості шаблонів та директив у мобільних додатках

1. Адаптивність
   Використовуйте директиви для створення адаптивного інтерфейсу. Наприклад, ngIf може приховувати елементи на основі розміру екрану.

2. Покращення продуктивності
   Lazy loading та оптимальне використання ngFor допомагають зменшити навантаження на пристрій.

3. Інтеграція з Ionic-компонентами
   Angular-директиви легко працюють із бібліотекою компонентів Ionic.

4. Управління подіями
   Атрибутивні директиви дозволяють обробляти події користувача, наприклад свайпи чи натискання.

Переваги використання шаблонів і директив

1. Гнучкість у створенні інтерфейсу
   Шаблони дозволяють створювати динамічний інтерфейс з мінімальним обсягом коду.

2. Масштабованість
   Директиви забезпечують повторне використання логіки в різних частинах додатка.

3. Продуктивність
   Відкладене рендеринг елементів за допомогою ngIf та ngFor покращує швидкодію.

Питання вихідного контролю

1. Що таке шаблон в Angular?

2. Які типи директив існують в Angular?

3. У чому різниця між структурними та атрибутивними директивами?

4. Як працює інтерполяція у шаблонах? Наведіть приклад.

5. Як реалізувати двонаправлене зв'язування даних?

6. Яка директива використовується для ітерації по масиву?

7. Як створити власну директиву в Angular?

8. Для чого використовується ngClass і як його застосувати?

9. Як директиви допомагають покращити продуктивність мобільних додатків?

10. Наведіть приклад використання ngIf у мобільному додатку.