✅ AngularJS События - Различные виды событий, расположенных в AngularJS

Введение в AngularJS Events

Введение в AngularJS Events

AngularJS может быть описан как среда JavaScript, используемая для создания одностраничных приложений (SPA) для мобильных устройств, а также для веб-разработки. SPA - это отдельная страница, где большая часть знаний остается схожей в поддержку нескольких битов данных, которые можно настраивать при нажатии на дополнительные категории / опции. Вся эта процедура может облегчить вашу работу, просто допуская затраты, повышая эффективность и ускоряя загрузку веб-страницы. В этой теме мы собираемся узнать о AngularJS Events.

Используя AngularJS, вы можете работать с директивами, а также использовать атрибуты HTML, просто привязывая данные к HTML с помощью выражений. AngularJS может быть архитектурой MVC, которая с самого начала упрощает создание веб-приложений. AngularJS 1.0 был запущен в 2010 году, и если мы обсудим сегодня; Самая новая версия AngularJS может быть 1.7.8, выпущенная в марте 2019 года. AngularJS - это также фреймворк с открытым исходным кодом, управляемый просто Google с помощью огромного сообщества программистов.

Предпосылки

Прежде чем перейти к AngularJS, вы должны иметь фундаментальные знания

JavaScript
HTML
CSS

Основы AngularJS

Вот основы AngularJS

Директивы

Префикс ng означает AngularJS. ng- может быть описан как префикс, зарезервированный для директив углового ключа. Чтобы предотвратить столкновения, они могут предложить вам никогда не использовать точный префикс ng в ваших директивах позднее в версии Angular. Ng может быть аббревиатурой от Angular.

Экземпляры нескольких директив в AngularJS

Директива ng-new может использоваться для создания нового приложения Angular
Директива ng-update обновляет ваши удивительные приложения, а также их зависимости
Директива ng-app может использоваться для инициализации приложения AngularJS.
Директива ng-init инициализирует информацию о приложении.

Директива ng-app также объясняет AngularJS, что этот элемент является «предпринимателем» в приложении AngularJS.

Выражения

Выражения через AngularJS будут описаны в двойных фигурных скобках: выражение.
Для написания выражения в директиве: ng-bind = ”expression”.

Например

Выход:

контроллер

Применение AngularJS будет контролироваться просто контроллерами.
Контроллер приложения может быть описан с помощью директивы ng-controller
Контроллер известен как JS-объект, построенный с помощью обычного JS-конструктора объекта.

Объясните AngularJS События

Различные виды событий, расположенных в AngularJS

AngularJS невероятно полон событий и включает базовую модель того, как вы можете добавлять прослушиватели событий в HTML. Это облегчает множество событий, связанных с мышью и клавиатурой. Большинство из этих событий будут помещены в элемент HTML. Если вы написали HTML, а также события AngularJS одновременно, после этого оба события могут выполняться, это означает, что событие AngularJS никогда не будет перезаписывать событие HTML.

Вот несколько важных событий:

нг-копия
нг-клик
нг-срез
нг-DblClick
нг-KeyDown
нг-нажатие
нг-KeyUp
нг-MouseDown
нг-MouseEnter
нг-MouseLeave
нг-MouseMove
нг-Mouseover
нг-MouseUp
нг-размытие

Мы собираемся проанализировать общение с событиями.

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

Во-первых, слушая событие, вы просто вызываете метод $ on () в области видимости с параметром имени события. Тогда любое событие с таким именем вызовет ваш обратный вызов. Создание события, с другой стороны, требует немного планирования.

Допустим, у меня есть событие, которое возникает здесь, в Child Scope 1, но мы хотим прослушать это событие в Child Scope 2. К сожалению, мы не можем этого добиться.

Существует два варианта поднятия события в Angular JS.

Первый - вызвать scope. $ Broadcast, который вызывает событие в исходной области, а затем отправляет его во все дочерние области.

Другой вариант - вызвать область. $ emit, который вызывает событие в исходной области действия и затем отправляет его по цепочке области действия.

