AngularJS Grundkurs

Datenzugriff

Testen Sie unsere 1931 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In einem Gültigkeitsbereich können Variablen und Werte abgelegt werden. Dieses Video zeigt die Vorgehensweise, um auf diese Daten zuzugreifen sowie diese in einer View anzeigen zu können.
05:01

Transkript

Innerhalb eines Gültigkeitsbereichs sind wir in der Lage Eigenschaften, also Variablen und Werte abzulegen. Es dient also als eine Art kleines Minidatenmodel. Jetzt möchte ich Euch sehr gerne zeigen, wie wir in der Lage sind dann anschließend auf diese Daten entsprechend zurückzugreifen, um dann diese Daten beispielsweise innerhalb einer View anzeigen zu können. Ich habe, um das Ganze zu demonstrieren, ein wenig was vorbereitet und zwar haben ich einen Div-Knoten hier, der an einen Controller gebunden ist und der Controller ist an dieser Stelle hier definiert und initiiert bereits den Scope. In diesem Scope werde ich jetzt einen Wert ablegen, also eine Eigenschaft zum Beispiel sayHello und diese Eigenschaft wird dann entsprechend hier an dieser Stelle hello world! sein. Anschließend lasst uns noch schnell einen Blick auf den Scope werfen. Aktualisieren wir das schnell und dann sehen wir dann wunderbar, dass die Variable sayHello entsprechend in diese Gültigkeit abgelegt worden ist. Jetzt möchte ich, dass dieses sayHello innerhalb meines HTML-Elements angezeigt werden kann. Jetzt ist das Besondere, dieser Scope ist die Schnittstelle, ist die Brücke zwischen dem Controller und dem HTML-Element. Eines die Möglichkeiten jetzt diesen Wert zu binden, ist es mit einem Ausdruck zu machen und zwar dem, dass ich mit einer geschweiften Klammer verschachtelt arbeite und hier einfach den Wert des Datenmodels eintrage und das ist sayHello. Das heißt, ab jetzt bin in der Lage, das Ganze hieß sayHello, sayHello per geschweifte Klammer eingebunden, aktualisiert und dann haben wir angularJS hello world! So seht Ihr, dass ich wirklich extrem einfach in der Lage bin, auf dieses Element dann zuzugreifen. Das ist aber nicht die einzige Möglichkeit, wie ich darauf zugreifen kann. So kann ich beispielsweise jetzt hier grundsätzlich das Ganze in einen Überschriftsknoten reinpacken. Das angular lassen wir einfach weg. Als nächstes möchte ich jetzt zeigen, dass wir auch in der Lage sind mit einer Direktive Werte zu setzen. Also alternativ hätte ich hier auch einfach einen Div-Knoten nehmen können mit dem Ausdruck ng-bind und bei dem ng-bind den Wert dann ebenfalls hier eintragen. Wenn wir das Ganze dann machen, dann sehen wir, dass das dann doppelt vorkommt und diesmal ist es dann so, dass wir, wenn wir uns das Element einmal anschauen, wiederum dann mit der ng-bind Klasse dann hier kommuniziert wird an ein AngularJS, dass hier eine Bindung stattfinden muss. Welche Bindung wird in die Direktive ng-bind angegeben, nämlich die Variable sayHello und anschließend seht Ihr, dass in dem Div-Knoten automatisch die Bindung stattgefunden hat, also der Wert wurde hier eingetragen. Der Vorteil, wenn wir das so machen, ist folgender und zwar wenn das Ganze hier ein bisschen träge abläuft, ist es so, dass wir bei diesem Ausdruck, den wir haben, einen Bruchteil einer Sekunde tatsächlich diese geschweifte Klammer mit dem sayHello sehen und erste wenn das Ganze dann vollständig abgearbeitet ist, werden wir dann entsprechend das hello world darin sehen. Wogegen wenn ich das Ganze über diese Direktive mache, das dann automatisch stattfindet und ich habe nie diese störenden geschweiften Klammern an dieser Stelle. Um beispielsweise HTML-Elemente dann auch hier einbinden zu können, kann ich statt ng-bind dann entsprechend die Bindung per HTML machen und um Euch das einmal zu demonstrieren, werden wir jetzt hier einfach ganz schnell etwas definieren und zwar in fett Hello World. Was ich jetzt hier an dieser Stelle dann anschließend machen werde, ist nichts anderes, als statt das normale ng-bind das ng-bind-html-unsafe anzuwenden und dann muss ich jetzt hier noch sayHelloHTML den Wert neu definieren, hier übergeben, dann aktualisiere ich das Ganze und nun sehen wir wunderbar, dass wir dann entsprechend in fett das Hello World noch mal haben. Ich deaktiviere die Live-Edit-Ansicht, dann sehen wir dann hier auch wunderbar, dass das Hello World an dieser Stelle fett ist aufgrund der Tatsache, dass ich es hier per HTML-Einbindung dann entsprechend hier angewendet habe. So sind wir in der Lage, mittels AngularJS mit unterschiedlichen Methoden Werte zu binden. Zum einen Mal mit dem Ausdruck über die geschweiften Klammern über ng-bind oder hier in diesem Fall mit ng-bind-html-unsafe, um HTML-Einbindungen zu machen.

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!