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

Methoden als Eventhandler verwenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Eine entsprechend gebundene Methode innerhalb des Scope fungiert als Eventhandler und führt abhängig von den eingetretenen Ereignissen bestimmte Methoden aus.
04:19

Transkript

Ich bin nicht nur in der Lage, Methoden so zu binden, dass ich deren Werte auslese, ich kann natürlich auch Methoden als Ereignishendler ansprechen, dass dann in dem Moment, wo etwas Spezifisches, wie beispielsweise ein Mouseclick passiert, eine bestimmte Methode aufgerufen werden soll. Ich möchte euch das einmal sehr gerne demonstrieren. An dieser Stelle hierfür erzeuge ich hier einen Knoten mit einem button drin. Und in dem button sage ich dann "Click me" und verwende die ng-click Direktive, welches mir nur ermöglicht, eine Methode aus dem Scope auszurufen. Das, was ich hier machen möchte, ist username Peter Müller. Was passiert also nun in dem Moment, wenn ich auf diesem buttom klicken werde? Nun, relativ einfach. Der Ausdruck username mit dem String Peter Müller wird, wie folgt, von AngularJS abgearbeitet. Innerhalb des Scopes wird nun nach username als Methode gesucht und natürlich hier gefunden und dann entsprechend hier mit dem Wert Peter Müller dann übergeben. Teste ich das Ganze nun einmal, werden wir nun sehen, dass das wunderbar funktioniert, dass wir hier entsprechend Peter Müller als Wertigkeit haben. Ich kann aber auch andere Ausdrücke hier zusätzlich verwenden, so kann ich beispielsweise auch dafür sorgen, dass ich eine Summenbildung durch zwei Werte zum Beispiel definiere. Ich möchte das schnell mal demonstrieren. Dafür werde ich jetzt hier an der Stelle zwei Input-Felder erzeugen Und zwar von Typen number mit dem Wert ng-model num1 und num2. Die erzeuge ich hier auch im Scope vorab, müsste ich aber übrigens nichts. Der wird es dann automatisch mit null dann vorinitialisieren num1 gleich null, und das gleiche mit dem num2 ist gleich null. Und werde ich hier noch eine Methode erstellen scope.sum Und diese wird jetzt hier an dieser Stelle nichts anderes machen als ein return von scope.num1 plus scope.num2. Dann werden wir jetzt erkennen, dass das Dirty Checking auch wunderbar funktioniert mit Eigenschaften. So, und zwar mache ich jetzt hier ein p mit span Hoppla! Und p ng-bind hielt auch die geschweiften Klammern auch nehmen können. Das ist wirklich vollkommen irrelevant. Werde ich jetzt hier die Methode sum einfach aufrufen Teste ich das nun, werdet ihr sehen, dass wenn ich hier etwas eingebe, automatisch die Summe gebildet wird, das heißt, das Dirty Checking funktioniert auch wunderbar hier mit einer Eigenschaft, die ich hier in ng-bind hinzugefügt habe. möchte ich euch aber auch zeigen, dass ich nicht zwingend hier einen Klickhendler hier definieren müsste, damit ich dann Wertigkeiten ändern würden kann innerhalb meines Scopes. Ich hätte von rein Theorie hier auch einfach hingehen können und so könnte zum Beispiel ich hier einen buttom, den ich reset nenne, könnte wirklich den Ausdruck hier auch definieren, indem ich dann einfach sage num1 gleich null und num2 gleich null Und teste ich das Ganze jetzt hier. Kann ich erkennen, dass ich hier die ganz normale Addition habe, die Summe habe. Über das Dorty Checking drück ich auf reset, werden die Werte auf null gesetzt und automatisch auch die Summenbildung dann hier auf null gesetzt. Finde ich es wahnsinnig spannend, denn wir haben in diesem Video wunderbar erkannt, dass wir wirklich Methoden verwenden können. Als setter können wir Methoden verwenden, als getter wir können Methoden verwenden, wie auch hier bei sum als getter. Wurde dann automatisch auch das Dirty Checking funktioniert, obwohl eigentlich hier auf andere Eigenschaften innerhalb des Scropes verwiesen werden kann. Und wir haben gesehen, dass man hier auch einfach Anweisungen innerhalb des ng-clicks binden kann, die dann im Kontext des Scopes dann interpretiert werden und dann auch entsprechend ausgeführt werden.

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!