✅ AngularJS події - Різні види подій розташовані в AngularJS

Вступ до подій AngularJS

Вступ до подій AngularJS

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

Використовуючи 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- може бути описаний як префікс, зарезервований для ключових директив Angular. Щоб запобігти зіткненням, вони можуть запропонувати вам ніколи не використовувати точний префікс ng у своїх директивах пізніше для версії Angular. Ng може бути абревіатурою Angular.

Приклади деяких директив AngularJS

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

Директива ng-додатків також пояснює AngularJS, який елемент є «підприємцем» за допомогою програми AngularJS.

Вирази

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

Наприклад

Вихід:

Контролер

Застосування AngularJS контролюватиметься просто контролерами.
Контролер програми може бути описаний директивою ng-контролера
Контролер відомий як об'єкт JS, побудований із звичайним конструктором об'єктів JS.

Поясніть події AngularJS

Різні види подій розташовані в AngularJS

AngularJS неймовірно насичений подіями та включає в себе базову модель того, як можна додати слухачів подій до HTML. Це сприяє безлічі подій, пов'язаних з мишею та клавіатурою. Більшість цих подій буде розміщено на HTML-елементі. Якщо ви написали HTML, а також події AngularJS одночасно, після чого обидві події можна виконати, це означає, що подія AngularJS ніколи не замінить події HTML.

Кілька важливих подій наступні.

ng-копія
ng-клацання
ng-cut
ng-dblclick
ng-клавіш
ng-натискання клавіші
ng-клавіш
ng-mousedown
ng-мишоцентр
ng-mouseleave
ng-миші
ng-переведення миші
нг-миші
нг-розмиття

Ми будемо аналізувати це спілкування з подіями.

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

По-перше, слухаючи подію, ви просто викликаєте метод $ on () в області застосування з параметром назви події. Тоді будь-яка подія з таким ім’ям призведе до запуску зворотного дзвінка. З іншого боку, підняття події вимагає трохи планування.

Скажімо, я маю на увазі подію, яку порушили в Дитячій області 1, але ми хочемо прослухати цю подію в Дітейній області 2. На жаль, ми не можемо цього зробити.

У Angular JS є два варіанти підняття події.

Перший - викликати область. Трансляція $, яка піднімає подію на початковий обсяг і потім надсилає її в усі дочірні області.

Інший варіант - викликати область дії. $ emit, який піднімає подію на початкову область, а потім надсилає її вгору по ланцюгу області.

Але немає по-справжньому глобального способу трансляції з дитячої сфери. Спосіб зробити це - отримати захоплення $ rootScope і зателефонувати на його трансляцію $, яка посилає його на всі дочірні області.

Тепер перейдемо до коригування нашого коду, щоб він працював з подіями замість успадкованих областей. Отже, першою проблемою, яку ми помітили, що ми хочемо вирішити подію, є той факт, що тут, у контролері Каталог, цей метод registerCourse () викликає натискання прямо на дані розкладу. Це не його робота.

Додавання елементів до розкладу - це не те, що повинен робити контролер каталогу. Натомість, що слід робити, це сповістити когось іншого про те, що курс реєструється, а потім довіряти, що інші об'єкти додадуть виправлення курсу до розкладу. Таким чином, об'єктом, який повинен мати справу з графіком, є контролер планування, звичайно.

Тож переходимо до контролера розкладу і додамо слухача подій. Ми будемо називати наш курс події зареєстрованим. Перший параметр для зворотного виклику події - це об'єкт події, а після цього - будь-який додатковий параметр, який ви ставите під час підвищення події.

Тож ми плануємо той факт, що той, хто підняв подію, той покладе курс, який підняв подію, і на цю подію. Тоді звідси ми можемо виконати логіку, яка спочатку була виконана методом registerCourse () прямо тут.

Тепер, замість того, щоб покладатися на розклад, щоб бути в області $ $ вже, ми збираємось зняти область $ і просто внести заплановану послугу. А оскільки ми вносимо сюди графік, нам більше не потрібно заносити його на наш контролер Реєстру.

Тож ми можемо взяти цю лінію тут, перенести її до нашого контролера Розкладу, а тепер винести цю залежність з контролера реєстрації.

Зараз чудово, що ми слухали цю подію тут, але ніхто не піднімав цю подію. Місце тут у методі registerCourse () на контролері Catalogue.

Контролер каталогу не може підняти подію, яку може прослухати контролер розкладу, тому що вони є рідними братами. Отже, нам потрібно буде привести залежність від $ rootScope.

Тоді звідси ми можемо зателефонувати $ rootScope. $ Radio () підняти подія, яку ми шукаємо, та додати в параметр, який повинен бути в цій події.

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

Тож повернемось до нашого контролера реєстрації та додамо до нього слухача подій.

І тоді звідси ми можемо зателефонувати до коду, щоб зробити повідомлення. Це здається набагато доцільніше зробити це в контролері реєстрації, оскільки це місце, де ми визначаємо метод notify ().

Давайте перевіримо цей вихід у браузері і подивимось, як він працює.

Наші зміни спрацювали чудово.

Тепер перейдемо до коду та проаналізуємо переваги та недоліки використання подій. Перша вигода, яку ми помітили, що нам подобається, це те, що логіка в кожному з контролерів має щось спільне з цим контролером.

Контролер каталогу має логіку щодо піднесення події, коли хтось натискає кнопку «Зареєструвати курс» та логіки щодо позначення зареєстрованого курсу. Розклад має логіку щодо додавання елементів до розкладу, а контролер реєстрації має логіку щодо сповіщень. Через це у нас немає контролера, що приводить в експлуатацію те, що вони не мають нічого спільного.

Також наш кореневий контролер не захаращений залежностями, з якими він не має нічого спільного. Однак є кілька недоліків. Усі, хто обробляє подію, може скасувати цю подію. Це може призвести до поганих помилок.

Якщо якийсь конкретний обробник скасує подію, і слухач, який ще повинен почути про цю подію, не обробляється. Ми підключаємо наш контролер до тих подій.

Недолік подій полягає в тому, що ми використовуємо рядок для назви події, і важко запобігти конфліктам імен події.

Єдиним захистом є хороша стратегія іменування назв подій.

Висновок - події AngularJS

Усуває стан сервера
Вмикає знання нативного додатка
Легко додає логіку перегляду в JavaScript
Потрібна новаторська інформація про навички, а також процедури

AngularJS події - Різні види подій розташовані в AngularJS