AngularJS Grundkurs

Eigenen Filter erstellen

Testen Sie unsere 1920 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Es besteht in AngularJS die Möglichkeit, einen eigenen Filter nach individuellen Bedürfnissen zu erstellen. Anhand eines Beispiels wird die Vorgehensweise erläutert, um dies zu bewerkstelligen.
09:28

Transkript

Ich denke, es ist höchste Zeit, dass wir gemeinsam ein Filter zusammen erstellen. Im Grunde genommen ist es nämlich gar nicht so wahnsinnig kompliziert so ein Filter zu machen und das, was ich gerne mache, ist Filter in eigene Module auszulagern und dann entsprechend auch klar zu wissen, wo sind meine Module, wo sind meine Filter, wo sind meine Controller und damit so ein bisschen Ordnung zu schaffen. Ich habe mir lange Gedanken darüber gemacht, welchen Filter ich mit Euch jetzt am besten machen soll und ich denke, das Einfachste ist, wenn wir uns nochmal den currency Filter anschauen. Bei dem currency Filter werden ganz viele von Euch denken, was für eine undankbare Situation, dass ich hier nicht in der Lage bin, das Ganze mit Komma darzustellen und warum ist eigentlich hier die Währung am Ende und nicht am Anfang, das wäre eigentlich viel sinnvoller, wenn das dann am Anfang wäre, so wie es häufig in deutschen Shops dann entsprechend drinnen ist. Das möchte ich jetzt einfach machen mit Euch. Ich möchte mit Euch ein Filter erzeugen und dieser Filter soll uns genau diese Sachen dann ermöglichen. Er soll uns ermöglichen, dass wir hier relativ einfach und schnell in der Lage sind, eine deutsche Ausgabe für eine Währung darzustellen. Um das Ganze dann zu machen, werde ich ganz kurz die Vorlage, die ich erstellt habe, entfernen und beginne damit, dass ich jetzt hier ein neues Modul in filter lade nämlich das FilterModule. In diesem FilterModule möchte ich jetzt alle meine Filter, die ich erzeuge, entsprechend anwenden und ablegen. Ich erzeuge erst mal den Ordner filter und anschließend Ordner filter das FilterModule. Wie ich ein Modul erstelle, ist altbekannt. Ich kann einfach hier mit angular.module ein neues Modul erstellen. Dadurch dass es sich um Filter handelt, nenne ich das Modul bei mir app.filter. Das heißt, ich weiß, dass es für die Applikation spezifische Filter sind. Für den Fall, dass ich es nochmal anwenden möchte, werde ich das Ganze auch nochmal in einer lokale Variable filter unterspeichern. Als nächstes kann ich das Ganze so anwenden, dass ich jetzt einfach die Methode filter aufrufe in dem Modul. Diese sorgt nämlich dafür, ähnlich wie bei Controller die Methode, dass ein neuer Filter in die Anwendung dann hinzugefügt wird. Als erstes erwartet die Filtermethode von mir eine Zeichenkette, wie mein Filter heißen soll, quasi das, was ich später dann als Ausdruck verwenden möchte nach dem pipe. Das soll hier beim mir einfach euro heißen, weil ich entsprechend die Ausgabe von Europreisen ausgeben möchte. Anschließend erwartet die Methode von mir eine factory und zwar eine filter factory. Das kann ich grundsätzlich so machen, dass ich hier auch einfach eine Klasse erzeuge und dann einfach eine Funktion dann zurückgeben lasse. Aber ich sage Euch ganz ehrlich, die Schreibweise gefällt mir persönlich nicht, deswegen arbeite ich eigentlich viel lieber so, dass ich hier wieder eine Klasse zurückgebe. Ich nenne das Ganze EuroFilterFactory und die Klasse erzeuge ich einfach dann hier. Im Constructor wird eine Funktion zurückgegeben und in der Funktion selber ist etwas immer identisch, nämlich der erste Parameter der Funktion ist der Ausdruck, der übergeben wird, der vor dem Filter definiert ist. In diesem Moment wäre es der Preis. Aber in anderen Konstellationen kann es auch ein String, eine Liste oder Ähnliches sein. Das heißt, das ist der Ausdruck, mit dem ich quasi arbeiten werde. Wenn Ihr der Input für diesen Filter. In meinem Fall nenne ich das num, weil ich ganz genau weiß, ich bekomme eine Zahl. Danach kann ich natürlich beliebige optionale Parameter noch hinzufügen. Ich möchte hier einmal den Paramater decimals hinzufügen für die Anzahl der Nachkommastellen und, und das fand ich so wichtig, die Information, ob ich das Währungszeichen vorabgestellt haben möchte oder nachgestellt haben möchte und das möchte ich mit preceding machen. Was ich jetzt also machen muss, ist die Zahl, die ich hier erhalte, anhand der Nachkommastellen, die definierbar sein sollen, dann entsprechend kürzen möchte. Das Ganze zu machen, ist eigentlich relativ simpel. Ihr müsst Euch vorstellen, dass ich eigentlich die Zahl dadurch ermittle, dass ich eine Rundung dadurch hinbekomme, dass ich das Ganze multipliziere mit 10 hoch der Nachkommastellen und dann das Ganze nochmal durch diese gleiche Zahl dividiere und damit dann eine saubere Kürzung hinbekomme. Das ist einfachste Mathematik. Diese hier zu erklären, nehmt es mir nicht übel, sehe ich momentan eigentlich nicht. Ich bin auch sicher, dass viele von Euch das exakt so schon in irgendeiner Form gemacht haben. Das möchte ich aber nur dann machen, wenn mir die Methode angular.isNumber auch bestätigt, dass auch tatsächlich eine Nachkommastelle hier definiert wurde. Ansonsten wenn diese nicht definiert ist, lasse ich einfach den Wert exakt so. Das heißt, wenn überhaupt nichts gegeben wird, kann es auch beliebig oder n beliebig viele Nachkommastellen an dieser Stelle haben. Als nächstes überprüfe ich, ob preceding mit einem Wert true versehen worden ist. Sollte das der Fall sein, werde ich dafür sorgen, dass das €-Zeichen vor der Zahl erscheint und ansonsten erweitere ich einfach die Zahl durch das €-Zeichen. Jetzt muss ich eigentlich nichts anderes machen, als noch dafür zu sorgen, und das ist das Entscheidende, dass ich jetzt hingehen möchte und nicht mehr punktsepariert die Werte habe sondern kommasepariert die Werte habe. Ihr seht, eigentlich unter uns Freunden mal gesagt, dass im Grunde genommen die Definition der Filter ein Kinderspiel ist. Das, was Ihr in den Filtern macht, ist eigentlich dann das tatsächliche Handwerk und dass mit dem entfernen der Punkte, die ich jetzt hier habe und den Ersatz durch Komma, weil in Deutschland Komma entsprechend verwendet werden, ist relativ einfach zu realisieren durch einen regulären Ausdruck, den ich hier machen möchte. Replace und der Ausdruck wird so gemacht, dass ich nach Punkten suche und durch Komma ersetze. Schlussendich muss ich dann nur noch den Zahlenwert hinzufügen oder wieder zurückgeben und schon ist mein erster Filter mit dem Namen euro fertig. Lasst uns jetzt den Filter anwenden. Ganz wichtig! Bitte vergesst nicht, wenn Ihr ein neues Modul gemacht habt, müsst Ihr natürlich auch in Eurem Hauptmodul dafür sorgen, dass die Applikation Bescheid weiß, dass es die Filtermodule oder das Filtermodul hier entsprechend in das Projekt aufnehmen muss um damit arbeiten zu können. Das war es jetzt aber endgültig. Jetzt kann ich euro hier einfach verwenden. Ich schnappe mir das jetzt hier und statt currency verwende ich hier euro. Aktualisiere das und da hat irgendwas nicht funktioniert. Kann aber sein, dass es am Cache liegt. Nein. Lasst uns einmal schnell schauen. Wie ärgerlich, das m vergessen. Nochmal ausprobiert und jetzt funktioniert mein Filter genauso wie ursprünglich geplant. Denkt daran, ich habe zwei Parameter, einmal die Nachkommastellen, die ich einstellen kann und einmal, ob ich es so haben möchte, dass ich vorne bzw. hingen das €-Zeichen haben möchte. Um jetzt also ein paar Testszenarien zu machen, gehe ich jetzt hier hin und definiere erst mal ein paar Nachkommastellen und zusätzlich sorge ich noch dafür, dass ich hier sage, dass bei den letzten drei Werten das €-Zeichen vorne stehen soll. Teste ich das Ganze, dann sehr Ihr, dass das hervorragend inklusive den Rundungen und alles andere, was ich eingestellt habe, hier auch funktioniert. Ich kann allerdings explizit sagen, wie viele Stellen ich haben will. Ich bekomme den Ersatz durch das Komma und kann somit eine Währung für den deutschen Markt deutlich schöner dann an dieser Stelle visualisieren. Nehmt es einfach als Hausaufgabe mit und tut mir einfach den Gefallen und schnappt Euch das Ganze jetzt und sorgt dafür, dass die Währung benutzerdefiniert, also das Währungssymbol benutzerdefiniert, hinzugefügt werden muss oder kann. Ich bin sicher, das ist kein Hexenwerk und Ihr bekommt das relativ schnell hin. Aber zunächst einmal haben wir jetzt gemeinsam gelernt, wie einfach es ist eigene Filter zu erzeugen und diese dann in einem AngularJS Projekt anzuwenden.

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!