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

AngularJS 1.3 Grundkurs

Hierarchischer Aufbau von Scopes

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Aufbau ineinanderliegender Scopes einer Applikation erfolgt in AngularJS in hierarchischer Struktur. Dadurch verfügt die Anwendung über die Möglichkeit, auf Eigenschaften des Eltern-Scope zuzugreifen.
05:27

Transkript

In den kommenden Minuten möchte ich euch sehr gerne demonstrieren, dass die Scopes, in den wir uns bewegen, hierarchisch zueinander aufgebaut sind. Das bedeutet nichts anderes, als dass wenn wir unterschiedliche Scopes haben, die innerhalb HTML-Elementen entsprechend beinhaltet sind, beziehungsweise von HTML-Elementen initialisiert worden sind, dass diese von einander mehr oder minder erben, weil sie der Hierarchie folgen, wie sie im HTML-DOM abgelegt sind. Gucken uns jetzt hier einfach mal so eine HTML-Seite an, die ich hier vorbereitet habe, dann sehen wir hier eine Überschrift App, die wir hier in Zeilen zählen finden, die ganz normal in body liegt. Danach finden wir hier so einen grünen Container, der hier representiert wird durch einen div-Knoten mit der class firstCtrlScope. Und in diesem grünen Element befindet sich dann entsprechend einen Überschriftsknoten, wo dann "Eltern-Knoten" da drin steht. Danach folgt dann ein div-Container mit einem secondCtrlScope der dann diesmal blau ist, und hier wird eine Überschrift "Kinds-Knoten". Was ich nun machen möchte, ist zwei Controller erstellen, nämlich den firstCtrl und den secondCtrl. Hierfür habe ich dann einfach mal ein Modul und in diesem Modul selber rufe ich dann .controller auf und definiere firstCtrl. Schnappen wir die Dependecy Injection von dem Element $scope. Wunderbar! Und werde nun dafür sorgen, dass ich in dem Scope selber einen Wert setze firstCtrlScopeVal gleich firstCtrlScopeVal . So. Hervorragend! Diesen Wert werde ich jetzt hier in dem entsprechenden Scope dann binden. Dafür darf ich natürlich nicht vergessen, dass ich erstmal hier mit dem ng-contoller dafür sorge, dass ich zunächst einmal den firstCtrl binde. Und nachdem ich das dann gemacht habe, kann ich dann hier innerhalb eines Paragraphenknotens einfach fix firstCtrlScope binden. Testen wir das Ganze, haben wir hier den Wert entsprechend firstCtrlScope Anschließend gehe ich hin und dubliziere dass einfach mal ganz frech und mache jetzt hier einen secondCtrl. Und in dem secondCtrl soll entsprechend ein secondCtrlScopeVal sein So. Muss dann nur jetzt noch hier dafür sorgen, dass ich mit ng-contoller den secondCtrl mir reinhole, und kann dann wunderbar an der Stelle dann ebenfalls secondCtrlScopeVal einbinden. Und das sieht ja hervorragend aus, das heißt, in den jeweiligen Scopes habe ich dann jetzt jeweilige Einbindung gemacht. Aber jetzt passt auf! Ich schnappe mir jetzt den firstCtrlScopeVal und denk dran, ich befinde mich hier definitiv und hundertprozentig in dem Kontext von dem secondCtrlScope. In secondCtrlScope selber habe ich den secondCtrlScope niemals definiert. Die Definition ist hier für das secondCtrlScope entstanden. Gucken wir jetzt das Ganze aber an, werden wir trotzdem sehen, dass wir hier secondCtrlScope haben. Mache ich hier noch schnell einen Zeilenumbruch, damit das dann etwas schicker wirkt. So. Und da haben wir dann entsprechend firstCtrlScope. Warum das Ganze funktioniert, ist, wie gesagt, weil die Scopes ineinander aufbauen, beziehungsweise hierarchisch agieren, das heißt, wenn ich jetzt hier eine Eigenschaft hab secondCtrlScope, wird dann automatisch nach dem ersten Scope gesucht. Findet man einen Scope, überprüft man in diesem, ob die Eigenschaft im Model vorhanden ist. Sollte das der Fall sein, wird die Bindung dann mit dieser Scope-Eigenschaft durchgeführt. Sollte ich allerdings, wie im Falle von firstCtrlScope, in dem aktiven Scope das nicht finden, passiert folgendes. Angular geht vollkommen selbstständlich hin und überprüft, ob es jetzt hier einen "Eltern-Knoten" beziehungsweise einen Eltern-Scope gibt. Sollte das der Fall sein, überprüft es nun im Eltern-Scope, ob die Eigenschaft dor definiert ist. Wenn diese Eigenschaft dort definiert wäre, geht ihr dann entsprechend hin und macht die Bindung anhand dessen. Würde ich etwas ganz anderes binden, wie zum Beispiel noCtrlScope, dann werdet ihr sehen, dass er dann entsprechend dann nichts findet, auch hier nichts anzeigt, das heißt, er konnte das Ganze nicht auflösen und dementsprechend verliert hier die Bindungsmöglichkeit und zeigt dann auch logischerweise nichts an. Der Clue an dieser Stelle ist nur, würde ich jetzt hier entsprechend im secondCtrl ebenfalls einen firstCtrlScope setzen. Dann würde dann hier - in second schreibe ich hier eifach mal rein- wunderbar zu erkennen sein, dass der wunderbar genau, wie es gerade beschrieben habe, zunächst einmal versucht hat, in diesem Scope diese Eigenschaft zu finden, was ihm auch gelunget ist. Und dann auf Inhalter dann auch hier den firstCtrlScopeVal in second entsprechend dargestellt und ist dann anschließend fortgefahren. Hat im Grunde genommen die Suche dann in dieser Stelle aufgehört, weil er schon erfolgreich im aktiven Scope dann das Element gefunden hat. Was wir also hier sehen können, ist, dass Scopes hervorragend auf einander aufbauen, das heißt, ich kann auf dieser Art und Weise auf Elternsgruppe zurückgreifen, um Werte oder auch Methoden von diesen Scopes ansprechen zu können.

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!