AngularJS ist ein Javascript basiertes MVVM/MVC Framework zur Erstellung von Single-Page Applications – nichts Besonderes wirst du sagen. Und da hast du nicht ganz Unrecht! Im Laufe der Zeit wurden einige javascript-basierte MVC und MVVM Frameworks veröffentlich. Um mal ein paar bekannte Namen zu nennen:

• EmberJS
• BackboneJS
• KnockoutJS
• SpineJS

Das Besondere an AngularJS, im Vergleich zu den anderen genannten Frameworks ist, dass es sowohl das MVC als auch das MVVM Pattern auf elegantem Weg verknüpft. Einerseits erhält man dadurch die bidirektionale Datenbindung zwischen Javascript und HTML und andererseits die übersichtliche Struktur eines MVC Frameworks.

Bei der Entwicklung mit AngularJS sind DOM-Manipulationen durch Javascript unerwünscht. Stattdessen erweitert das Framework die HTML Elemente mit weiteren Attributen. Mit Hilfe dieser Direktiven, die allesamt mit dem Präfix ng-* beginnen, kann das Aussehen der Applikation beeinflusst und gesteuert werden. Ein besonderer Vorteil an diesem Weg ist, dass man sich die zu Hunderten verschachtelten <div>-Elemente spart und der DOM-Tree sauber und lesbar bleibt.

Was bietet mir AngularJS?

Ich führe die Major-Features mal stichpunktartig auf. Wer mehr wissen will sollte auf der AngularJS Webseite vorbeischauen.

– Data Binding
– Deep Linking
– Modularization
– Form Validation
– Services
– Directives
– Localization
– Injectable
– Testablehttp://angularjs.org/

Weitere nützliche Dinge

Yeoman

Um zu Beginnen empfehle ich Yeoman. Yeoman ist ein Sammelsurium verschiedener Tools und Frameworks um die Entwicklung von Web-Applikationen zu erleichtern. Besonders das Scaffolding mit Generatoren für verschiedene Frameworks, sowie die Integration von Bower und GruntJS erleichtern einem das Leben bei der Entwicklung erheblich. Mit dem Befehl

yo angular <AppName>

lässt sich, sofern zuvor der angular-generator installiert wurde, der Rahmen einer Angular Applikation erstellen.

GruntJS

GruntJS ist ein Javascript Taskrunner und dient der Automatisierung von verschiedenen Aufgaben. Man kann Coffeescript Dateien automatisch nach Javascript übersetzen lassen oder vor dem Release die Javascript Dateien uglify’en (kürzen), um nur einige Beispiele zu nennen.

Bower

Bower ist ein Paketmanager und bietet die Möglichkeit Bilder, CSS, Javascript und Anderes für Projekte zu installieren und zu verwalten. Zudem bietet Bower die Möglichkeit Abhängigkeiten aufzulösen. Sprich: Will man in seinen Projekt z.B. Bootstrap als Frontend-Framework einsetzen und nutzt als Paketmanager Bower, so wird die Abhängigkeit zu JQuery automatisch aufgelöst und dies ebenfalls zum Projekt hinzugefügt.

Probleme bei Single-Page Applications

Bevor man sich dazu entschließt, eine Single-Page Application zu erstellen, sollte man sich einiger grundlegenden Probleme bewusst sein. Denn diese kleinen Schlitzohren haben die Angewohnheit erst aufzutreten, wenn ein Rückschritt richtig weh tut. Und damit meine ich wirklich richtig weh! Es macht wenig Sinn auf jeden Hype Train aufzuspringen und man sollte sich im Vorfeld gut überlegen, welche Architektur für das eigene Vorhaben sinnvoll ist.

Kein Javascript – Keine Webseite

Eins der größten Probleme ist, dass Besucher ohne Javascript nur eine weiße Seite sehen werden. Ich persönlich bin da sehr rabiat. Leute die mit Netscape 4.0 oder Internet Explorer 6 unterwegs sind, sind selber schuld. Ebenso jene die Javascript aus Sicherheits- oder irgendwelchen anderen Gründen in ihrem Browser deaktivieren. Bedenkt man die Zeit, die man investieren muss um eine Webseite möglichst für alle Browser, darunter auch die aus der Vorkriegszeit, oder Besucher ohne Javascript gängig zu machen, muss man sich wirklich fragen, ob es diese Handvoll Klicks wirklich wert sind. Mir persönlich sind diese Besucher ziemlich egal.

Einziger Wermutstropfen: Barrierefreiheit der Webseite ist ebenfalls nicht gegeben.

Clientside Business Rules

Wenn man bei der Entwicklung nicht achtsam ist, kann es passieren, dass Teile der Business-Logik komplett clientseitig abgearbeitet werden. Etwas das man unter keinen Umständen will! Man hat keine Kontrolle über die Clients und somit auch keine Kontrolle über die Daten. Überprüfungen der Daten, Businessprozesse und Rechteverwaltung sollten immer serverseitig durchgeführt werden.

Page Reload

Die WLAN Verbindung bricht kurz ab und der Benutzer hämmert auf die F5 Taste oder drückt ganz nach alter Manier auf den „Neuladen“ Knopf seines Browser. BANG! Alles weg. Gleiches Problem übrigens, wenn der Benutzer eine Seite mit seinen Freunden bei Facebook oder Google+ teilen will. Was machen? Das Neuladen der Seite ist ein Problem, aber ein lösbares. Man muss dafür sorgen, dass Seiten, die der Nutzer ansurft, eindeutig sind und immer wieder den gleichen Zustand annehmen können. Wie dies nun letztendlich umgesetzt wird, ist jedem selbst überlassen.

AngularJS bietet mit dem RouteProvider eine schicke Lösung für Deeplinking. Allerdings muss bei der Entwicklung darauf geachtet werden, dass die Ressourcen über die URL identifizierbar sind. Gerade bei Seiten mit mehreren Views und unterschiedlichen Controllern ist dies eine kleine Herausforderung.