AngularJS – Ein Einblick

Vor nicht all zu langer Zeit habe ich mich, im Rahmen eines privaten Projektes, mit Hybrid Apps beschäftigt. Beim Unterbau fällt die Wahl nicht schwer: Apache Cordova oder PhoneGap. Direkt danach steht man vor der Frage: Welches JavaScript Framework benutze ich? Tja, und das ist schon wieder so eine Sache. In meinem jugendlichen Leichtsinn habe ich mich damals für jQuery/jQuery mobile entschieden, da ich damit schon Erfahrung hatte. Mal im Ernst: die App war nicht wahnsinnig komplex, aber schon nach kurzer Zeit verlor ich den Überblick über den Code. Zwar hat letztlich alles funktioniert, aber schöner, strukturierter Code geht anders.
Hier möchte ich zunächst einen Überblick geben, was Angular bietet und warum es auf jeden Fall einen Blick wert ist.

AngularJS – Ein Einblick

SPA (Single Page Applications)

Bei Single Page Applications handelt es sich um Apps, die aus einer einzigen Seite bestehen. Angenommen man erstellt eine App mit 5 Navigationspunkten, besteht diese in Wirklichkeit aus nur einer Seite, in der unterschiedlicher Content gerendert wird, je nachdem welcher Navigationspunkt gewählt wurde. Welcher Content gerendert wird, bestimmt Angular durch das Routing. Im Routing wird eine Verknüpfung zwischen aufgerufener URL, dazugehörigem Controller und Template erstellt.
Jedoch lassen sich mit Angular ebenso Apps mit mehreren Seiten erstellen.

MVC

Zunächst bietet Angular die bekannte MVC Struktur. Bei MVC (Model-View-Controller) handelt es um ein Muster zur Strukturierung von Code. Das Model hält Daten, die View stellt diese dar und der Controller verarbeitet Daten. Diese Trennung macht es initial schon deutlich einfacher den Code gut aufzubauen.

Two-Way-Databinding

Zudem hat AngularJS eine Zwei-Wege-Datenbindung. Werden durch den Benutzer Daten im Model verändert, geschieht dies automatisch. Ebenso umgekehrt. Man muss sich als Programmierer also keine Gedanken darum machen, wie man eine View aktualisiert, nur weil sich Daten im Model geändert haben.

Abstraktion

Mit jQuery schreibt man häufig sich wiederholenden Code. Man will zB eine Liste mit Daten anzeigen, greift sich den Selektor raus und fügt die Liste ein. Jetzt soll ein Element hinzugefügt werden. Zunächst beginnt die Suche nach der richtigen Liste, dann die Manipulation der Liste. Bei der App von der ich eingangs sprach, bestand der Großteil des Codes aus DOM-Manipulation/-Selektion. Angular abstrahiert dies. Man beschreibt, dass eine Liste irgendwo in der App angezeigt werden soll. Die Synchronisation dessen übernimmt Angular ab diesem Punkt selbst.

Diese Merkmale sind nur ein Teil dessen was Angular in seiner Gesamtheit bietet. In den nächsten Blogposts zu AngularJS, wird beim Programmieren schnell auffallen, welche Möglichkeiten sich noch eröffnen.

 

Schreib einen Kommentar

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


*