Recent news

Friday, 29 April 2016

AngularJs Adaptor For jQuery Mobile FrameWork



jQuery mobile angular adapter is a jquery plugin for jquery mobile. This plugin help to use of angular js in your jquery mobile framework.
This plugin have three dependencies

  • Angular 1.0.6
  • jQuery 1.8+
  • jQuery mobile 1.3.1 Final

How To Use

1. Add the below mention library reference

<link href="lib/jquery.mobile.css" rel="stylesheet"></link>
<script src="lib/jquery.js"></script>
<script src="lib/jquery.mobile.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/jquery-mobile-angular-adapter.js"></script>


2. Now create a new index.html file and add the below code. 

<link href="lib/jquery.mobile.css" rel="stylesheet"></link>
<script data-main="main.js" src="lib/requirejs.js"></script>


3. Add the below mention code in your main.js file to use angularJs in your jQuery mobile
   
require.config({
        shim:{
            'angular':{ deps:['jquery'], exports:'angular'}
        }
    });
    function tryHoldReady() {
        if (!tryHoldReady.executed && window.jQuery) {
            window.jQuery.holdReady(true);
            tryHoldReady.executed = true;
        }
    }
    tryHoldReady();
    require.onResourceLoad = tryHoldReady;
    require([
      "jquery",
      "jquery-mobile-angular-adapter",
      ... // your controllers, angular modules, ...
    ], function (jquery) {
        jquery.holdReady(false);
    });





Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles