Tobias	  Bosch	  &	  Stefan	  Scheidt	  /	  OPITZ	  CONSULTING	  GmbH	  JavaScript	  Data	  Binding	  mit	  jQuery	  Mobil...
Wer	  sind	  wir?	   tobias.bosch@opitz-­‐consulQng.com	                (@Qgbro)	                   	  stefan.scheidt@opit...
Märkte                             Kunden                                               Leistungs-              Fakten    ...
Wer	  sind	  Sie?	  
In	  diesem	  Vortrag	  geht‘s	  um...	                       	  ...die	  Entwicklung	  testbarer	  und	    wartbarer	  mo...
Unser	  Beispiel	  
Unser	  Beispiel...	  
Mobile	  Web-­‐Apps	  
Architektur	  
"MulQ	  Page	  Web	  App"	  Browser	                                            Server	                  HTML-­‐Page	     ...
"AJAX	  Web	  App"	  Browser	                                     Server	                 Change	   AJAX-­‐	              ...
"Single	  Page	  Web	  App"	      Browser	                   Server	     Controller	     Data	     Backend	  
Bibliotheken	  
jQuery	  Mobile	   h=p://jquerymobile.com/	  
Noch	  einmal	  unser	  Beispiel...	  
<div	  id="main"	  data-­‐role="page">	  	  	  <div	  data-­‐role="header">	  	  	  	  	  <h1>Todos</h1>	  	  	  	  	  <a	...
<div	  id="main"	  data-­‐role="page">	  	  	  <div	  data-­‐role="header">	  	  	  	  	  <h1>Todos</h1>	  	  	  	  	  <a	...
<div	  id="main"	  data-­‐role="page">	  	  	  <div	  data-­‐role="header">	  	  	  	  	  <h1>Todos</h1>	  	  	  	  	  <a	...
<div	  id="main"	  data-­‐role="page">	  	  	  <div	  data-­‐role="header">	  	  	  	  	  <h1>Todos</h1>	  	  	  	  	  <a	...
<div	  id="main"	  data-­‐role="page">	  	  	  <div	  data-­‐role="header">	  	  	  	  	  <h1>Todos</h1>	  	  	  	  	  <a	...
<div	  id="main"	  data-­‐role="page">	  	  	  <div	  data-­‐role="header">	  	  	  	  	  <h1>Todos</h1>	  	  	  	  	  <a	...
DOM-­‐TransformaQon	  durch	  jQuery	  Mobile	  
V            orhe<input	  type="checkbox"	  id="todo1"/>	                                                                 ...
<input	  type="checkbox"	  id="todo1"/>	  <label	  for="todo1">create	  a	  mobile	  todo	  app</label>	  	  	            ...
Manuelles	  Binding	  
$(#addTodo).submit(function(event)	  {	  	  	  	  	  addTodo();	  	  	  	  	  event.preventDefault();	  });	  	  function	...
$(#addTodo).submit(function(event)	  {	  	  	  	  	  addTodo();	  	  	  	  	  event.preventDefault();	  });	  	  function	...
$(#addTodo).submit(function(event)	  {	  	  	  	  	  addTodo();	  	  	  	  	  event.preventDefault();	  });	  	  function	...
$(#addTodo).submit(function(event)	  {	  	  	  	  	  addTodo();	  	  	  	  	  event.preventDefault();	  });	  	  function	...
$(#addTodo).submit(function(event)	  {	  	  	  	  	  addTodo();	  	  	  	  	  event.preventDefault();	  });	  	  function	...
$(#addTodo).submit(function(event)	  {	  	  	  	  	  addTodo();	  	  	  	  	  event.preventDefault();	  });	  	  function	...
$(#addTodo).submit(function(event)	  {	  	  	  	  	  addTodo();	  	  	  	  	  event.preventDefault();	  });	  	  function	...
$(#addTodo).submit(function(event)	  {	  	  	  	  	  addTodo();	  	  	  	  	  event.preventDefault();	  });	  	  function	...
Das	  Ziel	  ist	  aber:	  function	  TodoController()	  {	  	  	  	  	  this.todos	  =	  [];	  	  	  	  	  this.inputText...
Angular	  JS	  DeclaraQve	                             MVC	  with	  UI	  Templates	                        Dependency	  In...
Two-­‐Way	  Databinding	              read	                    read	              write	      Data-­‐      write	  DOM	   ...
Scopes	                                            Scope	                                                           Expres...
<div	  id="main"	  data-­‐role="page">	  	  	  <div	  data-­‐role="header">	  	  	  	  	  <h1>Todos</h1>	  	  	  	  	  <a	...
function	  TodoController()	  {	  	  	  	  	  this.todos	  =	  [];	  	  	  	  	  this.inputText	  =	  ;	  }	  	  TodoContr...
<div	  data-­‐role="page"	                                             	  TodoController-­‐Scope	  	  	  	  	  	  ng:contr...
Damit	  ist	  das	  Ziel	  fast	  erreicht...	  
Die	  DOM-­‐ManipulaQonen	  von	        jQuery	  Mobile	  und	  Angular	  JS	  müssen	  "nur	  noch"	  koordiniert	  werde...
Dazu	  später	  mehr!	  
Angular	  JS	  DeclaraQve	                             MVC	  with	  UI	  Templates	                        Dependency	  In...
Backend-­‐Anbindung	  var	  readUrl	  =	  https://secure.openkeyval.org/;	  var	  jsonp	  =	  ...;	  var	  waitdialog	  =	...
Backend-­‐Anbindung	  var	  readUrl	  =	  https://secure.openkeyval.org/;	  var	  jsonp	  =	  ...;	  var	  waitdialog	  =	...
Backend-­‐Anbindung	  var	  readUrl	  =	  https://secure.openkeyval.org/;	  var	  jsonp	  =	  ...;	  var	  waitdialog	  =	...
Services	  und	  DI	  mit	  Angular	  angular.service(jsonp,	  jsonpFactory);	  angular.service(waitdialog,	  waitdialogFa...
Services	  und	  DI	  mit	  Angular	  angular.service(jsonp,	  jsonpFactory);	  angular.service(waitdialog,	  waitdialogFa...
Services	  und	  DI	  mit	  Angular	  angular.service(jsonp,	  jsonpFactory);	  angular.service(waitdialog,	  waitdialogFa...
Services	  und	  DI	  mit	  Angular	  angular.service(jsonp,	  jsonpFactory);	  angular.service(waitdialog,	  waitdialogFa...
Di	  für	  Controller	  function	  TodoController(todoStore)	  {	  	  	  ...	  }	  	  TodoController.$inject	  =	  [todoSt...
Di	  für	  Controller	  function	  TodoController(todoStore)	  {	  	  	  ...	  }	  	  TodoController.$inject	  =	  [todoSt...
Di	  für	  Controller	  function	  TodoController(todoStore)	  {	  	  	  ...	  }	  	  TodoController.$inject	  =	  [todoSt...
One	  more	  thing...	                 	  IntegraQon	  von	  AngularJS	      und	  jQuery	  Mobile	  
jquery-­‐mobile-­‐angular-­‐adapter	  KoordinaQon	  von	  jQuery	  Mobile	  und	  Angular	  JS	                           ...
Paging	  in	  Listen	  <div	  ng:repeat=	  	  	  	  	  	  	  	  	  	  	  	  	  "todo	  in	  todos.$paged()">	             ...
Paging	  in	  Listen	  <div	  ng:repeat=	  	  	  	  	  	  	  	  	  	  	  	  	  "todo	  in	  todos.$paged()">	             ...
Paging	  in	  Listen	  <div	  ng:repeat=	  	  	  	  	  	  	  	  	  	  	  	  	  "todo	  in	  todos.$paged()">	             ...
Mobile	  Events	  <div	  id="main"	  data-­‐role="page"	  	  	  	  	  	  	  	  ng:event="swipeleft:showSettings()">	  	  	...
NavigaQon	  über	  Pages	  function	  TodoController(todoStore,	  activePage)	  {	  ...	  }	  	  TodoController.prototype	...
NavigaQon	  über	  Pages	  function	  TodoController(todoStore,	  activePage)	  {	  ...	  }	  	  TodoController.prototype	...
NavigaQon	  über	  Pages	  function	  TodoController(todoStore,	  activePage)	  {	  ...	  }	  	  TodoController.prototype	...
Wait-­‐Dialog	  Service	  waitDialog.show(loading);	  	  waitDialog.hide();	  waitDialog.show(click	  to	  abort,	  	     ...
Fazit	       Auch	  bei	  der	  Entwicklung	  	        von	  JavaScript	  Clients	  sollten	  geeignete	  Entwurfsmuster	 ...
Fazit	  Bibliotheken	  und	  Frameworks	    helfen	  bei	  der	  Umsetzung!	                       	  
Fazit	  Eine	  praxiserprobte	  KombinaQon:	                         	               jQuery	  Mobile	                 +	  ...
In	  the	  hive	  11:	  nectar	  and	  pollen	           by	  Max	  xx,	  hep://www.flickr.com/photos/max_westby/4567762490...
Vielen	  Dank	  für	  Ihr	  Interesse!	            	         @Qgbro	        @beezlebug	  
Java script data binding mit jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Java script data binding mit jQuery Mobile

1,596

Published on

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 und vereinfacht den Code dadurch deutlich. Der Vortrag erläutert das Konzept und verdeutlicht die Vorteile an einem Beispiel unter Einsatz von AngularJS und jQuery Mobile.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,596
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Java script data binding mit jQuery Mobile

  1. 1. Tobias  Bosch  &  Stefan  Scheidt  /  OPITZ  CONSULTING  GmbH  JavaScript  Data  Binding  mit  jQuery  Mobile  
  2. 2. Wer  sind  wir?   tobias.bosch@opitz-­‐consulQng.com   (@Qgbro)    stefan.scheidt@opitz-­‐consulQng.com   (@beezlebug)    
  3. 3. Märkte Kunden Leistungs- Fakten angebotn Java n Branchen- n IT-Strategie n Gründung 1990n SOA übergreifend n Beratung n 400 Mitarbeitern ORACLE n Über 600 n Implementierung n 8 Standorte in D/n BI/DWH Kunden n Betrieb PLn Outtasking n Training Industrie / Versorger / Handel / Logistik / Telekommunikation Dienstleistungen 29% 29% 42% Öffentliche Auftraggeber / Banken & Versicherungen / Vereine & Verbände Das Bild kann nicht angezeigt werden. Dieser Computer verfügt möglicherweise über zu wenig Arbeitsspeicher, um das Bild zu öffnen, oder das © OPITZ CONSULTING GmbH 2011 Seite 3
  4. 4. Wer  sind  Sie?  
  5. 5. In  diesem  Vortrag  geht‘s  um...    ...die  Entwicklung  testbarer  und   wartbarer  mobiler  Web-­‐Apps  
  6. 6. Unser  Beispiel  
  7. 7. Unser  Beispiel...  
  8. 8. Mobile  Web-­‐Apps  
  9. 9. Architektur  
  10. 10. "MulQ  Page  Web  App"  Browser   Server   HTML-­‐Page   Controller   Data   Backend   UI  Values  
  11. 11. "AJAX  Web  App"  Browser   Server   Change   AJAX-­‐   Controller   Ba Data   Engine   Events  
  12. 12. "Single  Page  Web  App"   Browser   Server   Controller   Data   Backend  
  13. 13. Bibliotheken  
  14. 14. jQuery  Mobile   h=p://jquerymobile.com/  
  15. 15. Noch  einmal  unser  Beispiel...  
  16. 16. <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  
  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-­‐TransformaQon  durch  jQuery  Mobile  
  23. 23. V orhe<input  type="checkbox"  id="todo1"/>   r  <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  TransformaIon  
  24. 24. <input  type="checkbox"  id="todo1"/>  <label  for="todo1">create  a  mobile  todo  app</label>       Nach<div  class="ui-­‐checkbox">   her      <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  TransformaIon  
  25. 25. Manuelles  Binding  
  26. 26. $(#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);          $(#input).val();  }    function  entryTemplate(index,  name)  {          var  id  =  todo  +  index;          return  <input  type="checkbox"  id="  +  id  +  "/>  +                        <label  for="  +  id  +  ">  +  name  +  </label>;  }  
  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);          $(#input).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);          $(#input).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);          $(#input).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);          $(#input).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);          $(#input).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);          $(#input).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);          $(#input).val();  }    function  entryTemplate(index,  name)  {          var  id  =  todo  +  index;          return  <input  type="checkbox"  id="  +  id  +  "/>  +                        <label  for="  +  id  +  ">  +  name  +  </label>;  }  
  34. 34. Das  Ziel  ist  aber:  function  TodoController()  {          this.todos  =  [];          this.inputText  =  ;  }    TodoController.prototype  =  {          addTodo:  function()  {                  this.todos.push({      name:  this.inputText,        done:  false      });                  this.inputText  =  ;          }  }  
  35. 35. Angular  JS  DeclaraQve   MVC  with  UI  Templates   Dependency  InjecQon  Two-­‐Way   Framework  Data  Binding   h=p://angularjs.org/#/  
  36. 36. Two-­‐Way  Databinding   read   read   write   Data-­‐ write  DOM   Controller   binding   watch   watch  
  37. 37. Scopes   Scope   Expressions   $get(<expr>)   inputText   todos.length   $set(<expr>,  <value>)   Object   ...  $watch(<expr>,  <callback>)  
  38. 38. <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>   Das  DOM  
  39. 39. function  TodoController()  {          this.todos  =  [];          this.inputText  =  ;  }    TodoController.prototype  =  {          addTodo:  function()  {                  this.todos.push({      name:  this.inputText,        done:  false      });                  this.inputText  =  ;          }  }   Der  Controller  
  40. 40. <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  SScope   Repeater  cope         Repeater  Scope         todo:  {   todo:  {   todo:  {   <input  type="checkbox"                      name="todo.done"/>          done:  false          done:  false          done:  false   bindet                name:  makemoney          name:  makemoney          name:  makemoney   <label>            {{todo.name}}   </label>   bindet   }  }  }  
  41. 41. Damit  ist  das  Ziel  fast  erreicht...  
  42. 42. Die  DOM-­‐ManipulaQonen  von   jQuery  Mobile  und  Angular  JS  müssen  "nur  noch"  koordiniert  werden.  
  43. 43. Dazu  später  mehr!  
  44. 44. Angular  JS  DeclaraQve   MVC  with  UI  Templates   Dependency  InjecQon  Two-­‐Way   Framework  Data  Binding   h=p://angularjs.org/#/  
  45. 45. Backend-­‐Anbindung  var  readUrl  =  https://secure.openkeyval.org/;  var  jsonp  =  ...;  var  waitdialog  =  ...;    function  read(key,  success)  {          var  url  =  readUrl  +  key;          waitdialog.show();          jsonp(url,  function(data)  {                  success(data);                  waitdialog.hide();                          });  }  
  46. 46. Backend-­‐Anbindung  var  readUrl  =  https://secure.openkeyval.org/;  var  jsonp  =  ...;  var  waitdialog  =  ...;    function  read(key,  success)  {          var  url  =  readUrl  +  key;          waitdialog.show();          jsonp(url,  function(data)  {                  success(data);                  waitdialog.hide();                          });  }  
  47. 47. Backend-­‐Anbindung  var  readUrl  =  https://secure.openkeyval.org/;  var  jsonp  =  ...;  var  waitdialog  =  ...;    function  read(key,  success)  {          var  url  =  readUrl  +  key;          waitdialog.show();          jsonp(url,  function(data)  {                  success(data);                  waitdialog.hide();                          });  }  
  48. 48. Services  und  DI  mit  Angular  angular.service(jsonp,  jsonpFactory);  angular.service(waitdialog,  waitdialogFactory);    function  todoStoreFactory(jsonp,  waitdialog)  {          function  read(...)  {  ...  }          function  write(...)  {  ...  }          return  {                  read:  read,                  write:  write          }  }    todoStoreFactory.$inject  =  [jsonp,  waitdialog];  angular.service(todostore,  todoStoreFactory);  
  49. 49. Services  und  DI  mit  Angular  angular.service(jsonp,  jsonpFactory);  angular.service(waitdialog,  waitdialogFactory);    function  todoStoreFactory(jsonp,  waitdialog)  {          function  read(...)  {  ...  }          function  write(...)  {  ...  }          return  {                  read:  read,                  write:  write          }  }    todoStoreFactory.$inject  =  [jsonp,  waitdialog];  angular.service(todostore,  todoStoreFactory);  
  50. 50. Services  und  DI  mit  Angular  angular.service(jsonp,  jsonpFactory);  angular.service(waitdialog,  waitdialogFactory);    function  todoStoreFactory(jsonp,  waitdialog)  {          function  read(...)  {  ...  }          function  write(...)  {  ...  }          return  {                  read:  read,                  write:  write          }  }    todoStoreFactory.$inject  =  [jsonp,  waitdialog];  angular.service(todostore,  todoStoreFactory);  
  51. 51. Services  und  DI  mit  Angular  angular.service(jsonp,  jsonpFactory);  angular.service(waitdialog,  waitdialogFactory);    function  todoStoreFactory(jsonp,  waitdialog)  {          function  read(...)  {  ...  }          function  write(...)  {  ...  }          return  {                  read:  read,                  write:  write          }  }    todoStoreFactory.$inject  =  [jsonp,  waitdialog];  angular.service(todostore,  todoStoreFactory);  
  52. 52. Di  für  Controller  function  TodoController(todoStore)  {      ...  }    TodoController.$inject  =  [todoStore];  
  53. 53. Di  für  Controller  function  TodoController(todoStore)  {      ...  }    TodoController.$inject  =  [todoStore];  
  54. 54. Di  für  Controller  function  TodoController(todoStore)  {      ...  }    TodoController.$inject  =  [todoStore];  
  55. 55. One  more  thing...    IntegraQon  von  AngularJS   und  jQuery  Mobile  
  56. 56. jquery-­‐mobile-­‐angular-­‐adapter  KoordinaQon  von  jQuery  Mobile  und  Angular  JS     Erweiterungen  für  mobile  Web-­‐Apps     Open  Source  unter     heps://github.com/Qgbro/   jquery-­‐mobile-­‐angular-­‐adapter  
  57. 57. Paging  in  Listen  <div  ng:repeat=                          "todo  in  todos.$paged()">    ...  </div>    <div  ng:if=            "todos.$paged().hasMorePages()">        <a  href="#"  ngm:click=            "todos.$paged().loadNextPage()">                        Load  more        </a>  </div>  
  58. 58. Paging  in  Listen  <div  ng:repeat=                          "todo  in  todos.$paged()">    ...  </div>    <div  ng:if=            "todos.$paged().hasMorePages()">        <a  href="#"  ngm:click=            "todos.$paged().loadNextPage()">                        Load  more        </a>  </div>  
  59. 59. Paging  in  Listen  <div  ng:repeat=                          "todo  in  todos.$paged()">    ...  </div>    <div  ng:if=            "todos.$paged().hasMorePages()">        <a  href="#"  ngm:click=            "todos.$paged().loadNextPage()">                        Load  more        </a>  </div>  
  60. 60. Mobile  Events  <div  id="main"  data-­‐role="page"                ng:event="swipeleft:showSettings()">          ...  </div>      <div  id="settings"  data-­‐role="page"              ng:event="swiperight:back()">          ...  </div>    
  61. 61. NavigaQon  über  Pages  function  TodoController(todoStore,  activePage)  {  ...  }    TodoController.prototype  =  {          onActivate:  function(prevscope)  {                  if  (prevscope  &&  prevscope.storageKey)  {                          this.storageKey  =  prevscope.storageKey;                          this.refreshTodos();                  }          },          showSettings:  function()  {                  this.activePage("#settings");          }  };  
  62. 62. NavigaQon  über  Pages  function  TodoController(todoStore,  activePage)  {  ...  }    TodoController.prototype  =  {          onActivate:  function(prevscope)  {                  if  (prevscope  &&  prevscope.storageKey)  {                          this.storageKey  =  prevscope.storageKey;                          this.refreshTodos();                  }          },          showSettings:  function()  {                  this.activePage("#settings");          }  };  
  63. 63. NavigaQon  über  Pages  function  TodoController(todoStore,  activePage)  {  ...  }    TodoController.prototype  =  {          onActivate:  function(prevscope)  {                  if  (prevscope  &&  prevscope.storageKey)  {                          this.storageKey  =  prevscope.storageKey;                          this.refreshTodos();                  }          },          showSettings:  function()  {                  this.activePage("#settings");          }  };  
  64. 64. Wait-­‐Dialog  Service  waitDialog.show(loading);    waitDialog.hide();  waitDialog.show(click  to  abort,      onClickCallback);  
  65. 65. Fazit   Auch  bei  der  Entwicklung     von  JavaScript  Clients  sollten  geeignete  Entwurfsmuster   angewendet  werden!    
  66. 66. Fazit  Bibliotheken  und  Frameworks   helfen  bei  der  Umsetzung!    
  67. 67. Fazit  Eine  praxiserprobte  KombinaQon:     jQuery  Mobile   +  AngularJS   +  Adapter    
  68. 68. In  the  hive  11:  nectar  and  pollen   by  Max  xx,  hep://www.flickr.com/photos/max_westby/4567762490     Books  By  Rodrigo  Galindez,  hep://www.flickr.com/photos/rodrigogalindez/4637637337/    
  69. 69. Vielen  Dank  für  Ihr  Interesse!     @Qgbro   @beezlebug  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×