Add Documentation (Suggestions/Hints) for Phonegap Integration

[jvanalst]

Seems to be a fairly common use case flipping through the issues. There seems to be enough little gotchas that adding a Phonegap/Cordova hint section to the documentation might be a good idea.

I noticed that besides having to fix a bunch of absolute links (href="#!/index.html instead of href="/index.html#!/index.html") in the actual documents, I also had to make sure the start page was actually /index.html and not /.

Additionally for whatever reason the base tag that get created in chrome wasn't getting created in iOS causing the initial page load to error. I tried about three different things to resolve it because I figured it was a load order/document not ready thing. Dynamically loading scripts on deviceready broke angular. The load order was much more delicate than I expected. In the end I had to add a hack to insert a base tag before the other scripts ran.

<script>
  window.isPhoneGap = !document.URL.match(/^https?:/);
  if (window.isPhoneGap) {
    var head = document.getElementsByTagName('head')[0];
    var base = document.createElement('base')
    base.href = window.location.href;
    head.appendChild(base);
  }
</script>
<script src="components/cordova/cordova-2.6.0.js"></script>
<script src="components/jquery-mobile-angular-adapter-standalone.min.js"></script>

[tbosch]

Hi, this would be awesome. I created a docs folder and an initial empty phonegap.md document (https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/docs/phonegap.md). Please fork the adapter and create a pull request. I also created a link in the wiki home page to the document and described the overall workflow for adding pages to the wiki (https://github.com/tigbro/jquery-mobile-angular-adapter/wiki/How-to-contribute-to-the-wiki).

Would be awesome if you could post your experience there!

Thanks, Tobias

[mlegenhausen]

We build a bigger application based on phonegap some hints would be

1. Bootstrap angular manually via:

document.addEventListener("deviceready", function() {
    angular.bootstrap(document.documentElement, ['app']);
}, false);

or follow the example from Brian Ford: http://briantford.com/blog/angular-phonegap.html

Note: The first example is currently not e2e testable with karma, but you don't have to bother with async loading of phonegap plugins.

1. Disable html5Mode with

.config(function($locationProvider) {
  $locationProvider.html5Mode(false);
});

and change the links to hash links.

[regou]

It's my first time combine jqm and angularjs. I found this,and it works pretty well on browser. but after online phoneGap building,the angular route not working at all. I tied app.config(function($locationProvider) { $locationProvider.html5Mode(false);}); $.support.cors=true; $.mobile.allowCrossDomainPages = true; but no progress...any help?

[mlegenhausen]

You have to setup the jquery mobile parameters before you load jqm.

Example add the following script before you load jquery.mobile.js:

$(document).bind("mobileinit", function() {
    // Setting default page and dialog transition to none
    $.mobile.defaultPageTransition = 'none';
    $.mobile.defaultDialogTransition = 'none';
    // PhoneGap Support options
    $.mobile.allowCrossDomainPages = true;
    $.support.cors = true;
    // DOM caching
    $.mobile.page.prototype.options.domCache = true;
});

[regou]

Hi mlegenhausen,thank you Still not working...And I discovered that if click the index.html file directly (not open by web root http://localhost) Same happend:angular route died....and Chrome console error: OPTIONS file:///F:/Dropbox/MyWeb/yunkoo/login.html Origin null is not allowed by Access-Control-Allow-Origin. jquery-1.9.1.min.js:5 XMLHttpRequest cannot load file:///F:/Dropbox/MyWeb/yunkoo/login.html. Origin null is not allowed by Access-Control-Allow-Origin. I'm not sure if this is the same issue. I will try alert(location.origin) in an android testing app tomorow.

[mlegenhausen]

On you local desktop machine this is not allowed. This only works on PhoneGap. You can run Chrome without web security: http://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy or host you side on a webserver (this is what I am doing). This is not optimal cause the file:// protokoll is another like http:// but it is working without modifications at your chrome.