Inleiding tot AngularJS-evenementen

AngularJS kan worden beschreven als een JavaScript-raamwerk dat wordt gebruikt voor het opzetten van Single Page Applications (SPA) voor zowel mobiele als webontwikkeling. De SPA is een enkele pagina waar veel kennis nog steeds vergelijkbaar is ter ondersteuning van een paar gegevensbits die kunnen worden aangepast wanneer u op extra categorieën / opties klikt. Deze hele procedure kan uw werk verlichten door eenvoudigweg de kosten toe te staan, de efficiëntie te verhogen en de webpagina sneller te laden. In dit onderwerp gaan we meer te weten komen over AngularJS-evenementen.

Door AngularJS te gebruiken, kunt u met richtlijnen werken en HTML-attributen gebruiken door eenvoudig gegevens aan HTML te binden met de uitdrukkingen. AngularJS kan een MVC-architectuur zijn waarmee webapplicaties vanaf het begin eenvoudig kunnen worden gebouwd. AngularJS 1.0 werd gelanceerd in 2010, en als we het vandaag bespreken; de nieuwste versie van AngularJS kan 1.7.8 zijn die in maart 2019 is uitgebracht. AngularJS is bovendien een open-source framework dat wordt beheerd door eenvoudigweg Google met behulp van een enorme gemeenschap van programmeurs.

Pre-requisites

Voordat u doorgaat naar AngularJS, moet u een fundamentele kennis hebben van

  • JavaScript
  • HTML
  • CSS

Basisprincipes van AngularJS

Hier zijn de basisprincipes van AngularJS

richtlijnen

Het voorvoegsel ng betekent AngularJS. ng- kan worden beschreven als voorvoegsel gereserveerd voor Angular key-richtlijnen. Om botsingen te voorkomen, kunnen ze u adviseren om nooit het exacte ng-voorvoegsel in uw richtlijnen te gebruiken in een latere versie van Angular. Ng kan een afkorting van Angular zijn.

Voorbeelden van enkele richtlijnen in AngularJS

  • De nieuwe richtlijn kan worden gebruikt voor het produceren van een nieuwe Angular-toepassing
  • De ng-update- richtlijn werkt uw geweldige applicaties bij en ook hun afhankelijkheden
  • De ng-app- richtlijn kan worden gebruikt voor het initialiseren van een AngularJS-toepassing.
  • De richtlijn ng-init initialiseert app-informatie.

De ng-app-richtlijn legt ook aan AngularJS uit dat het element een "ondernemer" is met de AngularJS-app.

Uitdrukkingen

  • Uitdrukkingen via AngularJS worden beschreven tussen dubbele accolades: expressie.
  • Voor het schrijven van een uitdrukking binnen een richtlijn: ng-bind = "uitdrukking".

Bijvoorbeeld

Output:

controleur

  • Het toepassen van AngularJS wordt bestuurd door eenvoudigweg Controllers.
  • De applicatiecontroller kan worden beschreven met een ng-controllerrichtlijn
  • Een controller staat bekend als een JS-object, gebouwd met een reguliere JS-objectconstructor.

Leg AngularJS-evenementen uit

Verschillende soorten evenementen in AngularJS

AngularJS zit ongelooflijk vol evenementen en bevat een basismodel voor het toevoegen van gebeurtenisluisteraars aan de HTML. Het vergemakkelijkt tal van gebeurtenissen in verband met muis en toetsenbord. De meeste van deze evenementen worden op een HTML-element geplaatst. In het geval dat u HTML en ook AngularJS-gebeurtenissen tegelijkertijd hebt geschreven, nadat beide gebeurtenissen kunnen worden uitgevoerd, betekent dit dat een AngularJS-gebeurtenis nooit een HTML-gebeurtenis zal overschrijven.

Een paar van de essentiële gebeurtenissen zijn de volgende.

  • ng-copy
  • ng-click
  • ng gesneden
  • ng-DblClick
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mouseDown
  • ng-MouseEnter
  • ng-mouseLeave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseUp
  • ng onscherpte

We gaan analyseren is communiceren met gebeurtenissen.

Angular JS bevat een wereldwijde evenementenbus waarmee u gebeurtenissen op één scope kunt verhogen en andere scopes naar die gebeurtenis kunt laten luisteren en erop kunt reageren. U kunt extra argumenten doorgeven aan de gebeurtenis, zodat andere luisteraars op de juiste manier op de gebeurtenis kunnen reageren. Evenementen zijn vrij eenvoudig, maar er zijn een paar gotcha's.

Als eerste luister je naar een gebeurtenis die je eenvoudigweg de methode $ on () aanroept in een scope met een parameter van de naam van de gebeurtenis. Dan zal elk evenement met die naam je callback activeren. Het organiseren van een evenement vereist daarentegen een beetje planning.

Laten we zeggen dat ik een evenement heb dat hier aan de orde is gesteld, in Child Scope 1, maar we willen naar dat evenement luisteren in Child Scope 2. Helaas kunnen we dat niet laten gebeuren.

Er zijn twee opties voor het organiseren van een evenement in Angular JS.

De eerste is om scope. $ Broadcast aan te roepen, die de gebeurtenis naar de oorspronkelijke scope verhoogt en vervolgens naar alle onderliggende scopes verzendt.

De andere optie is om scope aan te roepen. $ emit, waardoor de gebeurtenis op de oorspronkelijke scope wordt geplaatst en vervolgens naar de scoopketen wordt verzonden.

