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 Grundkurs

HTML-Elemente als Vorlage

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch die Verwendung einer Schleifendirektive besteht die Möglichkeit, HTML-Elemente als Vorlage für weitere Elemente einer Liste zu benützen.
07:43

Transkript

Die einfachste Möglichkeit um Euch zu erklären, wie eine Vorlage funktionieren kann, ist mittels der Schleifendirektive ng-repeat. Ihr müsst Euch das Ganze so vorstellen. Ich kann jetzt beispielsweise innerhalb einer Aufzählung, wie wir sie jetzt hier vorbereitet vor uns sehen, hingehen und ein Aufzeichnungselement hier beispielsweise einfach definieren, indem ich hier meinen Namen tippe und dann sehen wir wunderbar hier die Aufzeichnung. Jetzt möchte ich in der Lage sein, dass dieses HTML-Element, das ich hier definiert habe, als Vorlage, also Schablone für weitere Elemente dann entsprechend fungieren soll. In dem Moment kann ich also jetzt hier einfach hingehen und kann mittels der Schleifendirektive ng-repeat sagen, wiederhole dieses HTML-Element, in dem diese Direktive jetzt hinterlegt worden ist, solange, wie es Elemente in einer speziellen Liste gibt. Diese Liste muss ich natürlich anlegen. Ich mache das ganz einfach, indem ich hier sage 1, 2, 3 und innerhalb der Listen werden dann entsprechend die jeweiligen Werte iteriert und ich kann dann natürlich sagen, dass die Werte, die dann einzeln ausgelesen werden, in einem bestimmten Scope, in einer bestimmten Variable hinterlegt werden sollen, die ich num nennen möchte und kann dann entsprechend ganz einfach sagen, wiederhole das li in diesem Moment in 1, 2, 3 und übergebe den Wert in num. Das heißt num in 1, 2, 3. Bedeutet nichts anderes dann, dass dieser Variablenwert in diesem Scope dann automatisch einmal den Wert 1, 2 und 3 nimmt. Wenn ich diesen dann hier einfach binde, dann werdet Ihr sehen, dass ich dann wunderbar hier auf der rechten Seite den Wert 1, 2, 3 bekommen. Hätte ich statt 1, 2, 3 beispielsweise saban genommen oder peter oder franz und zusätzlich noch hans, speichern, wiederholen, habe ich natürlich automatisch die jeweiligen Werte. Sinnvoller wäre es dann natürlich, dann die jeweiligen Parameter oder die jeweiligen Auswertungen aus der Liste als Namenselement hier zu kennzeichnen. Ich habe jetzt noch etwas Kleines vorbereitet und zwar habe ich folgendes vorbereitet. Ich habe einen kleinen Controller gemacht und diesen Controller habe ich in das Controller Modul abgelegt und das übergeordnete HTML-Element ist bereits mit diesem Controller sogar verbunden. In dem Controller selber befindet sich nun ein array und dieses array ist ein wenig komplexer. Das heißt, in diesem array befindet sich eine Liste von Personen, die jeweils ein Objekt beinhaltet, dass eine Person repräsentiert mit ID, Vorname, Nachname, Geschlecht, Alter und E-Mail Adresse und so habe ich dann wirklich einiges an Werten, die ich hier zur Verfügung habe. Diese Werte möchte ich jetzt einfach hier anzeigen. Also kommentiere ich hier das Ganze aus und benutze jetzt wieder mein ng-repeat. Aber das ng-repeat verwende ich jetzt diesmal in der Form, dass ich sage, hole mir eine Person aus der Liste persons. Die Liste persons nochmal zur Erinnerung wird über den Scope zur Verfügung gestellt. Dann beende ich das Ganze hier und möchte dann eine Bindung machen und zwar hole ich mir jetzt das Objekt person, denn jedes einzelne Element aus diesem array ist eben ein Objekt und aus diesem Objekt hole ich mir zum Beispiel den Vornamen gefolgt von einem Leerzeichen und den Nachnamen, den ich mir per Copy & Paste hole um sicherzustellen, dass ich mich nicht vertippe. Wenn ich das Ganze jetzt noch ausführe, sehen wir, dass wir aus dieser Liste genau diese Werte haben. So bin ich automatisch in der Lage dann mittels dieser Wertigkeiten zu arbeiten. Interessant ist es, dass wenn diese Schleife durchlaufen wird, auch AngularJS natürlich intern mit einer Indizierung arbeitet. Die Werte der Indizierung kann ich mir mit $index einfach holen. $index wird dann entsprechend hier die Werte 0, 1, 2, 3, 4 dann entsprechend holen. Das entspricht dem Index aus dem array. Das nullte Element ist die erste Person Victoria Thorndike. Das ist das eine. Das andere ist es jetzt, was auch wahnsinnig interessant ist, ist zum Beispiel die Direktive ng-class-odd und ng-class-even. Mit diesen Direktiven bin ich dann in der Lage, wenn dann iterierend etwas passiert, zum Beispiel auch die Klassen iterierend anzuwenden in Zweierzyklen. Ich mache das einfach ganz schnell. Ich verwende also jetzt hier ng-class-odd und übergeben den Wert odd an dieser Stelle und wiederhole das. Ich habe es nicht odd genannt. Entschuldigt bitte. Ich muss ganz kurz die css aufmachen und zwar hatte ich in der Vorbereitung das Ganze einfach red-row genannt. Also wieder zurück. Wir nennen das dann hier red-row, wiederholen das nochmal mit ng-class-even und diesmal verwenden wir green-row. Speichern das Ganze und dann sehen wir, dass dann iterierend immer eine andere Farbe verwendet wird, weil schlicht und ergreifend aus der css eine andere Klasse hier hinzugefügt wird vollautomatisch. Ganz wichtig, ng-class-odd und ng-class-even ist suboptimal. Es gibt also einige Browser, die insbesondere, wenn Ihr einzelne Elemente aus der Liste verwendet oder entfernt, damit nicht klar kommen. Bedeutet, dass das nicht zuverlässig funktioniert, dass hier zwei rote Zeilen hintereinander dann haben könnt. Ich habe deswegen noch in meinen Controller eine Funktion hinterlegt, die nennt sich getIteratingClass. Die erwartet von mir einen Index und die Namen der unterschiedlichen Klassen, die ich dann entsprechend verwenden will und mittels Modulo berechne ich das Ganze dann so, dass ich dann unterschiedliche Klassenwerte zurückgeben kann, also Klassennamen zurückgeben kann. Um das dann zu verwenden, muss ich nichts anderes machen, ich dupliziere das Ganze hier, damit Ihr das als Vorlage noch weiterhin benutzen könnt. Dass ich statt even und odd einfach nur ng-class verwende. Dieses ng-class verwende ich dann so an der Stelle, dass ich hier sage getIteratingClass. Damit ich mich nicht vertippe, schnappe ich mir den Funktionsaufruf hier. Übergebe dann wie gefordert den Index. Den Index muss ich mit $index übergeben. Anschließend übergebe ich dann die unterschiedlichen Klassen, die ich hier verwenden möchte. Das ist einmal die red-row, dann die green-row und zum Schluss habe ich noch eine blue-row hinzugefügt. Auf die Art und Weise bin ich jetzt in der Lage, wenn ich das dann aktualisiere, dann seht Ihr, dass dann entsprechend erst die rote, dann eine grüne, dann eine blaue Zeile entsteht und das würde er dann einfach auch unendlich durchiterieren. Würde ich jetzt hier einfach die blaue rausnehmen, würde er dann automatisch anhand der Anzahl der Klassen, die ich ihm zur Verfügung stelle, das erkennen und würde dann dieses Element weglassen. Alles in allem haben wir jetzt aber hier gelernt, wie wir sehr schön mit ng-repeat in der Lage, ein HTML-Element als Vorlage in einer Schleife zu verwenden.

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!