Zu damaligen Zeiten, wie Java2Me noch eine der wenigen Möglichkeiten war "Apps" (falls man diese damals so nennen durfte) für ein Nicht-Smartphone zu schreiben, stellte sich die Frage nicht wie Applikationen für eine Telefon erstellt werden.…
-
-
-
Vinzenz Haas
Informationtechnology - 7. April 2014 in Allgemein, Entwicklung, Technology
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
- 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.
- Installation yeoman
- npm install -g yo
- Installation des yeoman angular generators
- npm install -g generator-angular
- Erstellen der Basis eines angular Projekts mit Hilfe von yeoman
- yo angular
- Abhängigkeiten vom Projekt auflösen mittels bower. Dieses Tools ist bei yeoman inkludiert.
- bower install angular-ui
- 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)Das könnte Sie auch interessieren...
- Mobile App Frameworks vs. Native Apps
-
Augmented Reality – Eweiterte Realität
Bewusstseins-erweiternde Technologie Augmented Reality ist in aller Munde und sollte für uns technologie-affine Menschen mehr als nur ein technisches Gadget sein. Dieser Artikel erklärt, wozu ihr diese Technologie sinnbringend nutzen könnt und welche Tools es…
-
Der technologische Touch
Es klingt abgedroschen, wenn man sagt: „Die Zeit ist schnelllebiger als noch vor einigen Jahren!“ Die Informationstechnologie schreitet mit riesigen Schritten voran und in einigen Bereichen kennen sich 20-jährige Studenten und Studentinnen besser aus als…
-
-
-
139 Fakten und Statistiken zu Instagram
die Sie 2017 jedenfalls berücksichtigen sollten … Instagram ist eine mobile Fotografie-App (Anwendung). ...
-
Das Tor-Netz – ein Browser für ...
Was ist Tor? Browser, illegale Software oder legales Anonymitäts-Werkzeug? Wenn eine Person ihre Bewegungen ...
-
Alibaba, IOC, Amazon + Olympische Spiele
Alibaba wird Partner des IOC Der E-Commerce Riese Alibaba aus China wird die Olympischen Spiele bis...
-