Johdatus AngularJS-tapahtumiin
AngularJS voidaan kuvata JavaScript-kehykseksi, jota käytetään yhden sivun sovellusten (SPA) perustamiseen sekä mobiili- että web-kehitykseen. SPA on yksi sivu, missä suuri osa tietämyksestä on edelleen samanlaista tukemalla muutamaa bittiä tietoja voidaan mukauttaa napsauttamalla muita luokkia / vaihtoehtoa. Tämä koko toimenpide voi helpottaa työtäsi yksinkertaisesti sallimalla kustannukset, lisäämällä tehokkuutta ja lataamalla verkkosivun nopeammin. Tässä aiheessa aiomme oppia AngularJS-tapahtumista.
AngularJS: n avulla voit työskennellä sekä direktiivien kanssa että käyttää HTML-määritteitä sitomalla tiedot HTML: ään lausekkeilla. AngularJS voi olla MVC-arkkitehtuuri, jonka avulla verkkosovelluksia on helppo rakentaa alusta alkaen. AngularJS 1.0 lanseerattiin vuonna 2010, ja jos keskustelemme tänään; AngularJS: n uusin versio voi olla 1.7.8, joka julkaistiin maaliskuussa 2019. AngularJS on lisäksi avoimen lähdekoodin kehys, jota yksinkertaisesti Google hallinnoi käyttämällä valtavaa ohjelmoijayhteisöä.
Edellytykset
Ennen kuin siirryt eteenpäin AngularJS: ään, sinulla on oltava perustiedot
- JavaScript
- HTML
- CSS
AngularJS: n perusteet
Tässä on AngularJS: n perusteet
direktiivit
Etuliite ng tarkoittaa AngularJS. ng- voidaan kuvata etuliitteenä, joka on varattu kulma- avausdirektiiveille . Törmäysten estämiseksi ne voivat ehdottaa, että et koskaan käytä tarkkaa etuliitettä direktiiveissäsi myöhemmässä versiossa Angular. Ng voi olla lyhenne kulmasta.
Esimerkkejä muutamista AngularJS: n direktiiveistä
- Uutta direktiiviä voidaan käyttää uuden kulma-sovelluksen tuottamiseen
- Ng-päivitysdirektiivi päivittää uskomattomia sovelluksiasi ja niiden riippuvuuksia
- Ng-app -direktiiviä voidaan käyttää AngularJS-sovelluksen alustamiseen.
- Ng-init- direktiivi alustaa sovellustiedot.
Myös ng-app-direktiivi selittää AngularJS: lle, mikä elementti on “yrittäjä” AngularJS-sovelluksessa.
expressions
- Lausekkeet AngularJS: n kautta kuvataan tupla-kiharasulkeissa: lauseke.
- Lausekkeen kirjoittamiseksi direktiivissä: ng-bind = ”lauseke”.
Esimerkiksi
lähtö:
ohjain
- AngularJS -sovelluksen ohjaamista ohjaavat vain ohjaimet.
- Sovelluksen ohjain voitaisiin kuvata ng-ohjaindirektiivillä
- Ohjain tunnetaan JS-objektina, joka on rakennettu tavallisella JS-objektikonstruktorilla.
Selitä AngularJS-tapahtumia
Erilaisia tapahtumia AngularJS: ssä
AngularJS on uskomattoman täynnä tapahtumia ja sisältää perusmallin, jolla voit lisätä tapahtumien kuuntelijoita HTML-koodiin. Se helpottaa paljon hiiren ja näppäimistön tapahtumia. Suurin osa näistä tapahtumista laitetaan HTML-elementtiin. Jos olet kirjoittanut HTML: n ja myös AngularJS-tapahtumia samanaikaisesti, sen jälkeen kun molemmat tapahtumat voivat suorittaa, tämä tarkoittaa, että AngularJS-tapahtuma ei koskaan korvaa HTML-tapahtumaa.
Muutama tärkeistä tapahtumista on seuraava.
- ng-kopio
- ng-klikkaus
- ng perus-
- ng-dblclick
- ng-keydown
- ng-näppäimen painallus
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng epätarkkuutta
Aiomme analysoida viestintää tapahtumien kanssa.
Kulma JS sisältää globaalin tapahtumaväylän, jonka avulla voit nostaa tapahtumia yhdellä alueella ja antaa muiden piirien kuunnella kyseistä tapahtumaa ja vastata siihen. Voit siirtää lisäargumentteja tapahtuman kanssa, jotta muut kuuntelijat voivat vastata tapahtumaan asianmukaisesti. Tapahtumat ovat melko suoraviivaisia, mutta heitä on muutamia.
Ensinnäkin, kun kuuntelet tapahtumaa, soitat vain $ on () -menetelmälle laajuudella tapahtuman nimen parametrilla. Sitten mikä tahansa nimi, jolla nimi on, käynnistää soittopyynnön. Tapahtuman herättäminen puolestaan vaatii hieman suunnittelua.
Oletetaan, että minulla on tapahtuma, joka on esitelty täällä, Child Scope 1: ssä, mutta haluamme kuunnella sitä tapahtumassa Child Scope 2: ssa. Valitettavasti emme voi tehdä niin.
On kaksi vaihtoehtoa tapahtuman järjestämiseen Angular JS: ssä.
Ensimmäinen on kutsua laajuutta. $ -Lähetys, joka nostaa tapahtuman lähtöalueella ja lähettää sen sitten kaikkiin ala-alueisiin.
Toinen vaihtoehto on soittaa laajuuteen. $ emit, joka nostaa tapahtuman lähtöalueella ja lähettää sen sitten laajuusketjuun.
Mutta ei ole mitään maailmanlaajuista tapaa lähettää lapsen piiristä. Tapa tehdä tämä tapahtuu on saada hallussaan $ rootScope ja soittaa siihen $ broadcast, joka lähettää sen kaikille ala-alueille.
Nyt siirrytään säätämään koodiamme, jotta se toimisi tapahtumien kanssa perittyjen laajuuksien sijaan. Joten ensimmäinen ongelma, jonka huomasimme, että haluamme tapahtuman ratkaista, on se, että täällä Katalogi-ohjaimessa tämä registerCourse () -metodi vaatii työntöaikataulutiedot oikealle. Se ei ole sen tehtävä.
Kohteiden lisääminen aikatauluun ei ole jotain, mitä Catalog-ohjaimen tulisi tehdä. Sen sijaan sen, mitä sen pitäisi tehdä, on ilmoittaa jollekin kurssin rekisteröinnistä ja sitten luottaa siihen, että muut objektit lisäävät kurssin korjaukset aikatauluun. Joten kohde, jonka pitäisi olla tekemisissä aikataulun kanssa, on tietenkin aikataulun hallinta.
Joten siirrymme Aikataulu-ohjaimeen ja lisäämme tapahtuman kuuntelijan. Kutsumme tapahtumakurssimme rekisteröidyksi. Ensimmäinen parametri tapahtuman takaisinsoitolle on tapahtumaobjekti ja sen jälkeen kaikki muut parametrit, jotka lisäät, kun nostat tapahtumaa.
Joten aiomme suunnitella sitä, että kuka tahansa, joka esitti tapahtuman, aikoo laittaa myös tapahtumaa nostaneen kurssin tapahtumaan. Sitten täältä voimme tehdä logiikan, joka alun perin tehtiin täällä registerCourse () -menetelmällä.
Nyt sen sijaan, että luottaisimme aikataululle ollaan $ -laajuudessa, poistamme $ -alueen ja tuomme vain aikataulun mukainen palvelu. Ja koska tuomme aikataulut tänne, meidän ei enää tarvitse laskea sitä alas Rekisterinpitäjällemme.
Joten voimme viedä tämän linjan täältä, siirtää sen aikataulu-ohjaimeen ja viedä tämä riippuvuus nyt rekisteröintiohjaimesta.
Nyt on hienoa, että olemme kuunnelleet tapahtumaa täällä, mutta kukaan ei tuota tapahtumaa. Paikka täällä registerCourse () -menetelmässä Katalogi-ohjaimessa.
Luettelo-ohjain ei voi nostaa tapahtumaa, jota Aikataulu-ohjain voi kuunnella, koska he ovat sisaruksia. Joten mitä meidän on tehtävä, on luoda riippuvuus $ rootScope-ohjelmasta.
Sitten täältä voidaan soittaa $ rootScope. $ Broadcast () nostaa etsimämme tapahtuman ja lisätä parametrin, jonka on oltava kyseisessä tapahtumassa.
Nyt meillä on toinen asia, jonka voimme siivota. Täällä täällä kutsumme dollaria ulatus.ilmoita, mutta nostamme jo tapahtumaa, jonka olemme rekisteröineet kurssin. Meidän pitäisi antaa jonkun muun käsitellä ilmoitusta, kun mikä tahansa kurssi rekisteröidään.
Joten palataan takaisin rekisteröintiohjaajamme luo ja lisäämme tapahtuman kuuntelijan siihen.
Ja sitten täältä voimme soittaa koodille ilmoituksen tekemistä varten. Tuntuu paljon tarkoituksenmukaisemmalta tehdä tämä rekisteröinnin ohjaimessa, koska se on paikka, jossa määrittelemme ilmoittamismenetelmä ().
Tarkistetaan tämä lähtö selaimessa ja katsotaan sen toiminta.
Muutoksemme ovat sujuneet hyvin.
Katsotaanpa nyt koodia ja analysoidaan tapahtumien käytön etuja ja haittoja. Ensimmäinen hyöty, jonka huomasimme pitävämme, on, että jokaisessa ohjaimessa olevalla logiikalla on jotain tekemistä kyseisen ohjaimen kanssa.
Katalogi-ohjaimella on logiikka tapahtuman nostamiseksi, kun joku napsauttaa Rekisteröi kurssi -painiketta, ja logiikkaa rekisteröidyn kurssin merkitsemiseksi. Aikataululla on logiikka kohteiden lisäämiseksi aikatauluun ja Rekisteröintiohjaimella on logiikka ilmoituksista. Siksi meillä ei ole rekisterinpitäjää ottamassa palvelukseen, jolla ei ole mitään tekemistä.
Myöskään juuriohjaimestamme ei ole täynnä riippuvuuksia, joilla sillä ei ole mitään tekemistä. On kuitenkin joitain haittoja. Kuka tahansa tapahtuman käsittelijä voi peruuttaa tapahtuman. Tämä voi johtaa huonoihin virheisiin.
Jos jokin tietty käsittelijä peruuttaa tapahtuman, ja kuuntelija, jonka on vielä kuulla siitä tapahtumasta, ei ole käsitellyt. Kytkemme ohjaimen näihin tapahtumiin.
Tapahtumien haittapuolena on, että käytämme merkkijonoa tapahtuman nimeä varten ja on vaikea estää tapahtuman nimen ristiriitoja.
Ainoa suoja siellä on hyvä tapahtumien nimitystrategia.
Johtopäätös - AngularJS -tapahtumat
- Poistaa palvelimen tilan
- Mahdollistaa alkuperäisen sovellustiedon
- Laittaa logiikan helposti JavaScriptiin
- Vaatii innovatiivisia taitotietoja sekä menettelytapoja
Suositellut artikkelit
Tämä on opas AngularJS-tapahtumiin. Tässä keskustellaan AngularJS: n perusteista ja selitetään AngularJS-tapahtuma esimerkkeillä. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- AngularJS-yksikön testaus
- AngularJS -arkkitehtuuri
- AngularJS -direktiivit
- Ura AngularJS: ssä
- 5 suosituinta HTML-tapahtumamääritettä esimerkillä
- Opas erilaisiin JavaScript-tapahtumiin