Angularjs with jQuery Mobile

When I first discovered Angular.js I was already working with jQuery Mobile, and I wondered how well the two would play together. Out of the box, the two wouldn’t play very nicely together, but it is now possible with the jquery-mobile-angular-adapter brought to us by Tobias Bosch.

For a more advanced demo, check this. Below is a very simple demonstration of some more popular jQuery Mobile widgets.

Here’s a couple important things to note about using this plugin. First, include it after the other scripts. Second, since jQuery Mobile takes some time to get the page ready, do not use ng:autobind! The plugin will take care of binding things at the appropriate time.

View it in action: http://jacobmumm.com/demos/angular-jqm.html

Note: all scripts/css are pulled from the web except the plugin itself which I put in the same directory as the html file.

<!doctype html>
<html>
<head>
 <title>Angularjs with JQuery Mobile</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
 <script src="http://code.angularjs.org/0.9.19/angular-0.9.19.min.js"></script>
 <script src="jquery-mobile-angular-adapter.js"></script>
</head>
<body>
<div data-role="page" id="formpage" ng:controller="FormController">
 <div data-role="header"><h1>JQuery Mobile/Angular</h1></div>
 <div data-role="content">
  <div data-role="fieldcontain">
   <label>Text</label>
   <input type="text" name="form.text"/>
  </div>
  <div data-role="fieldcontain">
   <select name="form.type">
    <option>Select Type</option>
    <option value="1">Type One</option>
    <option value="2">Type Two</option>
   </select>
  </div>
  <div data-role="fieldcontain">
   <label>Number of Things</label>
   <input type="range" name="form.num_things" min="0" max="10" value="0"/>
  </div>
  <div data-role="fieldcontain">
   <fieldset data-role="controlgroup">
   <legend>Which of the following apply?</legend>
    <input type="radio" name="form.options" id="form.options_a" value="a"/>
    <label for="form.options_a">A</label>
    <input type="radio" name="form.options" id="form.options_b" value="b"/>
    <label for="form.options_b">B</label>
    <input type="radio" name="form.options" id="form.options_c" value="c"/>
    <label for="form.options_c">C</label>
    <input type="radio" name="form.options" id="form.options_d" value="d"/>
    <label for="form.options_d">D</label>
   </fieldset>
  </div>
  <div data-role="fieldcontain">
   <label for="gusta">Me Gusta?</label>
   <select name="form.gusta" data-role="slider">
    <option value="no">No</option>
    <option value="si">Si</option>
   </select>
  </div>
 </div>
 <pre>form={{form}}</pre>
</div>
<script>
function FormController(){
 this.form = {};
}
</script>
</body>
</html>
This entry was posted in Javascript and tagged , . Bookmark the permalink.

Comments are closed.