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

Angular 2 Grundkurs

Hauseigene Pipes

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In diesem Video erhalten Sie einen Überblick über Pipes, die in Angular 2.0 mitgeliefert werden.
03:17

Transkript

Pipes in der Angular 2-Welt entsprechen dem, was wir aus Angular 1 kannten unter dem Begriff Filter. Was haben Filter oder heute Pipes gemacht? Die haben im Grunde genommen dafür gesorgt, dass Ausgaben nach unseren eigenen Bedürfnissen modifiziert werden. Es gibt eine Vielzahl von Pipes, die uns Angular im common-Modul hier zur Verfügung stellt und wo wir auch später das common-Modul einbinden müssen, um diese Pipes auch nutzen zu können. So gibt es beispielsweise das AsynchPipe. Das ist ein sehr interessantes Pipe, denn es ist in der Lage auf ein Promise so lange zu warten, bis entsprechend ein Wert vorhanden ist und dieses dann entsprechend auszugeben. CurrencyPipe um Währungsinformationen auszugeben, Datepipe, Datumsinformation, DecimalPipe, Zahlen vernünftig formatiert darzugeben. PluralPipe und SelectPipe ermöglichen uns Internationalisierungen. JsonPipe ermöglicht uns, Json-Objekte wiederzugeben, LowerCase macht alles in Kleinbuchstaben, UpperCase in Großbuchstaben. Percent um Prozentwete auszugeben, und Slice um Teilbereiche auszugeben. Sehr interessant bei diesem gesamten Konstrukt ist es, dass die Pipes mittlerweile bedingt sogar schon auf Internationalisierung nach dem neuen ECMA-Standard folgen. Das heißt, der DecimalPipe und der DatePipe folgen dem in dem Sinne, dass es beispielsweise beim DatePipe bei deutschen Systemen dann automatisch dann auch ein deutsches Datumsformat verwendet wird, wogegen bei amerikanischen Systemen, dann auch amerikanische Formate dargestellt werden. Das gleiche gilt auch für die Zahl. Ich möchte euch das einmal ganz kurz zeigen. Hier sehen wir beispielsweise, dass ich den Safari habe und der Safari ist hier in der Lage mit dem DatePipe "01.Oktober 2016" 17 Uhr 25 anzuzeigen. Und der DecimalPipe hier entsprechend dann die Tausenderstellen mit Punkten zu trennen und die Koma dann auch hier entsprechend für Dezimalwerte zu nutzen. Analog dazu, muss ich allerdings sagen, dass ich um dies darstellen zu können, ei Polyfill laden muss. Die Information bekomme ich auch, wenn ich DecimalPipe hier mal anwähle, und dann kriege ich hier die Warnung, dass dieses Pipe mit der Internationalisierungs-API arbeiten muss und dass es notwendig sein kann, ein Polyfill zu laden. Und wenn ich mir das hier mal anschaue, dann kriege ich hier unten die Information, dass es dieses Polyfill ist, das ich verwenden muss. Und was ich im Grunde genommen machen kann, ist hier relativ einfach: Ich kann diesen Skriptblock entweder einfach einnehmen und dann mit "de" entsprechend versehen, damit die deutsche Sprache unterstützt wird. Ich kann das aber auch per "npm install" einfach installieren und dann eigene Sprachen, beziehungsweise die Sprache, die ich benötige dann fest implementieren. Etwas schade finde ich eigentlich, dass das Konstrukt, das Chrome momentan hier nicht das macht, was es will. Das heißt, wenn ich jetzt hier den Safari habe, einfach mal klein mache, dann sehen wir hier das Ganze dann unter Chrome. dann seht ihr, dass obwohl ich hier die deutsche Internationalisierung als Polyfill angegeben habe, trotz alledem das Englische hier angegeben wird. Solltet ihr so ähnliche Probleme haben, möchte ich euch insofern berühigen, dass wir in den kommenden Minuten auch lernen können, wie wir eigene Pipes erzeugen und dann müssen wir im Zweifelsfall halt selber dran. In diesem Video haben wir einen Überblick über die hauseigenen Pipes von Angular kennengelernt.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 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!