Introduktion til AngularJS-begivenheder

AngularJS kan beskrives som en JavaScript-ramme, der bruges til at etablere Single Page Applications (SPA) til mobil såvel som webudvikling. SPA er en enkelt side, hvor en masse af viden fortsat er ens til støtte for et par bits data kan tilpasses, når du klikker på flere kategorier / mulighed. Hele denne procedure kan aflaste dit arbejde ved blot at tillade omkostningerne, øge effektiviteten såvel som at indlæse websiden hurtigere. I dette emne skal vi lære om AngularJS Events.

Ved at bruge AngularJS kan du arbejde med direktiver samt bruge HTML-attributter ved blot at binde data til HTML med udtrykkene. AngularJS kan være en MVC-arkitektur, der gør webapplikationer enkle at bygge fra starten. AngularJS 1.0 blev lanceret i 2010, og hvis vi diskuterer i dag; den nyeste version af AngularJS kan være 1.7.8, der blev frigivet i marts 2019. AngularJS er derudover en open-source ramme, der administreres af simpelthen Google ved hjælp af et enormt samfund af programmerere.

Forudsætninger

Før du går videre til AngularJS, skal du have en grundlæggende viden om

  • JavaScript
  • HTML
  • CSS

Grundlæggende om AngularJS

Her er det grundlæggende i AngularJS

direktiver

Præfikset ng betyder AngularJS. ng- kan beskrives som præfiks forbeholdt vinkeldirektiver . For at forhindre kollisioner kan de opfordre dig til aldrig at bruge det nøjagtige ng-præfiks i dine direktiver senere på version af Angular. Ng kan være en forkortelse af Angular.

Forekomster af et par af direktiverne i AngularJS

  • Det ng-nye direktiv kan bruges til at producere en ny vinkel applikation
  • Direktivet om ng-opdatering opdaterer dine fantastiske applikationer og også deres afhængigheder
  • Ng-app- direktivet kan bruges til at initialisere en AngularJS-applikation.
  • Ng-init- direktivet initialiserer appinfo.

Ng-app-direktivet forklarer også til AngularJS, hvilket element er en "iværksætter" med AngularJS-appen.

Udtryk

  • Udtryk gennem AngularJS vil blive beskrevet inden i dobbelt krøllede parenteser: udtryk.
  • Til skrivning af et udtryk inden for et direktiv: ng-bind = ”udtryk”.

For eksempel

Produktion:

Controller

  • Anvendelse af AngularJS vil blive kontrolleret af blot controllere.
  • Applikationscontrolleren kunne beskrives med et ng-controller-direktiv
  • En controller er kendt som et JS-objekt, konstrueret med en almindelig JS-objektkonstruktør.

Forklar AngularJS-begivenheder

Forskellige slags begivenheder beliggende i AngularJS

AngularJS er utroligt fuld af begivenheder og inkluderer en grundlæggende model for, hvordan du kan tilføje begivenhedslyttere til HTML. Det letter masser af begivenheder, der er forbundet med mus og tastatur. De fleste af disse begivenheder placeres på et HTML-element. Hvis du har skrevet HTML og også AngularJS-begivenheder samtidigt, efter at begge begivenheder kan udføres, betyder det, at en AngularJS-begivenhed aldrig vil overskrive en HTML-begivenhed.

Et par af de væsentlige begivenheder er følgende.

  • ng-kopi
  • ng-klik
  • ng-cut
  • ng-dblclick
  • ng-KeyDown
  • ng-tastetryk
  • ng-keyup
  • ng-mouseDown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mouseMove
  • ng-mouseover
  • ng-mouseUp
  • ng-sløring

Vi vil analysere kommunikerer med begivenheder.

Angular JS inkluderer en global begivenhedsbus, der giver dig mulighed for at rejse begivenheder på ét omfang og lade andre scopes lytte til den begivenhed og svare på den. Du kan give yderligere argumenter med begivenheden, så andre lyttere kan svare passende på begivenheden. Begivenheder er ret ligetil, men der er et par gotchas til dem.

Først og fremmest ved at lytte til en begivenhed, som du blot kalder metoden $ on () på et omfang med en parameter til begivenhedens navn. Så vil enhver begivenhed med dette navn udløse dit tilbagekald. At rejse en begivenhed kræver på den anden side lidt planlægning.

Lad os sige, at jeg har en begivenhed, der opdrages her, i børneomfang 1, men vi ønsker at lytte til den begivenhed i børneomfang 2. Desværre kan vi ikke få det til.

Der er to muligheder for at rejse en begivenhed i Angular JS.

Den første er at kalde omfang. $ Udsendelse, der hæver begivenheden på det oprindelige omfang og derefter sender den ned til alle børnes anvendelsesområder.

Den anden mulighed er at ringe rækkevidde. $ emit, som hæver begivenheden på det oprindelige omfang og derefter sender det op i omfangskæden.

Men der er ingen rigtig global måde at udsende fra et barns rækkevidde. Måden at få det til er at få fat i $ rootScope og kalde $ udsendelse på det, der sender det ned til alle børnes anvendelsesområder.

