Первый компонент в Angular

1. Генерируем первый компонент: команда ng generate component

В Angular компонент — это самостоятельный кусочек интерфейса, который управляет своим HTML, стилями и логикой. Можно сказать, что компонент — это как мини-приложение внутри большого приложения. Каждый компонент отвечает за свой участок DOM-дерева.

Аналогия:
Если бы ваша страница была домом, то компонент — это одна комната с собственной мебелью (HTML), обоями (CSS) и правилами поведения (TypeScript-кодом).

В Angular всё строится вокруг компонентов. Даже если вы хотите просто показать «Hello World», вы делаете это через компонент. Так что, если вы освоите компоненты — вы на 90% освоите Angular!

Как создать компонент?

В терминале, находясь в корне вашего Angular-проекта, выполните:

ng generate component hello

или коротко:

ng g c hello

Здесь:

• ng — команда Angular CLI,
• generate (или просто g) — действие,
• component (или c) — что именно генерируем,
• hello — имя компонента.

Результат:
CLI создаст папку src/app/hello и четыре файла внутри:

• hello.component.ts — TypeScript-класс компонента.
• hello.component.html — шаблон (HTML-разметка).
• hello.component.css — стили (по умолчанию CSS, но может быть SCSS/LESS).
• hello.component.spec.ts — файл для тестов (можно пока не трогать).

CLI также автоматически зарегистрирует компонент в вашем основном модуле приложения (app.module.ts), чтобы он стал частью вашего приложения.

Это означает, что CLI автоматически добавит HelloComponent в массив declarations в файле src/app/app.module.ts. Модули (NgModule) — это способ Angular организовывать части вашего приложения, группируя компоненты, директивы и сервисы. Подробнее о них мы поговорим чуть позже, но важно знать, что каждый "классический" компонент должен быть объявлен в каком-либо модуле.

Пример кода:

Вот как выглядит app.module.ts после генерации hello компонента.

// src/app/app.module.ts (после генерации hello)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HelloComponent } from './hello/hello.component'; // <--- Добавлен импорт

