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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<html> <head> <title>jQuery</title> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $span1 = $('form div p:eq(0) span'); $span2 = $('form div p:eq(1) span'); $('form > p input').keyup(function(){ if ($(this).index() === 0) { // Name has changed. $span1.text($(this).val()); } else if ($(this).index() === 2) { // Age has changed. $span2.text($(this).val()); } }); }); </script> </head> <body> <form> <div class="preview"> <p> Name: <span></span> </p> <p> Alter: <span></span> </p> </div> <p> Alter: <input type="number" placeholder="0" /><br /> Name: <input type="text" placeholder="Name" /> </p> </form> </body> </html> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html ng-app="app"> <head> <title>AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('app', []); app.controller('PersonController', function () { this.age = 0; this.name = ''; }); </script> </head> <body> <form ng-controller="PersonController as person"> <div class="preview"> <p> Name: <span>{{person.name}}</span> </p> <p> Alter: <span>{{person.age}}</span> </p> </div> <p> Name: <input ng-model="person.name" type="text" placeholder="Name" /><br /> Alter: <input ng-model="person.age" type="number" placeholder="0" /> </p> </form> </body> </html> |
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.
