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.

Angular 2 Grundkurs

Datenbindung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Datenbindung ist eines der Highlights von Angular 2.0. Dieses Video erläutert ihre Bedeutung.
04:21

Transkript

Datenbindungen sind ein ganz besonderes Highlight in der Angular-2-Welt. Ihr müsst euch Folgendes vorstellen: Mit der Datenbindung seid ihr in der Lage, innerhalb einer Vorlage, also eines Templates, Ausdrücke zu binden. Dieser Ausdruck kann beispielsweise wie folgt aussehen: Ich habe ein Header-Element. Mit zwei geschweiften Klammern mache ich eine Bindung. Mit dieser Bindung weiß dann das Header-Element Bescheid: Hey, ich bin in einer Vorlage von einer komponenten Logik. In dieser Instanz gibt es eine Eigenschaft und ich möchte diese Eigenschaft in diesem Header darstellen. Einfach, oder? Auf diese Art und Weise gibt es die Möglichkeit, Templating super schnell zu realisieren. Ich kann aber auch einfach nur Werte binden. So kann ich bei der Wertebindung dafür sorgen, dass ich z.B. die Source-Eigenschaft eines Image-Knotens binde. Dafür benutze ich dann eine Schreibweise, wie bei einer Attribut-Direktive mit Wertzuweisung. D.h., ich werde die Eigenschaft von image auf die Art und Weise manipulieren, dass ich sage: Innerhalb der Bindung soll die Eigenschaft "source" gesetzt werden, mit der "imageUrl", die als Information in meiner komponenten Instanz vorhanden ist. Analog kann ich übrigens auch Attribute setzen. So könnte ich innerhalb eines Buttons das Attribut "aria-label", beispielsweise, mit dem Wert "help" definieren. Damit wärt ihr in der Lage, einem Screenreader die Information zu hinterlassen, dass dieser Button ein "help"-Button ist. Ihr seid aber nicht nur in der Lage, Attribute zu definieren, sondern auch Klassen. So könnt ihr hier in diesem div-Knoten sagen: Die Klasse "active" soll bitte auf diesen div-Knoten dann hinzugefügt werden, wenn innerhalb der komponenten Instanz die Eigenschaft "isActive" auf two gesetzt wurde. So seid ihr also jetzt schon in der Lage, visuelle Elemente in Form von CSS-Klassen einfach zu binden. Diese Bindungsform geht übrigens auch schon mit "Styles". So kann ich anstatt "class" hier auch ganz einfach sagen: Tu mir den Gefallen. Ich möchte die Style-Eigenschaft "color" innerhalb dieses div-Knotens auf den Wert setzen, der in meiner komponenten Instanz als "color" hinterlegt worden ist. Auf die gleiche Art und Weise kann ich natürlich bei der Bindung auch auf Ereignisse binden. Ein Ereignis bind ich mit runden Klammern. Bei der runden Klammer ist der Ausdruck innerhalb der Klammer das Ereignis, auf dem reagiert werden soll. Das "click"-Ereignis hier bei dem Button zum Beispiel. Und was soll gebunden werden? Die "onClick"-Methode, die sich innerhalb meiner Klassen-Instanz befindet. Witzig ist auch, dass ich bei so einer Bindung sogar Operationen durchführen kann. Ich kann also innerhalb eines Templates Operationen hinterlegen, wie beispielsweise "num+1". Das bedeutet: "num" ist eine Eigenschaft innerhalb meiner komponenten Instanz. Mit "+1" sage ich: Gib das Ergebnis dieser Operation aus, und muss keinen großen Hokuspokus machen. Es ist übrigens auch ohne Probleme möglich, dass ich hier, bei der Bindung, den Rückgabewert einer Methode reinschalten könnte. Oder, noch viel primitiver, fragt mich nicht, wofür das gut sein soll: Ihr könnt auch ganz einfache Operationen, wie beispielsweise "1+1", hier an der Stelle übergeben und diese dann darstellen lassen. Bei den Datenbindungen gibt es noch ein besonderes Highlight, meiner Meinung nach, nämlich das, dass ihr auch in der Lage seid, eigene Variablen zu definieren und diese dann in der Bindung zu nutzen. So kann ich hier wunderbar farbig erkennen, gibt es den Ausdruck "#num1". Dieses "#num1" macht etwas ganz tolles! Es sorgt dafür, dass in der komponenten Instanz, die Eigenschaft "num1" gesetzt wird, initial, indem ich hier dann den "value"-Wert auf "start number" setze. Und das Tolle ist dann, dass, wenn ich jetzt als User innerhalb des Input-Felds irgendwas tippe und die Zahl modifiziere, kann ich das dann wiederum wunderbar binden, indem ich sage: Hey, es gibt hier eine Eigenschaft "num1" innerhalb der komponenten Instanz. Die wiederum verfügt über die "value"-Eigenschaft. Die hätte ich gerne hier gebunden. Und dieser Ausdruck gewinnt hier natürlich an ganz, ganz besonderer Bedeutung, an dieser Stelle. In diesem Video haben wir gemeinsam kennengelernt, welche Bedeutung die Datenbindung in der Angular-2-Architektur hat.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 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!