Einer der größten Ansätze, die das Web bis heute prägen, ist die Verknüpfung von Dokumenten untereinander. Relevante Informationen werden über Hyperlinks zu einer gehaltvolleren Informationsquelle verbunden. Tim Berners-Lee hatte damals mit HTML den Grundstein für diese Möglichkeit geschaffen. Die einzelnen Dokumente sind jedoch im Prinzip eher statisch aufgebaut.

Durch den Einsatz von Skriptsprachen (client- wie serverseitig) können zum Ladezeitpunkt einzelne Bestandteile dynamisch verändert oder hinzugefügt, aber auch ausgeschlossen werden. Oft bringt diese Dynamik einen deutlich erhöhten Zeitaufwand sowie eine Verschlechterung der Code-Lesbarkeit mit sich. Im Artikel zum Thema CoffeScript wurde eine Möglichkeit vorgestellt, zunächst einen besser lesbaren Code zu erzeugen, der anschließend transkompiliert werden muss, um letztlich wieder clientseitigen JavaScript-Content zu erzeugen. Dadurch kann in Bezug auf den Quellcode eine Optimierung hinsichtlich der Erfassung und Generierung von einzelnen Bestandteilen und deren Zusammenspiel erzielt werden. In diesem Beitrag möchten wir eine Option vorstellen, die darüber hinaus geht und dargestellte Inhalte mit der dahinter liegenden Logik noch etwas gründlicher verknüpft. Auch bei diesem Ansatz wird ferner das Ziel verfolgt, bereits bei der Erstellung des Quellcodes in den Genuss einer Syntax-Optimierung zu gelangen, darüber hinaus zudem einen deutlichen Performanz-Vorteil zu erreichen.

AngularJS

Das aus dem Hause Google stammende Framework AngularJS verbindet JavaScript und HTML und ermöglicht es, Single-Page-Applikationen zu erstellen. Hintergrund ist ein MVC-Muster, welches die Entwicklung, sowie anschließende Tests der einzelnen Komponenten spürbar vereinfacht. Da die Views mit dem Model bidirektional verbunden sind, entsteht der Vorteil, dass einerseits Interaktionen durch den Benutzer Auswirkungen auf das Model haben, aber auch Änderungen an der Programmierlogik für die Benutzeransicht von Relevanz sind.

Datenbindung & Expressions

Das Prinzip der Datenbindung ist relativ simpel. Veranschaulicht werden soll dies am Beispiel einer Feature-Suche für Webhosting-Produkte. Für einen optisch besseren Eindruck wurde Bootstrap eingebunden, zusätzlich die notwendige Angular-JS-Datei. Beides kann entweder als Verweis oder als lokale Kopie verwendet werden. Des Weiteren ist es notwendig, dem HTML-Tag den Zusatz „ng-app“ anzuheften, damit sichergestellt ist, dass eine Erweiterung der Funktionalität um die Möglichkeiten aus Angular-JS geschieht.

Syntaxbeispiel

Codebeispiel zu ng-app & ng-model

In diesem Beispiel wird dem Textfeld für die Eingabe des Suchbegriffs das Attribut „ng-model“ mit dem Wert „suchBegriff“ hinzugefügt.

In dem Absatz, der auf der Website das Suchfeld enthält, wird in doppelten, geschweiften Klammern eine sogenannte „Expression“ (ein Ausdruck) verwendet, die den Wert wie eine Variable stellvertretend wiedergibt. Durch eine Expression können sowohl einfache Werte abgefragt werden, diese können jedoch auch manipuliert oder sogar berechnet werden. Hierfür können beispielsweise Funktionen zur String-Manipulation (s. „suchBegriff.toUpperCase()“, „suchBegriff.toLowerCase()“, sowie „suchBegriff.length()“) oder mathematische Ausdrücke verwendet werden.

Direktiven

