JavaScript-Clients sind ein wichtiger Bestandteil des Mobile Computings, die wart- und testbare Entwicklung ist aber eine Herausforderung. Data Binding erleichtet das Unterfangen durch die klare Trennung von Anwendungscode und UI. Stefan Scheidt, Senior Solution Architect bei OPITZ CONSULTING, hielt diesen Vortrag bei der Mobile Developer Conference (MDC) am 14.02.2012 in Hamburg.
42. jQuery Mobile und AngularJS
Das Problem:
Die DOM-Manipulationen von
jQuery Mobile und AngularJS
müssen koordiniert werden!
43. jQuery Mobile und AngularJS
Die Lösung:
jquery-mobile-angular-adapter
44. jQuery Mobile Angular Adapter
Koordination von jQuery Mobile und AngularJS
Erweiterungen für mobile Web-Apps
Open Source unter
https://github.com/tigbro/
jquery-mobile-angular-adapter
48. Beispiel: Backend-Anbindung
var readUrl = 'https://secure.openkeyval.org/';
function read(key, success) {
var url = readUrl + key;
waitdialog.show();
jsonp(url, function(data) {
success(data);
waitdialog.hide();
});
}
49. Beispiel: Backend-Anbindung
var readUrl = 'https://secure.openkeyval.org/';
function read(key, success) {
var url = readUrl + key;
waitdialog.show();
jsonp(url, function(data) {
success(data);
waitdialog.hide();
});
}
50. Beispiel: Backend-Anbindung
var readUrl = 'https://secure.openkeyval.org/';
function read(key, success) {
var url = readUrl + key;
waitdialog.show();
jsonp(url, function(data) {
success(data);
waitdialog.hide();
});
}
51. Beispiel: Backend-Anbindung
waitDialog
key value
todoController todoStore ... ...
key value key value
todoStore waitDialog
jsonp jsonp
key value
... ...
created created by
with "new" Factories
52. Beispiel: Backend-Anbindung
waitDialog
key value
todoController todoStore ... ...
key value key value
todoStore waitDialog
jsonp jsonp
key value
... ...
created by
Dependency Injection
53. Services und DI mit Angular
angular.service('jsonp', jsonpFactory);
angular.service('waitdialog', waitdialogFactory);
54. Services und DI mit Angular
angular.service('jsonp', jsonpFactory);
angular.service('waitdialog', waitdialogFactory);
function todoStoreFactory() {
function read(key, success) { ... }
// ...
return {
read: read
// ...
}
}
55. Services und DI mit Angular
angular.service('jsonp', jsonpFactory);
angular.service('waitdialog', waitdialogFactory);
function todoStoreFactory(jsonp, waitdialog) {
function read(key, success) { ... }
// ...
return {
read: read,
// ...
}
}
todoStoreFactory.$inject = ['jsonp', 'waitdialog'];
56. Services und DI mit Angular
angular.service('jsonp', jsonpFactory);
angular.service('waitdialog', waitdialogFactory);
function todoStoreFactory(jsonp, waitdialog) {
function read(key, success) { ... }
// ...
return {
read: read
// ...
}
}
todoStoreFactory.$inject = ['jsonp', 'waitdialog'];
angular.service('todoStore', todoStoreFactory);
58. DI für Controller
// ...
angular.service('todoStore', ...);
function TodoController(todoStore) {
...
}
TodoController.$inject = ['todoStore'];
59. jQuery Mobile Angular Adapter
Koordination von jQuery Mobile und AngularJS
Erweiterungen für mobile Web-Apps
Open Source unter
https://github.com/tigbro/
jquery-mobile-angular-adapter
75. Sencha Touch Angular Adapter
Koordination von Sencha Touch und Angular JS
Erweiterungen für mobile Web-Apps
semantisches HTML Markup!
Open Source unter
https://github.com/tigbro/
sencha-touch-angular-adapter
81. In the hive 11: nectar and pollen
by Max xx, http://www.flickr.com/photos/max_westby/4567762490
Books
By Rodrigo Galindez, http://www.flickr.com/photos/rodrigogalindez/4637637337/
IMG_1300-Edit
by Susan E Adams, http://www.flickr.com/photos/susanad813/3912914836/
Doble Via
by amslerPIX, http://www.flickr.com/photos/amslerpix/6242266697/
Stubborn Last Drop
by RogueSun Media, http://www.flickr.com/photos/shuttercat7/627798443/