Uvod u AngularJS događaje
AngularJS se može opisati kao JavaScript okvir koji se koristi za uspostavljanje aplikacija za jednu stranicu (SPA) za mobilne kao i za web razvoj. SPA je jedna stranica na kojoj je puno znanja i dalje slično kao što je podrška za nekoliko bita podataka koji se mogu prilagoditi čim kliknete dodatne kategorije / opcije. Cijeli ovaj postupak može olakšati vaš rad jednostavnim puštanjem troškova, povećanjem učinkovitosti i bržim učitavanjem web stranice. U ovoj ćemo temi upoznati događaje AngularJS.
Korištenjem AngularJS možete raditi s direktivama, kao i koristiti atribute HTML jednostavnim povezivanjem podataka u HTML s izrazima. AngularJS može biti MVC arhitektura koja web aplikacije pojednostavljuje od početka. AngularJS 1.0 lansiran je 2010. godine i ako danas razgovaramo; najnovija inačica AngularJS može biti 1.7.8 koja je objavljena u ožujku 2019. AngularJS je dodatno i open-source okvir kojim upravlja Google, koristeći ogromnu zajednicu programera.
Preduvjeti
Prije nego što krenete naprijed prema AngularJS, morate imati temeljno znanje o
- JavaScript
- HTML
- CSS
Osnove AngularJS
Evo osnova AngularJS-a
direktive
Prefiks ng znači AngularJS. ng- može se opisati kao prefiks rezerviran za kutne ključne direktive. Kako biste spriječili sudare, kasnije na verziji Angular više ne možete koristiti točan prefiks u svojim direktivama. Ng može biti kratica Angular.
Primjeri nekoliko direktiva u AngularJS
- Ng-nova direktiva može se koristiti za proizvodnju nove kutne aplikacije
- Ng-update update ažurira vaše nevjerojatne aplikacije A također i njihove ovisnosti
- Direktiva ng-app može se koristiti za inicijalizaciju AngularJS aplikacije.
- Ng-init direktiva inicijalizira informacije o aplikaciji.
Direktiva ng-aplikacije objašnjava AngularJS-u koji je element „poduzetnik“ s AngularJS-ovom aplikacijom.
izrazi
- Izrazi kroz AngularJS bit će opisani unutar dvostrukih kovrčavih zagrada: izraz.
- Za pisanje izraza unutar direktive: ng-bind = "izraz".
Na primjer
Izlaz:
kontrolor
- Primjena AngularJS će kontrolirati jednostavno kontroleri.
- Regulator aplikacije mogao bi se opisati ng regulatorom kontrolera
- Kontroler je poznat kao JS objekt, izrađen s redovitim JS konstruktorom objekata.
Objasnite AngularJS događaje
Različite vrste događaja smještene u AngularJS
AngularJS je nevjerojatno prepun događaja i uključuje osnovni model kako možete dodati slušatelje događaja prema HTML-u. Omogućuje obilje događaja povezanih s mišem i tipkovnicom. Većina tih događaja bit će postavljena na HTML element. U slučaju da ste istovremeno napisali i HTML, AngularJS događaje, nakon čega se oba događaja mogu izvršiti, to znači da AngularJS događaj nikad neće prepisati HTML događaj.
Nekoliko bitnih događaja su sljedeći.
- ng-kopija
- ng-klik
- ng-cut
- ng dblclick
- ng keydown
- ng pritisak
- ng keyup
- ng mousedown
- ng mouseenter
- ng mouseleave
- ng mousemove
- Prelazak mišem ng
- ng mouseup
- ng mutnoće
Analiziraćemo komunikaciju s događajima.
Angular JS uključuje globalnu sabirnicu događaja koja vam omogućuje da podižete događaje u jednom opsegu i dopuštate drugim opsezima da slušaju taj događaj i reagiraju na njega. Možete proslijediti dodatne argumente događajem kako bi drugi slušatelji mogli odgovarajuće reagirati na događaj. Događaji su prilično jednostavni, ali ima ih nekoliko gotchasa.
Prvo, slušajući događaj jednostavno nazovete metodu $ on () na opsegu s parametrom naziva događaja. Tada će svaki događaj s tim nazivom aktivirati vaš povratni poziv. S druge strane, podizanje događaja zahtijeva malo planiranja.
Recimo da imam događaj koji je postavljen ovdje, u Dječjem djelokrugu 1, ali taj događaj želimo slušati u Dječjem djelokrugu 2. Nažalost, to se ne može dogoditi.
U kutnom JS postoje dvije mogućnosti podizanja događaja.
Prvi je nazvati opseg $ emisije, koji događaj podiže u izvornom opsegu, a zatim ga šalje na sve domete djece.
Druga je mogućnost pozivanje dosega. $ emit, koji podiže događaj na izvornom opsegu, a zatim ga šalje gore lancu obuhvata.
Ali ne postoji uistinu globalni način emitiranja iz djetetovog dosega. Način da se to dogodi je zahvatiti $ rootScope i pozvati $ emitiranje na njemu, što ga šalje na sve domete djece.
A sada krenimo prilagoditi svoj kod kako bismo uspjeli raditi s događajima umjesto nasljeđenih opsega. Dakle, prvi problem koji smo primijetili da želimo da se neki događaj riješi jest činjenica da ovdje, u kontroleru Kataloga, ova metoda registerCourse () poziva izravno na podatke o rasporedu. To nije njegov posao.
Dodavanje stavki u raspored nije nešto što bi trebao raditi katalonski kontroler. Umjesto toga, ono što treba učiniti je obavijestiti nekoga drugog da se tečaj registrira, a zatim vjerovati da će i drugi objekti dodati ispravke tečaja u raspored. Dakle, predmet koji bi se trebao baviti rasporedom je, naravno, kontroler za planiranje.
Pa idemo na kontroler rasporeda i dodamo slušatelja događaja. Nazvat ćemo naš tečaj registriranim. Prvi parametar povratnog poziva događaju je objekt događaja, a nakon toga svaki dodatni parametar koji postavljate kada podižete događaj.
Dakle, mi ćemo planirati činjenicu da onaj koji je podigao događaj stavi na tečaj koji je i taj događaj. Tada odavde možemo raditi logiku koja je izvorno izvršena u metodi registerCourse () upravo ovdje.
Sada, umjesto da se oslanjamo na raspored koji će biti u opsegu $, već ćemo skinuti $ opseg i tek uvesti planiranu uslugu. A otkad donosimo raspored ovdje, više nam nije potrebno unositi ga na regulator registra.
Tako možemo ovdje izvući ovu liniju, premjestiti je na naš kontroler rasporeda i sada tu ovisnost izvaditi iz kontrolera registracije.
Sada je sjajno što smo ovdje slušali događaj, ali nitko to nije podigao. Mjesto ovdje u metodi registerCourse () na kataloškom regulatoru.
Katalonski kontroler ne može podići događaj koji kontroler rasporeda može preslušati jer su braća i sestre. Dakle, ono što ćemo trebati učiniti je donijeti ovisnost o $ rootScopeu.
Zatim odavde možemo nazvati $ rootScope. $ Emisije () podići događaj koji tražimo i dodati u parametar koji treba biti na tom događaju.
Sada imamo još jednu stvar koju možemo očistiti. Ovdje dolje zovemo $ range.notify, ali već uvećavamo događaj kada smo registrirali tečaj. Trebali bismo dopustiti da netko drugi obrađuje obavijest svaki put kada se registrira bilo koji tečaj.
Zato se vratimo na naš regulator za registraciju i dodajmo mu slušatelja događaja.
A onda odavde možemo nazvati kod da obave obavijest. Čini se mnogo prikladnijim to učiniti u okviru kontrolera za registraciju, jer je to mjesto na kojem definiramo metodu notify ().
Provjerimo ovaj izlaz u pregledniku i vidjeti kako to funkcionira.
Naše promjene su se pokazale sjajno.
Sada pogledajmo kôd i analiziramo prednosti i nedostatke korištenja događaja. Prvo dobro koje smo primijetili je da nam se sviđa je da logika u svakom od kontrolera ima neke veze s tim kontrolerom.
Upravljač kataloga ima logike u podizanju događaja kada netko klikne gumb Registriraj tečaj i logike u označavanju prijavljenog tečaja. Raspored ima logiku dodavanja stavki u raspored, a kontroler Registracije ima logiku obavijesti. Zbog toga nemamo kontroler koji dovodi u službu da nema nikakve veze.
Također, naš korijenski kontroler nije prepun ovisnosti s kojima nema nikakve veze. Ipak, postoji nekoliko nedostataka. Svatko tko rukuje događajem može otkazati događaj. To može dovesti do loših pogrešaka.
Ako neki određeni rukovatelj otkaže događaj, slušatelj koji još treba čuti o tom događaju nije obrađivao. Priključujemo naš kontroler na te događaje.
Nedostatak događaja je što koristimo niz za naziv događaja i teško je spriječiti sukob s imenom događaja.
Jedina zaštita je dobra strategija imenovanja imena događaja.
Zaključak - AngularJS događaji
- Eliminira stanje poslužitelja
- Omogućuje znanje izvornih aplikacija
- Logiku pregledavanja jednostavno stavlja u JavaScript
- Zahtijeva inovativne podatke o vještinama, kao i postupke
Preporučeni članci
Ovo je vodič za događaje AngularJS. Ovdje ćemo raspravljati o osnovama AngularJS-a i objasniti događaj AngularJS s primjerima. Možete također pogledati sljedeće članke da biste saznali više -
- Ispitivanje kutne jedinice JS
- AngularJS Arhitektura
- AngularJS direktive
- Karijera u kutnomJS
- Top 5 atributa HTML događaja s primjerima
- Vodič za različite JavaScript događaje