Direktiven werden verwendet, um die Funktionalität des Webseiten-Quelltexts auf einfache Weise zu erweitern, ohne wirklich tiefer in Programmier-Code einzutauchen. Dies wird dadurch erreicht, dass spezielle Attribute (wie beispielsweise das oben aufgeführte „ng-app“, bzw. „ng-model“) den einzelnen HTML-Tags hinzugefügt werden. Man erkennt AngularJS-Direktiven am Präfix „ng-“.

Zur Verdeutlichung fügen wir dem Code im folgenden Beispiel die Direktiven „ng-keypress“ und „ng-ini“ hinzu. „ng-keypress“ reagiert auf das Ereignis, das bei einem Tastendruck ausgelöst wird. In Bezug auf unser Textfeld wird ein Zähler („zaehler“) getriggert, der jeden Tastendruck innerhalb des Textfeldes registriert und dabei hochzählt.

Syntaxbeispiel

Codebeispiel: ng-keypress

Auch für die Ausgabe des Zählers wird eine Expression verwendet, die den aktuellen, berechneten Wert wiedergibt. Für die Direktive „ng-keypress“ wird ein mathematischer Ausdruck (zaehler = zaehler + 1) benutzt, um den Wert bei jedem Tastendruck-Ereignis neu zu berechnen. Hierzu zählt auch dir Rücktaste, daher ergibt sich ggf. ein anderer Wert als die Länge des eingegebenen Suchbegriffs, sofern man sich vertippt und den Fehler korrigiert hat.

Templates & Schleifenstrukturen mit Hilfe der Direktive „ng-repeat“

Einige Direktiven werden sicher häufiger verwendet als andere. Eine Besonderheit stellt sicher die Direktive „ng-repeat“ dar, die verwendet werden kann, um Strukturen wiederholt abzurufen. Mit Hilfe dieser Direktive können relativ simpel Templates erzeugt werden, die in Ihrem Aufbau sogar komplexe Formen annehmen können. In der Anwendung ist der notwendige Code schließlich hingegen vergleichsweise übersichtlich und entspricht im Allgemeinen der Syntax, die für die Erstellung des Templates notwendig gewesen ist. Eine komplexe Syntax für die Programmierlogik hinter den Templates entfällt, bzw. wird nicht in externe Skripte ausgelagert, sondern bleibt bei der Betrachtung des Webseitenquelltextes zugänglich und nachvollziehbar.
Im kommenden Beispiel sollen innerhalb einer Tabelle alle aktuellen Produkte der Produktlinie WebHosting dargestellt werden. Hierzu soll für jedes Produkt eine eigene Tabellenzeile ausgegeben werden. Später sollen neben dem Namen weitere Eigenschaften folgen, die in künftigen Spalten zum Vergleichszweck angehängt werden.

Syntaxbeispiel

Codebeispiel: ng-repeat

Man kann die simple Tabellenstruktur sofort nachvollziehen. Im Code findet sich nur eine einzige Tabellenzeile, in deren einzigen Spalte über eine Expression der Inhalt abgerufen wird.
Das Element, welches wiederholt werden soll (die Tabellenzeile mit allen Spalten, in diesem Fall zunächst nur eine einzige), enthält per Direktive „ng-repeat“ alle Daten, die dort in den Ausdruck „produkte“ kommasepariert übergeben werden, so wie man es bei der Verwendung von Arrays in herkömmlichen Skriptsprachen gewohnt ist. Im Gegensatz zum herkömmlichen Ansatz muss weder ein eigener Skript-Absatz eingeleitet und geschlossen werden, noch wird die Logik ausgelagert, der Code bleibt schlank und übersichtlich.

Da die zu wiederholende Struktur in diesem Beispiel noch relativ einfach aufgebaut ist, die Komplexität jedoch geplant zunehmen wird, weisen wir die Daten besser einer einzelnen Variable zu, als dem jeweiligen Template-Element und verwenden für Zuweisung an das HTML-Gerüst schließlich diese Variable anstelle des Arrays.

Der Code ändert sich dadurch wie folgt:

Codebeispiel: ng-init

