Einführung in AngularJS Events

AngularJS kann als JavaScript-Framework für die Einrichtung von Single Page Applications (SPA) für die mobile und die Webentwicklung beschrieben werden. Das SPA ist eine einzelne Seite, auf der viele Informationen zur Unterstützung einiger Datenbits weiterhin ähnlich sind. Wenn Sie auf zusätzliche Kategorien / Optionen klicken, können diese angepasst werden. Diese gesamte Prozedur kann Ihre Arbeit entlasten, indem Sie einfach die Kosten überschreiten, die Effizienz steigern und die Webseite schneller laden. In diesem Thema lernen wir AngularJS-Ereignisse kennen.

Mit AngularJS können Sie sowohl mit Direktiven als auch mit HTML-Attributen arbeiten, indem Sie einfach Daten mit den Ausdrücken an HTML binden. AngularJS kann eine MVC-Architektur sein, mit der Webanwendungen von Anfang an einfach erstellt werden können. AngularJS 1.0 wurde 2010 eingeführt, und wenn wir heute darüber diskutieren; Die neueste Version von AngularJS ist 1.7.8, die im März 2019 veröffentlicht wurde. AngularJS ist außerdem ein Open-Source-Framework, das von Google mithilfe einer riesigen Community von Programmierern verwaltet wird.

Voraussetzungen

Bevor Sie zu AngularJS übergehen, müssen Sie über grundlegende Kenntnisse verfügen

  • JavaScript
  • HTML
  • CSS

Grundlagen von AngularJS

Hier sind die Grundlagen von AngularJS

Richtlinien

Das Präfix ng bedeutet AngularJS. ng- kann als Präfix beschrieben werden, das für Angular-Key-Direktiven reserviert ist. Um Kollisionen zu vermeiden, empfehlen sie Ihnen möglicherweise, in späteren Versionen von Angular niemals das genaue ng-Präfix in Ihren Anweisungen zu verwenden. Ng kann eine Abkürzung für Angular sein.

Beispiele einiger Richtlinien in AngularJS

  • Die ng-new- Direktive kann zum Erstellen einer neuen Angular-Anwendung verwendet werden
  • Die ng-update Direktive aktualisiert Ihre erstaunlichen Anwendungen und auch deren Abhängigkeiten
  • Die Anweisung ng-app kann zum Initialisieren einer AngularJS-Anwendung verwendet werden.
  • Die Anweisung ng-init initialisiert die App-Informationen.

Die ng-App-Direktive erklärt AngularJS auch, welches Element ein „Unternehmer“ mit der AngularJS-App ist.

Ausdrücke

  • Ausdrücke durch AngularJS werden in doppelten geschweiften Klammern beschrieben: expression.
  • Zum Schreiben eines Ausdrucks innerhalb einer Direktive: ng-bind = ”expression”.

Beispielsweise

Ausgabe:

Regler

  • Das Anwenden von AngularJS wird einfach durch Controller gesteuert.
  • Der Anwendungscontroller könnte mit einer ng-controller-Direktive beschrieben werden
  • Ein Controller wird als JS-Objekt bezeichnet und mit einem regulären JS-Objektkonstruktor erstellt.

Erklären Sie AngularJS-Ereignisse

Verschiedene Arten von Veranstaltungen in AngularJS

AngularJS ist unglaublich ereignisreich und enthält ein grundlegendes Modell dafür, wie Sie Ereignis-Listener zum HTML hinzufügen können. Es erleichtert viele Ereignisse im Zusammenhang mit Maus und Tastatur. Die meisten dieser Ereignisse werden in ein HTML-Element eingefügt. Wenn Sie gleichzeitig HTML- und AngularJS-Ereignisse geschrieben haben und beide Ereignisse ausgeführt werden können, bedeutet dies, dass ein AngularJS-Ereignis niemals ein HTML-Ereignis überschreibt.

