Stefan Scheidt      OPITZ CONSULTING GmbH         Entwurfsmuster fürmobile JavaScript-Web-Apps
Entwurfsmuster für mobile   JavaScript-Web-Apps        Stefan Scheidt   OPITZ CONSULTING GmbH
Wer bin ich?stefan.scheidt@opitz-consulting.com          (@stefanscheidt)
Mission                                          MärkteWir entwickeln gemeinsam mit allen                Branchenübergrei...
Wer sind Sie?
In diesem Vortrag geht‘s um ...     ... die Entwicklung testbarer und wartbarermobiler JavaScript Web-Apps
In diesem Vortrag geht‘s um ...     ... die Entwicklung testbarer und wartbarermobiler JavaScript Web-Apps
In diesem Vortrag geht‘s um ...     ... die Entwicklung testbarer und wartbarermobiler JavaScript Web-Apps
Die Beispiel-App ...http://tigbro.github.com/todo-mobilehttps://github.com/tigbro/todo-mobile
Architektur
"Multi Page Web App"Browser                             Server           HTML-Page                        Model           ...
"AJAX Web App"Browser                         Server          Change    ModelAJAX-                View                Ba  ...
"Single Page Web App"  Browser             Server   Model    View       Data   Backend  Controller
Komponenten-Bibliotheken
jQuery Mobile http://jquerymobile.com/
Die Beispiel-App
<div id="main" data-role="page">  <div data-role="header">    <h1>Todos</h1>    <a href="">Save</a>    <a href="#settings"...
<div id="main" data-role="page">  <div data-role="header">    <h1>Todos</h1>    <a href="">Save</a>    <a href="#settings"...
<div id="main" data-role="page">  <div data-role="header">    <h1>Todos</h1>    <a href="">Save</a>    <a href="#settings"...
<div id="main" data-role="page">  <div data-role="header">    <h1>Todos</h1>    <a href="">Save</a>    <a href="#settings"...
<div id="main" data-role="page">  <div data-role="header">    <h1>Todos</h1>    <a href="">Save</a>    <a href="#settings"...
DOM-Transformationdurch jQuery-Mobile
<input type="checkbox" id="todo1"/><label for="todo1">create a mobile todo app</label><div class="ui-checkbox">  <input ty...
<input type="checkbox" id="todo1"/><label for="todo1">create a mobile todo app</label><div class="ui-checkbox">  <input ty...
Two Way Data Binding
Manuelles Binding
$(#addTodo).submit(function(event) {    addTodo();    event.preventDefault();});function addTodo() {    var inputText = $(...
$(#addTodo).submit(function(event) {    addTodo();    event.preventDefault();});function addTodo() {    var inputText = $(...
$(#addTodo).submit(function(event) {    addTodo();    event.preventDefault();});function addTodo() {    var inputText = $(...
$(#addTodo).submit(function(event) {    addTodo();    event.preventDefault();});function addTodo() {    var inputText = $(...
$(#addTodo).submit(function(event) {    addTodo();    event.preventDefault();});function addTodo() {    var inputText = $(...
$(#addTodo).submit(function(event) {    addTodo();    event.preventDefault();});function addTodo() {    var inputText = $(...
$(#addTodo).submit(function(event) {    addTodo();    event.preventDefault();});function addTodo() {    var inputText = $(...
$(#addTodo).submit(function(event) {    addTodo();    event.preventDefault();});function addTodo() {    var inputText = $(...
Das Ziel sollte aber sein:   function TodoController() {       this.todos = [];       this.inputText = ;       this.addTod...
Angular JSDeclarative                       MVC withUI Templates                      Dependency InjectionTwo-Way         ...
Two-Way Databinding       read              read       write    Data-    writeDOM                              Controller ...
Scopes                               Scope                                        Expressions       $get(<expr>)          ...
Demo
Das Ziel ...function TodoController() {    this.todos = [];    this.inputText = ;    this.addTodo = function() {        th...
Mit Angular ...function TodoController($scope) {    $scope.todos = [];    $scope.inputText = ;    $scope.addTodo = functio...
<div data-role="page"                      TodoController-Scope     ng:controller="TodoController">                       ...
jQuery Mobile und AngularJS        Das Problem:   Die DOM-Manipulationen von   jQuery Mobile und AngularJS   müssen koordi...
jQuery Mobile und AngularJS         Die Lösung:jQuery Mobile Angular Adapter
jQuery Mobile Angular AdapterKoordination von jQuery Mobile und AngularJS    Erweiterungen für mobile Web-Apps            ...
Dependency Injection
Dependency Injection ist ein Entwurfsmuster und dient dazu, die Abhängigkeiten zwischen        Komponenten zu minimieren. ...
Dependency Injection ist ein Entwurfsmuster und dient dazu, die Abhängigkeiten zwischen        Komponenten zu minimieren. ...
Beispiel: Backend-Anbindung function refreshTodos() {     var self = this;     read(ToDoApp, function(response) {         ...
Beispiel: Backend-Anbindung function refreshTodos() {     var self = this;     read(ToDoApp, function(response) {         ...
Beispiel: Backend-Anbindung var readUrl = https://secure.openkeyval.org/; function read(key, success) {     var url = read...
Beispiel: Backend-Anbindung var readUrl = https://secure.openkeyval.org/; function read(key, success) {     var url = read...
Beispiel: Backend-Anbindung var readUrl = https://secure.openkeyval.org/; function read(key, success) {     var url = read...
Beispiel: Backend-Anbindung                                                   waitDialogtodoController           todoStore...
Beispiel: Backend-Anbindung                                                  waitDialogtodoController               todoSt...
Angular JSDeclarative                       MVC withUI Templates                      Dependency InjectionTwo-Way         ...
Services und DI mit Angularfunction jsonpFactory() {  // returns jsonp function  // ...}function waitdialogFactory() {  //...
Services und DI mit Angularvar module = angular.module("todo", []);
Services und DI mit Angularvar module = angular.module("todo", []);module.factory(jsonp, jsonpFactory);module.factory(wait...
Services und DI mit Angularvar module = angular.module("todo", []);module.factory(jsonp, jsonpFactory);module.factory(wait...
Services und DI mit Angularvar module = angular.module("todo", []);module.factory(jsonp, jsonpFactory);module.factory(wait...
Services und DI mit Angularvar module = angular.module("todo", []);module.factory(jsonp, jsonpFactory);module.factory(wait...
Controller und DI mit Angularfunction TodoController($scope, todoStore) {  ...}TodoController.$inject = [$scope, todoStore...
Controller und DI mit Angularfunction TodoController($scope, todoStore) {  ...}TodoController.$inject = [$scope, todoStore...
Controller und DI mit Angularfunction TodoController($scope, todoStore) {  ...}TodoController.$inject = [$scope, todoStore...
jQuery Mobile Angular AdapterKoordination von jQuery Mobile und AngularJS    Erweiterungen für mobile Web-Apps            ...
jQuery Mobile Angular Adapter       Mobile Events
<div id="main" data-role="page"     ng:controller="TodoController"     ngm:pagebeforeshow="refreshTodos()">        ...</di...
jQuery Mobile Angular Adapter      Shared Controller
LoginPage<div id="loginPage"                        Scope     ng-controller="LoginController">                            ...
LoginPage<div id="loginPage"                        Scope     ng-controller="LoginController">                            ...
LoginPage<div id="loginPage"                        Scope     ngm-shared-controller=                                      ...
LoginPage<div id="loginPage"                        Scope     ngm-shared-controller=                                      ...
jQuery Mobile Angular Adapter         Wait Dialog
waitDialog.show(loading);waitDialog.hide();waitDialog.show(click to abort,       onClickCallback);
Fazit     Auch bei der Entwicklung      von JavaScript Clientssollten geeignete Entwurfsmuster       angewendet werden!
FazitBibliotheken und Frameworks  helfen bei der Umsetzung!
FazitEine praxiserprobte Kombination für die    Entwicklung mobiler Web-Apps:            jQuery Mobile              + Angu...
In the hive 11: nectar and pollen      by Max xx, http://www.flickr.com/photos/max_westby/4567762490                      ...
Vielen Dankfür Ihr Interesse!  @stefanscheidt
www.opitz-consulting.com/go_mobile
Entwurfsmuster für mobile JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt
Entwurfsmuster für mobile JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt
Upcoming SlideShare
Loading in …5
×

Entwurfsmuster für mobile JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt

1,497 views

Published on

http://www.opitz-consulting.com/go/3-4-898

JavaScript-Anwendungen werden immer leistungsfähiger, aber auch immer komplexer. Wie kann eine Anwendung trotz wachsender Größe wartbar und testbar bleiben? Entwurfsmuster helfen, dieses Ziel zu erreichen.

Stefan Scheidt, Solution Architect und Mobile-Web-Experte bei OPITZ CONSULTING, hielt diesen Vortrag bei der Mobile Tech Conference in Frankfurt a. M am 04.September 2012.

--
Zukunft?! Wir arbeiten dran.
Mobile Solutions by OPITZ CONSULTING
http://www.opitz-consulting.com/go/3-4-898

Über uns:

Als führender Projektspezialist für ganzheitliche IT-Lösungen tragen wir zur Wertsteigerung der Organisationen unserer Kunden bei und bringen IT und Business in Einklang. Mit OPITZ CONSULTING als zuverlässigem Partner können sich unsere Kunden auf ihr Kerngeschäft konzentrieren und ihre Wettbewerbsvorteile nachhaltig absichern und ausbauen.

Über unsere IT-Beratung: http://www.opitz-consulting.com/go/3-8-10
Unser Leistungsangebot: http://www.opitz-consulting.com/go/3-8-874
Karriere bei OPITZ CONSULTING: http://www.opitz-consulting.com/go/3-8-5

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,497
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Entwurfsmuster für mobile JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn – Stefan Scheidt

  1. 1. Stefan Scheidt OPITZ CONSULTING GmbH Entwurfsmuster fürmobile JavaScript-Web-Apps
  2. 2. Entwurfsmuster für mobile JavaScript-Web-Apps Stefan Scheidt OPITZ CONSULTING GmbH
  3. 3. Wer bin ich?stefan.scheidt@opitz-consulting.com (@stefanscheidt)
  4. 4. Mission MärkteWir entwickeln gemeinsam mit allen  BranchenübergreifendBranchen Lösungen, die dazu führen, dass  Über 600 Kundensich diese Organisationen besser entwickeln 29%als ihr Wettbewerb. 29% Handel / Logistik / Dienstleistungen Industrie / Versorger /Unsere Dienstleistung erfolgt Telekommunikationpartnerschaftlich und ist auf eine langjährige 42%Zusammenarbeit angelegt. Öffentliche Auftraggeber / Banken und Versicherungen / Vereine und VerbändeLeistungsangebot Eckdaten Business IT Alignment  Gründung 1990 Business Information Management  400 Mitarbeiter Business Process Management  8 Standorte Anwendungsentwicklung SOA und System-Integration IT-Infrastruktur-Management © OPITZ CONSULTING GmbH 2012 Seite 4
  5. 5. Wer sind Sie?
  6. 6. In diesem Vortrag geht‘s um ... ... die Entwicklung testbarer und wartbarermobiler JavaScript Web-Apps
  7. 7. In diesem Vortrag geht‘s um ... ... die Entwicklung testbarer und wartbarermobiler JavaScript Web-Apps
  8. 8. In diesem Vortrag geht‘s um ... ... die Entwicklung testbarer und wartbarermobiler JavaScript Web-Apps
  9. 9. Die Beispiel-App ...http://tigbro.github.com/todo-mobilehttps://github.com/tigbro/todo-mobile
  10. 10. Architektur
  11. 11. "Multi Page Web App"Browser Server HTML-Page Model View Data Backend UI Values Controller
  12. 12. "AJAX Web App"Browser Server Change ModelAJAX- View Ba DataEngine Controller Events
  13. 13. "Single Page Web App" Browser Server Model View Data Backend Controller
  14. 14. Komponenten-Bibliotheken
  15. 15. jQuery Mobile http://jquerymobile.com/
  16. 16. Die Beispiel-App
  17. 17. <div id="main" data-role="page"> <div data-role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-role="content"> <div data-role="fieldcontain"> <form data-ajax="false"> <input type="text"> </form> </div> <fieldset data-role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div></div> jQuery Mobile Markup
  18. 18. <div id="main" data-role="page"> <div data-role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-role="content"> <div data-role="fieldcontain"> <form data-ajax="false"> <input type="text"> </form> </div> <fieldset data-role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div></div> jQuery Mobile Markup
  19. 19. <div id="main" data-role="page"> <div data-role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-role="content"> <div data-role="fieldcontain"> <form data-ajax="false"> <input type="text"> </form> </div> <fieldset data-role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div></div> jQuery Mobile Markup
  20. 20. <div id="main" data-role="page"> <div data-role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-role="content"> <div data-role="fieldcontain"> <form data-ajax="false"> <input type="text"> </form> </div> <fieldset data-role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div></div> jQuery Mobile Markup
  21. 21. <div id="main" data-role="page"> <div data-role="header"> <h1>Todos</h1> <a href="">Save</a> <a href="#settings">Settings</a> </div> <div data-role="content"> <div data-role="fieldcontain"> <form data-ajax="false"> <input type="text"> </form> </div> <fieldset data-role="controlgroup"> <input type="checkbox" id="todo1"/> <label for="todo1">create a mobile todo app</label> </fieldset> </div></div> jQuery Mobile Markup
  22. 22. DOM-Transformationdurch jQuery-Mobile
  23. 23. <input type="checkbox" id="todo1"/><label for="todo1">create a mobile todo app</label><div class="ui-checkbox"> <input type="checkbox" name="todo.done" id="todo1"> <label class="ui-btn ui-btn-up-c ui-btn-icon-left ui-btn-corner-all ui-checkbox-off" for="todo1" data-theme="c"> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-text">create a mobile todo app</span> <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span> </span> </label></div> jQuery Mobile Markup Transformation
  24. 24. <input type="checkbox" id="todo1"/><label for="todo1">create a mobile todo app</label><div class="ui-checkbox"> <input type="checkbox" name="todo.done" id="todo1"> <label class="ui-btn ui-btn-up-c ui-btn-icon-left ui-btn-corner-all ui-checkbox-off" for="todo1" data-theme="c"> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-text">create a mobile todo app</span> <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span> </span> </label></div> jQuery Mobile Markup Transformation
  25. 25. Two Way Data Binding
  26. 26. Manuelles Binding
  27. 27. $(#addTodo).submit(function(event) { addTodo(); event.preventDefault();});function addTodo() { var inputText = $(#inputText).val(); var list = $(#todos); var entryCount = list.find(input).length; list.append(entryTemplate(entryCount, inputText)); list.trigger(create); $(#inputText).val();}function entryTemplate(index, name) { var id = todo + index; return <input type="checkbox" id=" + id + "/> + <label for=" + id + "> + name + </label>;}
  28. 28. $(#addTodo).submit(function(event) { addTodo(); event.preventDefault();});function addTodo() { var inputText = $(#inputText).val(); var list = $(#todos); var entryCount = list.find(input).length; list.append(entryTemplate(entryCount, inputText)); list.trigger(create); $(#inputText).val();}function entryTemplate(index, name) { var id = todo + index; return <input type="checkbox" id=" + id + "/> + <label for=" + id + "> + name + </label>;}
  29. 29. $(#addTodo).submit(function(event) { addTodo(); event.preventDefault();});function addTodo() { var inputText = $(#inputText).val(); var list = $(#todos); var entryCount = list.find(input).length; list.append(entryTemplate(entryCount, inputText)); list.trigger(create); $(#inputText).val();}function entryTemplate(index, name) { var id = todo + index; return <input type="checkbox" id=" + id + "/> + <label for=" + id + "> + name + </label>;}
  30. 30. $(#addTodo).submit(function(event) { addTodo(); event.preventDefault();});function addTodo() { var inputText = $(#inputText).val(); var list = $(#todos); var entryCount = list.find(input).length; list.append(entryTemplate(entryCount, inputText)); list.trigger(create); $(#inputText).val();}function entryTemplate(index, name) { var id = todo + index; return <input type="checkbox" id=" + id + "/> + <label for=" + id + "> + name + </label>;}
  31. 31. $(#addTodo).submit(function(event) { addTodo(); event.preventDefault();});function addTodo() { var inputText = $(#inputText).val(); var list = $(#todos); var entryCount = list.find(input).length; list.append(entryTemplate(entryCount, inputText)); list.trigger(create); $(#inputText).val();}function entryTemplate(index, name) { var id = todo + index; return <input type="checkbox" id=" + id + "/> + <label for=" + id + "> + name + </label>;}
  32. 32. $(#addTodo).submit(function(event) { addTodo(); event.preventDefault();});function addTodo() { var inputText = $(#inputText).val(); var list = $(#todos); var entryCount = list.find(input).length; list.append(entryTemplate(entryCount, inputText)); list.trigger(create); $(#inputText).val();}function entryTemplate(index, name) { var id = todo + index; return <input type="checkbox" id=" + id + "/> + <label for=" + id + "> + name + </label>;}
  33. 33. $(#addTodo).submit(function(event) { addTodo(); event.preventDefault();});function addTodo() { var inputText = $(#inputText).val(); var list = $(#todos); var entryCount = list.find(input).length; list.append(entryTemplate(entryCount, inputText)); list.trigger(create); $(#inputText).val();}function entryTemplate(index, name) { var id = todo + index; return <input type="checkbox" id=" + id + "/> + <label for=" + id + "> + name + </label>;}
  34. 34. $(#addTodo).submit(function(event) { addTodo(); event.preventDefault();});function addTodo() { var inputText = $(#inputText).val(); var list = $(#todos); var entryCount = list.find(input).length; list.append(entryTemplate(entryCount, inputText)); list.trigger(create); $(#inputText).val();}function entryTemplate(index, name) { var id = todo + index; return <input type="checkbox" id=" + id + "/> + <label for=" + id + "> + name + </label>;}
  35. 35. Das Ziel sollte aber sein: function TodoController() { this.todos = []; this.inputText = ; this.addTodo = function() { this.todos.push({ name: this.inputText, done: false }); this.inputText = ; }; }
  36. 36. Angular JSDeclarative MVC withUI Templates Dependency InjectionTwo-Way FrameworkData Binding http://angularjs.org/#/
  37. 37. Two-Way Databinding read read write Data- writeDOM Controller binding watch watch
  38. 38. Scopes Scope Expressions $get(<expr>) inputText todos.length $set(<expr>, <value>) ...$watch(<expr>, <callback>)
  39. 39. Demo
  40. 40. Das Ziel ...function TodoController() { this.todos = []; this.inputText = ; this.addTodo = function() { this.todos.push({ name: this.inputText, done: false }); this.inputText = ; };}
  41. 41. Mit Angular ...function TodoController($scope) { $scope.todos = []; $scope.inputText = ; $scope.addTodo = function() { $scope.todos.push({ name: $scope.inputText, done: false }); $scope.inputText = ; };}TodoController.$inject = [$scope];
  42. 42. <div data-role="page" TodoController-Scope ng:controller="TodoController"> inputText: new todo erzeugt <input type="text" todos: [...] name="inputText" bindet bindet <div ng:repeat="todo in todos"> erzeugt Repeater Scope Repeater Scope Repeater Scope todo: { todo: todo: { { <input type="checkbox" value="todo.done"/> done: false done: false done: false bindet name: makemoney name: makemoney name: makemoney <label> {{todo.name}} } </label> bindet }}
  43. 43. jQuery Mobile und AngularJS Das Problem: Die DOM-Manipulationen von jQuery Mobile und AngularJS müssen koordiniert werden!
  44. 44. jQuery Mobile und AngularJS Die Lösung:jQuery Mobile Angular Adapter
  45. 45. jQuery Mobile Angular AdapterKoordination von jQuery Mobile und AngularJS Erweiterungen für mobile Web-Apps Open Source unter https://github.com/tigbro/ jquery-mobile-angular-adapter
  46. 46. Dependency Injection
  47. 47. Dependency Injection ist ein Entwurfsmuster und dient dazu, die Abhängigkeiten zwischen Komponenten zu minimieren. Es überträgt die Verantwortung für dasErzeugen und die Verknüpfung von Objekten an ein extern konfigurierbares Framework http://de.wikipedia.org/wiki/Dependency_Injection
  48. 48. Dependency Injection ist ein Entwurfsmuster und dient dazu, die Abhängigkeiten zwischen Komponenten zu minimieren. Es überträgt die Verantwortung für dasErzeugen und die Verknüpfung von Objekten an ein extern konfigurierbares Framework http://de.wikipedia.org/wiki/Dependency_Injection
  49. 49. Beispiel: Backend-Anbindung function refreshTodos() { var self = this; read(ToDoApp, function(response) { self.todos = response; }); }
  50. 50. Beispiel: Backend-Anbindung function refreshTodos() { var self = this; read(ToDoApp, function(response) { self.todos = response; }); }
  51. 51. 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(); }); }
  52. 52. 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(); }); }
  53. 53. 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(); }); }
  54. 54. Beispiel: Backend-Anbindung waitDialogtodoController todoStore key valuekey value key value ... ...refreshTodos ... read ...todoStore waitDialog jsonp jsonp key value ... ... created by Factories
  55. 55. Beispiel: Backend-Anbindung waitDialogtodoController todoStore key valuekey value key value ... ...refreshTodos ... read ...todoStore waitDialog jsonp jsonp key value ... ... created by Dependency Injection
  56. 56. Angular JSDeclarative MVC withUI Templates Dependency InjectionTwo-Way FrameworkData Binding http://angularjs.org/#/
  57. 57. Services und DI mit Angularfunction jsonpFactory() { // returns jsonp function // ...}function waitdialogFactory() { // returns waitdialog object // ...}
  58. 58. Services und DI mit Angularvar module = angular.module("todo", []);
  59. 59. Services und DI mit Angularvar module = angular.module("todo", []);module.factory(jsonp, jsonpFactory);module.factory(waitdialog, waitdialogFactory);
  60. 60. Services und DI mit Angularvar module = angular.module("todo", []);module.factory(jsonp, jsonpFactory);module.factory(waitdialog, waitdialogFactory);function todoStoreFactory(jsonp, waitdialog) { function read(key, success) { // use jsonp, waitdialog here } return { read: read };}
  61. 61. Services und DI mit Angularvar module = angular.module("todo", []);module.factory(jsonp, jsonpFactory);module.factory(waitdialog, waitdialogFactory);function todoStoreFactory(jsonp, waitdialog) { function read(key, success) { // use jsonp, waitdialog here } return { read: read };}todoStoreFactory.$inject = [jsonp, waitdialog];
  62. 62. Services und DI mit Angularvar module = angular.module("todo", []);module.factory(jsonp, jsonpFactory);module.factory(waitdialog, waitdialogFactory);function todoStoreFactory(jsonp, waitdialog) { // ...}todoStoreFactory.$inject = [jsonp, waitdialog];module.factory(todoStore, todoStoreFactory);
  63. 63. Controller und DI mit Angularfunction TodoController($scope, todoStore) { ...}TodoController.$inject = [$scope, todoStore];module.controller("rylc.TodoController", TodoController);
  64. 64. Controller und DI mit Angularfunction TodoController($scope, todoStore) { ...}TodoController.$inject = [$scope, todoStore];module.controller("rylc.TodoController", TodoController);
  65. 65. Controller und DI mit Angularfunction TodoController($scope, todoStore) { ...}TodoController.$inject = [$scope, todoStore];module.controller("rylc.TodoController", TodoController);
  66. 66. jQuery Mobile Angular AdapterKoordination von jQuery Mobile und AngularJS Erweiterungen für mobile Web-Apps Open Source unter https://github.com/tigbro/ jquery-mobile-angular-adapter
  67. 67. jQuery Mobile Angular Adapter Mobile Events
  68. 68. <div id="main" data-role="page" ng:controller="TodoController" ngm:pagebeforeshow="refreshTodos()"> ...</div> Unterstütze Events: click swipe pagebeforeshow swiperight pageshow swipeleft pagebeforehide tap pagehide taphold
  69. 69. jQuery Mobile Angular Adapter Shared Controller
  70. 70. LoginPage<div id="loginPage" Scope ng-controller="LoginController"> login <a ngm:click="login()">
  71. 71. LoginPage<div id="loginPage" Scope ng-controller="LoginController"> login <a ngm-click="login()"><div id="welcomePage" WelcomePage ng-controller="WelcomeController"> Scope logout <a ngm-click="logout()">
  72. 72. LoginPage<div id="loginPage" Scope ngm-shared-controller= Authentication- "auth:AuthenticationController"> auth Controller Scope <a ngm-click="login()"> login logout<div id="welcomePage" WelcomePage ngm-shared-controller= Scope "auth:AuthenticationController"> auth <a ngm-click="logout()">
  73. 73. LoginPage<div id="loginPage" Scope ngm-shared-controller= Authentication- "auth:AuthenticationController"> auth Controller Scope <a ngm-click="auth.login()"> login logout<div id="welcomePage" WelcomePage ngm-shared-controller= Scope "auth:AuthenticationController"> auth <a ngm-click="auth.logout()">
  74. 74. jQuery Mobile Angular Adapter Wait Dialog
  75. 75. waitDialog.show(loading);waitDialog.hide();waitDialog.show(click to abort, onClickCallback);
  76. 76. Fazit Auch bei der Entwicklung von JavaScript Clientssollten geeignete Entwurfsmuster angewendet werden!
  77. 77. FazitBibliotheken und Frameworks helfen bei der Umsetzung!
  78. 78. FazitEine praxiserprobte Kombination für die Entwicklung mobiler Web-Apps: jQuery Mobile + AngularJS + jQuery Mobile Angular Adapter
  79. 79. In the hive 11: nectar and pollen by Max xx, http://www.flickr.com/photos/max_westby/4567762490 BooksBy 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/ MacBook Pro Keyboardby superstrikertwo, http://www.flickr.com/photos/superstrikertwo/4989727256/ Stubborn Last Drop by RogueSun Media, http://www.flickr.com/photos/shuttercat7/627798443/
  80. 80. Vielen Dankfür Ihr Interesse! @stefanscheidt
  81. 81. www.opitz-consulting.com/go_mobile

×