#3 – Добавление компонентов в проект

Когда вы начинаете работать с Angular, первое, с чем сталкиваетесь — это компоненты. Именно из них состоит всё приложение: шапка сайта, список задач, кнопка отправки формы — всё это отдельные блоки, или, как их называют в Angular, компоненты.

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

Создание компонента в Angular происходит очень просто. Достаточно одной команды в терминале — и фреймворк сам создаёт нужные файлы, регистрирует всё, что нужно, и вы сразу можете подключить этот компонент в шаблон. Именно так мы создавали базовую структуру проекта: header, footer и главную страницу.

Angular сам распознаёт компоненты через специальный декоратор @Component. В нём указывается всё, что нужно для отображения: где взять шаблон, как назвать селектор и какие стили использовать. После этого вы просто вставляете компонент в нужное место, как обычный HTML-тег.

Этот подход делает разработку более модульной. Вместо одного большого HTML-файла, вы работаете с маленькими, понятными блоками, каждый из которых делает свою работу. А когда таких компонентов становится много — вы получаете гибкое, расширяемое приложение, которым легко управлять.

Компоненты — это фундамент Angular. Поняв, как они устроены, вы сможете уверенно строить интерфейсы любой сложности.