Lad os nu justere vores kode for at få den til at fungere med begivenheder i stedet for arvelige anvendelsesområder. Så det første problem, vi har bemærket, at vi ønsker, at en begivenhed skal løses, er det faktum, at denne registerCourse () -metode, her i katalogkontrolleren, kaldes til at skyde til højre på plandataene. Det er ikke dets job.

Det er ikke noget, katalogkontrolleren skal lave at føje poster til tidsplanen. I stedet er det, det skal gøre, at underrette nogen anden om, at et kursus bliver ved at blive registreret og derefter stole på, at andre objekter tilføjer kursuskorrektionerne til skemaet. Så det objekt, der skal håndtere tidsplanen, er selvfølgelig planlægningskontrolleren.

Så lad os gå til Planlægningskontrolleren og tilføje en begivenhedslytter. Vi kalder vores begivenhedskurs registreret. Den første parameter til et tilbagekald til en begivenhed er et hændelsesobjekt, og derefter den eventuelle yderligere parameter, som du lægger, når du hæver begivenheden.

Så vi planlægger det faktum, at den, der rejste begivenheden, også kommer til at sætte kursen, der rejste begivenheden på begivenheden. Herefter kan vi udføre den logik, der oprindeligt blev opført i metoden registerCourse () lige her.

I stedet for at stole på, at tidsplanen allerede er på $ -omfanget, vil vi nu fjerne $ -omfanget og bare bringe den planlagte tjeneste ind. Og da vi bringer tidsplan ind her, behøver vi ikke længere at bringe det ind på vores registercontroller.

Så vi kan tage denne linje ud her, flytte den op til vores Planlægningskontroller og nu fjerne denne afhængighed fra Registreringscontrolleren.

Nu er det dejligt, at vi har lyttet til begivenheden her, men ingen rejser den begivenhed. Stedet her i metoden registerCourse () på katalogkontrolleren.

Katalogkontrolleren kan ikke rejse en begivenhed, der kan lyttes til af planlægningskontrolleren, fordi de er søskende. Så hvad vi bliver nødt til at gøre er at bringe en afhængighed af $ rootScope.

Herefter kan vi kalde $ rootScope. $ Broadcast () hæve den begivenhed, vi leder efter, og tilføje den parameter, der skal være på den begivenhed.

Nu har vi en anden ting, som vi kan rydde op i. Lige her nede kalder vi $ scope.notify, men vi rejser allerede den begivenhed, at vi har registreret kurset. Vi skal lade en anden håndtere underretningen, når der er registreret et kursus.

Så lad os gå tilbage til vores registreringskontroller og tilføje en begivenhedslytter til den.

Og derefter herfra kan vi ringe til koden for at gøre underretningen. Det ser ud til at være meget mere passende at gøre det inden for Registreringskontrolleren, da det sted, hvor vi definerer meddelelsesmetoden ().

Lad os tjekke dette output i browseren og se, hvordan det fungerer.

Vores ændringer har fungeret godt.

Lad os nu se på koden og analysere fordelene og ulemperne ved at bruge begivenheder. Den første fordel, vi har bemærket, at vi kan lide, er, at logik i hver af controllerne har noget at gøre med denne controller.

Katalogkontrolleren har logik for at hæve begivenheden, når nogen klikker på knappen Registrer kursus og logikken om at markere et registreret kursus. Planen har logikken om at føje elementerne til skemaet, og Registreringscontrolleren har logikken om underretninger. På grund af dette har vi ikke controller, der indfører service, som de ikke har noget at gøre med.

Vores rodcontroller er heller ikke rodet med afhængigheder, som den ikke har noget at gøre med. Der er dog nogle få ulemper. Alle, der håndterer en begivenhed, kan annullere denne begivenhed. Dette kan føre til dårlige fejl.

Hvis en bestemt handler annullerer en begivenhed, og en lytter, der stadig skal høre om den begivenhed, ikke er behandlet. Vi kobler vores controller til disse begivenheder.

Ulempen med begivenheder er, at vi bruger en streng til begivenhedsnavnet, og det er vanskeligt at forhindre konflikter med begivenhedsnavne.

Den eneste beskyttelse der er en god navngivningsstrategi for begivenhedsnavne.

Konklusion - AngularJS-begivenheder

  • Eliminerer servertilstand
  • Aktiverer indbygget app-viden
  • Sætter visningslogik let i JavaScript
  • Kræver nyskabende færdighedsoplysninger såvel som procedurer

Anbefalede artikler

Dette er en guide til AngularJS Events. Her diskuterer vi Grundlæggende om AngularJS og forklarer AngularJS begivenheden med eksemplerne. Du kan også se på de følgende artikler for at lære mere -

  1. AngularJS-enhedstest
  2. AngularJS Architecture
  3. AngularJS-direktiver
  4. Karriere i AngularJS
  5. Top 5 HTML-attributter med eksempler
  6. Vejledning til forskellige JavaScript-begivenheder

Kategori:

Softwareudvikling