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

AngularJS Grundkurs

Methode ausrufen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
AngularJS ermöglicht es, Interaktionen in abgelegten Methoden in einem Gültigkeitsbereich zu definieren. Mit Hilfe einer Direktive kann ein HTML-Element mit dem Bereich kommunizieren und eine Methode ausrufen.
08:28

Transkript

Innerhalb von AngularJS bin ich natürlich auch in der Lage in dem Gültigkeitsbereich Methoden abzulegen, also Interaktionen zu definieren. Damit dann diese Interaktion dann angesprochen werden kann, muss ich eigentlich nichts anderes machen, wie beispielsweise bei einer Bindung oder Ähnliches mittels einer Direktive Bescheid geben, dass ein bestimmtes HTML-Element gerade mit dem Scope, also mit dem Gültigkeitsbereich kommunizieren möchte und eine Methode aufrufen möchte. Um das Ganze einmal ganz kurz zu demonstrieren, werde ich jetzt hier einfach eine Schaltfläche generieren. Das nenne ich jetzt Make Click. Da haben wir die ganze Schaltfläche. Jetzt werde ich hier einfach hingehen und werde dann eine Direktive einbinden, die sich ng-click nennt. Diese ng-click Direktive macht nun folgendes. Ich kann jetzt, ähnlich wie wir ng-bind und ng-bind-html-unsafe verwenden können, nun direkt eine Methode über dieses Click dann entsprechend definieren, um damit in der Lage zu sein dann im Scope eine Methode auszulösen und um dies zu demonstrieren, werden ich jetzt hier einfach hingehen und schnell die Methode click hier aufrufen und ganz wichtig, wenn ich das jetzt beispielsweise aufrufen würde, wird es natürlich zu einer Exception kommen oder es würde gar nichts passieren, denn ich habe natürlich noch nicht innerhalb meines Gültigkeitsbereich die click Methode definiert. Ich habe zwar Variablen definiert, aber noch nicht die click Methode. Also werde ich jetzt als nächstes in meinen Controller gehen, den ich hier entsprechend auch binde und in diesem Controller, den ich hier gebunden habe an dieses HTML-Element, den Div-Knoten, muss ich nun die Methode click im Scope definieren, damit ich dann in der Lage bin, dann auf Mausklick damit was zu machen. Also werde ich jetzt hier einfach hingehen und werde sagen $scope.click = function und dann $log.log clicked. Aktualisieren wir das Ganze nun, sehen wir zunächst einmal, dass wir hier die click Methode als Funktion in unserem Gültigkeitsbereich haben und als nächstes, wenn ich hier draufklicke, dass wir dann entsprechend hier die jeweiligen clicked entsprechend als Console Log bekommen. Ich möchte aber auch zeigen, dass ich dann in der Lage bin dann direkt innerhalb des Gültigkeitsbereichs Änderungen vorzunehmen, die dann entsprechend dafür sorgen, dass ich hier Werte ändere, indem ich eine Methode im Gültigkeitsbereich entsprechend angesprochen habe. So kann ich beispielsweise bei dem sayHello sagen oder bei der Variable sayHello sagen, dass in dem Moment, wo clicked ist, der Wert übernommen werden soll Button wurde geklickt. Aktualisieren wir das. Klicken wir darauf, dann sehen wir entsprechend, das Button wurde geklickt und auf diese Art und Weise kann ich sehr einfach dann entsprechend hier dafür sorgen, dass die Methode, die aufgerufen wird im Gültigkeitsbereich entsprechend Änderungen vornimmt und das dann entsprechend darstellt. Alternativ hätte ich auch hier einfach hingehen können. Nochmal zur Erinnerung, wir haben auch noch ein Model und in diesem Model gibt es zum Beispiel die Methode getValue. Ich hätte hier auch hingehen können und hätte das getValue auch noch hinten dranhängen können, indem ich hier zum Beispiel sage, mache folgendes, schnapp dir das Model und mache ein getValue. Aktualisiere ich das dann, klicke ich darauf und habe dann den Wert 37. Dieser Wert wurde am Anfang per Zufall ermittelt und ich kann auch natürlich hier hingehen und im Model selber Werte ändern, indem ich sage setValue soll gleich sein getValue + 1. Aktualisieren wir das, werden wir sehen, dass wir jetzt hier den Wert 30 haben, der am Anfang, wie gesagt, wieder per Zufall ermittelt wurde. Aber jedes Mal, wenn ich jetzt weiter draufklicke, erhöhe ich den Wert und lasse das Ganze dann entsprechend hier darstellen. Was ich aber auch machen könnte, was auch extrem schön ist im Grunde genommen, ist, dass ich beispielsweise hier noch zusätzlich eine Methode hier hinzufügen kann, die ich dann entsprechend verwende, um entsprechend Wert dann zurückzugeben, die sich durch bestimmte Umstände zum Beispiel ändern können, um diese Bindung dann von Werten dann mittels einer Methode darzustellen. Also zum Beispiel getHelloExpression = function. Dann sagen wir einfach, dass es ein Return gibt von $scope.sayHello und dann entsprechend beispielsweise wie auch gerade einen Wert aus dem Model, getValue. Zusätzlich werde ich jetzt hier hingehen und werde dann die eigentliche Änderung des sayHello Wertes dann entsprechend hier aushebeln und werde jetzt weiterhin innerhalb der Bindung jetzt nicht mehr die Variable sayHello binden sondern die Methode entsprechend binden. Wenn wir uns das Ganze jetzt ansehen, dann sehen wir wunderbar, dass dann hier hello world! kommt. Das hello world ist ursprünglich der Ausdruck gewesen, den wir dem sayHello zugeteilt haben, aber die Methode macht nichts anderes, als dann hintenrum noch das Ganze mit einem Modelwert zu kombinieren und dann entsprechend darzustellen. Wenn ich jetzt hier entsprechend draufklicke, sehen wir, dass dann wunderbar diese Methode auch mitbekommt, dass das getValue einen neuen Wert hat und dementsprechend dann auch das getHelloExpression dann aktualisiert werden muss und dementsprechend dann auch der Ausdruck in dieser Überschrift aktualisiert werden muss, damit das Ganze dargestellt werden kann. Zusätzlich werde ich natürlich auch in der Lage diese Änderung durchzudelegieren. Also durchdelegieren bedeutet nichts anderes, ich hätte auch hier ein onClick definieren können in meinem Controller selber. Das hätte einfach den Vorteil, dass ich jetzt in meinem Controller Konstrukt auch noch unterschiedliche Wertigkeiten und unterschiedliche Prozesse machen könnte, um beispielsweise Werte zu ermitteln, nochmal mit dem Model zu kommunizieren, Businesslogik zu betreiben etc, um dann anschließend damit dann zu arbeiten. Aber denkt bitte daran, dieser Scope ist nicht unser Controller. Das heißt, das was ich jetzt hier dann entsprechend machen müsste, ist relativ einfach. Ich merke mir einfach dieses Objekt und in den Scope selber definiere ich zwar das Click, aber diesmal definiere ich das Click so, dass ich sage, dass es innerhalb dieser Klasse einfach das onClick aufrufen soll. Das heißt, ich verlasse damit den Scope und rufe dann in der Klasse das onClick auf und muss dann natürlich dafür sorgen, dass das ursprüngliche onClick, das ich mal angelegt hatte, ausgehebelt wird, aber die Interaktion kann ich trotzdem machen, indem ich hier sage, erhöhe bitte innerhalb des Models dann entsprechend hier die Wertigkeit um 1. Wichtig, Model ist eine dependency injection, die mir nur im Konstruktor zur Verfügung steht. Was ich also an dieser Stelle machen müsste, ist natürlich auch daran zu denken, dass ich hier einmal mehr das Model zwischenspeichere in dieser Klasse und jetzt könnte ich dann entsprechend hier hervorragend innerhalb der Methode this.model verwenden und würde dann entsprechend das Model anwenden. Wenn ich das Ganze noch einmal ausführe, sehen wir wunderbar, dass das nach wie vor funktioniert. Aber diesmal habe ich den Scope verlassen, habe innerhalb meines Controllers entsprechend Wertigkeiten geändert, indem ich das Model angepasst habe. Die Aktualisierung des Models hat dann in Scope dann wiederum dafür gesorgt, dass dann die getHelloExpression Methode verwendet wurde, damit das neu dann dargestellt werden kann. In diesem Video haben wir also unterschiedliche Szenarien kennengelernt, wie wir in einem Gültigkeitsbereich Methoden hinterlegen können und natürlich auch nutzen 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!