AngularJS Grundkurs

Apply-Funktionalität

Testen Sie unsere 1958 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Apply-Funktionalität ermöglicht es, in AngularJS Prozeduren sowie Wertänderungen, welche außerhalb des Gültigkeitsbereichs von AngularJS ausgeführt werden, aufzurufen und durchzuführen.
08:48

Transkript

Bei der Arbeit mit AngularJS werdet Ihr über kurz oder lang in eine Situation kommen, wo Ihr mit Sicherheit irgendeine Prozedur aufruft, die nicht im direkten Umfeld von AngularJS ausgeführt wurde. Bedeutet eigentlich nichts anderes, als dass Ihr irgendeinen Funktionsaufruf habt und Ihr seid nicht mehr im Gültigkeitsbereich von AngularJS oder einem Scope oder sonstiges. In dem Moment habt Ihr folgende Problematik. Lasst uns hier ein kleines Beispiel anschauen. Ich habe hier eine HTML-Seite. Die HTML-Seite hat einen Div-Knoten, der einen Controller hier einbindet. Ich binde hier einen Scopewert prop und die Methodik click. Diese finde ich dann entsprechend hier in meinem Controller drinnen. Ich habe also property selber hier am Anfang definiert und auf click ändere ich diesen Wert. Aktualisiere ich also hier die HTML-Seite, sehen wir wunderbar, dass das hier der Startwert ist, den ich hier definiert habe und sobald ich hier draufklicke, ist der Wert dann geändert genauso, wie ich es haben wollte. Das Ganze funktioniert nur innerhalb von AngularJS wie folgt. Stellt Euch vor, dass AngularJS in regelmäßigen Abständen immer wieder diesen Scope überwacht. Es überprüft, ob bestimmte Werte sich geändert haben und falls ja, weiß es dann in dem Templating Algorithmus, das AngularJS hat, dass es dann entsprechend gebundene Werte dann hier ersetzen muss. Jetzt werden sich einige von Euch sagen, warum hat AngularJS eigentlich diesen Weg gewählt. Also wieso haben sie nicht mit Settern gearbeitet oder Ähnliches und haben dann beispielsweise auch mit einem Observer Prinzip einfach nur geschaut, wann entsprechend ein Wert geändert wurde und haben dann nur reagiert? Wieso haben die regelmäßig kontrolliert, ob eine Wertänderung stattgefunden hat? Das liegt an Folgendem. Wenn Ihr innerhalb des Scopes ein Objekt habt und es ändert sich in diesem Objekt eine Eigenschaft, könnt Ihr mit diesem Algorithmus, den AngularJS verwendet, ohne Probleme auch diese Änderung abfangen und entsprechend verarbeiten. KnockoutJS beispielsweise arbeitet mit einem Setter Algorithmus. Das kann es hier wiederum nicht. Das heißt, ich habe hier schon einen vehementen Vorteil. Aber wir laufen hier in eine kleine JavaScript Tücke. Nämlich in die JavaScript Tücke, dass jeder Funktionsaufruf oder jede Prozedur und jede Schleife, die ich dann entsprechend habe, immer in einer Miniblackbox durchgeführt wird. Bedeutet nichts anderes, während so eine Prozedur abläuft, läuft im Browser nichts anderes mehr. Das heißt, es muss abgewartet werden, bis diese Prozedur abgearbeitet ist. Diese Prozedur wird in einem kleinen Mikrokosmos, also in einem eigenen Gültigkeitsbereich entsprechend abgearbeitet und dort dann entsprechend verarbeitet. Jetzt ist es so, dass wenn ich diese Prozedur einmal verlasse, um beispielsweise außerhalb Änderungen durchzuführen, dann ist es extrem schwierig oder anders, ich muss dann extrem aufpassen, dass ich, wenn einmal die Prozedur verlassen wurde, ich dann die Werte an richtiger Stelle wieder aktualisiere. Ich möchte Euch zeigen, was ich genau damit meine. Stellt Euch einfach vor, ich habe hier meinen Protoypebereich und in diesem Protoypebereich sage ich, ich möchte eine Funktion sayHello haben und die soll eigentlich nichts anderes machen als ein console.log say Hello. Dieses sayHello rufe ich jetzt hier einfach auf. Dann sehen wir wunderbar das Hello. Weiter werde ich jetzt hier noch einen Wert definieren. Dieser Wert ist einfach World!. Diesen Wert werde ich dann hier einfach wieder aufrufen. Dann seht Ihr wunderbar, dass ich das say Hello World! habe. Das Ganze funktioniert wunderbar, weil ich diese Funktion innerhalb dieser Klasse aufrufe und dementsprechend der Funktionsaufruf hier ohne Probleme auf die Eigenschaft val zugreifen kann, die eine Eigenschaft dieses Objekts ist. Aber nun stellt Euch bitte folgendes Szenario vor. Ich verlasse quasi diesen Prozess, indem ich diesmal mit einem setTimeout dafür sorge, dass ich diesmal im setTimeout wieder die Funktion aufrufe und zwar nach 500 ms. Dann werdet Ihr etwas ganz Besonderes feststellen. Ich bekomme hier ein undefined und viele von Euch werden das mit Sicherheit schon kennen. Das undefined habt Ihr bekommen, weil Ihr einfach Euch aus dem eigentlich Gültigkeitsbereich entfernt habt und dementsprechend wird dieses setTimout dafür sorgen, dass Ihr den normalen Prozedurverlauf hier verlasst und dann entsprechend später die sayHello Methode aufruft. Würde ich also hier einen console.log noch einmal hinzufügen, dann werdet Ihr entsprechend sehen, dass dann das hier bin ich erst kommt. Das heißt, diese Prozedur wurde hier ordnungsgemäß abgearbeitet. Aber nach 500 ms, obwohl die Prozedur jetzt gar nicht mehr existiert, rufe ich trotzdem diese Methodik auf und der weiß dann schlicht und ergreifend nicht mehr, wo er ist. Das Ganze haben wir oder Ihr werdet diesen Trick mit Sicherheit kennen, relativ schnell im Griff, indem wir eine lokale Variable verwenden und diese lokale Variable geben wir dann einfach mit, wo ich mich befinde, also was das eigentliche Objekt ist. Dann kann ich auch ohne Probleme eine eigenen Funktion definieren, in der ich dann sage, dass ich mit dieser lokalen Variable das sayHello aufrufen möchte. Wenn ich das dann entsprechend hier verwende und statt das this.sayHello aufzurufen, die lokale Funktion function aufrufe, die ich hier einfach abgekürzt habe, dann merkt er sich über diese lokale Eigenschaft, über welches Objekt ich gehen will und bekommt das nach wie vor wunderbar hin. Jetzt passt auf! Es ist eigentlich nur alles etwas gewesen, um Euch zu zeigen, in welche Tücke Ihr geraten könnt. Schlussendlich kommentiere ich das jetzt alles wieder aus. Diesmal stellt Euch einfach vor, dass ich den Wert des Scopes nicht direkt ändern will, sondern entsprechend mit einem Timeout von 500 ms. Also sehr ähnliches Beispiel, wie wir es gerade hatten. Dann werdet Ihr entsprechend sehen, dass ich auf Klick überhaupt keine Änderung bewirken kann. Dieses überhaupt keine Änderung, dass es auch tatsächlich aber das Klickereignis hier durchgelaufen ist, werde ich Euch hier beweisen. Wert wieder geändert würde dann theoretisch nach 500 ms kommen. Ihr seht, Wert geändert kommt, wird wieder geändert, wird niemals kommen. Das liegt daran, dass Ihr auch hier den Gültigkeitsbereich verlassen habt. Hier gibt es eine wirklich megacoole Funktionalität und zwar die apply Funktionalität. Viele werden das wahrscheinlich schon aus der JavaScript Welt kennen, ähnlich wie call oder Ähnliches seid Ihr mit dem apply in der Lage, einen Funktionsaufruf außerhalb der normalen Gültigkeit auszuführen. Bedeutet nichts anderes, wenn ich jetzt hier schreiben würde this.sayHello und würde die Funktion apply verwenden und würde dann mit dieser Funktion apply beispielsweise window sagen, dann würde ich dafür sorgen, dass diese Methode sayHello im Scope, also im Gültigkeitsbereich von window abgelaufen wird. Also fast genauso als hätte ich sayHello direkt auf window dann entsprechend definiert. Genauso gibt es ein apply im Scope und zwar kann ich dann hier sagen, ich möchte ein apply haben und definiere jetzt innerhalb dieser Funktion entsprechend wieder diesen Wert. Dann werdet Ihr entsprechend sehen, dass das hier wunderbar funktioniert. Ich befinde mich jetzt wieder ordnungsgemäß im richtigen Scope und kann dann vernünftig arbeiten. Ihr werdet einige Leute sehen, die dieses apply einfach ohne Funktionsaufruf in AngularJS Umfeld eventuell verwenden. Ich persönlich mag das nicht. Von der reinen Theorie her geht es. Das sorgt eigentlich nur dafür, dass das AngularJS von außen einmal angestoßen wird, alle gebundenen Werte noch einmal zu kontrollieren, ob die sich nicht wirklich geändert haben. Ich mag es eigentlich lieber das Ganze mit einem Funktionsaufruf zu machen und dann explizit zu sagen, welcher Wert sich denn hier an dieser Stelle dann ändern soll, wenn das Ganze dann passiert. In diesem Kontext haben wir aber sehr schön gelernt, wie wir in der Lage sind, außerhalb des normalen AngularJS Gültigkeitsbereichs Wertänderungen oder Prozeduren auszuführen und trotzdem die Bindung ordnungsgemäß nutzen zu können.

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!