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.

AngularJS 1.3 Grundkurs

Root-Scope

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Root-Scope nimmt in AngularJS eine besondere Rolle ein. Das Framework erzeugt diesen durch das Applikationsmodul und legt ihn direkt auf der Applikation ab.
05:00

Transkript

Eine ganz besondere Rolle nimmt innerhalb von AngularJS der Root-Scope ein. Denn ein Root-Scope ist im Grunde genommen der Scope, der quasi direkt auf der Applikation selbst abgeliegt wird. Wenn wir uns hiermal anschauen, und seht ihr, dass jede Anwendung selber über so einen Root-Scope verfügt. Und anschließend sehen wir sehr schön, dass dann die Scopes hier hierarchisch ineinander aufgebaut sind mit den jeweiligen Werten, die dort vorhanden sind. Nun möchte ich euch zeigen, wie ihr mit dem Root-Scope kognizieren könnt. Im Grunde genommen möchte ich euch zeigen, indem ich das Applikationsmodul einmal für uns starte. Und das Applikationsmodul, dass ich dann gestartet habe möchte ich hier schnell öffnen. Na, seht ihr, dass innerhalb des runs, hier innerhalb des Applikationsmoduls im Grunde genommen nichts mehr passiert. Das nutzen wir hier mal schnell auf. Und per Dipenency Injection können wir den Root-Scope im Applikationsmodul jetzt innerhalb des runs da noch aufnehmen. Das ist überhaup kein Problem. Und sind dann hier in der Lage dann in dem oneScope dann einen Wert zu setzen, zum Beispiel den Root-Scope-Value. Dieser Wert liegt im Root-Scope. Perfekt! Nachdem wir das dann gemacht haben, lasst uns mal folgendes anschauen. Dadurch,dass jetzt grundsätzlich die Scopes hier hierarchisch zueinander agieren, müsste ich dann hier theoretisch in der Lage sein, überall, wo meine Applikation selber Gültigkeit hat, und in meinem Fall habe ich das bootstrape indirekt auf das document gemacht, das heißt, im gesamten Dokument wird dann entsprechender Root-Scope Gültigkeit haben.Und wenn er das dann hat, dann müsste ich hier eigentlich den Root-Scope-Value von überall ansprechen. Das möchte ich euch jetzt auch einmal schnell beweisen. Und werde ich hier entsprechend den Root-Scope einfach mal einmal in der Applikation selbst und in den jeweiligen Kinds-Scopes hier hinzufügen. Und lasst uns das fix öffnen. Dann seht ihr wunderbar, dass dann hier immer dieser Wert liegt im Root-Scope entsprechend dann hier erkennt, und das sind hier die Root-Scope-Variablen. Was ich zusätzlich machen kann, ist, dass ich über die Eigenschaft Root in der Lage bin, aus jedem Scope heraus direkt den Scopes anzusprechen. Bedeutet nichts anderes, dass jetzt hier, im secondCtrl zum Beispiel, ich ein console.log machen kann. Und im console.log kann ich dann hier einfach von dem Scope mal den Root-Scope anfragen. Das mache ich, indem ich einfach $root verwende. Wenn ich das Ganze jetzt hier teste, können wir jetzt hier sehen, dass ein Root-Scope hier definiert beziehungsweise angegeben wird. Und dieser Scope hat hier die id 1 . Und wir erkennen auch wundebar den Root-Scope-Value1 hier. Und zu Erinnerung, der obere Root-Scope hat definitiv hier die ID1. Wenn ich den jetzt aber ansprechen kann, mit dem console.log kann ich im Grunde genommen auch natürlich Wertigkeiten hier ändern. Das möchte ich euch einmal jetzt schnell zeigen, indem ich mir wieder den Root-Scope hier schnappe, aber diesmal im Kontext einer Methode dann entsprechend den Wert für Root-Scope-Value anpassen möchte, das heißt ich erzeuge jetzt einen Hendler, den ich später in ein Click-Event einbinden möchte. Dieser Hendler soll dann heißen "click". So. Wunderbar! Und der Click-Hendler, der soll nun folgendes machen: Der soll im Scope auf den Root-Scope zurückgreifen, und hier soll er dann entsprechend den Wert von Root-Scope-Value ändern in der geänderte Wert im Root-Scope. Perfekt! Muss man nun nur dafür sorgen, dass der Click hier auch wirklich angesprochen wird. Und hierfür erzeugen wir schnell ein button, packen einen ng-Click daran und machen dann den Aufruf von Click hier an dieser Stelle und können dann anschließend jetzt einfach mal testen, was passiert. Klick ich hier drauf, ändern sich alle Bindungen hier für den Root-Scope-Value. Das ist wunderbar zu erkennen, dass ich quasi dann mit der Eigenschaft $root innerhalb des $scope-Objektes direkt auf das Root-Scope-Objekt zurückgreifen kann. In den vergangenen Minuten haben wir also gelernt, dass wir in der Lage sind, mit der Dependency Injection $Root-Scope direkt auf den Root-Scope Zugriff zu haben. Dort könnten wir Methoden und Funktionen definieren oder halb auch Eigenschaften. Tut mir den gefallen, überlagert das Ganze nicht. Das ist etwas Unsauberes still. Und zusätzlich bin ich in der Lage, dann hier innerhalb jedes Scopes dann dann entsprechend zu fragen: "Hey, was ist eigentlich der Root-Scope," diese Applikation?" Und das kann ich machen, indem ich mit dem $scope.$root verwende.

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!