Uvod v prireditve AngularJS
AngularJS lahko opišemo kot okvir JavaScript, ki se uporablja za vzpostavitev aplikacij za posamezne strani (SPA) za mobilne in tudi za spletno razvoj. SPA je enotna stran, kjer je veliko znanja še naprej podobno v podporo nekaj bitov podatkov, ki jih je mogoče prilagoditi, ko kliknete dodatne kategorije / možnost. Celoten postopek vam lahko olajša delo s preprostim dovoljenjem stroškov, povečanjem učinkovitosti in hitrejšim nalaganjem spletne strani. V tej temi bomo spoznali dogodke AngularJS.
Z uporabo AngularJS lahko delate tako z direktivami, kot tudi z uporabo atributov HTML, tako da podatke preprosto povežete s HTML z izrazi. AngularJS je lahko arhitektura MVC, ki omogoča preprosto izdelavo spletnih aplikacij od začetka. AngularJS 1.0 je bil predstavljen leta 2010 in če bomo danes razpravljali; najnovejša različica AngularJS je lahko različica 1.7.8, ki je izšla marca 2019. AngularJS je poleg tega odprtokodni okvir, ki ga upravlja preprosto Google s pomočjo velike skupnosti programerjev.
Predpogoji
Preden nadaljujete na AngularJS, morate imeti osnovno znanje o
- JavaScript
- HTML
- CSS
Osnove AngularJS
Tu so osnove AngularJS
Direktive
Predpona ng pomeni AngularJS. ng- je mogoče opisati kot predpono, rezervirano za kotne ključne direktive. Če želite preprečiti trke, vam lahko predlagajo, da kasneje v različici Angular nikoli ne uporabljate natančnega predpone v svojih direktivah. Ng je lahko kratica Angular.
Primeri nekaj direktiv v AngularJS
- Ng-novo direktivo lahko uporabimo za izdelavo nove kotne aplikacije
- Direktiva ng-update posodablja vaše neverjetne aplikacije in tudi njihove odvisnosti
- Direktiva ng-app se lahko uporablja za inicializacijo aplikacije AngularJS.
- Direktiva ng-init inicializira informacije o aplikaciji.
Direktiva ng-app prav tako pojasnjuje AngularJS, kateri element je podjetnik z aplikacijo AngularJS.
Izrazi
- Izrazi skozi AngularJS bodo opisani v dvojnih kodrastih oklepajih: izraz.
- Za pisanje izraza v direktivi: ng-bind = "izraz".
Za primer
Izhod:
Krmilnik
- Nanašanje AngularJS bodo nadzirali preprosto krmilniki.
- Krmilnik aplikacij bi lahko opisal z direktivo ng-regulator
- Krmilnik je znan kot JS objekt, zgrajen z navadnim konstruktorjem objektov JS.
Pojasnite dogodke AngularJS
V AngularJS se vrstijo različni dogodki
AngularJS je neverjetno poln dogodkov in vključuje osnovni model, kako lahko dodate poslušalce dogodkov v HTML. Omogoča veliko dogodkov, povezanih z miško in tipkovnico. Večina teh dogodkov bo postavljena na element HTML. Če ste zapisali HTML in tudi AngularJS dogodke hkrati, se lahko oba dogodka izvršita, to pomeni, da dogodek AngularJS nikoli ne bo prepisal dogodka HTML.
Nekaj bistvenih dogodkov je naslednje.
- ng-copy
- ng-klik
- ng-cut
- ng-dblclick
- ng-keydown
- ng-pritisk tipke
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-miška
- ng-miška
- ng-zamegljenost
Analizirali bomo Komuniciranje z dogodki.
Angular JS vključuje globalni vodnik dogodkov, ki omogoča dvig dogodkov na enem področju in drugim področjem uporabe, da poslušajo dogodek in se nanj odzovejo. Z dogodkom lahko posredujete dodatne argumente, tako da se lahko drugi poslušalci ustrezno odzovejo na dogodek. Dogodki so dokaj preprosti, vendar jih je nekaj gotchas.
Najprej poslušajte dogodek, ki ga preprosto pokličete na način $ on () v obsegu s parametrom imena dogodka. Potem bo vsak dogodek s tem imenom sprožil vaš povratni klic. Po drugi strani pa je treba nekoliko načrtovati dogodek.
Recimo, da imam dogodek, ki je bil postavljen tukaj, v otroškem obsegu 1, vendar ga želimo poslušati v otroškem obsegu 2. Žal tega ne moremo storiti.
V Angular JS obstajata dve možnosti za dvig dogodka.
Prvi je, da pokličete obseg $ emisije, ki dogodek sproži na izvorno področje uporabe in ga nato pošlje na vse področje uporabe.
Druga možnost je, da pokličete obseg. $ emit, ki dogodek dvigne na izvorni obseg in ga nato pošlje navzgor v obseg.
Vendar ni resnično globalnega načina oddajanja iz otrokovega dosega. Način, kako to storiti, je, da dobite $ rootScope in pokličete $ oddajo na njem, ki ga pošlje na vse področje uporabe.
Zdaj pa prilagodimo našo kodo, da bo delovala z dogodki namesto podedovanih področjih. Prva težava, ki smo jo opazili, da želimo, da se dogodek reši, je dejstvo, da tukaj, v krmilniku Katalog, ta metoda registerCourse () kliče desno na podatke urnika. To ni njegova naloga.
Dodajanje elementov v urnik ni nekaj, kar bi moral izvajati upravljavec Kataloga. Namesto tega je treba obvestiti nekoga drugega, da se tečaj registrira, in nato zaupati, da bodo drugi predmeti dodali popravke tečaja v urnik. Torej je predmet, ki bi se moral ukvarjati z urnikom, seveda krmilnik razporejanja.
Pojdimo torej v krmilnik Schedule in dodamo poslušalca dogodkov. Naš tečaj dogodkov bomo poklicali registrirano. Prvi parameter za povratni klic na dogodek je predmet dogodka in nato za njim dodatni parameter, ki ga vstavite ob dvigu dogodka.
Načrtovali bomo torej, da bo kdo, ki je dogodek postavil, dal potek, ki je dogodek povzročil tudi na dogodek. Potem lahko od tu naredimo logiko, ki je bila prvotno narejena v metodi registerCourse () prav tukaj.
Zdaj, namesto da se zanašamo na urnik, da bomo v obsegu $, bomo že slekli obseg $ in samo vnesli predvideno storitev. In odkar pripeljemo urnik, nam ga ni več treba vnašati na krmilnik registra.
Tako lahko to vrstico vzamemo tukaj, jo premaknemo do našega regulatorja urnika in zdaj to odvisnost vzamemo iz krmilnika registracije.
Zdaj je super, da smo tukaj poslušali dogodek, vendar tega dogodka nihče ne dviguje. Mesto tukaj v metodi registerCourse () na regulatorju Katalog.
Krmilnik Kataloga ne more povzročiti dogodka, ki ga lahko posluša krmilnik Schedule, ker so brat in sestra. Torej, kar bomo morali storiti, je priti do odvisnosti od $ rootScope.
Nato lahko od tu pokličemo $ rootScope. $ Emisija () dvigne dogodek, ki ga iščemo, in doda v parameter, ki mora biti na tem dogodku.
Zdaj imamo še eno stvar, ki jo lahko očistimo. Tukaj kličemo $ range.notify, vendar že povzročamo dogodek, da smo tečaj registrirali. Vsakemu drugemu bi morali pustiti, da obravnava obvestilo, kadar koli je prijavljen kakšen predmet.
Vrnimo se torej do našega regulatorja registracije in mu dodajmo poslušalca dogodkov.
In od tod lahko pokličemo kodo, da naredimo obvestilo. Zdi se veliko bolj primerno, da to storite v registracijskem krmilniku, saj je to kraj, kjer definiramo metodo notify ().
Preverimo ta izhod v brskalniku in poglejmo, kako deluje.
Naše spremembe so se odlično iztekle.
Zdaj pa poglejmo kodo in analiziramo prednosti in slabosti uporabe dogodkov. Prva korist, ki smo jo opazili, je, da ima logika v vsakem od krmilnikov nekaj povezave s tem regulatorjem.
Krmilnik Kataloga ima logiko pri dvigu dogodka, ko nekdo klikne gumb Registriraj tečaj, in logiki pri označevanju prijavljenega predmeta. Razpored ima logiko pri dodajanju elementov v urnik, regulator registracije pa logiko glede obvestil. Zaradi tega nimamo krmilnika, ki bi imel v službi, da nimajo ničesar.
Tudi naš korenski krmilnik ni prepreden z odvisnostmi, s katerimi nima ničesar. Vendar obstaja nekaj pomanjkljivosti. Vsak, ki obravnava dogodek, ga lahko prekliče. To lahko privede do slabih napak.
Če kakšen določen obdelovalec prekliče dogodek in poslušalec, ki mora še slišati o tem dogodku, ga ne obdela. Naš regulator je povezan s temi dogodki.
Pomanjkljivost dogodkov je ta, da za ime dogodka uporabljamo niz in je težko preprečiti konflikte z imenom dogodka.
Edina zaščita je dobra strategija poimenovanja imen dogodkov.
Zaključek - AngularJS Dogodki
- Odpravlja stanje strežnika
- Omogoča znanje izvornih aplikacij
- Logiko pogleda preprosto v JavaScript
- Zahteva inovativne informacije o spretnostih in postopke
Priporočeni članki
To je vodnik za dogodke AngularJS. Tukaj razpravljamo o osnovah AngularJS in s primeri razložite dogodek AngularJS. Za več informacij si lahko ogledate tudi naslednje članke -
- Preverjanje kotne JS enote
- AngularJS Arhitektura
- AngularJS direktive
- Poklic v AngularJS
- Prvih 5 atributov dogodkov HTML s primeri
- Vodnik po različnih JavaScript dogodkih