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

AngularJS 1.3 Grundkurs

View-Element an Controller binden

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
AngularJS verfügt über eine spezielle Direktive, um ein View-Element an einen Controller zu binden. Dabei erstellt das Framework eine Scope-Instanz, um die Verknüpfung herzustellen.
04:47

Transkript

In diesem Video möchte ich euch sehr gern das Zusammenspiel zwischen einer View und einer Businesslogik einmal näher bringen und welche Bedeutung dabei der Scope als Brücke zwischen diesen beiden Instanzen hat. Schauen wir uns einfach zunächst einmal ein View an. Das View selber ist ja im Grunde genommen nichts anderes als ein HTML-Fragment, also eine HTML-Vorlage, die durch die Kompilierung von AngularJS entsprechend mit Businesslogiken und Scopes dann versehen wird. In diesem speziellen Fall möchte wir, dass ein bestimmtes View-Element mit einem Controller definiert oder vielmehr gebunden wird, die 'FooBarCrtl' hat. Ab diesen Moment werden wir dann also technisch in der Lage zu sagen, es gibt einen HTML-Knoten und dieser HTML-Knoten soll sich so verhalten, wie der 'FooBarCrtl' es befiehlt. In AngularJS gibt es dafür eine Direktive, die ich verwenden kann. Diese Direktive nennt sich ng-controller und mit ng-controller bin ich in der Lage, einen Controller zu binden, den ich über die Angular-Methode Controller registriert habe und zusätzlich, wenn ich dann entsprechend eine solche Registrierung und eine solche Initialisierung durch den compile process dann entsprechend in die Wege geleitet habe, erzeugt der Compiler automatisch eine Scope-Instanz, die als Brücke zwischen dem Controller und dem View-Element dient. Ihr seht sehr schön, dass hier diese Scope-Instanz automatisch als Dependency Injection in dieser Funktion verwendet werden kann, um darauf Werte zu setzen und dadurch, dass ich hier mit dem Schlüsselwort as ctrl gearbeitet habe, habe ich gleichzeitig dafür gesorgt, dass der Scope automatisch so erzeugt wird, dass von Haus aus im Scope eine Eigenschaft Controller erzeugt wird, die im Grunde genommen nichts anderes ist, als eine neue Instanz von 'FooBarCrtl'. Und so erkennt ihr wunderbar die Brücke zwischen Scope, View und Controller, dass ich hier erzeugt habe. Will ich nun explizit in den Controller auf eine Eigenschaft zurückgreifen, wie beispielweise hier die Eigenschaft foo, die Bestandteil dieses Controllers jetzt ist, kann ich dann in ng-modell einfach hier hin gehen und crtl.foo sagen, das gleiche mit crtl.bar. Das heißt, ich habe hier die Konstellation mit dem Controller und dem Scope als Dependency Injection und als Verwendung direkt im Ausdruck und habe zusätzlich dann noch hier die Definition, dass dann die Eigenschaften in den Controller direkt gebunden werden können, in diesem Falle zum Beispiel mit ng-modell und zusätzlich habe ich jetzt hier aber sogar Benutzerinteraktionen oder vielmehr Businesslogiken, definiert wie beispielweise hier die Methode doReset. Diese doReset-Methode, die ich hier definiert habe, kann ich hier mit der Direktive ng-click dazu verwenden, dass ich sage, hey, in dem Moment wo auf diesem HTML-Element ein Klick ausgeführt würde, führe die Funktionalität aus, die hier im Ausdruck dann definiert wurde. Und im Ausdruck sage ich dann, schnapp dir den Controller, die jetzt hier im Scope abgelegt habe, im Controller gibt es die Methode doReset und führe diese aus. Und da befindet sie sich. Was macht doReset denn? DoReset erwartet als Parameter einmal foo und einmal bar als Wert. Sollte dieser Wert nicht gesetzt werden, besagt es dann initial, dass es dann annimmt, dass es der Wert Null ist. Sollte der Wert doch gesetzt worden sein, überprüft es, ob es ein legitimer Wert ist, also ob es eine Zahl ist. Sollte es eine Zahl sein, verwendet es diese Zahl oder ersetzt dann entsprechend die Zeichenkette oder den anderen Objekttyp entsprechend mit dem Zahlenwert Null. Gucken wir uns das Ganze jetzt mal in der realen Welt an, können wir hier also wunderbar folgendes erkennen. Ich habe hier die Bindung gemacht, crtl, crtl.bar. Hier ebenfalls die Bindung mit crtl.foo +crtl.-bar, habe das sogar erweitert, um einen Filter, der jetzt aber an dieser Stelle einfach mal irrelevant sein sollte. Zusätzlich habe ich hier die ng-app initialisiert, das heißt, der gesamte Inhalt des Bodys ist an dieser Stelle quasi meine Angular-Anbindung und in dem Kompilierprozess. Und wenn ich jetzt hier mal in JavaScript nachschaue, dann sehe ich, dass ich im Angular-Umfeld ein Modul erzeugt habe und in dem Modul einfach einen Controller registriert habe, genauso wie gerade in der Folie erläutert und dann exakt die Funktionalität, die ich in der Folie erläutert habe, hier dargestellt habe. Das bedeutet, würde ich jetzt hier beispielsweise einen anderen Wert definieren, dann erkennt ihr wunderbar, dass der Wert, der jetzt im Controller definiert worden ist, über die Bindung dann mit dem Controller, die wir hier im HTML sehen, schaut mal, da war es crtl.foo. Ändere ich also foo, ändert sich das Texteingabefeld hier entsprechend und zusätzlich können wir nun auch erkennen, wenn ich jetzt hier auf crtl.doReset mittels eines Klicks zurückgreife, passiert nichts anderes, als dass dann entsprechend die Modellwerte für Foo und Bar auf Null gesetzt werden und dadurch natürlich auch die Summe auf Null gesetzt wird. Auf diese Art und Weise haben wir sehr schön das Zusammenspiel gesehen, die das Scope ermöglicht, in Kombination mit einem View-Element und einem Controller, das die Logik des View-Elementes übernehmen soll und haben auch gesehen, dass dann dieser Controller durchaus in der Lage ist dann Modelleigenschaften zur Verfügung zu stellen, indem einfach Kontrolleigenschaften zu Modellattributen werden.

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
Ihr(e) Trainer:
Erscheinungsdatum:19.11.2014
Laufzeit:4 Std. 15 min (74 Videos)

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!