[SOLVED] AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing

  • Now that it’s functionally complete, I’d like to style it up using jQuery Mobile.
  • I’m not after any fancy screen transitions or page management features in jQuery Mobile – I just want to use it for styling the application and let AngularJS handle the rest.
  • I read this post, which has the same goal in mind, albeit with another framework, and contains a code snippet to disable the jQuery Mobile routing.
  • I’ve applied that snippet to my application in this order of script loading, just before the close body tag:

    This snippet placement is the only one that works, or somewhat works anyway, in that anything in my index loads styled properly (header and main nav, basically), and my AngularJS routes work just fine, but any dynamically loaded templates that populate my ng-view, despite having jQuery Mobile data-roles (ul as listview, etc.), are not styled by jQuery Mobile; they’re just plain HTML.

  • My index HTML structure looks like this:

    And here’s an example of one of my templates:

I ended up putting together this directive:

angular.module(‘myApp.directives’, []).
directive(‘applyJqMobile’, function() {
return function($scope, el) {
setTimeout(function(){$scope.$on(‘$viewContentLoaded’, el.trigger(“create”))},1);
}
});

Then inside of each template, wrap the template content in a div and apply the directive there, i.e.:

<div ng-controller=”MyController” apply-jq-mobile>
<!– Template Content to be jQ Mobilezed –>
</div>

This works, but because of the setTimeout, the content flashes for a split second when loading. I’m still working on figuring how how to get rid of the flash.

To note, without the setTimeout in place, the data-role=”listview” wouldn’t be styled (I’m guessing since it had to be populated by ng-repeat still), but any static content in the view was styled.


@gaggigger: AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing – Used For UI Styling Only- Angular.js Recipes

I am learning AngularJS and have built a small application. Now that it’s functionally complete, I’d like to style it up using jQuery Mobile.

Originally I dropped in tigbro’s jquery-mobile-angular-adapter, but ultimately decided it was more complicated and involved than I needed. I’m not after any fancy screen transitions or page management features in jQuery Mobile – I just want to use it for styling the application and let AngularJS handle the rest.

I read this post, which has the same goal in mind, albeit with another framework, and contains a code snippet to disable the jQuery Mobile routing.

I’ve applied that snippet to my application in this order of script loading, just before the close body tag:

This snippet placement is the only one that works, or somewhat works anyway, in that anything in my index loads styled properly (header and main nav, basically), and my AngularJS routes work just fine, but any dynamically loaded templates that populate my ng-view, despite having jQuery Mobile data-roles (ul as listview, etc.), are not styled by jQuery Mobile; they’re just plain HTML.

Does anyone have an idea as to how I could get those dynamically loaded templates to also be styled?

My index HTML structure looks like this:

And here’s an example of one of my templates:

Thank you!

I ended up putting together this directive:

Then inside of each template, wrap the template content in a div and apply the directive there, i.e.:

This works, but because of the setTimeout, the content flashes for a split second when loading. I’m still working on figuring how how to get rid of the flash.

To note, without the setTimeout in place, the data-role=”listview” wouldn’t be styled (I’m guessing since it had to be populated by ng-repeat still), but any static content in the view was styled.

For me this worked:

html:

js:

for jqm pages and lists for me worked:

For pages:

and for the list:

I’m pretty much working on the same thing (no jqm angular adapter). Here’s my directive that gets triggered after the last element of the repeat:

and here’s part of my view that uses it:

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.