Mobile Apps mit AngularJS und Plain Old HTML5
Über uns228.05.2013Copyright © 2010 – akquinet AGPhilipp Kumarphilipp.kumar@akquinet.deMobile Competence CenterTill Hermse...
akquinet AG328.05.2013Copyright © 2013 – akquinet AGBusiness ConsultingJAVABusiness Solutions‒ JBoss‒ Websphere‒ OSGiMobil...
Agenda1. Mobile Web Frameworks2. AngularJS + HTML5: Eine Alternative3. Bewertung und Fazit428.05.2013Copyright © 2013 – ak...
Anwendungsklassen mobiler Anwendungen528.05.2013Copyright © 2013 – akquinet AG(1) Mobile Web (2) Native Shell(3) Hybrid (4...
Anwendungsklassen mobiler Anwendungen628.05.2013Copyright © 2013 – akquinet AG(1) Mobile Web (2) Native Shell(3) HybridMob...
HTML5: Mobile Frameworks728.05.2013Copyright © 2013 – akquinet AG
Mobile Apps mit AngularJS + HTML 5Ext.define(User, {extend: Ext.data.Model,config: {fields: [{name: id, type: int},{name: ...
Mobile Apps mit AngularJS + HTML 5<div data-role="page"><div data-role="header" data-position="fixed"><h1>jQuery mobile</h...
Mobile Apps mit AngularJS + HTML 5Demo
Eine Alternative1228.05.2013Copyright © 2013 – akquinet AG
Grundlegende Eigenschaften von AngularJS Model View Controller Modularisierungskonzept Dependency Injection Gute Integ...
Mobile Apps mit AngularJS + HTML 5angular.module("MyApp", []).controller("MyController", ["$scope",function($scope) {$scop...
Was fehlt für mobil?1528.05.2013Copyright © 2013 – akquinet AGUI KomponentenMobilspezifikaAngularJS
Was fehlt für mobil?1628.05.2013Copyright © 2013 – akquinet AGUI KomponentenUI KomponentenAngularJS
Was fehlt für mobil?1728.05.2013Copyright © 2013 – akquinet AGMobilspezifikaUI KomponentenAngularJS
Frameworks aus unserem Beispiel1828.05.2013Copyright © 2013 – akquinet AGiScroll, Hammer.jsBootstrapAngularJS
Bewertung und Fazit1928.05.2013Copyright © 2013 – akquinet AGKontrolleWartbarkeitPerformance
Linkshttp://blog.akquinet.de/http://angularjs.org/http://twitter.github.io/bootstrap/http://cubiq.org/iscroll-4http://eigh...
Upcoming SlideShare
Loading in …5
×

Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)

1,031 views

Published on

Mit Sencha Touch, jQuery Mobile und Co. gibt es viele Spezialframeworks für die Entwicklung mobiler Anwendungen und Hybrid-Apps, alle mit unterschiedlichen Vor- und Nachteilen. Jedes fügt der Architekur eine zusätzliche Komplexität hinzu. Und noch löst keines das Versprechen echter Plattformunabhängigkeit ein. Warum also nicht gleich auf reines HTML5 gehen und mit einem allgemeinen MVC-Framework kombinieren?

AngularJS ist ein Framework von Google zur Entwicklung von Rich Web Applications und hilft, typische Wartbarkeitsprobleme im Umgang mit HTML und JavaScript einzudämmen. Aber eignet sich AngularJS auch für mobile Apps? Dieser Vortrag stellt AngularJS zunächst vor und zeigt anhand einer Beispielapp, wie sich auf Basis von AngularJS und HTML5 mobile Anwendungen erstellen lassen. Insbesondere wird dabei untersucht, in wie weit solche Lösungen plattformunabhängig und wartbar sind.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,031
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)

  1. 1. Mobile Apps mit AngularJS und Plain Old HTML5
  2. 2. Über uns228.05.2013Copyright © 2010 – akquinet AGPhilipp Kumarphilipp.kumar@akquinet.deMobile Competence CenterTill Hermsentill.hermsen@akquinet.deMobile Competence Center
  3. 3. akquinet AG328.05.2013Copyright © 2013 – akquinet AGBusiness ConsultingJAVABusiness Solutions‒ JBoss‒ Websphere‒ OSGiMobile Solutions‒ Android‒ iPhoneInnovative SolutionsUser Experience‒ Analyse‒ KonzeptionOpen SourceMicrosoft / .NETDynamics NAVDynamics AXDynamics CRMSharepoint / .NETBranchenlösungen‒ care concept‒ easy san‒ opus curareTelematikInternationaleProjekteOutsourcingIT-Consulting &ProjekteOutsourcing &ServicesRZ-BetriebBusiness ProcessOutsourcingSAPSAP-Security &ComplianceBRM/BRO (BusinessRules Management)SAP ConsultingCRM, SCM, SRMLogistik, FinanceSAP DevelopmentSAP TechnologieSAP BasisOpen Text
  4. 4. Agenda1. Mobile Web Frameworks2. AngularJS + HTML5: Eine Alternative3. Bewertung und Fazit428.05.2013Copyright © 2013 – akquinet AG
  5. 5. Anwendungsklassen mobiler Anwendungen528.05.2013Copyright © 2013 – akquinet AG(1) Mobile Web (2) Native Shell(3) Hybrid (4) NativeMobileAnwendungen
  6. 6. Anwendungsklassen mobiler Anwendungen628.05.2013Copyright © 2013 – akquinet AG(1) Mobile Web (2) Native Shell(3) HybridMobileAnwendungen
  7. 7. HTML5: Mobile Frameworks728.05.2013Copyright © 2013 – akquinet AG
  8. 8. Mobile Apps mit AngularJS + HTML 5Ext.define(User, {extend: Ext.data.Model,config: {fields: [{name: id, type: int},{name: name, type:string}]}});ModelExt.define(MyApp.controller.Main, {extend: Ext.app.Controller,config: {refs: {nav: #mainNav}},addLogoutButton: function() {this.getNav().add({text: Logout});}});ViewControllerExt.define(MyApp.view.Welcome, {extend: Ext.Panel,config: {html: Welcome to my app,fullscreen: true}});
  9. 9. Mobile Apps mit AngularJS + HTML 5<div data-role="page"><div data-role="header" data-position="fixed"><h1>jQuery mobile</h1></div><ul id="result" data-role="listview"><li>Dolor Ultricies</li><li>Ligula Vulputate</li><li>Parturient</li></ul></div>HTML Template$.ajax({...success: function(response) {$.each(response.items, function(i, item) {$("#result").append("<li>" + item.name + "</li>");});}});JavaScript
  10. 10. Mobile Apps mit AngularJS + HTML 5Demo
  11. 11. Eine Alternative1228.05.2013Copyright © 2013 – akquinet AG
  12. 12. Grundlegende Eigenschaften von AngularJS Model View Controller Modularisierungskonzept Dependency Injection Gute Integration von Unit- und Ende-zu-Ende-Tests1328.05.2013Copyright © 2013 – akquinet AG
  13. 13. Mobile Apps mit AngularJS + HTML 5angular.module("MyApp", []).controller("MyController", ["$scope",function($scope) {$scope.model = {name: "world“};}]);Modelangular.module("MyApp", []).controller("MyController", ["$scope",function($scope) {$scope.model = { ... };$scope.formSubmit =function(data) {//...};}]);ViewController<div ng-controller="MyController"><form ng-submit="formSubmit()"><input type="text"ng-model="model.name"></form>{{ model.name }}</div>
  14. 14. Was fehlt für mobil?1528.05.2013Copyright © 2013 – akquinet AGUI KomponentenMobilspezifikaAngularJS
  15. 15. Was fehlt für mobil?1628.05.2013Copyright © 2013 – akquinet AGUI KomponentenUI KomponentenAngularJS
  16. 16. Was fehlt für mobil?1728.05.2013Copyright © 2013 – akquinet AGMobilspezifikaUI KomponentenAngularJS
  17. 17. Frameworks aus unserem Beispiel1828.05.2013Copyright © 2013 – akquinet AGiScroll, Hammer.jsBootstrapAngularJS
  18. 18. Bewertung und Fazit1928.05.2013Copyright © 2013 – akquinet AGKontrolleWartbarkeitPerformance
  19. 19. Linkshttp://blog.akquinet.de/http://angularjs.org/http://twitter.github.io/bootstrap/http://cubiq.org/iscroll-4http://eightmedia.github.io/hammer.js/@akquinet2028.05.2013Copyright © 2010 – akquinet AG

×