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

AngularJS 1.3 Grundkurs

Scope im Controller einbinden

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine Dependency Injection bindet den Gültigkeitsbereich innerhalb eines Controllers ein und übermittelt Wertigkeiten an den Scope. Diese können anschließend in der HTML-Umgebung ausgelesen werden.
03:25

Transkript

Bislang haben wir gelernt, dass wir auf ein HTML Element einen Controller definieren können und dann anschliesend ein Scope automatisch erzeugt wird, der quasi als Brücke zwischen den HTML Elementen und dem Controller dienen soll. In diesem Beispiel sehen wir hier, dass der Scope mit dem Index hier zwei entsprechend verbunden ist. Mit diesem Block der hier schön blau, dann entsprechend markiert wird und das erkennen wir auch wunderbar, wenn wir den HTML Kod anschauen. Da sehen wir, dass wir per NG Controller den User Controller hier auf der rechten Seite angebunden haben. Und somit ist dann diese Sektion mit dem User Controller verbunden. Wir sind natürlich jetzt auch in der Lage innerhalb des Controllers mit diesem Scope zu arbeiten. Und das möchte ich euch jetzt einmal gerne demonstrieren. So werde ich z.B. hingehen und werde einfach per Dependency Injection hier sagen: ,,Ich möchte gerne mit dem Scope sprechen, der entsprechend bereitgestellt wird, als Brücke zwischen Controller und HTML Element. Und möchte einmal den Scope kennenlernen und werde dafür eine Konsole.log machen, von dem Scope hier an dieser Stelle. Und lasst uns das mal im Browser anschauen, dann werden wir jetzt erkennen, dass dann entsprechend hier immer noch der Scope da ist und hier sehen wir dann entsprechend, dass dann hier eine Scope Information von einem Childscope kommt. Und dann sehen wir hier, dass hier die ID 2 dann entsprechend zu erkennen ist. Das ist wunderbar hier auch zu sehen, dass das halt eben dieses Scopeobjekt ist mit dem wir hier gerade kommunizieren und das wir uns hier auch gerade anschauen und dass das dann entsprechend jetzt an dieser Stelle ansprechbar ist. Ich habe hier zwei Erweiterungen. Die eine Erweiterung ist die NG-Inspector Erweiterung, innerhalb von Chrome und die andere jetzt gebt mir mal eine Sekunde, wo war sie denn? AngularJS Batarang. Witziger Name. Wie auch immer. Diese ermöglichen es euch wirklich diverse Informationen entsprechend darzustellen für ein Scope und für die AngularJS Welt auch Performance und Abhängigkeiten darzustellen. Schaut euch das mal an, wenn ihr ein bisschen Zeit habt. Aber wieso ich das erwähne ist folgendes; wenn ich jetzt hier hingehe in dem Scope, innerhalb des Controllers jetzt z.B. eine Eigenschaft Name definiere dann bin ich jetzt nämlich in der Lage, wenn ich jetzt hier im User bin per Dependencye Injection einfach zu sagen: ,,Hey binde mir doch mal den Namen aus dem Scope ein.,, Und Was jetzt passieren wird ist relativ einfach. Der wird jetzt hier automatisch den Namen aus diesem Scope hier initieren, denn der Scope wird ja bereit gestellt durch diesen Controller. Dieser Knoten ist in diesem Controller und in diesem HTML Block entsprechend enthalten, also wird dann entsprechend gleich hier stehen User Saban Ünlü. Schauen wir uns das Ganze mal an, ob das wirklich der Fall ist. So, haben wir einen Reload und dann haben wir hier wunderbar User Saban Ünlü als Information und wir erkennen halt auch dass hier in dem Scope zwei, das Name automatisch als Modelwert interpretiert wird für den Scope zwei mit dem entsprechenden Wert Saban Ünlü. Wir haben also gelernt, dass wir per Dependency Injection den Scope, der als Brücke zwischen HTML Element und dem Controller dient, einbinden können, um dann anschließend den Scope z.B. Wertigkeiten dann zu übermitteln und innerhalb der HTML Welt kann ich diese Werte dann hier per Bindung einfach verwenden und dem entsprechend, dann auch darstellen. In diesem Video haben wir sehr schön das Zusamenspiel zwischen Scope und Controller gesehen.

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!