angular.js doesn't work ng-view tag in PhoneGap

Question

I try to use angular.js with PhoneGap.It works fine at chrome browser.But it doesn\'t work
at ng-view tag.And angular module doesn\'t called when I run it on the simula

Answer 1

I just spent maybe 5 hours trying to work around a similar problem. It turned out that phone-gap / cca was for some reason prepending the app-id to the hash part of the URL. The route therefore didn't match and the user was constantly forwarded back by the $routeProvider.otherwise() call.

(I've since discovered it's a known issue with CCA that's even been fixed just not released!)

Anyway for the mean time if you're having problems getting ngRoute working with mobile-chrome-tools and Phonegap try adding two optional matching groups to your routes as a work around. For example take this example:

$routeProvider.when('/', { templateUrl: 'templates/home.html', controller: 'HomeCtrl' });
$routeProvider.when('/some-page', { templateUrl: 'templates/some-page.html', controller: 'SomePageCtrl' });
$routeProvider.when('/another-page', { templateUrl: 'templates/another-page.html', controller: 'AnotherPageCtrl' });
$routeProvider.otherwise({ redirectTo: '/' });

The routes wont match with the extra bits being added to the URL but you could work around it like so:

$routeProvider.when('/:a?/:b?/some-page', { templateUrl: 'templates/some-page.html', controller: 'SomePageCtrl' });
$routeProvider.when('/:a?/:b?/another-page', { templateUrl: 'templates/another-page.html', controller: 'AnotherPageCtrl' });
$routeProvider.when('/:a?/:b?/', { templateUrl: 'templates/home.html', controller: 'HomeCtrl' });
$routeProvider.otherwise({ redirectTo: '/' });

Notice the two optional groups I've added. Also note that the base route comes last - otherwise it will match all / most routes if the URL is generated properly!

Answer 2

Try the bootstrap api method to manually start the app on deviceReady. something like:

function onDeviceReady() {
    ...
    angular.bootstrap(document, ['ngView']);
    ...
}

document.addEventListener("deviceready", onDeviceReady, true);

http://docs.angularjs.org/api/angular.bootstrap

Answer 3

Try downloading angularjs and zepto files from this servers and placing then within the app.