Introduksjon til AngularJS Events
AngularJS kan beskrives som et JavaScript-rammeverk som brukes til å etablere Single Page Applications (SPA) for mobil så vel som webutvikling. SPA er en enkelt side der mye av kunnskapen fortsetter å være lik støtte for noen få biter med data kan tilpasses når du klikker på flere kategorier / alternativ. Hele denne prosedyren kan avlaste arbeidet ditt ved å ganske enkelt tillate kostnadene, øke effektiviteten og laste ned nettsiden raskere. I dette emnet skal vi lære om AngularJS Events.
Ved å bruke AngularJS, kan du jobbe med direktiver så vel som, bruke HTML-attributter ved å bare binde data til HTML med uttrykkene. AngularJS kan være en MVC-arkitektur som gjør webapplikasjoner enkle å bygge fra begynnelsen. AngularJS 1.0 ble lansert i 2010, og hvis vi diskuterer i dag; den nyeste versjonen av AngularJS kan være 1.7.8 som ble utgitt i mars 2019. AngularJS er i tillegg et open source-rammeverk som administreres av ganske enkelt Google ved å bruke et stort fellesskap av programmerere.
Forutsetninger
Før du går videre til AngularJS, må du ha en grunnleggende kunnskap om
- Javascript
- HTML
- CSS
Grunnleggende om AngularJS
Her er det grunnleggende i AngularJS
direktiver
Prefikset ng betyr AngularJS. ng- kan beskrives som prefiks reservert for vinkeldirektiver . For å forhindre kollisjoner kan de foreslå at du aldri bruker den eksakte prefikset i direktivene senere om versjonen av Angular. Ng kan være en forkortelse av Angular.
Forekomster av noen få av direktivene i AngularJS
- Det ng-nye direktivet kan brukes til å produsere en ny kantet applikasjon
- Direktivet om ng-oppdatering oppdaterer de fantastiske applikasjonene dine, og også deres avhengigheter
- Ng-app- direktivet kan brukes til å initialisere en AngularJS-applikasjon.
- Ng-init- direktivet initialiserer appinfo.
Ng-app-direktivet forklarer også for AngularJS at elementet er en "gründer" med AngularJS-appen.
Uttrykkene
- Uttrykk gjennom AngularJS vil bli beskrevet inne i doble krøllete parenteser: uttrykk.
- For å skrive et uttrykk innenfor et direktiv: ng-bind = ”uttrykk”.
For eksempel
Produksjon:
Controller
- Å bruke AngularJS vil bli kontrollert av ganske enkelt kontrollører.
- Programkontrolleren kan beskrives med et ng-controller-direktiv
- En kontroller er kjent som et JS-objekt, konstruert med en vanlig JS-objektkonstruktør.
Forklar AngularJS-hendelser
Ulike typer arrangementer lokalisert i AngularJS
AngularJS er utrolig full av hendelser og inkluderer en grunnleggende modell for hvordan du kan legge til begivenhetslyttere mot HTML. Det letter mange arrangementer knyttet til mus og tastatur. De fleste av disse hendelsene blir lagt på et HTML-element. Hvis du har skrevet HTML og også AngularJS-hendelser samtidig, etter at begge hendelsene kan utføres, betyr dette at en AngularJS-hendelse aldri vil overskrive en HTML-hendelse.
Noen få av de viktigste begivenhetene er følgende.
- ng-kopi
- ng-klikk
- ng snitt
- ng-DblClick
- ng-keydown
- ng-tastetrykk
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouse
- ng-mouseup
- ng uskarphet
Vi skal analysere kommuniserer med hendelser.
Angular JS inkluderer en global hendelsesbuss som lar deg heve hendelser i ett omfang og la andre omfang lytte etter den hendelsen og svare på den. Du kan gi flere argumenter med hendelsen, slik at andre lyttere kan svare riktig på hendelsen. Arrangementene er ganske enkle, men det er noen få getchas for dem.
For det første å lytte til en hendelse du bare kaller $ on () -metoden på et omfang med en parameter for navnet på hendelsen. Da vil enhver hendelse med det navnet utløse tilbakeringingen. Å løfte en begivenhet krever derimot litt planlegging.
La oss si at jeg har en hendelse som er oppvokst her, i Child Scope 1, men vi ønsker å lytte til den hendelsen i Child Scope 2. Dessverre kan vi ikke få det til.
Det er to alternativer for å løfte en begivenhet i Angular JS.
Den første er å ringe omfang. $ Kringkasting, som løfter hendelsen på det opprinnelige omfanget og deretter sender det ned til alle barnesøk.
Det andre alternativet er å ringe omfang. $ emit, som løfter hendelsen på det opprinnelige omfanget og deretter sender det opp omfangskjeden.
Men det er ingen virkelig global måte å kringkaste fra et barns omfang. Måten å få det til er å få tak i $ rootScope og ringe $ kringkasting på den, som sender den ned til alle barns omfang.
La oss nå justere koden vår slik at den fungerer med hendelser i stedet for arvelige omfang. Så det første problemet vi la merke til at vi ønsker at en hendelse skal løses, er det faktum at her, i katalogkontrolleren, kaller denne registerCourse () -metoden trykk rett på plandataene. Det er ikke jobben.
Å legge elementer til timeplanen er ikke noe som katalogkontrolleren bør gjøre. I stedet er det det skal gjøre å varsle noen andre om at et kurs blir registrert og deretter stole på at andre objekter vil legge kurskorreksjonene til timeplanen. Så objektet som bør håndtere timeplanen er selvfølgelig planleggingskontrolleren.
Så la oss gå til Planlegg-kontrolleren og legge til en hendelseslytter. Vi vil kalle vårt arrangementskurs registrert. Den første parameteren til en tilbakeringing til en hendelse er et hendelsesobjekt, og deretter den eventuelle tilleggsparameteren du legger når du hever hendelsen.
Så vi kommer til å planlegge det faktum at den som reiste arrangementet kommer til å sette kursen som løftet begivenheten også på arrangementet. Deretter kan vi gjøre logikken som opprinnelig ble oppført i metoden registerCourse () her.
Nå, i stedet for å stole på at planen skal være på $ -omfanget allerede, skal vi ta av $ -omfanget og bare få inn den planlagte tjenesten. Og siden vi bringer tidsplanen hit, trenger vi ikke lenger å hente den inn på vår registerkontroller.
Så vi kan ta denne linjen her, flytte den opp til planplankontrolleren vår, og nå ta den avhengigheten ut av registreringskontrolleren.
Nå er det flott at vi har lyttet til arrangementet her, men ingen reiser den begivenheten. Stedet her i metoden registerCourse () på katalogkontrolleren.
Katalogkontrolleren kan ikke heve en hendelse som kan bli lyttet til av Planlegg-kontrolleren fordi de er søsken. Så det vi trenger å gjøre er å få en avhengighet av $ rootScope.
Så herfra kan vi kalle $ rootScope. $ Broadcast () heve hendelsen som vi leter etter, og legge til parameteren som må være på den hendelsen.
Nå har vi en annen ting som vi kan rydde opp i. Akkurat her nede ringer vi $ scope.notify, men vi reiser allerede opp om at vi har registrert kurset. Vi bør la noen andre håndtere varselet når det er registrert et kurs.
Så la oss gå tilbake til vår registreringskontroller og legge til en begivenhetslytter til den.
Og herfra kan vi ringe koden for å gjøre varslingen. Det virker mye mer passende å gjøre det i Registreringskontrolleren, siden det stedet hvor vi definerer varslingsmetoden.
La oss sjekke denne utgangen i nettleseren og se hvordan den fungerer.
Endringene våre har fungert bra.
La oss nå se på koden og analysere fordelene og ulempene ved å bruke hendelser. Den første fordelen vi la merke til at vi liker, er at logikken i hver av kontrollerne har noe å gjøre med den kontrolleren.
Katalogkontrolleren har logikk for å heve hendelsen når noen klikker på Registrer kurs-knappen og logikken om å merke et registrert kurs. Planen har logikken om å legge til elementene i timeplanen, og Registreringskontrolleren har logikken om varsler. På grunn av det har vi ikke kontroller som innfører tjenester som de ikke har noe å gjøre med.
Dessuten er ikke rotkontrollen vår full av avhengigheter som den ikke har noe med. Det er noen ulemper. Alle som håndterer en begivenhet kan avlyse den hendelsen. Dette kan føre til dårlige feil.
Hvis en bestemt behandler kansellerer en hendelse og en lytter som fortsatt trenger å høre om den hendelsen ikke har blitt behandlet. Vi kobler kontrolleren vår til disse hendelsene.
Ulempen med hendelser er at vi bruker en streng for hendelsesnavnet, og det er vanskelig å forhindre konflikter med hendelsesnavn.
Den eneste beskyttelsen der er en god navngivningsstrategi for eventnavn.
Konklusjon - AngularJS Events
- Eliminerer servertilstand
- Aktiverer kunnskap om innfødt app
- Legger visningslogikk enkelt inn i JavaScript
- Krever nyskapende ferdighetsinformasjon samt prosedyrer
Anbefalte artikler
Dette er en guide til AngularJS Events. Her diskuterer vi Basics of AngularJS og forklarer AngularJS-hendelsen med eksemplene. Du kan også se på følgende artikler for å lære mer -
- AngularJS-enhetstesting
- AngularJS Architecture
- AngularJS-direktiver
- Karriere i AngularJS
- Topp 5 HTML-attributter med eksempler
- Veiledning for forskjellige JavaScript-hendelser