AngularJS Grundkurs

Datums- und Zeitausgaben

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Datums- und Zeitausgaben können in AngularJS mit dem Date-Filter bearbeitet und benutzerdefiniert ausgegeben werden.
05:13

Transkript

AngularJS stellt Euch auch ein Filter zur Verfügung, mit dem Ihr in der Lage seid, Datumsausgaben oder auch Zeitausgaben benutzerdefiniert zu bearbeiten und entsprechend wiedergeben zu können. Damit ich das Ganze machen kann, gibt es einen Filter, das nennt sich einfach date und dieses date Filter muss ich schlicht und ergreifend einfach nur anwenden. Um Euch das zu demonstrieren, habe ich ein kleines Beispiel vorbereitet. Ich habe hier wieder meine Personenlist. Die Personenliste zeigt die persons Liste, die Controller definiert ist und was wir hier auch sehen können, ist, dass die Personen einen Eintrag registered hat. Registered ist nichts anderes als in Millisekunden definiert, wann der Zeitpunkt der Registrierung war. Das heißt, ich bin jetzt zum Beispiel in der Lage einfach eine Sortierung zu machen, dass ich sage orderBy und mit dem orderBy möchte ich, dass dann entsprechend die Registrierungselemente gefiltert werden. Das heißt, dass die Objekte, die als erstes registriert waren, auch als erstes angezeigt werden. Wenn wir das Ganze aktualisieren, haben wir dann entsprechend nach der Filterung hier diese Ausgabe. Des Weiteren möchte ich jetzt hier natürlich auch in der Lage sein, diesen Filterwert einfach auszugeben oder vielmehr den Zeitwert und dann haben wir hier in Millisekunden, wann die jeweilige Person sich hier an dieser Stelle registriert hat. Ihr werdet mir aber sicherlich rechtgeben, dass es eigentlich herzhaft wenig Sinn macht auf diese Art und Weise zu registrieren. Denn man kann das Datumsobjekt überhaupt nicht lesen. Denn in Millisekunden ist nicht human readable und da haben wir ein ernsthaftes Problem. Was wir also an der Stelle machen könnten, ist einfach date als Filter zu verwenden und date erwartet als Filter unterschiedlichste Parameter und eines der Parameter ist zum Beispiel die Zeichenkette short. Mit short sind wir nun in der Lage eine kurze Ausgabe des Datums- und Zeitobjektes zu sehen. Das heißt, ich sehe an dieser Stelle, wann die jeweilige Registrierung war und in diesem speziellen Fall zu welchem Zeitpunkt. Ich sehe auch gerade, dass ich aus Versehen hier bei der Sortierung ein komplett falsches Feld angegeben habe. Bitte entschuldigt. Ich bringe das ganz schnell in Ordnung und teste das jetzt nochmal. Jetzt haben wir dann entsprechend auch eine ordentliche Sortierung und kann dann entsprechend diese ordentliche Sortierung darstellen. Ich kann es auch so machen, dass die ältesten Elemente dann zuerst da sind und so haben wir dann von der Sortierung her entsprechend etwas umgestellt. Weiterhin bin ich in der Lage neben dem short das Ganze auch so umzustellen, dass ich zum Beispiel mit Medium ein bisschen mehr Information mir ausgeben lasse. Um Euch das zu demonstrieren, möchte ich jetzt hier einfach schnell das Alte auskommentieren und stattdessen werde ich hier medium verwenden. Dann haben wir unter medium tatsächlich Informationen über einen zum Teil ausgeschriebenen Monatsnamen, einen vollausgeschriebenen Jahreswert, sowie dann noch zusätzlich die Information darüber, um wieviel Uhr entsprechend das Ganze stattfindet inklusive Millisekunden. Ich hätte auch hier beispielsweise einfach shortTime verwenden können. Ich dupliziere das nochmal, um Euch das zu demonstrieren. Mit shortTime seht Ihr, dass ich dann nur eine Uhrzeitangabe gehabt hätte oder und das ist eigentlich mein persönlicher Favorit und zwar die Möglichkeit, dass ich wirklich benutzerdefiniert sagen kann, was ich überhaupt darstellen möchte. So kann ich beispielsweise sagen, dass ich die ersten zwei Stellen für den Tag haben möchte, anschließend die Monatsdarstellung und eine vierstellige Darstellung des Jahres, sowie die Anzeige von den Stunden im 24-Stundenrhythmus, sowie die Minuten, die dazu gehören. Wenn ich das jetzt nochmal aktualisiere, seht Ihr wunderbar, dass dann entsprechend diese Ausgabe hier stattgefunden hat. Hätte ich hier beispielsweise ein kleines m benutzt und hier ein kleines h, seht Ihr, dass dann an dieser Stelle, gleich die amerikanische Schreibweise hier gegriffen hätte, um das Ganze hier darzustellen. Das was entscheidend ist, welche Buchstabennotation oder welches Pattern Ihr hier verwendet um dann dafür zu sorgen, dass dann die Datumsanzeige benutzerdefiniert angegeben werden kann. In diesem Video haben wir gelernt, wie wir das Datum auf unterschiedliche Art und Weise manipulieren können mittels des date Filters. Ein kleiner Tipp an dieser Stelle. Das date Filter verfügt wirklich über eine Unzahl von unterschiedlichen Parametertypen, die ich hier verwenden kann und das würde einfach hier den Rahmen dieses Videos sprengen. Schaut einfach in die API und schaut, was weitere Parameter da noch bieten 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!