Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

AngularJS Grundkurs

Benutzerdefinierte Nachrichten senden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Benutzerdefinierte Nachrichten können in AngularJS mit dem Nachrichten-Bus in einer verschachtelten Hierarchie an sämtliche Elemente gesendet werden.
10:35

Transkript

AngularJS erlaubt es mir den Nachrichtenbus auch für benutzerdefinierte Nachrichten zu verwenden. Also bin ich in der Lage Nachrichten in einer verschachtelten Hierarchie entsprechend an Eltern oder an Kind Elemente senden zu können. Um das Ganze einmal zu demonstrieren, habe ich hier ein klein bisschen was vorbereitet. Das, was ich hier vorbereitet habe, ist eigentlich wirklich nichts anderes als einen hierarchischen Aufbau. Innerhalb des Body Knotens, der hier hellgrün ist, befindet sich ein dunkelgrüner Kontainer. In diesem Kontainer befindet sich ein linkes und ein rechtes Kind Objekt und in diesem Kind Objekt wiederrum ein Kind Objekt. Das heißt, ich habe hier eine Dreifachverschachtelung. Body, Kontainer, obere Ebene Link und die weitere Kind Ebene. Ich möchte jetzt in der Lage sein, indem ich dann auf die jeweiligen Schaltflächen innerhalb der Ebene draufklicke, Nachrichten entweder nach oben zu verschicken, also Richtung Body oder nach unten zu verschicken Richtung der Kind Objekte, um Euch zu zeigen, wie dieser Nachrichtenbus funktioniert. Damit das Ganze funktioniert, habe ich jetzt hier immer die gleichen Methoden hier registriert. Einmal sendHelloWorldUpwards um zu zeigen, wie es ist, wenn es nach oben geht die Nachricht und sendHelloWorldDownwards, wie es aussieht, wenn ich nach unten die Nachrichten versende. Weiterhin habe ich einen CtrlModule hier vorbereitet. Dieses CtrlModule stellt die jeweiligen Controller hier zur Verfügung, nämlich den ContainerCtrl, LeftCtrl, RightCtrl und der ChildCtrl, der hier von diesen beiden Kindern verwendet wird. Wie Ihr aber auch sehen könnt, ist jeder dieser Controller an sich relativ primitiv, denn sie erben alle von einem SuperCtrl und innerhalb des SuperCtrl rufe ich die Initialisierungsmethode auf, indem ich dann mitteile, um welchen Controller es sich handelt, welchen Scope er hat und gebe dann entsprechend die log Funktionalität, die per dependency injection reingekommen ist, hier weiter und das Element. In der Initialisierung selber speichere ich mir in der jeweiligen Klasse diese Werte und rufe dann anschließend eine Registermethode auf, die in erster Instanz erst mal leer ist. Denn das, was ich als erstes zur Verfügung stellen möchte, sind die Funktionalitäten, womit ich Nachrichten hoch- und runtersenden kann. Diese Funktionalitäten kann ich entsprechend hier, wie gesagt, mit den ng-click ansprechen. Das ist einmal sendHelloWorldUpwards und Downwards. Diese Funktionalitäten machen eigentlich nichts anderes, als erst mal einen log zu übermitteln und anschließend dann in den Scope selber, das ich mir hier gespeichert habe, per emit und broadcast Nachrichten zu verschicken. Jetzt wird es interessant. Emit ist im Scope eine Methode, die zur Verfügung gestellt wird, um den jeweiligen Eltern Elementen eine Nachricht zu verschicken. Würde ich quasi dann also mit sendHelloWorldUpwards hier auf diesen Pfeil hier klicken, würde dann die Nachricht an den Kontainer und an den Root Scope gehen, weil mehr gibt es an dieser Stelle hier nicht. Das broadcast, das ich hier beim Downwards hier verwende, arbeitet analog zu emit, aber es sendet die Nachrichten nicht nach oben sondern nach unten. Das bedeutet, in der Hierarchie geht es dann entsprechend tiefer. Bedeutet nichts anderes, würde ich hier auf runter klicken, ruf das broadcast auf und sendet dann die Nachrichten an den Kontainer, dann an das linke und an das rechte Kind und jeweils in den Kindern, die Unterkinder. So kann ich dann hervorragend quasi diesen Bus missbrauchen, um Nachrichten an alle meine Scopes zu verteilen. Damit wir uns das Ganze auch einmal im Detail anschauen können, hier einmal die Parameter. Als erstes gebe ich als Paramater den Nachrichtentyp an. Dieser Nachrichtentyp ist eine beliebige Zeichenkette, die ich dann entsprechend mit on registrieren kann. Das Gleiche natürlich auch bei broadcast. Das heißt, wenn ich Nachrichten hochsende, möchte ich später auf den Nachrichtentyp up reagieren und wenn ich dann Nachrichten runtersende auf down. Weiter kann ich das emit mit beliebigen weiteren Argumenten ausführen. Diese Argumente machen eigentlich nichts anderes, als dass ich diese in den listener dann abgreife und dann weiterverarbeiten kann. Wie das geht, werden wir auch gleich lernen. Aber was Ihr hier seht, ich übergebe hier eine Zeichenkette, dass die Nachricht von einem bestimmten Controller gesendet wird, dessen Namen ich mir hier gespeichert habe und dann entsprechend an sich selbst und an die Eltern Objekte geht bzw. an sich selbst und an deren Kind Objekten. Lasst uns das Ganze einfach anschauen, dann werden wir sehen, wenn ich jetzt hier draufklicke, dann tatsächlich hier eine Nachricht übermittelt wurde und zwar sending message up from ChildCtrlScope. Das ist das hier und wir sehen hier, dass der Root Scope schon darauf reagiert hat. Ich habe nämlich im MainModule innerhalb des Root Scopes bereits hier auf up reagiert und habe dann entsprechend gesagt, sobald dann eine up-Nachricht kommt, möchte ich mittels dieses listeners dann darauf reagieren und in diesem listener ist der erste Parameter das event grundsätzlich, das übermittelt wurde und der zweite der Wert, den ich hier dann entsprechend als zweiter Parameter übergeben habe und genau diesen Wert lasse ich hier per log entsprechend ausgeben. Analog habe ich mich hier auch an down registriert. Das heißt, wir können hier schon hervorragend sehen, dass ich mit up und down jeweils dann die Nachrichten senden kann. Bei down erkennt Ihr wunderbar, dass die Nachricht nirgends wohin geht. Bei up erkennt Ihr, dass es dann durch die jeweiligen Kinder geht und dann beim Root Scope landet. Damit die jeweiligen Scopes aber auch darauf reagieren können, muss ich nicht viel machen. Ich habe bereits hier eine Methode vorbereitet, die sich registerListener nennt. Ich habe auch schon mal eine kleine Funktionalität vorbereitet, die bei registerListener hinzugefügt bzw. abgearbeitet werden soll und diese Funktionalität sorgt dafür, dass ich mir erst mal hier mit der lokalen Variable set merke, in welcher Instanz ich mich befinde und anschließend gehe ich hier hin und sorge dafür, dass ich mich in dem Scope auf up registriere. Anschließend werde ich hier mit regulären Ausdrücken dafür sorgen, dass ich ermittle, von wem diese Nachricht dann entsprechend gesendet worden ist. Logge dann entsprechend hier die Nachricht, die ich empfangen habe und die ich hier überarbeitet habe und schlussendlich lasse ich mir dann auch noch das event hier ausgeben. Schauen wir uns das Ganze also jetzt einfach nochmal an, erkennen wir wunderbar, dass ich hier bei up relativ viele Nachrichten bekomme. Nämlich die erste Nachricht, dass ich einmal von ChildCtrlScope hier etwas nach oben gesendet habe, dann dass ich im ChildCtrlScope selber, das heißt, ich bin in dem Scope selber, wenn ich mich dort auch registriere, dann berechtigt meine eigenen Nachrichten zu empfangen, die Nachricht empfangen habe. Dann sehen wir auch hier, das hello world! from ChildCtlrScope to ChildCtrlScope, als nächstes das Ereignis und in diesem Ereignis selber sehen wir, dass wir dann Methodiken haben, wie beispielsweise auch preventDefault und stopPropagation, um das Bubbling zu verhindern. Das heißt, damit das beispielsweise nicht weiter in die übergeordneten Scopes weitergeleitet wird und natürlich auch Informationen, in welchem Scope ich mich befinde und an welchen Scope es gesendet wird und so sehe wir dann, dass es dann wirklich hier durchgereicht wird von hier unten bis alle Controller durch, vom ChildCtrl zum LeftCtrl, vom ChildCtrl zum übergeordneten Controller, den Container Scope bis zum Schluss dann entsprechend hier der Root Scope wiederverwendet wird. Was wir hier auch erkennen können, dass der targetScope selber das Objekt ist, von dem dann entsprechend die Nachricht ausging und der currentScope ist das Objekt, wo es dann entsprechend hier gelandet ist. Das heißt hier in den Kontainer, wo wir uns hier befinden. Das ist im Grunde genommen schon das Geheimnis, wie ich dann Nachrichten verschicken kann. Ich kann selbstverständlich auch dafür sorgen, dass ich beispielsweise überprüfe, ob der currentScope ungleich dem targetScope ist und das weiß ich eigentlich, wenn das passiert, dass ich mich nicht mehr in dem Kindsobjekt befinde sondern in dem ersten übergeordneten Objekt und dann kann ich beispielsweise mittels der Methodik stopPropagation dafür sorgen, dass die Nachricht nicht mehr weiter hochgesendet wird. Also als kleiner Test hier an dieser Stelle einfach die Methodik, dass wenn currentScope ungleich dem targetScope ist, dass stopPropagation aufgerufen wird und die Methode removeOnUpListener. Dieses RemoveOnUpListener sorgt dann dafür, dass dann hier die Methode, die zum Initialisieren der Nachrichten Listeners dann entsprechend aufgerufen wird, um dann dafür zu sorgen, dass ich in diesem Controller eben nicht mehr auf diese Nachrichten hören möchte. Teste ich das jetzt hier erneut, werden wir sehen, dass beim ersten Mal ich in dem Scope selber dann entsprechend die Nachricht bekomme. Anschließend sehe ich dann, dass ich dann direkt zum linken Element rübergewechselt bin und dann anschließend, wenn ich jetzt nochmal draufklicke, sehen wir, dass dann entsprechend die Vererbung immer wieder stoppt und dass ich dann immer wieder die nächst höhere Instanz wieder erreiche. Das heißt, den ContainerCtrlScope, weil ich hier auf dem linken dann mit remove dafür gesorgt habe, dass es dann nicht mehr darauf hört und zum Schluss, wenn ich jetzt nochmal draufklicke, dann ab jetzt höre ich dann auch im Kontainer nicht mehr drauf, lande ich dann nur noch im Root Scope. So kann ich als mit stopPropagation hervorragend dafür sorgen, dass ich nach oben hin das Event stoppe und dann dafür sorge, dass es nicht mehr gesendet wird. Funktioniert natürlich auch nach unten hin. Das ist überhaupt kein Problem. Ich habe auch eine kleine Methode vorbereitet, die das macht. Nämlich ich registriere mich hier auf down und lasse mir hier allerdings nur dann die Werte entsprechend ausgeben, damit Ihr das dann sehen könnt und hier können wir dann hervorragend schauen, dass, wenn ich beispielsweise hier in dem Kind Objekt sende, dass die Nachricht eigentlich nur in dem Kind Objekt bleibt, denn es gibt darunter nichts mehr. Würde ich aber hier auf das linke Objekt klicke, dann sehen wir, dass es vom linken zum linken geht, so wie es auch beim up ist und dann anschließend vom linken in das Kind Objekt und wenn ich dann im Kontainer darauf klicke, geht es dann vom Kontainer erst mal zum Kontainer, anschließend ins linke Objekt, danach in das Kind vom linken Objekt, dann ins rechte Objekt und danach in das Kind vom rechten Objekt. Das heißt, ich kann also auch ohne Probleme dann an alle meine Kinder mit broadcast entsprechend Nachrichten versenden. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, mittels emit den Eltern Elementen Nachrichten zu senden und mittels broadcast den Kind Elementen.

AngularJS Grundkurs

Arbeiten Sie sich in AngularJS, einem JavaScript-Framework von Google, ein und sehen Sie, wie Sie mit MVC-Design-Pattern und Dependency Injection im HTML-Umfeld arbeiten können.

3 Std. 43 min (44 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!