@NgModule({
  declarations: [
    HelloComponent, // <--- Компонент добавлен в declarations
    AppComponent // Ваш корневой компонент
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Разбираем структуру компонента

Посмотрим, что получилось внутри папки hello:

Файл hello.component.ts

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

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  // Здесь будет логика вашего компонента
}

Здесь много нового — давайте разбираться по порядку.

Декоратор @Component

Это специальная «метка», которая превращает обычный TypeScript-класс в Angular-компонент. Внутри фигурных скобок указываются настройки:

• selector — имя тега, через который компонент вставляется в HTML.
• templateUrl — путь до файла с HTML-шаблоном.
• styleUrls — массив путей до файлов со стилями.

Класс компонента

В примере выше это export class HelloComponent. Внутри этого класса вы будете описывать логику компонента: переменные, методы, обработчики событий и т.д.

Файл hello.component.html

<p>
  hello works!
</p>

Это стартовый шаблон. Можно заменить на что угодно — например, на приветствие или вашу любимую цитату.

Файл hello.component.css

/* hello.component.css */
p {
  color: green;
}

Стили из этого файла применяются только к шаблону этого компонента (о магии Angular-инкапсуляции поговорим чуть позже).

3. Как использовать компонент: selector

Самое интересное: как же вставить созданный компонент на страницу?

Ответ: используйте его селектор как обычный HTML-тег!

В нашем примере селектор — это app-hello (указан в selector: 'app-hello').

Пример использования

Откройте src/app/app.component.html (это шаблон главного компонента приложения) и добавьте туда строку:

<app-hello></app-hello>

Теперь, если вы обновите страницу (ng serve должен быть запущен), увидите свой новый компонент на главной странице приложения.

Важно:
Селектор должен быть уникальным! Если у вас есть два компонента с одним и тем же селектором — Angular не поймёт, кого вставлять, и устроит вам сюрприз (обычно в виде ошибки).

4. Изучаем шаблон компонента (template)

Шаблон — это HTML, который определяет, как компонент выглядит на странице.

Примеры шаблонов

Простой шаблон:

<p>Добро пожаловать в мой первый Angular-компонент!</p>

Шаблон с данными из компонента:

В файле hello.component.ts:

export class HelloComponent {
  username = 'Алиса';
}

В файле hello.component.html:

<p>Привет, {{ username }}!</p>

Здесь {{ username }} — это интерполяция (подстановка значения переменной из TypeScript-класса в HTML).

5. Inline template и inline styles

Иногда хочется не плодить лишние файлы, а написать шаблон и стили прямо в TypeScript-коде. Для этого используйте параметры template и styles в декораторе:

@Component({
  selector: 'app-inline-demo',
  template: `<h2>Это inline-шаблон</h2>`,
  styles: [`h2 { color: blue; }`]
})
export class InlineDemoComponent {}

CLI по умолчанию создаёт отдельные файлы, но если вы любите компактность, можно использовать inline-стили и шаблоны (например, для маленьких компонентов).

6. Стилизация компонента: инкапсуляция стилей

Angular заботится о том, чтобы стили компонента не «протекали» наружу и не ломали внешний вид других компонентов. Каждый компонент — как будто в своём CSS-аквариуме.

Пример:

В hello.component.css:

p {
  background: yellow;
  font-weight: bold;
}

В hello.component.html:

<p>Это стилизованный компонент!</p>

Результат:
Жёлтый фон и жирный шрифт применятся только к <p> внутри компонента hello, но не затронут другие параграфы на странице.

Нюанс:
Инкапсуляция работает по умолчанию, но её можно изменить через параметр encapsulation (для особых случаев, когда вам нужно глобальное влияние стилей — но это тема для отдельной лекции).

7. Практика: создаём свой первый компонент

Давайте добавим интерактивности нашему учебному приложению. Например, пусть пользователь видит приветствие и кнопку «Показать дату». После нажатия на кнопку — появляется текущая дата и время.

Шаг 1: Генерируем компонент

ng g c show-date

Шаг 2: Редактируем show-date.component.ts

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

@Component({
  selector: 'app-show-date',
  templateUrl: './show-date.component.html',
  styleUrls: ['./show-date.component.css']
})
export class ShowDateComponent {
  currentDate: string | null = null;

  showDate() {
    this.currentDate = new Date().toLocaleString();
  }
}

Шаг 3: Редактируем show-date.component.html

<p>Добро пожаловать!</p>
<button (click)="showDate()">Показать дату</button>
<p *ngIf="currentDate">Текущая дата и время: {{ currentDate }}</p>

Пояснение:

• (click)="showDate()" — обработчик события (подробнее о событиях будет в следующих лекциях).
• *ngIf="currentDate" — показывает параграф только если есть дата.

Шаг 4: Стилизация (show-date.component.css)

button {
  background: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
}

Шаг 5: Используем компонент в app.component.html

<app-show-date></app-show-date>

Проверьте результат!
У вас появилось приветствие, кнопка, и после нажатия появляется текущая дата. Поздравляю: вы только что создали свой первый интерактивный Angular-компонент!

8. Что происходит "под капотом"?

Когда вы запускаете ng serve, Angular компилирует ваши компоненты, объединяет их шаблоны и стили, и вставляет результат в DOM. Каждый компонент живёт своей жизнью, но может общаться с другими (через свойства, события и сервисы — об этом позже).

Схема:

graph TD
    A[app.component.html]
    B[<app-show-date>]
    C[show-date.component.html]
    D[show-date.component.css]
    A --> B
    B --> C
    B --> D

9. Типичные ошибки при создании и использовании компонентов

Ошибка №1: Не тот селектор.
Вы указали <hello></hello> вместо <app-hello></app-hello>, а компонент не отображается. Angular ищет именно тот селектор, который вы указали в декораторе.

Ошибка №2: Не импортировали компонент в модуль.
Если вы вручную создаёте компонент (без CLI), не забудьте добавить его в массив declarations вашего модуля (app.module.ts). CLI делает это за вас, но ручная работа — ручная ответственность!

Ошибка №3: Редактируете не тот файл.
Иногда можно случайно править app.component.html вместо своего нового компонента, и не видеть изменений. Проверяйте путь!

Ошибка №4: Нарушение уникальности селектора.
Два компонента с одинаковым селектором — Angular не простит.

Ошибка №5: Ожидание глобального действия стилей.
Стили компонента применяются только внутри него. Если вы хотите изменить внешний вид всего приложения — используйте styles.css или настройте инкапсуляцию.

Ошибка №6: Ошибка в шаблоне.
Забыли закрыть тег или ошиблись в синтаксисе интерполяции ({{ ... }}) — получите ошибку компиляции.