AngularJS Grundkurs

Nachrichten-Bus

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
AngularJS ermöglicht die Verwendung des Nachrichten-Bus innerhalb von Gültigkeitsbereichen. Dadurch können die einzelnen Bereiche miteinander kommunizieren.
07:22

Transkript

Eines meiner Lieblingsfeature in AngularJS ist es den Nachrichtenbus im Scope zu verwenden. Wie Ihr Euch erinnern könnt, sind Scopes hierarchisch aufgebaut. Das heißt, genauso wie ich im DOM selber HTML-Elemente miteinander verschachteln kann, werden dann entsprechend die Scopes so aufgebaut, dass sie hierarchisch sind. Das heißt, ich kenne Ihre Eltern und Kind Elemente oder Eltern und Kind Scopes. Zwischen diesen Scopes kann ich hin und her kommunizieren. Um so eine Kommunikation zu machen, muss ich eigentlich nichts anderes machen, als mich an den Eventbus dranhängen. Ich möchte Euch einmal zeigen, wie das Ganze funktioniert. Ich habe eine kleine HTML-Seite hier vorbereitet. Die HTML-Seite besteht aus einem Container. Der Container ist an einem ContainerCtrl gebunden, sowie ein linkes Element, das wir hier in rot sehen, das mit dem LeftCtrl verbunden ist und ein rechtes Element, das wir hier in gelb sehen, das mit dem RightCtrl verbunden ist. Die Controller selber habe ich in einem Controller Modul definiert und die sehen wir jetzt hier. Ihr seht, dass sobald ein Controller initialisiert wird, hier auch eine Log Message durchgegeben wird, die dann aussagt, dass dann entsprechend der Controller zu Ende initialisiert ist. Aktualisieren wir das Ganze also hier, sehen wir dann die jeweiligen Log Nachrichten der jeweiligen Controller an dieser Stelle. Wie bereits erwähnt, kann ich mich jetzt an den Eventbus grundsätzlich dranhängen, indem ich ganz einfach in dem Scope selber die Methode $on verwende. Die Methode $on verwendet zwei unterschiedliche oder benötigt zwei unterschiedliche Parameter, zum einen den type und zum anderen den listener. Dabei ist der type eigentlich nichts anderes als eine Zeichenkette, die ausgibt, welche Nachrichten ich hören möchte, also auf welchen Typ von Nachrichten ich hören mag. Der listener selber ist wiederum eine Funktion, die aufgerufen werden soll, sobald dann entsprechend diese Nachricht in den Scopes übermittelt wurde. Eine Standardnachricht, die immer übermittelt wird, ist $destroy. $destroy wird immer dann übermittelt, wenn ein Gültigkeitsbereich, also ein Scope, auf gelöst wird. Auflösen kann ich so eine Gültigkeitsbereich entweder, indem ich ihn manuell mit der Methode destroy entferne oder indem ich in großen Konstrukten in AngularJS beispielsweise, wenn ich auch mit Templatings arbeite, ein HTML-Element von AngularJS entfernt wird und in dem Moment wird dann natürlich auch der Scope zu diesem HTML-Element entfernt und auch dann bekomme ich diese destroy Nachricht. Was ich dann grundsätzlich in dem listener selber machen kann, ist natürlich mit $log beispielsweise zu schreiben ich habe die destroy Nachricht erhalten. Jetzt müssen wir nur noch für das destroy sorgen. Wie schon erwähnt, kann ich das relativ schnell in die Wege leiten, indem ich zum Beispiel bei Scope das $destroy einfach aufrufe. Testen wir das Ganze jetzt hier, dann sehen wir hier, dass direkt nach der Initialisierung ich den listener hier hinzugefügt habe für die Nachricht destroy, den ich als type hier definiert habe und wenn ich dann manuell das destroy entsprechend aufrufe, bekomme ich dann an dieser Stelle die Nachricht ich habe die destroy Nachricht erhalten, welche ich im Callback hier definiert habe. Selbstverständlich kann ich hier auch das Ganze wie gewohnt schreiben. Das heißt, ich kann auch hier einfach das destroy hier definieren und hier die Methode dann einfach auch als Callback direkt als Parameter hier übergeben und das Ganze wird dann analog funktionieren. Ganz wichtig ist es, dass ich, wenn ich jetzt ein weiteres Mal destroy aufrufe, ich diese Nachricht natürlich nicht ein zweites Mal bekomme, weil dieser Gültigkeitsbereich entfernt ist. Denkt daran, ab diesem Moment ist dann dieser linke Bereich quasi controllerlos, weil dann entsprechend der Gültigkeitsbereich hier komplett fehlt. Wir können das Ganze natürlich auch auf ein Click hin in die Wege leiten. Das ist relativ einfach. Ich werde jetzt hier einfach das manuelle destroy entfernen, stattdessen einen Click Handler hier in den Scope einbinden. Den Click Handler nenne ich remove und sobald dann remove im Scope aufgerufen wird, wird dann entsprechend das destroy aufgerufen. Hier muss ich dann entsprechend nur darauf achten, dass dann mein Button selber via ng-click die remove Methode aufruft. Testen wir das Ganze, können wir sehen, dass wenn ich einmal draufgeklickt habe, dass dann sofort die Nachricht hier erscheint. Jetzt kann ich noch etwas ganz Tolles machen. Ich kann beispielsweise hier einfach $element miteinbinden. $element sorgt dafür, dass AngularJS mir dann in diesem Moment ein jQuery Light Objekt zurückgibt von dem HTML-Element, das mit diesem Scope hier gebunden ist und was ich hier an dieser Stelle machen kann, ist dass sobald dann entsprechend das destroy aufgerufen wird, ich dann mittels $element.remove dafür sorgen kann, dass ich das Objekt dann auch entferne und dann ist es auch im gleichen Atemzug direkt von der Bühne verschwunden, wenn das entfernt wurde. Ganz wichtig an dieser Stelle, sobald ich mit $on eine Registrierung eines listeners mache, bekomme ich automatisch als Rückgabewert eine Funktion zurück, removeDestroyListener und dieser Rückgabewert ist also dann entsprechend hier in der Variable removeDestroyListener gesichert und removeDestroyListener ist nun eine Funktion und würde ich diese Funktion aufrufen, würde ich dafür sorgen, dass ich nicht mehr auf das mit on registrierte Nachrichtenverhalten dann horchen möchte. Das heißt, ich hänge mich aus dem Nachrichtenbus für diesen speziellen Fall wieder und ich möchte Euch das auch einfach beweisen, das dem auch so ist. Würde ich dann hier also removeDestroyListener einfach hier direkt aufrufen, dann passiert hier gar nichts, denn ich rufe hier zwar das destroy auf, dadurch dass ich mich aber nicht mehr an das destroy Ereignis dranhänge, wird dann entsprechend dieser Code nicht ausgeführt und ich hänge mich eben nicht dran, weil ich den Rückgabewert bei der Initialisierung des listeners, nämlich die Methode zum Aufheben des listeners direkt bei der Initialisierung hier aufrufe. Auf diese Art und Weise seid Ihr aber in der Lage jederzeit dafür zu sorgen, dass dann, wenn Ihr auf bestimmte listener hört, auch diese listener dann auch ohne weiteres dann zu entfernen, sodass dann entsprechend auch der Nachrichtenbus ohne die Notifikation auskommen kann. In diesem Video haben wir also gemeinsam gelernt, wie wir in der Lage sind, uns an den Nachrichtenbus in AngularJS dranzuhängen.

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!