Angular Academy · Урок

Зачем нужны автономные компоненты

Узнайте, как автономные компоненты упрощают работу с Angular.

«Зачем нужны автономные компоненты» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Зачем нужны автономные компоненты

Автономные компоненты позволяют создавать приложения Angular без NgModules. Компонент объявляет собственные зависимости, благодаря чему строительные блоки становятся самодостаточными и понятными.

Эпоха NgModule

Традиционно каждый компонент, директива и pipe должны были объявляться внутри @NgModule. Модули объединяли объявления и управляли импортами и экспортами.

Это добавляло шаблонный код и ещё один уровень косвенности.

Проблемы, вызванные NgModules

NgModules создавали типичные сложности: можно было забыть объявить компонент, объявить его в двух модулях, перепутать импорты с объявлениями или подключить слишком много через большие общие модули.

Идея автономности

В автономных компонентах каждый компонент перечисляет всё необходимое в собственном массиве imports. Не существует центрального модуля, которому нужно о нём знать.

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<p>Hello</p>'
})
export class HelloComponent {}

Самодостаточные зависимости

Поскольку автономный компонент объявляет собственные зависимости, достаточно открыть один файл, чтобы узнать всё, от чего он зависит. Это повышает понятность кода и эффективность инструментов.

Меньше шаблонного кода

Больше не нужно согласовывать объявления и экспорты между модулями. Компонент импортируется непосредственно там, где используется, подобно ES-модулям.

Улучшенное удаление неиспользуемого кода

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

Простая отложенная загрузка

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

// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)

Новый стандарт

В последних версиях Angular автономность является значением по умолчанию для вновь создаваемых компонентов. NgModules по-прежнему работают, но рекомендуется использовать автономный подход.

Взаимодействие с NgModules

Автономный и модульный код совместимы. Автономный компонент можно импортировать в NgModule, а компонент на основе NgModule может использовать автономные импорты, что упрощает миграцию.

Что по-прежнему нужно настроить

Настройки приложения целиком, например маршрутизатор или HTTP-клиент, передаются через провайдеры bootstrapApplication, а не через корневой модуль, как вы увидите далее.

Быстрая проверка: зачем автономность

В чём главное преимущество автономных компонентов?

Итоги: зачем автономность

Автономные компоненты устраняют шаблонный код NgModule, позволяя каждому компоненту объявлять собственные зависимости. Это делает код понятнее, упрощает отложенную загрузку и улучшает удаление неиспользуемого кода. Теперь автономность используется по умолчанию. Далее: создание автономного компонента.

Часто задаваемые вопросы

Урок «Зачем нужны автономные компоненты» бесплатный?

Да — полный текст урока «Зачем нужны автономные компоненты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Зачем нужны автономные компоненты»?

Узнайте, как автономные компоненты упрощают работу с Angular. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Зачем нужны автономные компоненты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy