Your SlideShare is downloading. ×
0
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

784

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 …

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
784
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile Apps mit AngularJS und Plain Old HTML5
  • 2. Über uns228.05.2013Copyright © 2010 – akquinet AGPhilipp Kumarphilipp.kumar@akquinet.deMobile Competence CenterTill Hermsentill.hermsen@akquinet.deMobile Competence Center
  • 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. Agenda1. Mobile Web Frameworks2. AngularJS + HTML5: Eine Alternative3. Bewertung und Fazit428.05.2013Copyright © 2013 – akquinet AG
  • 5. Anwendungsklassen mobiler Anwendungen528.05.2013Copyright © 2013 – akquinet AG(1) Mobile Web (2) Native Shell(3) Hybrid (4) NativeMobileAnwendungen
  • 6. Anwendungsklassen mobiler Anwendungen628.05.2013Copyright © 2013 – akquinet AG(1) Mobile Web (2) Native Shell(3) HybridMobileAnwendungen
  • 7. HTML5: Mobile Frameworks728.05.2013Copyright © 2013 – akquinet AG
  • 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. 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. Mobile Apps mit AngularJS + HTML 5Demo
  • 11. Eine Alternative1228.05.2013Copyright © 2013 – akquinet AG
  • 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. 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. Was fehlt für mobil?1528.05.2013Copyright © 2013 – akquinet AGUI KomponentenMobilspezifikaAngularJS
  • 15. Was fehlt für mobil?1628.05.2013Copyright © 2013 – akquinet AGUI KomponentenUI KomponentenAngularJS
  • 16. Was fehlt für mobil?1728.05.2013Copyright © 2013 – akquinet AGMobilspezifikaUI KomponentenAngularJS
  • 17. Frameworks aus unserem Beispiel1828.05.2013Copyright © 2013 – akquinet AGiScroll, Hammer.jsBootstrapAngularJS
  • 18. Bewertung und Fazit1928.05.2013Copyright © 2013 – akquinet AGKontrolleWartbarkeitPerformance
  • 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

×