Geek Answers Handbook

Angular.js not working in ng-view tag in PhoneGap

I am trying to use angular.js with PhoneGap.It works fine in Chrome browser. But that does not work. in the ng-view tag. And the angular module is not called when I run it on the simulator. Do you have any ideas?

My code is as follows.

index.html

<body> <div class="app" > <h1>Welcome!</h1> <div id="deviceready"> <div ng-view></div> </div> </div> <script type="text/javascript" src="cordova-2.0.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> <script src="http:////cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"> </script> <script type="text/javascript" src="js/router.js"></script> </body>

index.js

 var app = { initialize: function() { this.bind(); }, bind: function() { document.addEventListener('deviceready', this.deviceready, false); }, deviceready: function() { // note that this is an event handler so the scope is that of the event // so we need to call app.report(), and not this.report() app.report('deviceready'); }, report: function(id) { console.log("report:" + id); // hide the .pending <p> and show the .complete <p> document.querySelector('#' + id + ' .pending').className += ' hide'; var completeElem = document.querySelector('#' + id + ' .complete'); completeElem.className = completeElem.className.split('hide').join(''); } };

router.js

 angular.module("app",[]). config(["$routeProvider",function($routeProvider){ $routeProvider.when("/",{templateUrl:"templates/home.html"}); }]);
+8
javascript angularjs cordova
source share
3 answers

Try the apt bootstrap method to manually launch the application on the device. something like:

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

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

+11
source share

Try downloading the corner and zepto files from these servers and placing them in the application.

0
source share

I spent maybe 5 hours trying to get around a similar problem. It turned out that phone-gap / cca for some reason adds the application identifier to the hash of the URL. Thus, the route did not match, and the user was constantly redirected by calling $routeProvider.otherwise() .

(since then I found a known issue with CCA, which is even fixed , just not released!)

In any case, if you have problems connecting ngRoute to mobile chrome tools, and Phonegap will try to add two additional comparable groups to your routes. 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 do not match the addition of extra bits to the URL, but you can get around it like this:

 $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: '/' });

Pay attention to the two additional groups that I added. Also note that the base route comes last, otherwise it will match all / most routes if the URL is generated correctly!

0
source share

More articles:


All Articles