Im „body“-Tag wird die Variable initialisiert und die Daten als Array zugewiesen. Später in der Verwendung des Templates wird für jede Wiederholung durch das Array iteriert und der entsprechende Datensatz ausgelesen. Die letzte Anpassung stellt noch keine Änderung in der Browseransicht dar.

Filter

Sehr schön wäre es natürlich, wenn das Eingabefeld am Ende eine Funktionalität erhält, da mittlerweile eine (wenn auch kurze) Liste der verfügbaren Produkte existiert.
AngularJS bietet mit sogenannten Filtern ein mächtiges Tool für diesen Zweck.

Syntaxbeispiel

Codebeispiel: Filter

Die Direktive „ng-repeat“ wird um den sehr simplen Filter „filter“ mit dem Argument „suchBegriff“ erweitert. Dadurch wird die Ausgabe der Elemente in unserem Beispiel anhand der Eingabe des Suchbegriffs eingeschränkt. Wird beispielsweise „ium“ als Suchbegriff eingegeben, werden in der Liste nur noch die Produkte „WebHosting Medium“ und „WebHosting Premium“ angezeigt.

So wird mit sehr geringem Aufwand eine Logik umgesetzt, für die mit herkömmlichen Mitteln eine Menge Zeilen Code hätten erzeugt werden müssen.

Es gibt wesentlich komplexere Filtermöglichkeiten, auf deren Vorstellung wir an dieser Stelle allerdings verzichten wollen. Unbedingt notwendig ist neben dem hier verwendeten Ausdruck „filter:“ das vorangestellte Pipe-Symbol „ | “. Der hier auskommentierte Bereich im HTML-Code kann prinzipiell für diesen Zweck komplett entfallen, er war schließlich nur vorhanden, um zuvor den Einsatz von Expressions zu erklären. In den folgenden Syntaxbeispielen ist er daher nicht mehr auskommentiert sondern der Übersicht halber komplett entfernt.

Module

So eindrucksvoll die Filtermöglichkeit im vorangehenden Codebeispiel auch sein mag, wirklich bemerkenswert wird AngularJS jedoch erst durch den Einsatz von Modulen, den darin enthaltenen Direktiven, Services, Scopes und Controllern. Auf die bereits vorgestellten Elemente gehen wir an dieser Stelle nicht weiter ein, der Rest soll nachfolgend vorgestellt werden.

Um ein Modul anzulegen, wird zunächst eine JavaScript-Datei „searchApp.js“ erzeugt, die folgenden Inhalt aufweist:

Syntaxbeispiel des externen Moduls

Codebeispiel: Modul

Die Direktive im öffnenden HTML-Tag muss wie nachfolgend angepasst werden, da nun einige Anweisungen ausgelagert werden:

Syntaxanpassung im HTML-Code

Codebeispiel: Direktiven-Auslagerung

Auf diese Weise können alle komplexeren Strukturen übersichtlich ausgelagert werden, so dass der Seitenquelltext weiterhin aufgeräumt bleibt. So werden beispielsweise Controller in Module ausgelagert und dort näher bestimmt.
 

Controller & Scopes

Nachdem ein passender Controller in dieses Beispiel eingefügt wurde, sieht der Code der externen Modul-Datei beispielsweise wie folgt aus:

Syntaxbeispiel Modul mit dem Controller „ProdukteCtrl“

Codebeispiel: Controller

Man beachte, dass das ursprünglich abschließende Semikolon nun nicht mehr hinter der Modul-Definition steht, sondern am Ende nach den schließenden Klammern des Controllers. Hält man sich an die üblich verwendete Sprachkonvention, wird dem Controllernamen ein „Ctrl“ als Postfix angehängt. Durch die Zuweisung mehrerer Eigenschaften innerhalb des Controllers entsteht ein Array aus Objekten. Auf die einzelnen Werte wird im HTML-Template entsprechend über angepasste Expressions zugegriffen:

Codebeispiel: Array

