Angular JS vs. jQuery #1: Live-Anzeige

bitconnect

Der letzte Blog-Beitrag ist gechillte zwei Jahre her, wird also mal wieder Zeit für einen neuen Eintrag.

Heute geht es um einen ganz kleinen, aber praktischen Vergleich zwischen AngularJS und jQuery. Und zwar anhand einer ganz einfachen Eingabe-Maske. Die Daten die man eingibt, sollen direkt angezeigt werden.

jQuery: Eingabedaten live anzeigen

Folgenden Code habe ich benötigt, um die Live-Anzeige der Eingabedaten zu realisieren:

Natürlich kann man hier wesentlich bessere Optiken verwenden usw. Mir ging es allerdings nur um den technischen Vergleich.

AngularJS: Eingabedaten live anzeigen

Und nun zur AngularJS-Umsetzung. Hier habe ich folgenden Code umgesetzt:

Fazit: AngularJS vs. jQuery bei Live-Anzeige von Eingabedaten

Wie wir sehen, reduziert sich das benötigte JavaScript von 13- auf 5 Zeilen Quellcode. Im AngularJS-Code könnte ich sogar noch zwei Zeilen einsparen, ohne groß unleserlich zu werden. Auch die „Komplexität“ des Codes sinkt gewaltig.

Natürlich steigt bei AngularJS zugleich das Markup im HTML etwas an, das seht ihr selbst, das will ich auch nicht verheimlichen.

Ich hoffe mir fallen demnächst noch ein paar coole Vergleiche ein. Ich selbst setze aktuell sehr viel AngularJS ein, aber empfinde beide Frameworks als für Ihren Aufgabenbereich geeignet. Es ist die „Idee“, die beide unterscheidet. Aber darauf gehe ich demnächst (hoffentlich) näher ein.

Dieser Beitrag wurde unter Programmierung abgelegt am von .

Über Oliver Lippert

Oli ist gelernter Systementwickler (FFA - ausgeschrieben sprengt es den Rahmen) , 1990 Geboren und inzwischen glücklich verheiratet. Seid mehr als 10 Jahren WebEntwickler, seit 2011 auf professioneller Ebene. 2012 begann Oli ein Nebengewerbe im Bereich WEB (Wartung, Entwicklung, Bereitstellung) und hat inzwischen eine vielzahl an Projekten zuverlässig und kundenorientiert abgewickelt, betreibt eigene WebServer und Hostet eine vielzahl an Webseiten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.