AngularJS Grundkurs

Ereignisse

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ereignisse können von HTML-Elementen empfangen und in einem AngularJS-Umfeld weiterverarbeitet werden.
05:03

Transkript

Natürlich seid Ihr auch mit AngularJS in der Lage, Ereignisse abzuarbeiten bzw. von HTML-Elementen zum Beispiel zu empfangen und dann in AngularJS Umfeld weiterzuverarbeiten. Das Ganze möchte ich Euch einmal ganz schnell demonstrieren, indem ich jetzt hier innerhalb meines Formulars schnell einen Button hinzufüge. Dieser Button, den ich hinzufüge, wird aus dem bootstrap entsprechend das btn entsprechend erhalten und zusätzlich werde ich hier natürlich ein Icon hinzufügen. Das Icon soll ein Add Icon sein. Das ist in bootstrap drinnen. Das ist einfach das Plussymbol und werde dann hier entsprechend als Text einfach Add hinzufügen. Wenn wir das Ganze aktualisieren, sehen wir hier das Icon. Ich werde noch eine Zwischenzeile dazu packen und was ich nun möchte ist, wenn auf dieses Icon geklickt wird, das Ereignis des Klicks abgefangen wird und im AngularJS Umfeld dann verarbeitet wird. Das mache ich einfach, indem ich ng-click verwende. Das sorgt dafür, dass ich dann entsprechend auf einen Klick das Ereignis entgegennehmen kann und weiterverarbeiten kann. Was ich jetzt hier mache, ist natürlich dann einfach eine Klickfunktion aufzurufen. Die Klickfunktion, das ist jetzt wichtig, muss ich natürlich innerhalb meines Scopes definieren. Das heißt, was ich jetzt hier mache, ist eine Funktionsdefinition und innerhalb der Funktionsdefinition mache ich im ersten Schritt nichts anderes als ein alert. Testen wir das Ganze schnell. Dann haben wir hier den alert. Als nächstes können wir das Ganze auch ganz schick machen, indem wir beispielsweise die Liste erweitern wollen in dem Moment, wo darauf geklickt wird. Machen wir also relativ fix hier ein zweites Inputfeld rein. Diesmal vom Typ number. Also Model packen wir age hinzu. Hier in dem span lassen wir uns sowohl Alter als auch Namen ausgeben. Age packen wir hier mit einem Initialwert hinzu. Das ist eine Zahl, deswegen kann ich auch die Anführungszeichen weglassen. Aktualisiere das Ganze und dann werden wir entsprechend hier sehen, dass wir hier, sobald wir etwas ändern, auch entsprechend mittels der Bindung dann die Änderung haben. Jetzt möchte ich, dass wenn ich auf Add klicke, automatisch dieser neue Name der Liste hinzugefügt wird. Diese übertrieben große 58 nehme ich raus. Seht mir das bitte nach. Hat aber nichts damit zu tun, dass ich jetzt was der Liste hinzufügen muss und werde dann entsprechend jetzt hier innerhalb meiner Personenliste ein push hinzufügen und bei dem push wird ein Objekt hinzugefügt mit dem Namenswert, der aus dem Scope-Wert name zusammengesetzt ist und dem Alterswert, der aus dem Scope-Wert age zusammengesetzt ist. Lasst uns das Ganze jetzt einmal ausprobieren. Nennen wir das Ganze einmal peter mit dem Wert 16. Add. Da habe ich jetzt irgendwas falsch gemacht, wie Ihr seht. Denn ich sehe peter hier nicht. Lasst mich kurz schauen. Ich wundere mich auch. Jetzt geht es. Das ist seltsam. Ich habe die ganze Zeit geklickt und nichts ging. Jetzt ist auch peter da. Irgendwie scheint von Wrap Storm diese live added Ansicht oder das Plugin hier meinen Browser durcheinander gebracht zu haben. Versuchen wir es noch einmal mit einem Refresh, allerdings ohne dass dann entsprechend das live added hier eingreifen kann. peter 24 hinzufügen. Also funktioniert wunderbar. Vertraut mir, das war hier vom Wrap Storm das live added, das hier scheinbar den Browser aus dem Tritt gebracht hat. Was wir also hier gelernt haben ist, dass ich ein Ereignis hinzufügen kann jederzeit mit AngularJS und in diesem speziellen Fall war es das Klick-Ereignis. Das Klick-Ereignis lasse ich dann entsprechend in meiner Scope-Funktion übergehen, sodass ich dann innerhalb des Gültigkeitsbereichs von AngularJS dann weiterarbeiten kann. Erweitere dann eine AngularJS Variable oder Eigenschaft in diesem speziellen Fall. Das erkennt dann wiederum mittels des Repeaters, das hier gebunden wurde mit persons, dass hier eine Aktualisierung stattgefunden hat und das wiederum sorgt dann dafür, dass dann automatisch die Liste, die hier gerendert wurde, dann auch neu gerendert wurde.

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!