Но не существует действительно глобального способа вещания из сферы действия ребенка. Чтобы добиться этого, нужно взять $ rootScope и вызвать на нем $ broadcast, который отправляет его всем дочерним областям.

Теперь давайте настроим наш код, чтобы он работал с событиями вместо унаследованных областей. Итак, первая проблема, которую мы заметили, что мы хотим, чтобы событие было решено, заключается в том, что здесь, в контроллере Каталога, этот метод registerCourse () вызывает push прямо на данных расписания. Это не его работа.

Добавление элементов в расписание - это не то, что должен делать контроллер каталога. Вместо этого он должен уведомить кого-то еще о том, что курс регистрируется, а затем поверить, что другие объекты добавят исправления курса в расписание. Таким образом, объект, который должен иметь дело с расписанием, конечно же, является диспетчером планирования.

Итак, давайте перейдем к контроллеру Schedule и добавим прослушиватель событий. Мы назовем курс нашего мероприятия зарегистрированным. Первым параметром для обратного вызова к событию является объект события, а затем после этого любой дополнительный параметр, который вы указываете при вызове события.

Таким образом, мы собираемся планировать тот факт, что тот, кто поднял мероприятие, собирается также включить курс, который поднял событие. Затем отсюда мы можем выполнить логику, которая изначально была реализована в методе registerCourse (), прямо здесь.

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

Таким образом, мы можем взять эту строку здесь, переместить ее на наш контроллер расписания и теперь удалить эту зависимость из контроллера регистрации.

Теперь замечательно, что мы прослушали это событие здесь, но никто не поднимал это событие. Место здесь в методе registerCourse () на контроллере каталога.

Контроллер каталога не может вызвать событие, которое может быть прослушано контроллером расписания, потому что они являются братьями и сестрами. Итак, что нам нужно сделать, это ввести зависимость от $ rootScope.

Затем мы можем вызвать $ rootScope. $ Broadcast () вызвать событие, которое мы ищем, и добавить параметр, который должен быть в этом событии.

Теперь у нас есть еще одна вещь, которую мы можем убрать. Прямо здесь мы вызываем $ scope.notify, но мы уже поднимаем событие, когда мы зарегистрировали курс. Мы должны позволить кому-то другому обрабатывать уведомление всякий раз, когда любой курс зарегистрирован.

Итак, давайте вернемся к нашему контроллеру регистрации и добавим к нему прослушиватель событий.

И затем отсюда мы можем вызвать код, чтобы сделать уведомление. Кажется, гораздо более уместно сделать это в контроллере регистрации, поскольку это место, где мы определяем метод notify ().

Давайте проверим этот вывод в браузере и посмотрим, как он работает.

Наши изменения отлично сработали.

Теперь давайте посмотрим на код и проанализируем преимущества и недостатки использования событий. Первое преимущество, которое мы заметили, нам понравилось, что логика в каждом контроллере как-то связана с этим контроллером.

Контроллер каталога имеет логику для инициирования события, когда кто-то нажимает кнопку «Зарегистрировать курс», и логику для маркировки зарегистрированного курса. Расписание имеет логику добавления элементов в расписание, а контроллер регистрации - логику уведомлений. Из-за этого у нас нет контроллера, который запускает сервис, к которому они не имеют никакого отношения.

Кроме того, наш корневой контроллер не загроможден зависимостями, к которым он не имеет никакого отношения. Есть несколько недостатков, хотя. Любой, кто обрабатывает событие, может отменить это событие. Это может привести к плохим ошибкам.

Если какой-то конкретный обработчик отменяет событие, и слушатель, который все еще должен услышать об этом событии, не обработан. Мы связываем наш контроллер с этими событиями.

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

Единственная защита - это хорошая стратегия именования имен событий.

Заключение - AngularJS Events

Устраняет состояние сервера
Позволяет знание родного приложения
Легко переводит логику просмотра в JavaScript
Требуется информация об инновационных навыках, а также процедуры

AngularJS События - Различные виды событий, расположенных в AngularJS