Что такое шаблон в Angular?

В Angular, шаблон (template) — это HTML-код, который определяет, как должен выглядеть представляемый элемент. Шаблоны могут содержать как стандартные HTML-элементы, так и специальные директивы Angular, которые позволяют динамически управлять контентом и поведением элементов на странице.

Зачем нужны шаблоны?

Шаблоны позволяют отделить логику приложения (которую мы реализуем в компонентах и сервисах) от представления (интерфейса пользователя). Это помогает поддерживать проект и улучшает соотношение «концентрация на задаче» для разработчиков, а также упрощает процесс разработки и тестирования интерфейсов.

Пример простого шаблона

Приведём простой пример, который покажет, как использовать шаблон в компоненте Angular.

1. Генерация компонента

Сначала создадим новый компонент с помощью Angular CLI:

ng generate component hello-world

2. Определение шаблона

Теперь откроем файл hello-world.component.html и добавим следующий код:

<h1>Привет, мир!</h1>
<p>Текущее время: {{ currentTime }}</p>

В этом шаблоне мы используем HTML для формирования заголовка и параграфа. Мы также используем интерполяцию через двойные фигурные скобки {{ }}, чтобы отобразить текущее время.

3. Логика компонента

Теперь надо добавить логику в файл hello-world.component.ts для отображения текущего времени:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  currentTime: string;

  constructor() {
    this.updateTime();
  }

  updateTime() {
    const now = new Date();
    this.currentTime = now.toLocaleTimeString();
  }
}

В этом компоненте мы при помощи метода updateTime получаем текущее время и сохраняем его в переменной currentTime, которую затем выводим в шаблоне.

Динамические элементы и привязка данных

Angular предоставляет множество механизмов для динамической работы с шаблонами, замены данных и их обновления. В дополнение к интерполяции, можно использовать:

• Директивы: Например, *ngIf для условного отображения или *ngFor для динамического списка.

Пример с использованием *ngFor:

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

Заключение

Шаблоны в Angular — это мощный инструмент для создания динамичных пользовательских интерфейсов. Понимание шаблонов и принципов их работы поможет вам строить гибкие и масштабируемые интерфейсы в ваших приложениях.