Die Tabelle bekommt die Direktive „ng-controller=“ProdukteCtrl““ im Table-Tag hinzugefügt. Die „ng-init“-Direktive im Body-Tag kann an dieser Stelle durch die Verwendung des Moduls entfallen.

Als Scope wird der Speicherort für die zuvor festgelegten Variablen bezeichnet. Über den Controller kann ein solcher Scope erzeugt und schließlich im DOM verankert werden. Ein solcher Scope kann als Vermittlungsebene zwischen dem Model und dem Template verstanden werden.

Services

Sollen die Daten nicht lokal und statisch im Modul hinterlegt, sondern über eine REST-Schnittstelle im JSON-Format beispielsweise mit Hilfe von http-Methoden (u.a. GET, POST, PUT oder DELETE) übergeben werden, kann man sich in AngularJS sogenannter Services bedienen, um mit diesen Schnittstellen zu kommunizieren. Viele Services sind bereits nativ im AngularJS-Framework verankert. So wird für die Kommunikation mit JSON der Service „$http“ angeboten. Diese mitgelieferten Services weisen im Namen zu Beginn immer ein „$“-Symbol auf.

Das Thema Services in AngularJS bietet eine recht große Oberfläche für weitere inhaltliche Ansätze für Blogartikel und soll daher an dieser Stelle nicht vertieft werden.

Weitere Quellen

Nachdem wir in diesem Artikel einen knappen Blick über den Tellerrand in Richtung AngularJS gewagt haben, möchten wir Ihnen empfehlen, sich dieser spannenden Thematik mit Hilfe von Tutorials und weiteren Blogbeiträgen, die vielfach im Netz zu finden sind, autodidaktisch anzunähern und die gesamte Bandbreite der Vorteile dieses Ansatzes ggf. anhand eigener kleiner Projekte selbst zu erleben. Einige Quellen, die hochwertige Informationen zu AngularJS liefern, möchten wir Ihnen dabei mit auf den Weg geben:

Kann jeder AngularJS nutzen?

Voraussetzung für den Einsatz einer AngularJS-Umgebung sind Root-Berechtigungen auf einen eigenen Webserver. Daher eignen sich vor allem Virtual Server oder Root Server für diesen Einsatzzweck. Es kommt letztendlich nicht darauf an, welcher Webserver zum Einsatz kommt, erfahrungsgemäß findet man in den meisten Tutorials allerdings oft den Hinweis, dass Node.JS® verwendet wird, da sich hierüber auch einige Tools zum Testen auf einfache Weise nachinstallieren lassen. Auch aus diesem Grund empfiehlt sich ein System, für das die entsprechenden Root-Berechtigungen vorhanden sind.

Fazit

AngularJS ist ein sehr mächtiges Framework, wenn es darum geht, Single-page-Webanwendungen zu erstellen oder einfach eine saubere Trennung zwischen Logik und Templatesystem zu erhalten, bei der jedoch keine unnötig komplizierte Syntax entstehen soll.

Hat Ihnen dieser Artikel gefallen? Dann bewerten sie den Artikel gerne oder teilen ihn mit Menschen, denen er ebenfalls von Nutzen sein kann – ganz einfach per Twitter oder Facebook oder Google+. Sind Sie an künftigen Neuigkeiten aus dem Hosting-Bereich interessiert? Dann können Sie die Blogbeiträge bequem per RSS-Feed abonnieren, oder Sie versehen unsere Facebook-Seite ebenfalls mit einem Like. Die Abo-Funktionalität auf Facebook versorgt Sie zudem jederzeit mit dem aktuellen Blogbeitrag und vielen weiteren Informationen rund um das Hosting im Allgemeinen aber auch zum Thema Host Europe. Haben Sie Anregungen oder Änderungsvorschläge? Kommentieren Sie unsere Beiträge, wir freuen uns über Ihren Input!

Thomas von Mengden
Letzte Artikel von Thomas von Mengden (Alle anzeigen)

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten