Two-Way-Data-Binding in AngularJS im Einsatz
Kommentare

Two-Way-Data-Binding in JavaScript sorgt immer wieder für Probleme. Während eines der ersten ECMAScript-7-Features, Object.observe, den Umgang damit vereinfachen soll, bringen viele Libraries wie etwa AngularJS schon von Haus aus Techniken mit sich, mit denen Two-Way-Data-Binding vereinfacht wird.

Genau dieses Two-Way-Data-Binding kann man sich zu Nutze machen, um mit AngularJS einen dynamischen Visitenkarten-Generator zu erstellen. Tanay Pant führt in seinem Tutorial durch den Vorgang.

Visitenkarten-Generator mit Two-Way-Data-Binding in AngularJS erstellen

Visitenkarten sind nach wie vor nützlich, um in leicht überschaubarer Form die wichtigsten Kontaktdetails darzustellen. Dabei müssen sie nicht immer nur aus Papier und Tinte bestehen, gerade auch virtuelle Visitenkarten bieten einige nützliche Funktionen. Der Visitenkarten-Generator ermöglicht es, die damit erstellen Visitenkarten mit verschiedenen Informationsmöglichkeiten zu personalisieren.

Um einen solchen Generator zu erstellen, benötigt man zunächst Bower zum Managen der verschiedenen Dependencies wie Bootstrap, Font Awesome, jQuery und AngularJS. Hat man mit Bower ein neues Projekt erstellt, werden die benötigten Dependencies installiert und anschließend die ng-app-, ng-controller– und ng-bind-Direktiven definiert.

Mit Bootstraps collapse component-Option kann dann die Konfiguration für den User erstellt werden, bevor im Controller die Default-Werte des user-Objekts definiert werden. Ein Vorteil dabei ist, dass auf sie innerhalb von Expressions zugegriffen werden kann – werden die Werte in geschweiften Klammern geschrieben, werden sie automatisch als der aktuell festgelegte Wert evaluiert, egal, wo sie im ng-controller stehen. Zudem können auch verschiedene Social-Media-Profile zur Visitenkarte hinzugefügt werden.

Wie genau man beim Erstellen des Visitenkarten-Generators vorgehen sollte, erklärt Tanay Pant ausführlicher und mit vielen Code-Beispielen in seinem Tutorial. Der von ihm verwendete Code steht auf GitHub zur Verfügung; eine Demo zeigt zudem, wie der Visitenkarten-Generator in Aktion aussehen kann.

Aufmacherbild: Photo of business cards and smartphone. von Shutterstock / Urheberrecht: Vitalliy

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -