Использование $on и $broadcast в Angular для контроллеров

Быстрый ответ

$on применяется для прослушивания конкретных событий в контроллерах или сервисах AngularJS. $broadcast используется для отправки событий дочерним областям видимости, обеспечивая тем самым связь между компонентами. Давайте рассмотрим пример использования:

// Отправляем "Привет!" всем дочерним элементам в Angular
$scope.$broadcast('greeting', { message: 'Hello!' });

// Дочерние элементы реагируют на приветствие
$scope.$on('greeting', (event, data) => console.log(`Мой родитель сказал: "${data.message}". Как приятно.`)); // 'Hello!'

Понимание иерархии областей видимости

В AngularJS $scope имеет иерархическую структуру, похожую на DOM. Важно понимать эту иерархию при работе с $on, $broadcast и $emit.

Восходящая (то есть $emit) и нисходящая (то есть $broadcast) коммуникация

$emit передает события вверх по иерархии ($emit как бы говорит: "Привет, мама!"), достигая $rootScope. $broadcast направляет события вниз, к дочерним областям видимости ($broadcast словно объявляет: "Дети, пора обедать!"). Выбор между ними зависит от расположения слушателей.

// $emit передает вверх сообщение: "Привет, мама!"
$scope.$emit('callToMom', { message: 'Hi, Mom!' });

// Дочерние области видимости реагируют на вызов к обеду...
$scope.$on('callToMom', (event, data) => { ... });

Подробнее об этом расскажет наш спикер на видео

Уникальность имён событий

Чтобы не возникало путаницы, используйте уникальные имена событий. Хорошей практикой считается применение префиксов, связанных с названием модуля или функционала.

При большом количестве событий ищите альтернативы

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

Проблемы производительности и их решение

Использование $broadcast и $emit требует ресурсов, так как они функционируют аналогично курьеру, который передвигается по иерархии $scope. Если заметили, что Ромео перегружен:

• Объединяйте события в один $broadcast
• Откладывайте отправку сообщений, чтобы избежать частых обращений
• Удаляйте ненужные $scope слушатели, чтобы снизить нагрузку на систему

Время играет важную роль

Применение $timeout позволяет контролировать временные рамки отправки события. Это дает возможность Ромео немного отдохнуть.

// Даем Ромео перерыв перед следующим заданием
$timeout(function() {
  $scope.$broadcast('loveLetterToJuliet', { message: 'Miss you!' });
}, 1000);

Поддержание порядка

Важно очищать слушатели, особенно в директивах или сервисах с длительным жизненным циклом:

$scope.$on('$destroy', function() {
  // Время для уборки... 
});

Сервис событий в роли почтальона

• Сервис может координировать отправку и подписку на события в Angular.
• Для создания подобного сервиса можно использовать Фабрику или Сервис.
• Не забывайте о внедрении зависимостей — это придает сервису модульность и упрощает его тестирование.

app.factory('postMaster', function($rootScope) {
  return {
    shoutOut: function(event, letter) {
      $rootScope.$broadcast(event, letter);
    },
    listen: function(townSquare, event, handler) {
      townSquare.$on(event, handler);
    }
  };
});

Визуализация

Представим себе нашумевший город, где:

$rootScope (Ратуша): $broadcast – отправляет сообщения по всему городу.

| Районы города (Слушатели) |
|--------------------------------|
|  $on('regulation', ...)            | <!-- Анализируют городскую устав 📜 -->
|  $on('festival', ...)           | <!-- Организовывают праздничные мероприятия 🎉 -->

$on позволяет районам реагировать на каждое новое объявление или событие, в то время как $broadcast помогает Ратуше делиться этой информацией.

Ратуша $broadcast('regulation', 'Новое правило по переработке!')
Ратуша $broadcast('festival', 'Городской марафон на этой неделе!')

Районы $on('regulation', ...) = применяют новые правила 📜
Районы $on('festival', ...) = организовывают мероприятия 🎉

Это создает условия для эффективного управления и быстрого отклика приложения!

Полезные материалы

1. Руководство разработчика AngularJS — подробное описание работы $scope.
2. Понимание Angular's $apply() и $digest() — раскрытие событийной модели и цикла обработки в AngularJS.
3. Обсуждение $on и $broadcast в Angular на Stack Overflow — мнения и рекомендации сообщества.
4. Справочник API AngularJS для $rootScope — официальная документация, полезная для начинающих.
5. Мнение Джона Папы об обработке событий в AngularJS — советы от известного эксперта.
6. Топтал: Советы по производительности в Angular с использованием $broadcast и $watch — проверенные способы улучшения производительности.