Úvod do AngularJS Events

AngularJS lze popsat jako rámec JavaScriptu, který se používá k vytvoření aplikací pro jednu stránku (SPA) pro mobilní i vývoj webových aplikací. SPA je jediná stránka, kde je mnoho znalostí stále podobné, a podporu několika bitů dat lze přizpůsobit kliknutím na další kategorie / možnost. Celý tento postup vám může ulehčit práci tím, že jednoduše umožní překročení nákladů, zvýšení efektivity a rychlejší načtení webové stránky. V tomto tématu se budeme učit o AngularJS Events.

Pomocí AngularJS můžete pracovat s direktivami a také používat atributy HTML jednoduchým navázáním dat na HTML s výrazy. AngularJS může být architektura MVC, díky níž lze webové aplikace snadno vytvářet od začátku. AngularJS 1.0 byl spuštěn v roce 2010, a pokud budeme diskutovat dnes; nejnovější verze AngularJS může být 1.7.8, která byla vydána v březnu 2019. AngularJS je navíc open-source framework spravovaný jednoduše Google pomocí obrovské komunity programátorů.

Předpoklady

Před přechodem na AngularJS musíte mít základní znalost

  • JavaScript
  • HTML
  • CSS

Základy AngularJS

Tady jsou základy AngularJS

Směrnice

Předpona ng znamená AngularJS. ng- lze popsat jako předponu vyhrazenou pro direktivy úhlových klíčů. Aby nedocházelo ke kolizím, mohou vám navrhnout, abyste nikdy ve svých směrnicích nikdy nepoužívali přesnou předponu ng ve verzi Angular. Ng může být zkratkou Angular.

Příklady několika směrnic v AngularJS

  • Směrnice ng-new lze použít k vytvoření nové aplikace Angular
  • Směrnice ng-update aktualizuje vaše úžasné aplikace a také jejich závislosti
  • Pro inicializaci aplikace AngularJS lze použít směrnici ng-app .
  • Směrnice ng-init inicializuje informace o aplikaci.

Směrnice ng-app také vysvětluje AngularJS, kterým prvkem je „podnikatel“ s aplikací AngularJS.

Výrazy

  • Výrazy prostřednictvím AngularJS budou popsány uvnitř dvojitých složených závorek: výraz.
  • Pro zápis výrazu v rámci direktivy: ng-bind = ”expression”.

Například

Výstup:

Ovladač

  • Aplikace AngularJS bude ovládána jednoduše ovladači.
  • Aplikační řadič lze popsat směrnicí ng-controller
  • Řadič je známý jako objekt JS, konstruovaný pomocí běžného konstruktoru objektů JS.

Vysvětlete události AngularJS

Různé druhy událostí umístěné v AngularJS

AngularJS je neuvěřitelně plný událostí a zahrnuje základní model, jak můžete posílat posluchače událostí do HTML. Usnadňuje spoustu událostí spojených s myší a klávesnicí. Většina těchto událostí bude vložena do prvku HTML. V případě, že jste psali HTML a také události AngularJS současně, poté, co se obě události mohou spustit, to znamená, že událost AngularJS nikdy nepřepíše událost HTML.

Několik základních událostí jsou následující.

  • ng-copy
  • ng-click
  • ng-cut
  • ng-dblclick
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-blur

Budeme analyzovat komunikaci s událostmi.

Úhlová JS zahrnuje globální sběrnici událostí, která vám umožňuje zvyšovat události v jednom rozsahu a nechat ostatní rozsahy poslouchat tuto událost a reagovat na ni. S událostí můžete předat další argumenty, aby ostatní posluchači mohli na událost vhodně reagovat. Události jsou celkem jednoduché, ale je jich několik.

Za prvé, při poslechu události jednoduše zavoláte metodu $ on () na obor s parametrem názvu události. Potom jakákoli událost s tímto jménem vyvolá zpětné volání. Na druhé straně, provedení události vyžaduje trochu plánování.

Řekněme, že mám událost, která je vyvolána zde, v Child Scope 1, ale chceme ji poslouchat v Child Scope 2. Bohužel to nemůžeme dosáhnout.

V Angular JS existují dvě možnosti, jak zvýšit událost.

Prvním je zavolat obor. $ Broadcast, který vyvolá událost v původním oboru a poté ji odešle všem podřízeným oborům.

Druhou možností je zavolat obor. $ emise, což vyvolá událost v původním oboru a poté ji vyšle do řetězce oboru.

Neexistuje však žádný skutečně globální způsob vysílání z rozsahu dítěte. Způsob, jak toho dosáhnout, je chytit $ rootScope a zavolat na něj $ broadcast, což ho pošle všem dětským oborům.

