AngularJS Grundkurs

Bidirektionale Bindungen

Testen Sie unsere 1987 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit bidirektionalen Bindungen besteht in AngularJS die Möglichkeit, Elemente aus einem Modell gleichzeitig anzusprechen sowie deren Werte zu aktualisieren.
03:36

Transkript

Ein besonders spannendes Thema in AngularJS finde ich persönlich die bidirektionalen Bindungen. Mit den bidirektionalen Bindungen meine ich, dass ich in der Lage bin, ein Element aus dem Modell also aus dem Scope eine Scope Variable anzusprechen, zu modifizieren und gleichzeitig den Wert dann im Modell zu aktualisieren, um es dann wieder darstellen zu lassen. Auch das hört sich wahnsinnig kompliziert an. Wenn man einmal sieht, wie das Ganze funktioniert, verliert das so ein bisschen die Magie und Ihr seht, wie einfach AngularJS im Grunde genommen zu bedienen ist. Um das Ganze zu simulieren bzw. Euch vorzustellen, werde ich jetzt hier ein Formular erzeugen. Dieses Formular, das ich erzeuge, werde ich dann entsprechend mit der bootstrap Klasse vom horizontal dann entsprechend verwenden und werde hier innerhalb des Formulars damit beginnen, dass ich ein Inputfeld erzeuge von Typ text und jetzt kommt etwas, was ich unendlich genial finde. Ich gehe jetzt hin und verwende das Attribut ng-model und diese Direktive sorgt jetzt dafür, dass ich hier eine Variable definieren kann, die es in den Scope geben soll, welche dann anschließend in dem Scope auch zur Verfügung gestellt wird und gespeichert wird. Dieses ng-model ist dann also im weitesten Sinnen nichts anderes, als würde ich jetzt hier zum Beispiel hingehen und würde dann in meinem Scope selber name definieren mit dem Wert Saban beispielsweise. Dann werdet Ihr auch sehen, dass das zum Beispiel auch so eine Initialdefinition ist. Wenn ich hier ein Refresh mache, seht Ihr, dass ich mein Textinputfeld habe und da steht dann entsprechend Saban drinnen, weil ich das Textinputfeld innerhalb des Models, nämlich der Scopevariable name, den ich jetzt hier definiert habe, dann gebunden habe. Das Tolle ist jetzt, dass diese Bindung bidirektional ist. Das bedeutet, wenn ich jetzt hier drinnen irgendetwas ändere, dann sorge ich automatisch dafür, dass dann dieser Wert im Scope automatisch mitaktualisiert wird, deswegen bidirektional. Das heißt nur in eine Richtung, sondern in die andere Richtung auch. Und um Euch das Ganze zu simulieren, dass das tatsächlich funktioniert, machen wir jetzt folgendes. Erzeugen einen Zeilenumbruch und lassen dann hier den Namen einfach ausgeben. Aktualisieren das und hier sehen jetzt wunderbar, dass ich im Formular das Inputfeld habe, den Wert zugewiesen habe aus dem Scopenamen. Das habe ich mittels ng-model gemacht und das Geniale daran ist jetzt, wenn ich hingehe und irgendetwas hinzufüge und eingebe, sorge ich vollautomatisch dafür, dass ich jetzt an dieser Stelle dann die Aktualisierung im Scope mache. Wenn ich im Scope eine Aktualisierung habe, wird durch die Bindung automatisch das HTML-Element, dass das Ganze eingebunden hat, informiert, dass es sich aktualisieren muss. Hier habe ich wirklich dann ein Stück Magie, wo ich sehen kann, dass durch die bidirektionale Bindung automatisch mein Model aktualisiert wird, mein Gültigkeitsbereich aktualisiert wird und die HTML-Elemente aktualisiert werden, die auf diesen variablen Typen bzw. auf diese Eigenschaft horchen. In diesem Kapitel haben wir gelernt, wie man ganz einfachen Mitteln innerhalb von AngularJS bidirektionale Bindungen realisieren kann.

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!