Одним из ключевых элементов приложения являются компоненты. Компонент управляет отображением представления на экране.
Так, при создании первого приложения в прошлой главе был определен следующий компонент (файл app.component.ts):
import { Component } from "@angular/core"; import {FormsModule} from '@angular/forms'; @Component({ selector: "my-app", standalone: true, imports: [FormsModule], template: `<label>Введите имя:</label> <input [(ngModel)]="name" placeholder="name"> <h1>Добро пожаловать {{name}}!</h1>` }) export class AppComponent { name= ''; }
Чтобы класс мог использоваться в других модулях и компонентах, он определяется с ключевым словом export. В самом же классе определена лишь одна переменная, которая в качестве значения хранит некоторую строку.
Для создания компонента необходимо импортировать функцию декоратора @Component
из библиотеки @angular/core
.
Декоратор @Component
позволяет идентифицировать класс как компонент.
Если бы мы не применили декоратор @Component
к классу AppComponent, то класс AppComponent компонентом бы не считался.
Декоратор @Component
в качестве параметра принимает объект с конфигурацией, которая указывает фреймворку, как работать с компонентом и его
представлением. Класс компонент принимает множество параметров, который можно посмотреть в документации.
Большая часть этих параметров так или иначе рассматривается в дальнейших статьях, поэтому в данном случае рассмотрим только те, которые использованы в коде выше:
selector: определяет селектор CSS. В элемент с этим селектором Angular будет добавлять представление компонента.
Например, в примере выше селектор имеет значение my-app
. Соответственно html-страница приложения должна содержать элемент
<my-app></my-app>
. И именно этот элемент будет использоваться для рендеринга представления компонента.
standalone: указывает, будет ли компонент автономным. При значении true компонент является автономным. По умолчанию значение false (компонент не автономный). Далее мы чуть подробнее рассмотрим различие между автономными и неавтономными компонентами.
imports: указывает набор модулей, которые надо импортировать. Если компонент использует какие-то модули, то эти модули можно здесь указать.
Так, в примере выше в коде компонента определено текстовое поле ввода. И для работы с полями ввода и элементами формы предназначен специальный модуль -
FormsModule
. И компонент AppComponent его импортирует.
template: шаблон или визуальная часть компонента. Шаблон представляет кусок разметки HTML с вкраплениями кода Angular. Фактически шаблон это и есть представление, которое увидит пользователь при работе с приложением.
Каждый компонент должен иметь один шаблон. Однако необязательно определять шаблон напрямую с помощью свойства template
. Можно вынести шаблон во внешний
файл с разметкой html, а для его подключения использовать свойство templateUrl
.
Шаблон может быть однострочным или многострочным. Если шаблон многострочный, то он заключается в косые кавычки (`), которые стоит отличать от стандартных ординарных кавычек (').
В версии 14 фреймворка Angular была предложена концепция автономных компонентов (standalone components). С версии 16 эта
концепция вышла из бета и перешла в состояние релиза. Автономные компоненты Angular отличаются тем, что они могут не быть частью модулей, то есть они автономны и могут использоваться сами по себе.
При определении таких компонентов применяется свойство standalone:true
декоратора Component.
Такие компоненты сами управляют своими зависимости через свойство imports в декораторе Component
. Кроме того, автономные компоненты
могут импортироваться в другие автономные компоненты.
Стоит отметить, что команда разработчиков фреймворка Angular для разработки новых приложений при использовании версии 16 и выше рекомендует использовать именно автономные компоненты. Соответственно в дальнейшем мы также будем руководствоваться этим подходом. Однако также посмотрим на альтернативных подход с использованием модулей и неавтономных компонентов.
Вне зависимости от того, сколько у нас компонентов, один из них является главным, и он, в свою очередь, загружает все остальные компоненты. Фреймворк Angular позволяет напрямую загружать главный компонент.
Например, возьмем проект с базовой структурой:
В папку src/app в файле app.component.ts определим простенький компонент:
import { Component } from "@angular/core"; @Component({ selector: "my-app", standalone: true, template: "<h1>Hello METANIT.COM</h1>" }) export class AppComponent {}
Здесь пустой класс AppComponent, для которого определен только селектор - "my-app" и шаблон в виде заголовка. На веб-странице index.html определим элемент my-app:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello METANIT.COM</title> </head> <body> <my-app>Загрузка...</my-app> </body> </html>
Для загрузки главного и единственно компонента в файле main.ts используем следующий код:
import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent).catch(e => console.error(e));
Для загрузки компонента AppComponent применяется bootstrapApplication API. Так, первой строкой в файле из модуля "angular/platform-browser" импортируется функция bootstrapApplication(). Второй строкой импортируется главный компонент AppComponent.
Затем вызов bootstrapApplication(AppComponent)
запускает экземпляр приложения Angular и отображает автономный компонент
в качестве корневого компонента приложения.
После построения и запуска приложения на нужный элемент на веб-странице будет загружен компонент, который передан в bootstrapApplication()
:
Стоит отметить, что эта функция возвращает объект промис - Promise<ApplicationRef>
. Из этого можно получить объект
ApplicationRef, который и представляет собственно приложение Angular.
const appRef: ApplicationRef = await bootstrapApplication(AppComponent);