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 Grundkurs

Root-Scope

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Root-Scope ist der Gültigkeitsbereich, welcher in AngularJS die unterste Hierarchieebene darstellt. Das Arbeiten mit diesem Bereich bietet einige Vorteile.
07:14

Transkript

Der Root Scope in AngularJS ist der Gültigkeitsbereich, der die unterste Hierarchieebene hat. Das heißt, der Root Scope selber, also der Gültigkeitsbereich Root Scope hat keinen Eltern Bereich mehr, also einen Eltern Gültigkeitsbereich. Welche Vorteile das hat, mit diesem Scope zu arbeiten und was für Vorteile es hat, dann entsprechend auch dort Elemente einzufügen, möchte ich Euch gerne demonstrieren. Grundsätzlich ist es so. Damit wir mit dem Root Scope selber kommunizieren können, müssen wir natürlich darauf achten, dass wir per dependency injection entweder den Scope einbinden oder entsprechend dann mit der Eigenschaft $root innerhalb eines Scopes dann darauf zurückgreifen können. Wie das mit der dependency injection funktioniert, möchte ich Euch gerne einmal zeigen, indem ich im Hauptmodul selber hier entsprechend eingreife und innerhalb des Hauptmoduls, das ich hier definiert habe, wo die Applikation definiert wird, werde ich jetzt hier via dependency injection entsprechend den Root Scope anwenden. Der Root Scope, den ich jetzt hier an dieser Stelle auf diese Art und Weise einbinde, da werde ich jetzt entsprechend einfach einen Wert hinzufügen $rootScope.version = v.1.0.0 und ab diesem Bereich ist in der untersten Hierarchieebene des Gültigkeitsbereichs eine Eigenschaft version definiert worden und dadurch dass das Ganze hierarchisch auch stattfindet, kann ich also jetzt hier ohne Probleme via h2 einfach sagen version := und einfach einen Bindung. Aktualisieren wir das Ganze, sehen wir, dass dann entsprechend hier v.1.0.0 genauso wie es hier im Boot Scope abgelegt wurde, angelegt wurde und dass ich es dann hier direkt ansprechen kann. Ganz wichtig, selbst, wenn ich das in andere Controller und Gültigkeitskonstrukte einbinden würde, wird das Ganze funktionieren, weil es, wie gesagt, auch hierarchisch hier stattfindet. Was ich natürlich auch machen kann ganz ohne jegliche Probleme, ist diesen Root Scope dann auch den Wert beispielsweise vom Modle hier zuzuweisen, weil ich hier im glücklichen Zustand bin, dass ich auch das Model per dependency injection eingebunden habe. So könnte ich jetzt hier theoretisch auch hingehen und sagen Model.getVersion. Zufällig gibt es im Model genau diese Funktionalität. Wenn wir uns das Ganze jetzt hier anschauen, sehen wir, dass dann getVersion eine Konstante version zurückgibt, die im dem Modul app.model dann entsprechend hinterlegt wurde mit v.1.0.1. Würden wir dann also jetzt hier ein Refresh machen, haben wir das 1.0.1 an dieser Stelle stehen. Viel interessanter wird es aber, wenn ich jetzt beispielsweise hier den Wert value, der per random erstellt wird, dann entsprechend mit setValue dann erhöhe und dafür eine übergeordnete Methodik in Root Scope ablege. Hört sich wahnsinnig kompliziert an. Was ich Euch eigentlich nur sagen will, ist, dass ich bislang folgendes gemacht habe. Wenn ich jetzt hier draufdrücke, erhöht sich diese Zahl permanent, weil ich hier innerhalb meiner Controller dafür sorge, dass ich über click innerhalb des Models einen neuen Wert setze, indem ich den aktuellen Wert mir schnappe und mit 1 erhöhe. Jetzt passt aber mal auf! Ich werde jetzt das hier rausnehmen und stattdessen will ich jetzt, dass das übergeordnet von überall aufrufbar ist und das bekomme ich eigentlich perfekt gewährleistet, indem ich es in Root Scope reinlege, weil ab dann kann ich absolut sicher sein, dass auch durch hierarchische Elemente immer dann entsprechend diese Methodik dann angewendet werden kann. Was ich also hier machen kann, ist zu sagen innerhalb meines Root Scopes, mache setUp als Funktionalität und diese soll nichts anderes machen, als in dem Model selber Werte setzen. this.model kann ich nicht verwenden. Das habe ich per Copy und Paste einfach aus dem alten Controller mir geschnappt. Jetzt kann ich also hier einfach hingehen und in der index.html statt das altbekannte click setUp verwenden. Wenn wir das dann testen, sehen wir, dass das wunderbar funktioniert. Das heißt, hier verwende ich den Root und selbst wenn ich es hier auf click lassen würde, kann ich dann entsprechend durch die unterschiedlichen Hierarchien bei click natürlich hier in diesem Fall parent Scope click hier zurückgreifen. Also müsste ich dann hier nichts anderes machen, als mir den Scope zu merken und könnte dann entsprechend in click mir den Scope schnappen und jetzt in Scope selber die Root Eigenschaft ansprechen. Erinnert Euch, die gab es hier. Wenn ich nämlich hier entsprechend in diesen Vererbungen durchwandere, dann sehen wir, über kurz oder lang das Root Element. Da ist das Root Element, das ich dann habe, das ich dann also ansprechen kann mit Root und hier weiß ich, dass es die Methode setUp gibt. Das heißt, in der index.html binde ich das alte click vom ButtonController, werde ich hierarchisch dann entsprechend über das parent auf den übergeordneten Scope des Controllers verwiesen, um dort dann entsprechend in dem Scope Roote das setUp zu machen. Bitte, es ist absolut klar, das ist einfach ein Szenario, das ich Euch aufbaue, um einfach dieses hin und her zwischen den unterschiedlichen Scopes näher zu bringen. Selbstverständlich ist es vollkommen legitim, wenn Ihr dort an dieser Stelle hingeht und in der index.html das setUp hier entsprechend einbindet. Tut mir nur bitte einen Gefallen! Arbeitet trotzdem vernünftig mit unterschiedlichen Gültigkeitsbereichen, mit unterschiedlichen Controllern und verfallt jetzt auf keinen Fall in dieses Muster, dass Ihr jetzt alles einfach im Root Scope ablegt, weil Ihr Euch denkt, von dort komme ich immer dran. Das wäre taktisch unklug. Denn ansonsten hätte ich auch hier natürlich auch statt des parent auch hier direkt den Root Scope. Das ist alles hier exemplarisch, denn das, was mir eigentlich extrem wichtig war, ist folgendes. Wisset, dass Ihr mit der Eigenschaft $root innerhalb jedes Scopes immer auf den Root Scope zurückgreifen könnt. Wisset auch, dass Ihr innerhalb des Run-Konstruktes mit dem $rootScope eine dependency injection bekommen könnte, indem Ihre den Root Scope direkt verwenden könnt und dort entsprechend dann Werte und Methoden hinzufügen könnt. Anschließend seid Ihr dann in der Lage an jedem Ort, in jedem Controller und dessen Scope entsprechend natürlich auf die Root Elemente zurückgreifen zu können. Sei es durch Bindungen oder sei es natürlich auch durch einfache Ansprachen direkt aus anderen Scopes und Controllern. IN diesem Kapitel haben wir also gemeinsam den Root Gültigkeitsbereich kennengelernt.

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!