AngularJS Grundkurs

Werte überwachen

Testen Sie unsere 2007 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Werte, welche sich innerhalb eines Gültigkeitsbereichs befinden, können mit dem Observer-Pattern jederzeit beobachtet werden. Änderungen werden automatisch durch das Aufrufen eines Callback angezeigt.
05:31

Transkript

Das Oberserver Pattern ist etwas, was von AngularJS schon von Haus aus mitausgeliefert wird. Das bedeutet eigentlich nichts anderes, als dass Ihr in der Lage seid, innerhalb eines Scopes befindliche Werte jederzeit zu beobachten. Sobald sich dieser Wert dann ändert, wird automatisch ein Listener, ein Callback, aufgerufen, der dich darüber informiert, was war eigentlich der neue Wert oder was ist der neue Wert und was war der alte Wert. Ihr könnt dann diesbezüglich agieren, indem Ihr dann sagt, dass irgendetwas dann passieren muss um darauf reagieren zu können. Wie das ganze funktioniert, möchte ich Euch hier gerne demonstrieren. Ich habe dafür ein kleines Konstrukt vorbereitet, womit Ihr in der Lage seid etwas zu beobachten. Eigentlich relativ simpel. Schaut mal. Ich habe hier ein kleines HTML-Konstrukt aufgebaut mit zwei Views, die ineinander verschachtelt sind, einmal ein Scope1, das als Eltern Scope dient und in dem Scope befindet sich Scope2 und wenn ich hier auf die Schaltfläche, die sich im ersten Element, also im Scope1 befindet, dann draufklicke, erhöht sich ein Wert, der sich im gleichnamigen Scope befindet. Sehen wir auch hier wunderbar, hier finden wir dann entsprechend den test value. Der test value ist gebunden an den Wert test, der in den Scope innerhalb des ParentCtrl dann drinnen ist und dieser Testwert beginnt mit dem Wert 0, verfügt über die Ereignismethode add, die aufgerufen wird, wenn man dann in der Schaltfläche entsprechend einen Klick ausführt oder auf der Schaltfläche einen Klick ausführt und add macht nichts anderes als scope aufwachsen zu lassen. Was ich jetzt also jetzt machen möchte, ist im Anschluss nun in der Lage zu sein, vom Scope2 auf Scope1 eine Beobachtung zu machen, denn auch das geht natürlich. Denn ich bin in der Lage hier auf übergeordnete Scopes zurückzugreifen. Was ich also hier aktuell habe, ist, dass ich in diesem Kind Scope, das sich hier im Roten befindet, einen watchedVal drinnen habe. Dieser watchedValue ist hier mit dem Wert 0 versehen. Ich kann jetzt hier auch sagen, warte auf Wert. Dann werde ich entsprechend hier das Ganze auch hier unten sehen. Was ich also jetzt haben möchte, ist, dass in dem Scope selber auf den Parent Scope zurückgreife. Der Parent Scope ist in diesem Konstrukt quasi von dem Roten das Eltern Element ist Scope1 und diesen nutze ich jetzt, um mit der Methode watch dafür zu sorgen, dass ich jetzt eine Beobachtung starte. Eine Beobachtung kann ich eigentlich relativ simpel starten und zwar ist es so, dass ich sage, was möchte ich eigentlich beobachten, die Eigenschaft test. Also ich bin in diesem Scope. Das übergeordnet Scope ist das Parent Scope und hier möchte ich dann den Wert test, der hier definiert ist, beobachten. Sollte sich dieser Wert ändern, möchte ich, dass eine Funktion aufgerufen wird und diese Funktion hat die Information einmal darüber, wie war der alte Wert oldVal und wie ist der neue Wert newVal. Beides lasse ich mir hier ausgeben, oldVal und per Info den newVal. Testen wir das Ganze, werden wir jetzt sehen, dass bei der Initialisierung schon vollautomatisch erkannt wird, der Wert ist jetzt 0, aber der hat sich eigentlich vorher nicht geändert. Das heißt, das ist der Initialisierungswert. Erhöhe ich das hier, sehen wir wunderbar, dass dann entsprechend immer der nächst höhere Wert kommt und dadurch aus ausgegeben wird. Das heißt, ich bekomme immer die Information darüber, wie war der Wert vorher und wie ist der Wert entsprechend jetzt. Dabei fällt mir auch auf, dass ich das jetzt hier verwechselt habe. Ich muss selbstverständlich newVal oldVal machen. Dann werden wir auch jetzt hier bei dem Logs sehen, der neue Wert ist dann hier 3. Der alte Wert war 2 und jedes Mal, wenn ich draufklicke, wächst der Wert weiter. Wenn ich diese watch Methode aufrufe, dann bekomme ich eine Funktion zurück, die wiederum, wenn ich diese aufrufe dafür sorgt, dass ich den Beobachtungsstatus auf diesen Wert dann entfernen kann. Bedeutet nichts anderes, als der Rückgabewert dieser Funktion sobald diese aufgerufen wird, sorge ich dafür, dass dann entsprechend test von hier nicht mehr beobachtet wird. Das Ganze möchte ich einfach dann machen, wenn newVal genau gleich den Wert 3 hat. Ab dann möchte ich entsprechend nicht mehr auf den Testwert hören oder ihn beobachten. Ansonsten soll dann auch einfach innerhalb dieses Scopes der watchedVal gesetzt werden auf den Wert, den ich hier als newVal erhalten habe. Teste ich das Ganze, sehen wir jetzt hier 0, 0. 1, 2 und beim Dritten ist dann entsprechend erreicht, sage ich remove und dieser remove sorgt jetzt dafür, dass auch ab jetzt die unteren Console Logs nicht mehr auftauchen, dann ab jetzt höre ich nicht mehr auf dieses Element. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind mittels der watch Methode in Scope einzelne Wert beobachten zu können.

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!