Einige der wesentlichen Ereignisse sind die folgenden.

  • ng-Kopie
  • Ng-Klick
  • Ng-Schnitt
  • ng-dblclick
  • ng-keydown
  • ng-Tastendruck
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-blur

Wir werden analysieren, wie man mit Ereignissen kommuniziert.

Angular JS enthält einen globalen Ereignisbus, mit dem Sie Ereignisse für einen Bereich auslösen und andere Bereiche auf dieses Ereignis warten und darauf reagieren lassen können. Sie können dem Ereignis zusätzliche Argumente übergeben, damit andere Listener angemessen auf das Ereignis reagieren können. Ereignisse sind ziemlich einfach, aber es gibt ein paar Fallstricke.

Wenn Sie ein Ereignis abhören, rufen Sie einfach die $ on () -Methode für einen Bereich mit einem Parameter auf, der den Namen des Ereignisses enthält. Dann löst jedes Ereignis mit diesem Namen Ihren Rückruf aus. Das Auslösen eines Ereignisses erfordert andererseits ein wenig Planung.

Angenommen, ich habe ein Ereignis, das hier in Child Scope 1 ausgelöst wird, aber wir möchten dieses Ereignis in Child Scope 2 anhören. Leider können wir das nicht durchführen.

Es gibt zwei Möglichkeiten, ein Ereignis in Angular JS auszulösen.

Der erste besteht darin, scope. $ Broadcast aufzurufen, wodurch das Ereignis auf dem Ursprungsbereich ausgelöst und dann an alle untergeordneten Bereiche gesendet wird.

Die andere Möglichkeit besteht darin, scope aufzurufen. $ emit löst das Ereignis im Ursprungsbereich aus und sendet es dann in der Bereichskette nach oben.

Aber es gibt keine wirklich globale Möglichkeit, aus dem Blickwinkel eines Kindes zu senden. Die Möglichkeit, dies zu erreichen, besteht darin, sich $ rootScope zu beschaffen und $ broadcast aufzurufen, wodurch es an alle untergeordneten Bereiche gesendet wird.

Passen wir nun unseren Code so an, dass er mit Ereignissen statt mit geerbten Gültigkeitsbereichen funktioniert. Das erste Problem, das uns aufgefallen ist, dass wir ein Ereignis lösen möchten, ist die Tatsache, dass diese registerCourse () -Methode im Catalog-Controller Push direkt auf die Zeitplandaten aufruft. Das ist nicht seine Aufgabe.

Das Hinzufügen von Elementen zum Zeitplan ist keine Aufgabe des Catalog-Controllers. Stattdessen sollte es jemand anderem mitteilen, dass ein Kurs registriert wird, und dann darauf vertrauen, dass andere Objekte die Kurskorrekturen zum Zeitplan hinzufügen. Das Objekt, das sich mit dem Zeitplan befassen sollte, ist natürlich der Zeitplan-Controller.

Gehen wir also zum Schedule-Controller und fügen einen Ereignis-Listener hinzu. Wir werden unseren Veranstaltungskurs als registriert bezeichnen. Der erste Parameter für einen Rückruf eines Ereignisses ist ein Ereignisobjekt und danach ein zusätzlicher Parameter, den Sie beim Auslösen des Ereignisses eingeben.

Daher planen wir, dass derjenige, der das Ereignis ausgelöst hat, den Kurs, der das Ereignis ausgelöst hat, auch auf das Ereignis überträgt. Von hier aus können wir die Logik ausführen, die ursprünglich in der registerCourse () -Methode erstellt wurde.

Anstatt uns darauf zu verlassen, dass der Zeitplan bereits auf dem $ -Bereich liegt, werden wir jetzt den $ -Bereich entfernen und nur den geplanten Service einführen. Und da wir den Zeitplan hierher bringen, brauchen wir ihn nicht mehr auf unserem Register-Controller herunter zu bringen.

Also können wir diese Zeile hier herausnehmen, sie auf unseren Schedule-Controller verschieben und diese Abhängigkeit jetzt aus dem Registration-Controller herausnehmen.

