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

Mobile Apps mit AngularJS und Plain Old HTML5

212.04.2023Copyright © 2010 – akquinet AG

Über uns

Philipp [email protected] Competence Center

Till [email protected]

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


512.04.2023

Anwendungsklassen mobiler Anwendungen


(1) Mobile Web (2) Native Shell

(3) Hybrid (4) Native

Mobile Anwendungen

612.04.2023

Anwendungsklassen mobiler Anwendungen


(1) Mobile Web (2) Native Shell

(3) Hybrid (4) Native

Mobile Anwendungen

712.04.2023

HTML5: Mobile Frameworks


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 }});


<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


Demo

1212.04.2023

Eine Alternative


Grundlegende Eigenschaften von AngularJS

Model View Controller Modularisierungskonzept Dependency Injection Gute Integration von Unit- und Ende-zu-Ende-Tests



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?


UI Komponenten

Mobilspezifika

AngularJS

1612.04.2023



UI Komponenten

UI Komponenten

AngularJS

1712.04.2023



Mobilspezifika

UI Komponenten

AngularJS

1812.04.2023

Frameworks aus unserem Beispiel


iScroll, Hammer.js

Bootstrap

AngularJS

1912.04.2023

Bewertung und Fazit


Kontrolle

Wartbarkeit

Performance


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











mailto:[email protected]