Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

AngularJS 1.3 Grundkurs

Bindungskonzept

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die bidirektionale Datenbindung stellt in AngularJS eine Verknüpfung zwischen Elementen in der View und Datenstrukturen im Model her und übernimmt hierbei Änderungen automatisch.
05:34

Transkript

Lasst uns gemeinsam über ein Bindungskonzept von AngularJS sprechen Es gibt immer ein Scope und dieses Scope ist gebunden mit einem View - Element (Dom- Element) in dem Scope beispielsweise variablen Definierer wie foo und bar, können diese dann automatisch auch als Mode interpretiert werden, wenn foo und bar Bestandteile Views verändert werden Also noch mal für den Zusammenhang Das Scope ist quasi die Bindung zwischen dem View, also der Logik und dem Datenmodel und dem was ich sehe und wenn wir von dem Model sprechen ist das im Grunde genommen nur ein Begriffsdefinition und das sind eine Gruppe von Eigenschaften, die der Benutzer tatsächlich sehen kann Bei der Bindung grundsätzlich haben wir folgendes gemacht wir haben an dieser Stelle die direktive ng Model verwendet und den Ausdruck foo Verwende ich die direktive ng- Model, macht Angular folgendes es überprüft über den Scope, ob die Eigenschaft, die als Ausdruck definiert wurde, also in dem Fall foo verändert wurde Falls ja, stellt es diese Eigenschaft dar im input- Eingabefeld und ist auch technisch in der Lage, wenn dann im Eingabefeld etwas geändert wird automatisch das Model und die Eigenschft foo im Model zu aktualisieren Analog verläuft es hier mit bar Zusätzlich kann ich aber auch einen Austruck in geschweifte Klammern setzen In dem Moment habe ich eine Bindung, und wenn ihr hier mal genau schaut, sogar eine Bildung mit einer mathematischen Operation versehen und hier passiert nichts anderes als das die Addition von foo und bar einfach in den Text hinein mit Summe dargestellt wird Würde ich hier also etwas ändern im foo, würde das Model sich aktualisieren Durch die Modelaktualisierung gibt es ein Update der Watcher für den Wert würde dann entsprechend greifen, und wird dann sagen 'Hey, das habe ich eigentlich darstellen wollen', wird erkennen, dass das ein Addition ist, wird dann ein Addition vom neuen Wer foo mit bar durchführen und dann das Ergebnis also die Summe an dieser Stelle darstellen Im Endeffekt haben wir da also die Möglichkeit zum einen Information vom Model in der View dargestellt werden, zum anderen aber und das macht die Bi- direktionale Bindung aus werden dann Benutzerinteraktionen dafür verwendet, um das Model zu aktuaslisieren gucken wir das Ganze in der realen Welt shen wir, dass ich hier einen html-Container habe, ein div-Container, um genau zu sein, den habe ich mit ng-app als Diaktive versehen das heißt ab diesem Moment, ist dieses hier als Template für meine Anwendung zu sehen und wird dann auch halt als Template kombiniert wenn die Applikation initialisiert, dann folgt den eine Definition von Variablen foo und bar mit dem Wert 1 und 2 Kombiniert das Ganze, erkennt ng- Model, hier ist die direktive ng-Model verwendet worden mit dem Ausdruck foo und überprüft, ob es iergendwo in diesem Scope die Applikation die Eigenschaft foo gibt und stellt dann entsprechend die Modelvariable als Bindung in dem input- Feld zur Verfügung ihr siehr hier oben der Wert 1 Das gleiche macht es mit ba und hier unten das Ganze als Addition Würde ich bei der Initialisierung hier anstatt der Wert 1 den Wert z. B 2,3 oder 4 eintragen, dann sieht ihr auch das automatisch im input- Text Fed hier dann der entsprechende andere Wert dargestellt wird ihr kennt hier auch, dass hier die Summe neu gebildet wird Und was das tollste ist für die Bi- Bindung, wenn ich in diesem input- Feld etwas ändere,aktualisiert sich das Model Durch die Modelaktualisierung wird auch entsprechend geschaut wo die Eigenschaft zusätzlich gebunden wurde und ich habe dann die Möglichkeit hier auch die Summe neu gebildet zu sehen Ich habe aber auch die Möglichkeit z. B. eine Bildung auf die Art und Weise zu machen, dass ich eine Direktive werwende, und die Direktive, die ich dafür verwenden kann, die nennt sich ng-bind und ich werde es einmal ganz schnell zeigen Ich kann ng-bind mit dem Ausdruck foo hier verbinden, Und dann schwupp, seht ihr wunderbar dass da noch der entsprechende Wert foo Mittels der Attribute ng-bind und der directiven ng-bind einfach mich foo gebunden wird Und wenn ich jetzt die Werte dann ändere dann kenne ich wunderbar welcher Wert oben dargestellt wurde Ich hätte natürlich auch hierhin gehen können und hätte foo selbstverständlich auch einzeln binden können,also statt einer Addition,die ich direkt gemacht habe, hätte ich auch hier einfach nur foo nehmen könenn und dann seht ihr auch wunderbar, dass diese Werte sich hier binden. Super spannend ist es aber, dass ich jetzt auch in der Lage bin diesen Ausdruck z. B. zu erweitern mit zwei Doppelpunkten Tue ich das, bedeutet das im ng-Kontext folgendes: es bedeutet, dass sobald die Eigenschaft foo, also sobald der Ausdruck das erste Mal initialisiert worden ist, also mit dem Wert versehen worden ist, macht die Bindung Rendering dieses entsprechenden Template- Parts und anschließend, wenn sich dieser Wert ändert, ignoriert es Es gibt aber unzählige Situationen im Kontext eines Templates, wo ich ganz genau weiß, wann genau brauche ich der Initilwert z. B das Darstellen eines Logos und dann kann ich wirklich die Performance erhöhehen Ich sage dem Angula mach das einmalig, und danach vergiss bitte die Bindun Selbstverständlich will ich euch auch zeigen, dass es wirklich nur einmalig ist, und ihr sieht wunderbar, dass bei dem zweiten Eintrag hier die 2 sich nicht mehr ändert, weil der Initalwert eben die 2 war Selbstverständlich kann ich diesen Doppelpunkt auch verwenden für ng- bind, also da bin ich jetzt komplett flexibel und dass ich hier die Werte ändern erkennt ihr durch die Summe hier wunderbar In diesem Video haben wir also gemeinsam gelernt wie das Bindungskonzept von AngularJS funktioniert

AngularJS 1.3 Grundkurs

Legen Sie mit AngularJS moderne, anspruchsvolle Webprojekte auf der Basis von HTML, CSS und JavaScript an.

4 Std. 15 min (74 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
AngularJS AngularJS 1.3
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.11.2014

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!