Introducere în AngularJS Events
AngularJS poate fi descris ca un cadru JavaScript utilizat pentru stabilirea aplicațiilor de o singură pagină (SPA) pentru mobil, precum și pentru dezvoltarea web. SPA este o singură pagină oriunde o mulțime de cunoștințe continuă să fie similare, în sprijinul câtorva biți de date pot fi personalizate pe măsură ce faceți clic pe categorii / opțiune suplimentare. Această întreagă procedură vă poate ușura munca, permițând pur și simplu costurile, creșterea eficienței și încărcarea mai rapidă a paginii web. În acest subiect, vom afla despre evenimentele AngularJS.
Folosind AngularJS, puteți lucra cu directive, precum și, puteți utiliza atribute HTML prin simpla legare a datelor HTML la expresii. AngularJS poate fi o arhitectură MVC care face ca aplicațiile web să fie simple de construit de la început. AngularJS 1.0 a fost lansat în 2010 și dacă discutăm astăzi; cea mai nouă versiune de AngularJS poate fi 1.7.8 care a fost lansată în martie 2019. AngularJS este în plus un cadru open-source gestionat de Google pur și simplu folosind o comunitate uriașă de programatori.
Pre-rechizite
Înainte de a merge mai departe către AngularJS, trebuie să aveți cunoștințe fundamentale
- JavaScript
- HTML
- CSS
Bazele AngularJS
Iată elementele de bază ale AngularJS
directivă
Prefixul ng înseamnă AngularJS. ng- poate fi descris ca prefix rezervat directivelor cheie unghiulară. Pentru a preveni coliziunile, acestea vă pot sugera să nu utilizați niciodată exact prefixul ng din directivele dvs. mai târziu, în versiunea Angular. Ng poate fi o prescurtare a lui Angular.
Câteva dintre directivele din AngularJS
- Noua directivă poate fi utilizată pentru producerea unei noi aplicații unghiulare
- Directiva de actualizare ng actualizează aplicațiile tale uimitoare Și, de asemenea, dependențele lor
- Directiva aplicației ng poate fi utilizată pentru inițializarea unei aplicații AngularJS.
- Directiva ng-init inițializează informațiile despre aplicații.
De asemenea, directiva aplicației ng explică AngularJS care este elementul „antreprenor” cu aplicația AngularJS.
Expresii
- Expresiile prin AngularJS vor fi descrise în paranteze duble cret: expresie.
- Pentru scrierea unei expresii în cadrul unei directive: ng-bind = „expresie”.
De exemplu
ieşire:
Controlor
- Aplicarea AngularJS va fi controlată doar de Controlere.
- Controlerul aplicației poate fi descris cu o directivă ng-controller
- Un controler este cunoscut ca un obiect JS, construit cu un constructor obișnuit JS obiect.
Explicați evenimentele AngularJS
Diferite tipuri de evenimente situate în AngularJS
AngularJS este incredibil de plin de evenimente și include un model de bază pentru modul în care puteți adăuga ascultători de evenimente către HTML. Acesta facilitează o mulțime de evenimente asociate mouse-ului și tastaturii. Majoritatea acestor evenimente vor fi puse pe un element HTML. În cazul în care ați scris HTML și, de asemenea, evenimente AngularJS concomitent, după care ambele evenimente pot fi executate, acest lucru înseamnă că un eveniment AngularJS nu va suprascrie niciodată un eveniment HTML.
Câteva dintre evenimentele esențiale sunt următoarele.
- ng-copiere
- ng-clic
- ng-cut
- ng-dblclick
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-estompare
Vom analiza este Comunicarea cu evenimentele.
Angular JS include un bus global de evenimente care vă permite să ridicați evenimente pe un singur domeniu și să lăsați alte scopuri să asculte acel eveniment și să răspundă la acesta. Puteți transmite argumente suplimentare cu evenimentul, astfel încât alți ascultători să poată răspunde corespunzător la eveniment. Evenimentele sunt destul de simple, dar există câteva achiziții pentru acestea.
În primul rând, pentru a asculta un eveniment, pur și simplu apelați la metoda $ on () pe un domeniu cu un parametru al numelui evenimentului. Apoi, orice eveniment cu acest nume va declanșa apelul. Creșterea unui eveniment, pe de altă parte, necesită un pic de planificare.
Să spunem că am un eveniment care este prezentat aici, în Child Scope 1, dar vrem să ascultăm acest eveniment în Child Scope 2. Din păcate, nu putem face acest lucru.
Există două opțiuni pentru creșterea unui eveniment în Angular JS.
Prima este să apelăm la sfera de difuzare. $ Difuzare, care ridică evenimentul pe domeniul de aplicare inițial și apoi îl trimite în toate scopurile copilului.
Cealaltă opțiune este să apelați domeniul de aplicare. $ emit, ceea ce ridică evenimentul pe domeniul de aplicare inițial și apoi îl trimite în lanțul de aplicare.
Dar nu există o modalitate cu adevărat globală de difuzare din domeniul de aplicare al unui copil. Modul de a face acest lucru este de a obține un control de $ rootScope și de a suna $ difuzat pe acesta, care îl trimite în toate domeniile copilului.
Acum să mergem să ne ajustăm codul pentru ca acesta să funcționeze cu evenimente în loc de scopuri moștenite. Așadar, prima problemă pe care am observat-o că dorim să o rezolvăm un eveniment este faptul că aici, în controlerul Catalog, această metodă registerCourse () apelează push direct la datele din program. Nu este treaba lui.
Adăugarea de elemente la program nu este ceva ce ar trebui să facă controlorul de catalog. În schimb, ceea ce ar trebui să facă este să anunți pe cineva că un curs se înregistrează și apoi să ai încredere că alte obiecte vor adăuga corecțiile cursului la program. Deci, obiectul care ar trebui să se ocupe de program este controlatorul de planificare, desigur.
Așadar, să mergem la controlorul Schedule și să adăugăm un ascultător de evenimente. Vom apela la evenimentul nostru înregistrat. Primul parametru pentru o convorbire la un eveniment este un obiect de eveniment și apoi orice alt parametru pe care îl puneți atunci când ridicați evenimentul.
Așadar, vom planifica faptul că cine a susținut evenimentul va pune cursul care a susținut evenimentul și pe eveniment. Apoi, de aici, putem face logica care a fost realizată inițial în metoda registerCourse () chiar aici.
Acum, în loc să ne bazăm pe orarul de a fi în limita de $, deja vom scoate din sfera $ și vom aduce doar serviciul programat. Și din moment ce aducem programul aici, nu mai este nevoie să-l aducem în jos pe controlerul nostru de înregistrare.
Așadar, putem lua această linie aici, să o mutăm în controlerul Schedule și să scoatem această dependență din controlerul de înregistrare.
Acum este minunat că am ascultat evenimentul aici, dar nimeni nu a ridicat acel eveniment. Locul aici în metoda registerCourse () de pe controlerul de catalog.
Controlerul de catalog nu poate ridica un eveniment care poate fi ascultat de controlorul Schedule, deoarece sunt frați. Deci, ceea ce va trebui să facem este să aducem o dependență de $ rootScope.
Apoi, de aici putem apela $ rootScope. $ Broadcast () să ridicăm evenimentul pe care îl căutăm și să adăugăm parametrul care trebuie să fie la acel eveniment.
Acum avem un alt lucru pe care îl putem curăța. Chiar aici apelăm la $ range.notify, dar creștem deja că am înregistrat cursul. Ar trebui să lăsăm pe altcineva să se ocupe de notificare ori de câte ori este înregistrat orice curs.
Așadar, să revenim la controlorul nostru de înregistrare și să adăugăm un ascultător de evenimente.
Și apoi de aici, putem apela codul pentru a face notificarea. Pare mult mai potrivit să faceți acest lucru în cadrul controlerului de înregistrare, deoarece locul unde definim metoda de notificare ().
Să verificăm această ieșire în browser și să vedem cum funcționează.
Modificările noastre au fost grozave.
Acum, hai să ne uităm la cod și să analizăm beneficiile și dezavantajele folosirii evenimentelor. Primul beneficiu pe care l-am observat că ne place este faptul că logica din fiecare controlere are ceva de-a face cu controlerul respectiv.
Controlerul de catalog are logică în ceea ce privește ridicarea evenimentului când cineva face clic pe butonul Înregistrare curs și logica privind marcarea unui curs înregistrat. Schedule are logica privind adăugarea elementelor în program, iar controlerul de înregistrare are logica cu privire la notificări. Din această cauză, nu avem controloare care să pună în funcțiune cu care nu au nicio legătură.
De asemenea, controlorul nostru rădăcină nu este înghesuit de dependențe cu care nu are nimic de-a face. Cu toate acestea, există câteva dezavantaje. Oricine gestionează un eveniment poate anula acel eveniment. Acest lucru poate duce la erori proaste.
Dacă un anumit handler anulează un eveniment și un ascultător care trebuie să audă despre acel eveniment nu a fost procesat. Ne cuplăm controlorul la acele evenimente.
Dezavantajul evenimentelor este că folosim un șir pentru numele evenimentului și este dificil să prevenim conflictele de nume ale evenimentului.
Singura protecție există o strategie de denumire bună pentru numele evenimentelor.
Concluzie - Evenimente AngularJS
- Elimina starea serverului
- Permite cunoașterea aplicației native
- Pune vizualizarea logică în JavaScript
- Necesită informații inovatoare despre abilități, precum și proceduri
Articole recomandate
Acesta este un ghid pentru AngularJS Events. Aici discutăm Bazele AngularJS și Explicăm evenimentul AngularJS cu exemple. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe -
- AngularJS Testing Unit
- AngularJS Architecture
- Directivele AngularJS
- Cariera în AngularJS
- Top 5 Atribute de eveniment HTML cu exemple
- Ghid pentru diferite evenimente JavaScript