AngularJS verpackt in einer mobilen Applikation

Was ist angularJS?

Gleich zu Beginn ein technischer und geschichtlicher Überblick zu „angularJS“. Es ist ein Java-Script Framework welches im Jahr 2009 unter dem Schirm von Google das Licht der Welt erblickte.
Einer der Hauptargumente für „angularJS“, in Kurzform auch gerne „angular“ genannt, ist der Aufbau von Single-page-Apps basierend auf dem MVC-Modell. Das heißt, die Daten werden durch angular von einem RESTful Service abgeholt und angezeigt, anstatt einen neuen Request für gesamte Seite zu produzieren.

Die Technik kurz beschrieben

Es werden in der HTML-Seite die JavaScript Dateien von angular eingebunden und bei dem Tag welche von „angular“ verwaltet werden soll, das Directive ng:app=“appName“ hinzgefügt. Daraufhin werden alle Directives die in dem DOM hängen von angular erkannt. Mit Hilfe der Directives kann zum Beispiel über Listen iteriert werden oder Input-Felder mit Listen verbunden werden. „angular“ besitzt einen Dependency-Injection Container, dadurch kann die View (also die HTML Seite) mit dem von „angular“ definierten ViewModel verbunden werden. Dadurch wird ein bidirektionales data-binding erstellt.

Ein Beispiel was mit bidirektionalem data-binding gemeint ist, kann unter angular tutorial step 4 betrachtet werden. Das Suchfeld dieser Seite befüllen, die Liste wird durch das data-binding automatisch gefiltert und nur mehr die relevanten Einträge angezeigt. In diesem Tutorial sind die allgemeinen Schritte zum Erstellen einer „angular“-App zusammengefasst.

Von angularJS zur mobilen Welt mit ionic?

Es stellt sich die Frage was angularJS als Java-Script Framework für Single-page-apps, mit mobilen Applikationen zu tun hat. Es werden einige HTML5-Apps, wie schon im vorigen Beitrag (Mobile App Framworks vs. native Apps) besprochen, in eine mobile Applikation verpackt. „angular“ dient in diesem Fall als Basis-Framework um eine Applikation darauf aufzubauen und ist somit ein großer Baustein unter einigen anderen. Für „fancy“ Menübausteine, Listen, Buttons werden einzelne Plugins verwendet, die über github.io zu finden sind. Als Beispiel dafür dient https://github.com/ajoslin/angular-mobile-nav. Eine ganze Applikation kann mit mehreren Plugins zusammengeführt werden. Diese Plugins werden mit angular kompatibel gehalten.

Andererseits gibt es bereits bestehende Frameworks welche auf der Basis von „angular“ aufgebaut sind und werden als Gesamtpacket für mobile Applikationen ausgeliefert. Das zur Zeit am leichtesten zu findente Framework ist ionic.
Einen ganz einfachen Start zur Entwicklung wird hier geboten.
Zum Herumspielen sind Demo-Apps und einzelne Bausteine auf codepen.io zu finden.
Dieses Framework besitzt auch die Fähigkeiten die mobile Applikation für iOS und Android fertig zu verpacken und auslieferbar zu machen. Das Look-and-Feel wirkt hierbei professionell und ist stark an native iOS- und Android-Apps angelehnt.

Angular Projekt-Setup mit yeoman.io und node

Für die Entwickler unter euch ein kurzer Einblick bzw. eine Zusammenfassung von mehreren Tutorials für das Setup eines angular Projektes inklusive laufendem Server

1. Installation von node.js und npm (node package manager) hier.
   • Unter Windows und Apple wird einfach das Packet installiert.
   • Unter Linux gibt es eine Anleitung zur Installation von node hier.
2. Installation yeoman
   • npm install -g yo
3. Installation des yeoman angular generators
   • npm install -g generator-angular
4. Erstellen der Basis eines angular Projekts mit Hilfe von yeoman
   • yo angular
5. Abhängigkeiten vom Projekt auflösen mittels bower. Dieses Tools ist bei yeoman inkludiert.
   • bower install angular-ui
6. Server starten (grunt wird ebenfalls mit yeoman mitgeliefert)
   • grunt serve

Mit diesen wenigen Schritten ist die Grundstruktur eine angular App aufgesetzt und bereits ein Node.js Server gestartet der einen Browser automatisch öffnet.

Viel Spaß beim Ausprobieren!

Quelle Bilder/Logos:

https://github.com/angular/angular.js/blob/master/images/logo/AngularJS.exports/
http://ionicframework.com/ (Screenshot)
http://angular.github.io/angular-phonecat/step-4/app/ (Screenshot)