Въведение в събитията на 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- може да се опише като префикс, запазен за ъгловите ключови директиви. За да предотвратите сблъсъци, те могат да ви предложат никога да не използвате точния префикс ng във вашите директиви по-късно на версия Angular. Ng може да бъде съкращение от Angular.

Примери на някои от директивите в AngularJS

  • Новата директива ng може да се използва за създаване на ново приложение Angular
  • Директивата за ng-update актуализира вашите невероятни приложения, а също и техните зависимости
  • Директивата ng-app може да се използва за инициализиране на приложение AngularJS.
  • Директивата ng-init инициализира информацията за приложението.

Директивата за ng-приложение също обяснява на AngularJS кой елемент е „предприемач“ с приложението AngularJS.

изрази

  • Изразът чрез AngularJS ще бъде описан в двойни къдрави скоби: израз.
  • За писане на израз в директива: ng-bind = "израз".

Например

изход:

контрольор

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

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

Различни видове събития, разположени в AngularJS

AngularJS е невероятно пълен със събития и включва основен модел за това как можете да добавяте слушатели на събития към HTML. Той улеснява множество събития, свързани с мишката и клавиатурата. Повечето от тези събития ще бъдат поставени на HTML елемент. В случай, че сте написали HTML, както и AngularJS събития едновременно, след което и двете събития могат да се изпълнят, това означава, че AngularJS събитие никога няма да презапише HTML събитие.

Някои от основните събития са следните.

  • NG-копие
  • ПГ кликване
  • нг нарязан
  • NG-dblclick
  • NG-keydown
  • NG-натискане
  • NG-keyup
  • NG-mousedown
  • NG-mouseenter
  • NG-mouseleave
  • NG-mousemove
  • NG-Задържането на курсора
  • NG-mouseup
  • нг размазване

Ще анализираме „Комуникация със събития“.

Angular JS включва глобална шина за събития, която ви позволява да повдигате събития в един обхват и да оставя други обхвати да слушат за това събитие и да реагират на него. Можете да предадете допълнителни аргументи със събитието, така че другите слушатели да реагират по подходящ начин на събитието. Събитията са доста ясни, но има няколко gotchas за тях.

Първо, като слушате събитие, просто извиквате метода $ on () в обхват с параметър на името на събитието. Тогава всяко събитие с това име ще задейства обратния ви разговор. От друга страна, повишаването на събитие изисква малко планиране.

Да кажем, че имам събитие, което е повдигнато тук, в Child Scope 1, но искаме да слушаме това събитие в Child Scope 2. За съжаление не можем да направим това.

В Angular JS има два варианта за повишаване на събитие.

Първата е да се извика обхват. $ Излъчване, което повдига събитието в първоначалния обхват и след това го изпраща надолу към всички обхвати на деца.

Другият вариант е да се обадите в обхвата. $ emit, което повдига събитието в първоначалния обхват и след това го изпраща нагоре по веригата на обхвата.

Но няма наистина глобален начин за излъчване от обхвата на детето. Начинът да се случи това е да се хванете на $ rootScope и да извикате $ излъчване по него, което го изпраща до всички области на детето.

Сега нека да коригираме кода си, за да работи той със събития вместо наследени обхвати. Така че първият проблем, който забелязахме, че искаме да се реши едно събитие, е фактът, че тук, в контролера на каталога, този метод registerCourse () извиква натискане право на данните от графика. Това не е негова работа.

Добавянето на елементи в графика не е нещо, което трябва да прави контролерът на Catalogue. Вместо това трябва да се уведомява някой друг, че се регистрира курс и след това се доверявайте, че други обекти ще добавят корекциите на курса към графика. Така че обектът, който трябва да се занимава с графика, е контролерът за планиране, разбира се.

Така че нека да отидем на контролера на график и да добавим слушател на събитията. Ще наречем нашия курс за събитие регистриран. Първият параметър за обратно извикване на събитие е обект на събитието и след това всеки допълнителен параметър, който поставяте, когато повдигате събитието.

Така че ще планираме факта, че който е повдигнал събитието, ще сложи курса, който повдигна събитието, и на събитието. Тогава от тук можем да направим логиката, която първоначално беше направена в метода registerCourse () точно тук.

Сега, вместо да разчитаме на графика да бъде в обхвата $, вече ще свалим $ обхвата и просто ще внесем планираната услуга. И тъй като тук въвеждаме график, вече няма нужда да го внасяме в контролера на Register.

Така че можем да изведем тази линия оттук, да я преместим нагоре към нашия контролер на график и сега да извадим тази зависимост от контролера за регистрация.

Чудесно е, че слушахме събитието тук, но никой не повдига това събитие. Мястото тук в метода registerCourse () на контролера Catalog.

Каталожният контролер не може да повдигне събитие, което може да бъде прослушано от контролера на графика, защото те са братя и сестри. Така че това, което ще трябва да направим, е да вкараме зависимост от $ rootScope.

Тогава от тук можем да се обадим на $ rootScope. $ Radio () повишава събитието, което търсим, и добавяме в параметъра, който трябва да бъде на това събитие.

Сега имаме още нещо, което можем да почистим. Точно тук се обаждаме на $ range.notify, но вече повишаваме събитието, че сме регистрирали курса. Трябва да оставим някой друг да се справи с уведомлението, когато се регистрира всеки курс.

Така че нека се върнем надолу към нашия контролер за регистрация и добавете към него слушател на събития.

И тогава от тук можем да се обадим на кода, за да извършим известието. Изглежда много по-подходящо да се направи това в контролера за регистрация, тъй като това е мястото, където определяме метода notify ().

Нека проверим този изход в браузъра и да видим как работи.

Промените ни се получиха чудесно.

Сега нека да разгледаме кода и да анализираме предимствата и недостатъците от използването на събития. Първото предимство, което забелязахме, че ни харесва, е че логиката във всеки от контролерите има нещо общо с този контролер.

Контролерът на каталога има логика за повишаване на събитието, когато някой натисне бутона Регистрационен курс и логиката за маркиране на регистриран курс. Графикът има логиката за добавяне на елементите в графика, а контролерът за регистрация има логиката за известията. Поради това ние нямаме контролер, който да обслужва, че те нямат нищо общо.

Също така, нашият корен контролер не е препълнен със зависимости, с които няма нищо общо. Има някои недостатъци. Всеки, който обработва събитие, може да отмени това събитие. Това може да доведе до лоши бъгове.

Ако някой конкретен обработващ анулира събитие и слушател, който все още трябва да чуе за това събитие, не е обработен. Ние свързваме нашия контролер към тези събития.

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

Единствената защита е добра стратегия за именуване на имена на събития.

Заключение - AngularJS Събития

  • Елиминира състоянието на сървъра
  • Активира познанията за родното приложение
  • Поставя логиката за преглед лесно в JavaScript
  • Изисква иновативна информация за умения, както и процедури

Препоръчителни статии

Това е наръчник за AngularJS Events. Тук обсъждаме Основите на AngularJS и обясняваме събитието AngularJS с примерите. Може да разгледате и следните статии, за да научите повече -

  1. Изпитване на AngularJS модул
  2. AngularJS Архитектура
  3. AngularJS директиви
  4. Кариера в AngularJS
  5. Топ 5 HTML атрибута на събитията с примери
  6. Ръководство за различни JavaScript събития

Категория:

Разработване на софтуер