mobile apps mit angularjs und plain old html5 (linuxtag 2013, berlin)
Post on 13-May-2015
774 Views
Preview:
DESCRIPTION
TRANSCRIPT
Mobile Apps mit AngularJS und Plain Old HTML5
212.04.2023Copyright © 2010 – akquinet AG
Über uns
Philipp Kumarphilipp.kumar@akquinet.deMobile Competence Center
Till Hermsentill.hermsen@akquinet.de
Mobile Competence Center
312.04.2023
akquinet AG
Copyright © 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 (BusinessRules Management)
SAP Consulting CRM, SCM, SRM Logistik, Finance
SAP Development
SAP TechnologieSAP Basis
Open Text
412.04.2023
Agenda
1. Mobile Web Frameworks
2. AngularJS + HTML5: Eine Alternative
3. Bewertung und Fazit
Copyright © 2013 – akquinet AG
512.04.2023
Anwendungsklassen mobiler Anwendungen
Copyright © 2013 – akquinet AG
(1) Mobile Web (2) Native Shell
(3) Hybrid (4) Native
Mobile Anwendungen
612.04.2023
Anwendungsklassen mobiler Anwendungen
Copyright © 2013 – akquinet AG
(1) Mobile Web (2) Native Shell
(3) Hybrid (4) Native
Mobile Anwendungen
712.04.2023
HTML5: Mobile Frameworks
Copyright © 2013 – akquinet AG
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 }});
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
Mobile Apps mit AngularJS + HTML 5
Demo
1212.04.2023
Eine Alternative
Copyright © 2013 – akquinet AG
Grundlegende Eigenschaften von AngularJS
Model View Controller Modularisierungskonzept Dependency Injection Gute Integration von Unit- und Ende-zu-Ende-Tests
1312.04.2023Copyright © 2013 – akquinet AG
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>
1512.04.2023
Was fehlt für mobil?
Copyright © 2013 – akquinet AG
UI Komponenten
Mobilspezifika
AngularJS
1612.04.2023
Was fehlt für mobil?
Copyright © 2013 – akquinet AG
UI Komponenten
UI Komponenten
AngularJS
1712.04.2023
Was fehlt für mobil?
Copyright © 2013 – akquinet AG
Mobilspezifika
UI Komponenten
AngularJS
1812.04.2023
Frameworks aus unserem Beispiel
Copyright © 2013 – akquinet AG
iScroll, Hammer.js
Bootstrap
AngularJS
1912.04.2023
Bewertung und Fazit
Copyright © 2013 – akquinet AG
Kontrolle
Wartbarkeit
Performance
2012.04.2023Copyright © 2010 – akquinet AG
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
top related