AngularJS Grundkurs

Hierarchie

Testen Sie unsere 2007 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Gültigkeitsbereiche werden in AngularJS hierarchisch abgearbeitet. Dadurch können Interaktionen aus übergeordneten Gültigkeitsebenen weitergegeben werden.
07:01

Transkript

Gültigkeitsbereiche werden in AngularJS hierarchisch abgebildet. Das heißt, ähnlich wie beim DOM Model gibt es Kind und Eltern-Elemente und dementsprechend Kind und Eltern Gültigkeitsbereiche, also Scopes und das Ganze bis runter zum Root Scope. Welche Auswirkungen das Ganze hat, möchte ich Euch jetzt in diesem Video zeigen. Dafür werde ich ein schnelles Beispiel bauen und zwar ist es so, dass ich hier einen Controller habe, den ich hier an einen Div-Knoten zugefügt habe mit dem Namen Controller. Den sehen wir jetzt hier. In dem Controller befindet sich dementsprechend auch ein Button und in dem Button ist dann hier eine click Interaktion. Ich könnte also jetzt hier auch hingehen und beispielsweise den Bezeichner für den Button in den Controller per Bindung ablegen, indem ich dann einfach sage, im Scope gibt es jetzt hier klick mich und aktualisier das Ganze jetzt. Dann sehe ich klick mich hier in meiner Schaltfläche. Wenn ich nun aber hingehe und auch zusätzlich einen ButtonController haben möchte, dann passiert etwas sehr witziges. Ich baue jetzt einen ButtonController. Binde den ButtonController natürlich auch an mein Modul für die Controller und sage dann hier $log.log new ButtonController und werde diesen ButtonController jetzt an diesen Button hängen, indem ich per ng-controller das Ganze dranhänge. Aktualisiere das Ganze. Wir sehen jetzt, dass ab jetzt das klick mich mit dem ButtonController gebunden ist. Aber schaut, was passiert. Der ButtonController ist komplett leer. Der hat weder einen Label noch hat er die click Funktionalität, die aber hier trotzdem noch funktioniert. Was macht also AngularJS? AngularJS hat folgende Intelligenz. Es erkennt hier ist ein Controller drinnen und dieser Controller ist gebunden. In diesem Controller wird dann entsprechend label und click entsprechend angesprochen. Jetzt ist es aber so, dass dieser Controller label und click gar nicht als Eigenschaften hat. Was macht also AngularJS? AngularJS geht zu dem übergeordneten Controller und schaut oder besser gesagt zu dem übergeordneten Scope und schaut, ist in diesem Gültigkeitsbereich ein label und ein click. Falls ja, feuert es dieses Element dann entsprechend ab. Das bedeutet also, wenn ich jetzt hier in meinem ButtonController ebenfalls ein label setzen würde, indem ich das hier oben einfach mir stehle, und hier dann den Wert klick mich mit drei Punkten hintendransetze, dann werdet Ihr sehen, dass er hier die Intelligenz hat, die er entsprechend das zu benutzen, obgleich das label auch hier oben definiert wurde. Das liegt aber daran, dass natürlich der Controller, der als erstes kommt, natürlich die höchste Priorität hat. Das Ganze können wir uns auch anschauen, wenn wir einfach diesen Scope uns hier ausgeben lassen. Einmal aktualisieren und da haben wir den Scope. Jetzt schaut mal. Der parent scope ist der, der den label mit den klick mich ohne die drei Punkte hat und hier gibt es auch eine click Funktion. Aber der eigentlich Scope, in dem ich mich gerade befinde, hat gar keinen click, aber dafür den label. Das heißt, der label mit den drei Punkten wird dann hier gesetzt. Wenn ich aber klicke, wird dann automatisch über die Hierarchie und kann das als Vererbung auch eigentlich sehen, dann entsprechend auch hier der Klick an dieser Stelle ausgeführt. Das kann theoretisch immer so weiter gehen, sodass ich dann Intelligenz und auch Interaktionen auf diese Art und Weise immer weitergeben kann. Ich bin dann natürlich auch in der Lage, das Ganze so zu delegieren, dass ich zum Beispiel bei einem Klick trotzdem auf das übergeordnete Element gehen kann. Würde ich also jetzt hier ebenfalls ein click hier hinzufügen, ich mache das jetzt hier einmal. Die eigentliche Grundfunktionalität heble ich hier aus oder ich lösche sie einfach komplett und mache dann hier ein console.log an dieser Stelle. Das ist der ButtonCtrl.Click. Dann kommt der Klassiker that = this in dem Scope selber. Dann entsprechend $scope.click = function, that.onClick. Hier noch schnell das Scope merken this.scope = $scope. Aktualisiere das Ganze und klicke hier drauf. Diesmal erhöht sich die Zahl nicht mehr. Denn das hat der übergeordnet Controller gemacht. Also der Eltern Controller hat eigentlich für die Erhöhung des Wertes gesorgt. Dadurch dass jetzt aber der eigentlich Gültigkeitsbereich hier im ButtonController ebenfalls einen Klick hat, wird natürlich der übergeordnete nicht mehr angesprochen und entsprechend wird dann hier im Prototypenbereich des Controllers durch das Durchdelegieren das onClick aufgerufen, das lediglich den Konsolen Log macht. Jetzt habe ich aber in weiser Voraussicht den Scope dieses Controllers dann entsprechend hier in einer Eigenschaft der ButtonController Klasse hinterlegt und jetzt schaut mal, welche tolle Funktion es gibt, um auf Eltern Elemente hinzuzugreifen, nämlich die parent Eigenschaft. Erinnert Euch doch daran. Wir hatten hier stets die Möglichkeit über parent herauszufinden, was ist eigentlich das Elternobjekt. Jetzt sind wir einfach so frech und rufen auf dem parent Objekt das click auf. Dies hat dann zur Folge, dass dann, obgleich ich innerhalb dieses Controllers und in dem Gültigkeitsbereich des Buttons bin, ich auf den übergeordneten Eltern Gültigkeitsbereich zugreife und hier auf das click. Dieses click ist das click, das sich hier befindet. Das wiederum wird dann dafür sorgen, dass dann hier wieder die Modeländerung stattfindet, weil es dann übergeordnet auf die prototyp und click Methode zurückgreift von dem Controller. Aktualisieren wir das Ganze. Testen das und Ihr seht, wie wunderbar das funktioniert. Ich kann da tatsächlich soweit drübergehen, dass ich dann mit parent parent parent bis runterkomme zum Root Scope, das der unterste Gültigkeitsbereich meiner Applikation ist. In diesem Kapitel haben wir also gelernt, dass Gültigkeitsbereiche hierarchisch abgearbeitet werden.

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!