Maar er is geen echt wereldwijde manier om uit te zenden vanuit het bereik van een kind. De manier om dat voor elkaar te krijgen is om $ rootScope te krijgen en $ broadcast erop aan te roepen, die het naar alle kindbereiken stuurt.

Laten we nu onze code aanpassen om deze te laten werken met gebeurtenissen in plaats van overgenomen scopes. Dus het eerste probleem dat we hebben gemerkt dat we een gebeurtenis willen oplossen, is het feit dat hier, in de Catalog-controller, deze methode registerCourse () push direct in de planningsgegevens aanroept. Dat is niet zijn taak.

Items toevoegen aan het schema is niet iets dat de Catalog-controller zou moeten doen. In plaats daarvan moet het iemand anders laten weten dat een cursus wordt geregistreerd en erop vertrouwen dat andere objecten de cursuscorrecties aan het schema toevoegen. Dus het object dat met het schema moet omgaan, is natuurlijk de planningscontroller.

Dus laten we naar de Schedule-controller gaan en een gebeurtenislistener toevoegen. We zullen onze evenementcursus geregistreerd noemen. De eerste parameter voor een callback naar een gebeurtenis is een gebeurtenisobject en daarna elke aanvullende parameter die u opgeeft wanneer u de gebeurtenis oproept.

Dus we gaan plannen maken dat degene die het evenement heeft grootgebracht, ook de koers zal zetten die het evenement naar voren heeft gebracht. Vanaf hier kunnen we de logica uitvoeren die oorspronkelijk in de methode registerCourse () is uitgevoerd.

Nu, in plaats van te vertrouwen op het schema om $ $ te zijn, gaan we nu de $ scope af en brengen we gewoon de geplande service binnen. En omdat we het schema hier brengen, hoeven we het niet langer op onze Register-controller te plaatsen.

Dus we kunnen deze regel hier verwijderen, naar onze Schedule-controller verplaatsen en die afhankelijkheid nu uit de registratiecontroller halen.

Nu is het geweldig dat we hier naar het evenement hebben geluisterd, maar niemand brengt dat evenement ter sprake. De plaats hier in de registerCourse () -methode op de Catalog-controller.

De Catalogus-controller kan geen gebeurtenis naar voren brengen die kan worden beluisterd door de Schedule-controller omdat het broers of zussen zijn. Dus wat we moeten doen is een afhankelijkheid van de $ rootScope brengen.

Vanaf hier kunnen we $ rootScope. $ Broadcast () aanroepen, het evenement waarnaar we op zoek zijn verhogen en de parameter toevoegen die voor dat evenement moet zijn.

Nu hebben we nog iets dat we kunnen opruimen. Hier noemen we $ scope.notify, maar we brengen al het evenement ter sprake dat we de cursus hebben geregistreerd. We moeten iemand anders de melding laten afhandelen wanneer een cursus wordt geregistreerd.

Dus laten we teruggaan naar onze registratiecontroller en er een gebeurtenislistener aan toevoegen.

En vanaf hier kunnen we de code bellen om de melding te doen. Het lijkt veel geschikter om dat te doen binnen de registratiecontroller, aangezien dat de plaats is waar we de methode kennisgeven () definiëren.

Laten we deze uitvoer in de browser bekijken en kijken hoe het werkt.

Onze veranderingen zijn geweldig gelukt.

Laten we nu eens naar de code kijken en de voor- en nadelen van het gebruik van evenementen analyseren. Het eerste voordeel dat we opvielen is dat de logica in elk van de controllers iets te maken heeft met die controller.

De Catalogus-controller heeft logica over het verhogen van het evenement wanneer iemand op de knop Cursus registreren klikt en de logica over het markeren van een geregistreerde cursus. Het schema heeft de logica om de items aan het schema toe te voegen en de registratiecontroller heeft de logica voor meldingen. Daarom hebben we geen controller in dienst waar ze niets mee te maken hebben.

Ook is onze root-controller niet vol met afhankelijkheden waar hij niets mee te maken heeft. Er zijn echter enkele nadelen. Iedereen die een evenement afhandelt, kan dat evenement annuleren. Dit kan leiden tot slechte bugs.

Als een bepaalde handler een gebeurtenis annuleert en een luisteraar die nog moet horen over die gebeurtenis, niet is verwerkt. We koppelen onze controller aan die gebeurtenissen.

Het nadeel van evenementen is dat we een tekenreeks gebruiken voor de naam van de gebeurtenis en dat het moeilijk is om naamconflicten te voorkomen.

De enige bescherming daar is een goede naamgevingsstrategie voor evenementnamen.

Conclusie - AngularJS-evenementen

  • Elimineert de serverstatus
  • Biedt native app-kennis
  • Zet logica eenvoudig in JavaScript
  • Vereist innovatieve informatie over vaardigheden en procedures

Aanbevolen artikelen

Dit is een gids voor AngularJS-evenementen. Hier bespreken we de basisprincipes van AngularJS en leggen we het AngularJS-evenement uit met de voorbeelden. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. AngularJS Unit testen
  2. AngularJS-architectuur
  3. AngularJS-richtlijnen
  4. Carrière in AngularJS
  5. Top 5 HTML-gebeurtenisattributen met voorbeelden
  6. Gids voor verschillende JavaScript-gebeurtenissen

Categorie:

Software ontwikkeling