Sissejuhatus AngularJS sündmustesse
AngularJS-i võib kirjeldada kui JavaScripti raamistikku, mida kasutatakse nii üheleheliste rakenduste (SPA) loomiseks nii mobiili- kui ka veebiarenduseks. SPA on üks leht, kus palju teadmisi on endiselt sarnased, et muuta mõne bitti andmeid veelgi paremaks, kui klõpsate täiendavatel kategooriatel / valikul. Kogu see protseduur võib teie tööd leevendada, lubades lihtsalt kulude üle kanda, suurendades nii tõhusust kui ka veebilehe kiiremat laadimist. Selles teemas tutvume AngularJS sündmustega.
Kasutades AngularJS, saate töötada nii direktiivide kui ka HTML-atribuutidega, sidudes andmed lihtsalt HTML-iga koos avaldistega. AngularJS võib olla MVC arhitektuur, mis muudab veebirakendused algusest peale lihtsaks. AngularJS 1.0 käivitati 2010. aastal ja kui me täna arutame; AngularJS uusim versioon on 1.7.8, mis ilmus märtsis 2019. AngularJS on lisaks avatud lähtekoodiga raamistik, mida haldab lihtsalt Google, kasutades tohutut programmeerijate kogukonda.
Eeltingimused
Enne AngularJS-i siirdumist peate omama põhjalikke teadmisi
- JavaScript
- HTML
- CSS
NurgaJS alused
Siin on AngularJS põhitõed
Direktiivid
Eesliide ng tähendab AngularJS. ng- võib kirjeldada prefiksina, mis on reserveeritud nurkvõtmete direktiividele. Kokkupõrgete vältimiseks võivad nad soovitada, et te ei kasutaks hiljem oma nurkade versioonis oma direktiivides täpset eesliidet. Ng võib olla lühend nurgast.
Mõnede direktiivide juhendid AngularJS-is
- Ng-uut direktiivi saab kasutada uue nurgarakenduse loomiseks
- Ng-update direktiiv värskendab teie hämmastavaid rakendusi ja ka nende sõltuvusi
- Rakenduse ng-rakendust saab kasutada AngularJS-i rakenduse initsialiseerimiseks.
- Ng-init- direktiiv lähtestab rakenduse teabe.
Ka rakenduse ng direktiiv selgitab AngularJS-ile, milline element on AngularJS-i puhul ettevõtja.
Väljendid
- Väljendeid AngularJS kaudu kirjeldatakse kahekordsetes sulgudes: avaldis.
- Lause kirjutamiseks direktiivis: ng-bind = ”avaldis”.
Näiteks
Väljund:
Kontroller
- AngularJS-i rakendamist kontrollivad lihtsalt kontrollerid.
- Rakenduse kontrollerit võiks kirjeldada ng-kontrolleri direktiiviga
- Kontrollerit nimetatakse JS-objektiks, mis on konstrueeritud tavalise JS-i objekti konstruktoriga.
Selgitage AngularJS sündmusi
Erinevad üritused, mis asuvad AngularJS-is
AngularJS on uskumatult sündmusi täis ja sisaldab põhimudelit, kuidas saate sündmuste kuulajaid HTML-i lisada. See hõlbustab palju hiire ja klaviatuuriga seotud sündmusi. Enamik neist sündmustest pannakse HTML-elemendile. Kui olete kirjutanud HTML-i ja ka AngularJS-i sündmused samaaegselt, siis pärast seda, kui mõlemad sündmused saavad käivituda, tähendab see, et AngularJS-i sündmus ei kirjuta kunagi HTML-i sündmust üle.
Mõned olulised sündmused on järgmised.
- ng-koopia
- ng klõps
- ng-cut
- ng-dblclick
- ng-klahvi allalaadimine
- ng-klahvivajutus
- ng-klahvistik
- nihutatud
- ng-hiirekeskus
- ng-mouseleave
- ng-hiire eemaldamine
- ng hiirekursor
- ng-hiire ülesvõte
- ng-hägusus
Analüüsime sündmuste suhtlemist.
Nurga JS sisaldab ülemaailmset sündmuste bussi, mis võimaldab teil tõsta sündmusi ühele ulatusele ja lasta teistel ulatustel sündmust kuulata ja sellele reageerida. Võite sündmusega edastada täiendavaid argumente, et teised kuulajad saaksid sündmusele asjakohaselt reageerida. Üritused on üsna sirgjoonelised, kuid neid on vähe.
Esiteks, sündmuse kuulamisel helistate lihtsalt ulatuse meetodil $ on () sündmuse nime parameetriga. Siis käivitab iga selle nimega sündmus teie tagasihelistamise. Ürituse tõstmine nõuab seevastu pisut planeerimist.
Ütleme, et mul on sündmus, mis on tõstatatud siin, 1. lapsepiiri piires, kuid me tahame seda sündmust kuulata 2. alaosas. Kahjuks ei saa me seda juhtuda.
Angular JS-is on sündmuse tõstmiseks kaks võimalust.
Esimene on helistada ulatusele. $ -Ülekanne, mis tõstab sündmuse algsesse ulatusse ja saadab selle seejärel kõigile alamastmetele.
Teine võimalus on helistada ulatusele. $ emit, mis tõstab sündmuse päritolustaatuse ulatusse ja saadab selle seejärel ulatuse ahelas üles.
Kuid lapse ulatusest ülekandmiseks pole tõeliselt ülemaailmset viisi. Selle juhtumise viis on saada kätte $ rootScope ja kutsuda $ eetrisse see, mis saadab selle kõikidele aladele.
Nüüd korrigeerime oma koodi nii, et see toimiks päritud ulatuste asemel sündmustega. Esimene probleem, mida märkasime sündmuse lahendamiseks, on asjaolu, et kataloogi kontrolleris kutsub see registerCourse () meetod ajakavaandmetes paremale. See pole tema töö.
Üksuste lisamine ajakavasse ei ole midagi, mida kataloogikontroller peaks tegema. Selle asemel peaks see teatama kellelegi teisele, et kursus on registreerunud, ja siis usaldama, et muud objektid lisavad kursuse parandused ajakavasse. Nii et objekt, mis peaks ajakavaga tegelema, on muidugi sõiduplaani kontroller.
Läheme siis ajakava kontrolleri juurde ja lisame sündmuse kuulaja. Kutsume oma ürituse kursuse registreerunuks. Sündmuse tagasihelistamise esimene parameeter on sündmuse objekt ja seejärel mis tahes täiendav parameeter, mille panite sündmuse tõstmisel.
Nii et plaanime seda, et kes ürituse üles kasvatas, see paneb ka sündmuse üles tõstnud kursuse. Siit alates saame teha loogikat, mis algselt tehti siin registerCourse () meetodil.
Nüüd, selle asemel et tugineda ajakavale, et olla juba $ ulatuses, võtame $ ulatuse maha ja toome lihtsalt sisse plaanitud teenuse. Ja kuna me toome siia ajakava, ei pea me enam seda oma registripidajale alla viima.
Nii et võime selle joone siit välja viia, viia see üle meie ajakava kontrolleri juurde ja viia see sõltuvus nüüd registreerimiskontrollerist välja.
Nüüd on suurepärane, et oleme siin üritust kuulanud, kuid keegi ei tõsta seda sündmust. Koht siin registrikontrolli meetodil registerCourse ().
Kataloogi kontroller ei saa tõsta sündmust, mida saab kuulata ajakava kontroller, kuna nad on õed-vennad. Nii et peame tegema sõltuvuse $ rootScope'ist.
Siis saame siit helistada $ rootScope. $ Broadcast () tõsta üles otsitav sündmus ja lisada parameeter, mis sellel sündmusel olema peab.
Nüüd on meil veel üks asi, mille saame ära koristada. Siin allpool kutsume dollarit $ ulatus.teate, kuid tõstame juba sündmust, et oleme kursuse registreerinud. Me peaksime laskma kellelgi teisel teatisega tegeleda, kui mõni kursus registreeritakse.
Läheme siis tagasi meie registreerimiskontrolleri juurde ja lisage sellele sündmuse kuulaja.
Ja siis siit saame helistada koodi, et teavitus teha. Tundub palju sobivam seda teha registreerimiskontrolleri sees, kuna see on koht, kus määratleme teatamise () meetodi.
Kontrollime seda väljundit brauseris ja vaatame, kuidas see töötab.
Meie muudatused on sujunud suurepäraselt.
Vaatame nüüd koodi ja analüüsime sündmuste kasutamise eeliseid ja puudusi. Esimene eelis, mis meile meeldis, on see, et iga kontrolleri loogikal on selle kontrolleriga midagi pistmist.
Kataloogi kontrolleril on loogika sündmuse tõstmiseks, kui keegi klõpsab nuppu Registreeri kursus, ja loogikat registreeritud kursuse märkimisel. Ajakavas on loogika üksuste lisamiseks ajakavasse ja registreerimise kontrolleril on loogika teadete kohta. Seetõttu pole meil kontrollerit, kes käivitaks teenuse, millega pole midagi pistmist.
Ka meie juurkontroller pole täis sõltuvusi, millel pole midagi pistmist. Siiski on mõned puudused. Igaüks, kes haldab sündmust, saab selle sündmuse tühistada. See võib põhjustada halbu vigu.
Kui mõni konkreetne käitleja tühistab sündmuse ja kuulaja, kes peab sellest sündmusest veel kuulma, pole seda töötanud. Me ühendame oma kontrolleri nende sündmustega.
Sündmuste puuduseks on see, et me kasutame sündmuse nime jaoks stringi ja sündmuse nime konflikte on keeruline vältida.
Ainus kaitse seal on sündmuste nimede hea nimetamisstrateegia.
Järeldus - nurgelisedJS sündmused
- Kõrvaldab serveri oleku
- Lubab loomuliku rakenduse tundmise
- Paneb loogika hõlpsalt JavaScripti sisse
- Nõuab uuenduslikku teavet oskuste kohta ja protseduure
Soovitatavad artiklid
See on juhend AngularJS sündmuste kohta. Siin käsitleme AngularJS-i põhitõdesid ja selgitame näidete abil AngularJS-i sündmust. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -
- NurgaJS ühiku testimine
- AngularJS arhitektuur
- NurgaJS direktiivid
- Karjäär nurgasJS
- 5 parimat HTML-i sündmuse atribuuti koos näidetega
- Erinevate JavaScripti sündmuste juhend