Nyní upravme náš kód tak, aby fungoval s událostmi namísto zděděných rozsahů. Prvním problémem, který jsme si všimli, že chceme, aby událost vyřešila, je skutečnost, že zde v řadiči katalogu tato metoda registerCourse () volá push přímo na datech plánu. To není jeho práce.

Přidání položek do plánu není něco, co by měl řadič katalogu dělat. Místo toho je třeba upozornit někoho jiného, ​​že se kurz registruje, a pak důvěřovat, že další objekty přidají korekce kurzu do plánu. Předmětem, který by se měl zabývat plánem, je samozřejmě plánovací správce.

Pojďme tedy do řadiče plánů a přidáme posluchače událostí. Zavoláme náš kurz událostí zaregistrovaný. Prvním parametrem zpětného volání události je objekt události a poté jakýkoli další parametr, který zadáte při vyvolání události.

Budeme tedy plánovat skutečnost, že kdokoli, kdo událost zvýšil, chystá také kurz, který událost zvýšil. Poté odtud můžeme udělat logiku, která byla původně vytvořena metodou registerCourse ().

Nyní, místo toho, abychom se spoléhali na to, že plán bude v rozsahu $, už se chystáme sundat rozsah $ a jen přineseme plánovanou službu. A protože sem přinášíme časový rozvrh, již ho nemusíme snižovat na kontroléru registru.

Můžeme tedy vzít tuto linku sem, přesunout ji na náš Plánovač a nyní tuto závislost vyjmout z řadiče Registrace.

Teď je skvělé, že jsme tu událost poslouchali, ale nikdo ji událost nevyvolává. Místo zde v metodě registerCourse () v kontroléru katalogu.

Řadič katalogu nemůže vyvolat událost, kterou může poslouchat řadič plánu, protože jsou sourozenci. Budeme tedy muset záviset na $ rootScope.

Potom odtud můžeme zavolat $ rootScope. $ Broadcast () vyvolá událost, kterou hledáme, a přidat parametr, který musí být na této události.

Nyní máme ještě jednu věc, kterou můžeme vyčistit. Hned tady voláme $ range.notify, ale již zvyšujeme událost, že jsme kurz zaregistrovali. Měli bychom nechat někoho jiného zpracovat oznámení, kdykoli je zaregistrován jakýkoli kurz.

Vraťme se tedy zpět k našemu registračnímu řadiči a přidáme do něj posluchače událostí.

A odtud můžeme zavolat kód a provést oznámení. Zdá se, že je mnohem vhodnější to udělat v rámci kontroléru registrace, protože od tohoto místa jsme definovali metodu oznamování ().

Podívejme se na tento výstup v prohlížeči a uvidíme, jak to funguje.

Naše změny fungovaly skvěle.

Nyní se podívejme na kód a analyzujeme výhody a nevýhody používání událostí. První výhoda, kterou jsme si všimli, se nám líbí je, že logika v každém z ovladačů má něco společného s tímto řadičem.

Řadič katalogu má logiku zvyšování události, když někdo klikne na tlačítko Zaregistrovat kurz a logiku označování kurzu zaregistrovaného. Plán má logiku přidávání položek do plánu a řadič registrace má logiku oznámení. Z tohoto důvodu nemáme řídicí jednotku, která uvádí do provozu, s čím nemá nic společného.

Náš kořenový řadič také není zaplněn závislostmi, s nimiž nemá nic společného. Existuje však několik nevýhod. Každý, kdo událost zvládne, ji může zrušit. To může vést ke špatným chybám.

Pokud některý konkrétní obsluhující pracovník zruší událost a posluchač, který o této události stále potřebuje slyšet, se nezpracoval. Připojujeme náš ovladač k těmto událostem.

Nevýhodou událostí je, že pro název události používáme řetězec a je obtížné zabránit konfliktům názvů událostí.

Jedinou ochranou je dobrá pojmenovací strategie pro názvy událostí.

Závěr - AngularJS Events

  • Odstraňuje stav serveru
  • Umožňuje znalost nativních aplikací
  • Snadno vloží logiku do JavaScriptu
  • Vyžaduje inovativní informace o dovednostech a postupy

Doporučené články

Toto je průvodce událostmi AngularJS. Zde diskutujeme Základy AngularJS a vysvětlíme událost AngularJS s příklady. Další informace naleznete také v následujících článcích -

  1. AngularJS Unit Testing
  2. AngularJS Architecture
  3. AngularJS směrnice
  4. Kariéra v AngularJS
  5. Prvních 5 atributů události HTML s příklady
  6. Průvodce různými událostmi JavaScriptu

Kategorie:

Vývoj softwaru