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.

1. Mobile Apps mit AngularJS und Plain Old HTML5

2. Über uns
228.05.2013Copyright © 2010 – akquinet AG
Philipp Kumar
philipp.kumar@akquinet.de
Mobile Competence Center
Till Hermsen
till.hermsen@akquinet.de
Mobile Competence Center

3. akquinet AG
328.05.2013Copyright © 2013 – akquinet AG
Business Consulting
JAVA
Business Solutions
‒ JBoss
‒ Websphere
‒ OSGi
Mobile Solutions
‒ Android
‒ iPhone
Innovative Solutions
User Experience
‒ Analyse
‒ Konzeption
Open Source
Microsoft / .NET
Dynamics NAV
Dynamics AX
Dynamics CRM
Sharepoint / .NET
Branchenlösungen
‒ care concept
‒ easy san
‒ opus curare
Telematik
Internationale
Projekte
Outsourcing
IT-Consulting &
Projekte
Outsourcing &
Services
RZ-Betrieb
Business Process
Outsourcing
SAP
SAP-Security &
Compliance
BRM/BRO (Business
Rules Management)
SAP Consulting
CRM, SCM, SRM
Logistik, Finance
SAP Development
SAP Technologie
SAP Basis
Open Text

4. Agenda
1. Mobile Web Frameworks
2. AngularJS + HTML5: Eine Alternative
3. Bewertung und Fazit
428.05.2013Copyright © 2013 – akquinet AG

5. Anwendungsklassen mobiler Anwendungen
528.05.2013Copyright © 2013 – akquinet AG
(1) Mobile Web (2) Native Shell
(3) Hybrid (4) Native
Mobile
Anwendungen

6. Anwendungsklassen mobiler Anwendungen
628.05.2013Copyright © 2013 – akquinet AG
(1) Mobile Web (2) Native Shell
(3) Hybrid
Mobile
Anwendungen

7. HTML5: Mobile Frameworks
728.05.2013Copyright © 2013 – akquinet AG

8. Mobile Apps mit AngularJS + HTML 5
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type:'string'}
]
}
});
Model
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
nav: '#mainNav'
}
},
addLogoutButton: function() {
this.getNav().add({
text: 'Logout'
});
}
});
View
Controller
Ext.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 5
Demo

11. Eine Alternative
1228.05.2013Copyright © 2013 – akquinet AG

12. Grundlegende Eigenschaften von AngularJS
 Model View Controller
 Modularisierungskonzept
 Dependency Injection
 Gute Integration von Unit- und Ende-zu-Ende-Tests
1328.05.2013Copyright © 2013 – akquinet AG

13. Mobile Apps mit AngularJS + HTML 5
angular.module("MyApp", []).
controller("MyController", [
"$scope",
function($scope) {
$scope.model = {
name: "world“
};
}
]);
Model
angular.module("MyApp", []).
controller("MyController", [
"$scope",
function($scope) {
$scope.model = { ... };
$scope.formSubmit =
function(data) {
//...
};
}
]);
View
Controller
<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 AG
UI Komponenten
Mobilspezifika
AngularJS

15. Was fehlt für mobil?
1628.05.2013Copyright © 2013 – akquinet AG
UI Komponenten
UI Komponenten
AngularJS

16. Was fehlt für mobil?
1728.05.2013Copyright © 2013 – akquinet AG
Mobilspezifika
UI Komponenten
AngularJS

17. Frameworks aus unserem Beispiel
1828.05.2013Copyright © 2013 – akquinet AG
iScroll, Hammer.js
Bootstrap
AngularJS

18. Bewertung und Fazit
1928.05.2013Copyright © 2013 – akquinet AG
Kontrolle
Wartbarkeit
Performance

19. Links
http://blog.akquinet.de/
http://angularjs.org/
http://twitter.github.io/bootstrap/
http://cubiq.org/iscroll-4
http://eightmedia.github.io/hammer.js/
@akquinet
2028.05.2013Copyright © 2010 – akquinet AG