Angular Academy · Урок

Angular без зон

Запускайте Angular без Zone.js

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

За пределами Zone.js

Zone.js создаёт накладные расходы и изменяет глобальные API. Современный Angular предлагает режим без зон, в котором обнаружение изменений запускается сигналами и явными уведомлениями, а не перехватом API зонами.

Включение режима без зон

Укажите провайдер обнаружения изменений без зон в конфигурации запуска приложения.

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Удаление Zone.js

В режиме без зон также удалите полифилл zone.js из конфигурации сборки, чтобы уменьшить размер пакета и затраты времени на запуск.

// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'

Что теперь запускает обнаружение?

Без зон Angular планирует обнаружение изменений, когда изменяется сигнал, прочитанный в шаблоне, канал async выдаёт новое значение, срабатывает привязка события или вызывается markForCheck().

Сигналы играют центральную роль

Приложения без зон активно используют сигналы для хранения состояния. Чтение сигнала в шаблоне создаёт зависимость, а его обновление уведомляет Angular о необходимости обновить это представление.

count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CD

События по-прежнему отправляют уведомления

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

<button (click)="count.update(c => c + 1)">+</button>

Асинхронность без зон

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

setTimeout(() => this.ready.set(true), 1000);

Совместимость канала async

Канал async продолжает работать в режиме без зон, поскольку явно помечает представление для проверки при каждом новом значении.

<p>{{ data$ | async }}</p>

Сторонние библиотеки

Некоторые библиотеки рассчитывают на автоматическое обнаружение с помощью Zone.js. В режиме без зон может потребоваться обернуть их обратные вызовы так, чтобы они обновляли сигнал или вручную вызывать markForCheck().

Преимущества

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

Экспериментальный статус

Провайдер называется provideExperimentalZonelessChangeDetection, поскольку API ещё стабилизируется. Используйте его в новых приложениях, ориентированных прежде всего на сигналы, и тщательно тестируйте их.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли работу Angular в режиме без зон.

Итоги

Вы узнали, что provideExperimentalZonelessChangeDetection() устраняет необходимость в Zone.js и запускает обновления через сигналы, события, канал async и markForCheck(), делая приложения меньшими, более быстрыми и предсказуемыми.

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

Урок «Angular без зон» бесплатный?

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

Чему я научусь в уроке «Angular без зон»?

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

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

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

Сколько времени занимает урок «Angular без зон»?

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

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

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

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

← Назад к Angular Academy