Úvod do podujatí AngularJS
AngularJS sa dá opísať ako rámec JavaScriptu, ktorý sa používa na vytváranie jednostránkových aplikácií (SPA) pre vývoj mobilných a webových aplikácií. SPA je jediná stránka všade tam, kde je veľa vedomostí naďalej podobné, pretože po kliknutí na ďalšie kategórie / možnosť je možné prispôsobiť niekoľko bitov údajov. Celý tento postup vám môže uľahčiť prácu jednoduchým povolením nákladov, zvýšením efektívnosti a rýchlejšie načítaním webovej stránky. V tejto téme sa dozvieme viac o udalostiach AngularJS.
Pomocou AngularJS môžete pracovať s direktívami, ako aj používať atribúty HTML jednoduchým naviazaním údajov na HTML s výrazmi. AngularJS môže byť architektúra MVC, ktorá umožňuje jednoduché vytváranie webových aplikácií od začiatku. AngularJS 1.0 bol spustený v roku 2010, a ak budeme diskutovať dnes; najnovšia verzia AngularJS môže byť 1.7.8, ktorá bola vydaná v marci 2019. AngularJS je navyše open-source framework, ktorý spravuje jednoducho Google pomocou obrovskej komunity programátorov.
predpoklady
Predtým, ako sa pohnete vpred do AngularJS, musíte mať základné vedomosti o
- JavaScript
- HTML
- CSS
Základy AngularJS
Tu sú základy systému AngularJS
smernice
Predpona ng znamená AngularJS. ng- možno opísať ako predponu vyhradenú pre smernice o uhlových kľúčoch. Aby sa predišlo kolíziám, môžu vám navrhnúť, aby ste nikdy nepoužívali presnú ng predponu vo vašich smerniciach neskôr vo verzii Angular. Ng môže byť skratkou Angular.
Príklady niektorých smerníc v AngularJS
- Smernicu ng-new možno použiť na vytvorenie novej aplikácie Angular
- Smernica ng-update aktualizuje vaše úžasné aplikácie a tiež ich závislosti
- Na inicializáciu aplikácie AngularJS možno použiť smernicu ng-app .
- Smernica ng-init inicializuje informácie o aplikácii.
Smernica ng-app tiež vysvetľuje AngularJS, ktorého prvkom je „podnikateľ“ s aplikáciou AngularJS.
výrazov
- Výrazy prostredníctvom AngularJS budú opísané vo vnútri dvojitých zátvoriek: výraz.
- Na napísanie výrazu v rámci smernice: ng-bind = ”expression”.
Napríklad
Výkon:
kontrolór
- Aplikácia AngularJS bude ovládaná jednoducho ovládačmi.
- Aplikačný radič môže byť opísaný smernicou ng-kontrolér
- Radič je známy ako objekt JS, skonštruovaný s bežným konštruktorom objektov JS.
Vysvetlite udalosti AngularJS
Rôzne druhy udalostí nachádzajúcich sa v AngularJS
AngularJS je neuveriteľne plný udalostí a obsahuje základný model, ako môžete pridať poslucháčov udalostí do HTML. Uľahčuje množstvo udalostí spojených s myšou a klávesnicou. Väčšina týchto udalostí bude umiestnená do prvku HTML. V prípade, že ste napísali HTML a súčasne aj udalosti AngularJS, potom sa môžu obe udalosti spustiť, to znamená, že udalosť AngularJS nikdy neprepíše udalosť HTML.
Nasleduje niekoľko základných udalostí.
- ng-copy
- ng-click
- ng-cut
- ng-DblClick
- ng-KeyDown
- ng-stlačení
- ng-KeyUp
- ng-mousedown
- ng-mouseenter
- ng-mouseLeave
- ng-mouseMove
- ng-mouseover
- ng-mouseup
- ng rozmazania
Budeme analyzovať komunikáciu s udalosťami.
Angular JS obsahuje globálnu zbernicu udalostí, ktorá vám umožňuje upozorňovať na udalosti v jednom rozsahu a nechať ostatné udalosti počúvať túto udalosť a reagovať na ňu. Pri udalosti môžete odovzdať ďalšie argumenty, aby ostatní poslucháči mohli primerane reagovať na udalosť. Udalosti sú celkom jednoduché, ale je ich tam pár.
Po prvé, pri počúvaní udalosti jednoducho zavoláte metódu $ on () v rozsahu s parametrom názvu udalosti. Potom akákoľvek udalosť s týmto menom spustí vaše spätné volanie. Na druhej strane uskutočnenie udalosti si vyžaduje trochu plánovania.
Povedzme, že mám udalosť, ktorá je tu uvedená v Child Scope 1, ale chceme ju počúvať v Child Scope 2. Bohužiaľ to nemôžeme dosiahnuť.
V Angular JS existujú dve možnosti na zvýšenie udalosti.
Prvým je volanie rozsahu. $ Broadcast, ktorý zdvihne udalosť na pôvodný rozsah a potom ju odošle všetkým detským rozsahom.
Druhou možnosťou je volanie rozsahu. $ emise, čo vyvoláva udalosť v pôvodnom rozsahu a potom ju vyšle do reťazca rozsahu.
Neexistuje však skutočne globálny spôsob vysielania z dosahu dieťaťa. Spôsob, ako sa to stane, je zachytiť $ rootScope a zavolať naň $ broadcast, čo ho pošle všetkým detským rozsahom.
Teraz upravme náš kód tak, aby fungoval s udalosťami namiesto zdedených rozsahov. Prvým problémom, ktorý sme si všimli, že chceme, aby sa udalosť vyriešila, je skutočnosť, že tu v kontroléri katalógu táto metóda registerCourse () vyvoláva push priamo na údajoch plánu. To nie je jeho práca.
Pridanie položiek do rozvrhu nie je niečo, čo by mal robiť kontrolór katalógu. Namiesto toho je potrebné upozorniť niekoho iného, že sa kurz registruje, a potom veriť, že ďalšie objekty pridajú korekcie kurzu do plánu. Predmetom, ktorý by sa mal zaoberať rozvrhom, je samozrejme plánovací kontrolór.
Poďme teda na kontrolér plánu a pridáme poslucháča udalostí. Nazývame náš eventový kurz zaregistrovaný. Prvým parametrom spätného volania na udalosť je objekt udalosti a potom akýkoľvek ďalší parameter, ktorý zadáte pri zvýšení udalosti.
Takže sa chystáme naplánovať skutočnosť, že ktokoľvek, kto podujatie usporiadal, chystá aj kurz, ktorý podujatie vyzdvihol. Potom tu môžeme urobiť logiku, ktorá bola pôvodne vytvorená v metóde registerCourse ().
Teraz, namiesto toho, aby sme sa spoliehali na to, že plán bude v rozsahu $, už pôjdeme vziať rozsah $ a len prinesieme plánovanú službu. A keďže sem prinášame rozvrh, už ho nemusíme znižovať v kontrolóri registra.
Takže môžeme tento riadok vytiahnuť sem, presunúť ho k nášmu kontroléru plánovania a teraz túto závislosť vylúčiť z kontroléra registrácie.
Teraz je skvelé, že sme túto udalosť počúvali tu, ale nikto túto udalosť neuvádza. Miesto tu v metóde registerCourse () v kontroléri katalógu.
Kontrolór katalógu nemôže vyvolať udalosť, ktorú môže počúvať kontrolór plánu, pretože sú súrodenci. Budeme teda musieť závisieť od $ rootScope.
Potom môžeme zavolať $ rootScope. $ Broadcast () vyvolá udalosť, ktorú hľadáme, a pridá parameter, ktorý musí byť na tejto udalosti.
Teraz máme ďalšiu vec, ktorú môžeme vyčistiť. Hneď dole voláme $ range.notify, ale už vyvolávame udalosť, ktorú sme si zaregistrovali. Mali by sme nechať niekoho iného, aby sa zaoberal oznámením vždy, keď je zaregistrovaný akýkoľvek kurz.
Vráťte sa teda späť k nášmu kontrolórovi registrácie a pridajte k nemu poslucháča udalostí.
A odtiaľto môžeme zavolať kód a urobiť oznámenie. Zdá sa, že je oveľa vhodnejšie urobiť to v rámci kontrolóra registrácie, pretože v tomto mieste je to miesto, kde definujeme metódu oznamovania ().
Poďme skontrolovať tento výstup v prehliadači a uvidíme, ako to funguje.
Naše zmeny fungovali skvele.
Teraz sa pozrime na kód a analyzujeme výhody a nevýhody používania udalostí. Prvá výhoda, ktorú sme si všimli, sa nám páči je, že logika v každom z kontrolérov má niečo spoločné s týmto radičom.
Ovládač katalógu má logiku zvyšovania udalosti, keď niekto klikne na tlačidlo Registrovať kurz a logiku označovania kurzu zaregistrovaného. Plán má logiku pridávania položiek do plánu a kontrolór registrácie má logiku upozornení. Z tohto dôvodu nemáme riadiaci systém uvádzajúci do prevádzky, s ktorým nemá nič spoločné.
Náš koreňový ovládač tiež nie je preplnený závislosťami, s ktorými nemá nič spoločné. Existuje však niekoľko nedostatkov. Túto udalosť môže zrušiť každý, kto udalosť riadi. To môže viesť k zlým chybám.
Ak nejaký konkrétny obsluhujúci zruší udalosť a poslucháč, ktorý o tejto udalosti stále musí počuť, sa nespracoval. Na tieto udalosti spájame nášho kontrolóra.
Nevýhodou udalostí je, že používame reťazec pre názov udalosti a je ťažké zabrániť konfliktom názvov udalostí.
Jedinou ochranou je dobrá stratégia pomenovávania názvov udalostí.
Záver - AngularJS Events
- Eliminuje stav servera
- Umožňuje znalosť natívnej aplikácie
- Logiku ľahko vloží do JavaScriptu
- Vyžaduje si inovatívne informácie o zručnostiach, ako aj postupy
Odporúčané články
Toto je príručka pre udalosti AngularJS. Tu diskutujeme Základy AngularJS a Vysvetlite udalosť AngularJS s príkladmi. Ďalšie informácie nájdete aj v nasledujúcich článkoch -
- AngularJS Unit Testing
- AngularJS Architecture
- AngularJS smernice
- Kariéra v AngularJS
- Top 5 atribútov udalostí HTML s príkladmi
- Sprievodca rôznymi udalosťami JavaScriptu