opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter
MIT License
517 stars 114 forks source link

Support for manual bootstrap of angularjs (no ng-app tag) #73

Closed bjconlan closed 11 years ago

bjconlan commented 11 years ago

Phonegap/Cordova uses an event 'deviceready' which is used to flag when the device is in a usable state (external functions bound and usable).

When using angular it seems appropriate to manually bootstrap the application via the call:

document.addEventListener('deviceready', function() { angular.bootstrap(document); }, true);

This means that the 'ng-app' is not registered (and hence the adapter doesn't load correctly). Having the jquery-mobile-angular-adapter handle this case would be helpful.

bjconlan commented 11 years ago

Workaround for this problem seems to be:

document.addEventListener('deviceready', function() {
    angular.bootstrap(document, ['centersoft']);
    $.getScript('lib/jquery-mobile-angular-adapter-1.1.2b.js'); // lazy load
}, true);
tbosch commented 11 years ago

Hi, do you need any futher support? I changed the internal bootstrapping in the adapter, so it is reasonable that this problem occured in 1.1.1 but no more in 1.1.2-SNAPSHOT.

Tobias

bjconlan commented 11 years ago

I'm currently having problems with injection of the $navigate (navigateProvider not found) but I haven't dug into the problem yet so It might not be a bug but rather the way in which I'm using the library.

But thank you for your response (even regarding my invalid bug report). I'll try using the latest snapshot.

I just downloaded your 1.1.2-SNAPSHOT release and yes it's working nicely without the explicit lazy load. And because of the now correctly ordered loading of the the scripts (my module was loading before the adapter library hence the above error) the aforementioned issue regarding the navigateProvider is non-existent!.

Thanks!

tbosch commented 11 years ago

Could you create a jsfiddle?

Tobias

bjconlan commented 11 years ago

Not really, this problem needs to use a 'file://' url to be demonstrated. (as is the case in phonegap/cordova apps)

The root of the problem itself is in angular but is triggered by line 1069: in jquery-mobile-angular-adapter-1.1.2-SNAPSHOT.js locationProvider.html5Mode(true)'.

This triggers angular to attempt to perform a '$$parse' on the url that fails leading to the error 'Invalid url "...

This code can be seen in lines 4979 to 4984 of angular-1.0.2.js:


function LocationUrl(url, pathPrefix, appBaseUrl) {
  pathPrefix = pathPrefix || '';

  /**
   * Parse given html5 (regular) url string into properties
   * @param {string} newAbsoluteUrl HTML5 url
   * @private
   */
  this.$$parse = function(newAbsoluteUrl) {
    var match = matchUrl(newAbsoluteUrl, this);

    if (match.path.indexOf(pathPrefix) !== 0) {
      throw Error('Invalid url "' + newAbsoluteUrl + '", missing path prefix "' + pathPrefix + '" !');
    }
...

from recollection the match.path is something along the lines of /User/name/Application Support/iPhone Emulator/.../www/index.html

while the newAbsoluteUrl is something like: 'file:///User/name/Application Support/iPhone Emulator/.../www'

obviously this fails the if test found on line 4982. and causes the naviationProvider to fail to initialize correctly.

I've commented on a bug regarding this issue in the angular issue manager found at : https://github.com/angular/angular.js/issues/1235

tbosch commented 11 years ago

Hi, file-urls are working now, just double checked this. And manual bootstrapping also works now like explained in the angular docs (don't forget to remove the ng-app attribute from your html):

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

Closing this ticket, thanks for reporting!

Tobias

bjconlan commented 11 years ago

Thanks I finally got around to testing with the latest release and it looks to be working! Thanks again!