Jetzt ist es großartig, dass wir das Ereignis hier gehört haben, aber niemand spricht dieses Ereignis an. Die Stelle hier in der Methode registerCourse () auf dem Catalog-Controller.

Der Catalog-Controller kann kein Ereignis auslösen, das vom Schedule-Controller abgehört werden kann, da es sich um Geschwister handelt. Wir müssen also eine Abhängigkeit von $ rootScope herstellen.

Von hier aus können wir dann $ rootScope. $ Broadcast () aufrufen, um das gesuchte Ereignis auszulösen und den Parameter hinzuzufügen, der für dieses Ereignis erforderlich ist.

Jetzt haben wir eine andere Sache, die wir aufräumen können. Hier unten rufen wir $ scope.notify auf, aber wir melden bereits das Ereignis, dass wir den Kurs registriert haben. Wir sollten es zulassen, dass jemand anderes die Benachrichtigung bearbeitet, wenn ein Kurs registriert wird.

Kehren wir also zu unserem Registrierungs-Controller zurück und fügen ihm einen Ereignis-Listener hinzu.

Und dann können wir von hier aus den Code aufrufen, um die Benachrichtigung durchzuführen. Es scheint viel angemessener zu sein, dies innerhalb des Registrierungs-Controllers zu tun. Da dies der Ort ist, an dem wir die notify () -Methode definieren.

Lassen Sie uns diese Ausgabe im Browser überprüfen und sehen, wie es funktioniert.

Unsere Änderungen haben großartig geklappt.

Betrachten wir nun den Code und analysieren die Vor- und Nachteile der Verwendung von Ereignissen. Der erste Vorteil, den wir gemerkt haben, ist, dass die Logik in jedem der Controller etwas mit diesem Controller zu tun hat.

Der Katalog-Controller hat eine Logik zum Auslösen des Ereignisses, wenn jemand auf die Schaltfläche Kurs registrieren klickt, und eine Logik zum Markieren eines registrierten Kurses. Der Zeitplan enthält die Logik zum Hinzufügen der Elemente zum Zeitplan und der Registrierungscontroller enthält die Logik zu Benachrichtigungen. Aus diesem Grund haben wir keinen Controller, der einen Dienst einrichtet, mit dem sie nichts zu tun haben.

Außerdem ist unser Root-Controller nicht mit Abhängigkeiten überfüllt, mit denen er nichts zu tun hat. Es gibt jedoch ein paar Nachteile. Jeder, der ein Ereignis bearbeitet, kann dieses Ereignis abbrechen. Dies kann zu schlechten Fehlern führen.

Wenn ein bestimmter Handler ein Ereignis abbricht und ein Listener, der noch von diesem Ereignis erfahren muss, nicht verarbeitet wurde. Wir koppeln unseren Controller an diese Ereignisse.

Der Nachteil von Ereignissen ist, dass wir eine Zeichenfolge für den Ereignisnamen verwenden und es schwierig ist, Konflikte mit Ereignisnamen zu vermeiden.

Der einzige Schutz gibt es eine gute Namensstrategie für Ereignisnamen.

Fazit - AngularJS Events

  • Beseitigt den Serverstatus
  • Aktiviert native App-Kenntnisse
  • Fügt die Anzeigelogik einfach in JavaScript ein
  • Benötigt Informationen zu innovativen Fähigkeiten sowie Verfahren

Empfohlene Artikel

Dies ist eine Anleitung zu AngularJS Events. Hier diskutieren wir die Grundlagen von AngularJS und erklären das AngularJS-Ereignis mit den Beispielen. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

  1. AngularJS Unit Testing
  2. AngularJS-Architektur
  3. AngularJS-Richtlinien
  4. Karriere in AngularJS
  5. Top 5 HTML-Ereignisattribute mit Beispielen
  6. Leitfaden zu verschiedenen JavaScript-Ereignissen

Kategorie:

Software-Entwicklung