{"type":"rich","version":"1.0","title":"JQuery Mobile with AngularJS and AngularJS-Route\n\nhttp://www.outbottle.com\n\nhttp://outbottle.com/jquery-mobile-with-angularjs-and-angular-route-ngroute/\n\nThe following details how JQuery-Mobile and AngularJS can play together seamlessly. Angular-Route (ngRoute) is used for navigation. A simple Angular directive invokes JQuery-Mobile styling and enhancements as each page is loaded. This includes pages loaded via ng-include\n\nRouting\n\nAngular-Route performs all navigation. JQuery-Mobile's navigation is turned off. As per the JQuery-Mobile documentation here #Hash-URL-listening is turned off along with link-binding. Now JQuery-Mobile will not respond to #hash URL changes, it will also not respond to link click events. Both of these features are now handled by AngularJS ngRoute.\n\nBinding\n\nThe jqm  directive responds to the presence (or arrival to be more accurate) of any element with attribute jqm  by invoking element.trigger('create');  immediately after AngularJS is finished binding. Angular's $timeout  is used to wait until after Angular has finished rendering/binding before .trigger('create') is invoked. Note the wait time may need to be increased if necessary.\n\nThis technique allows for content to be dynamically added to the DOM with JQuery-Mobile styling etc taken care of automatically.\n\nFor example\n\nngInclude  is used in \"create.html \" and \"edit.html \". The contents to be included, i.e. \"form.html \" has the jqm  attribute so it too is subject to the directive which applies JQuery-Mobile styling once AngularJS has finished rendering/binding.\n\n<div ng-include=\"'form.html'\"></div>\n\njqm Directive\n\nngApp.directive('jqm', function($timeout) {\n  return {\n    link: function(scope, elm, attr) {\n        $timeout(function(){\n            elm.trigger('create');\n        });\n    }\n  };\n});\nApplication Example\n\nThe demo application at http://plnkr.co/edit/RPbJfWX84XkzWlvPFMvX?p=info is a very basic CRUD simulation. Even the AJAX calls are simulated.\n\nThere is an array of \"people\" objects, \"personArray\", which is displayed initially as a list in \"list.html \". The application allows for viewing a person, editing a person and deleting a person.\n\nAJAX\n\nThere is no AJAX in the application but AJAX calls are simulated using setTimeout. This is simply to demonstrate how binding and rendering would apply in an AJAX environment.\n\nThe only notable point on this is in the listController . $('ul.ngRepeat').listview('refresh');  is required to redraw the list after binding. This is not an AngularJS Vs. JQuery-Mobile quirk or some limitation of using Angular with JQuery-Mobile. It is a feature of JQuery-Mobile. It is something that simply must be done when using JQuery-Mobile with JSON/AJAX.\n\nThe application is hosted on Plunker http://plnkr.co/edit/RPbJfWX84XkzWlvPFMvX?p=info The inspiration for the solution comes from this Plunker http://plnkr.co/edit/dThXNX?p=preview by http://plnkr.co/users/caiotoon\n\nConclusion\n\nA means of integrating JQuery-Mobile with AnguarJS and Angular-Route has been demonstrated. A worked example is available on Plunker here.\n\nNavigation responsibility is taken from JQuery-Mobile and delegated to ngRoute. This could generally be considered advantageous.\n\nA reusable angular directive to integrate the two has been provided. This directive needs no modification to work (consider $timeout  wait time if issues arise), it simply sits in the background and executes to apply JQuery-Mobile styling after angular has bound/rendered following each page load event.\n\nComments, questions and critique always welcome.\n\nReference\n\nPlunker http://plnkr.co/edit/dThXNX?p=preview by http://plnkr.co/users/caiotoon","author_name":"John Ralston","author_url":"https://plnkr.co/users/JohnOutbottle","provider_name":"Plunker","provider_url":"https://plnkr.co","html":"<iframe id=\"plnkr_embed_RPbJfWX84XkzWlvPFMvX\" class=\"plnkr_embed_iframe\" style=\"width: 100%; overflow: hidden;\" src=\"https://embed.plnkr.co/plunk/RPbJfWX84XkzWlvPFMvX?autoCloseSidebar&deferRun&show=preview\" width=\"600\" height=\"400\" frameborder=\"0\" scrolling=\"no\"></iframe>","width":600,"height":400,"thumbnail_url":"https://shot.plnkr.co/RPbJfWX84XkzWlvPFMvX.png?d=2015-02-23T21%3A54%3A23.071Z","thumbnail_width":400,"thumbnail_height":300}