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 simulator. Do you have any idea?
我尝试将angular.js与PhoneGap一起使用。它在chrome浏览器上运行正常。但它在ng-view标签上不起作用。当我在模拟器上运行时,不会调用角度模块。你有什么主意吗?
My code is like this.
我的代码是这样的。
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"});
}]);
3 个解决方案
#1
11
Try the bootstrap api method to manually start the app on deviceReady. something like:
尝试使用bootstrap api方法在deviceReady上手动启动应用程序。就像是:
function onDeviceReady() {
...
angular.bootstrap(document, ['ngView']);
...
}
document.addEventListener("deviceready", onDeviceReady, true);
http://docs.angularjs.org/api/angular.bootstrap
http://docs.angularjs.org/api/angular.bootstrap
#2
0
Try downloading angularjs and zepto files from this servers and placing then within the app.
尝试从这些服务器下载angularjs和zepto文件,然后放在应用程序中。
#3
0
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.
我只花了5个小时试图解决类似的问题。事实证明,phone-gap / cca出于某种原因将app-id添加到URL的哈希部分。因此路由不匹配,并且$ routeProvider.otherwise()调用不断地转发用户。
(I've since discovered it's a known issue with CCA that's even been fixed just not released!)
(我已经发现这是CCA的一个已知问题,即使没有发布也已修复!)
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:
无论如何,如果你在使用mobile-chrome-tools和Phonegap时遇到问题,请尝试在路由中添加两个可选的匹配组作为解决方法。例如,举个例子:
$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:
路由不会与添加到URL的额外位匹配,但您可以像这样处理它:
$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!
注意我添加的两个可选组。另请注意,基本路由是最后一个 - 否则,如果正确生成URL,它将匹配所有/大多数路由!
#1
11
Try the bootstrap api method to manually start the app on deviceReady. something like:
尝试使用bootstrap api方法在deviceReady上手动启动应用程序。就像是:
function onDeviceReady() {
...
angular.bootstrap(document, ['ngView']);
...
}
document.addEventListener("deviceready", onDeviceReady, true);
http://docs.angularjs.org/api/angular.bootstrap
http://docs.angularjs.org/api/angular.bootstrap
#2
0
Try downloading angularjs and zepto files from this servers and placing then within the app.
尝试从这些服务器下载angularjs和zepto文件,然后放在应用程序中。
#3
0
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.
我只花了5个小时试图解决类似的问题。事实证明,phone-gap / cca出于某种原因将app-id添加到URL的哈希部分。因此路由不匹配,并且$ routeProvider.otherwise()调用不断地转发用户。
(I've since discovered it's a known issue with CCA that's even been fixed just not released!)
(我已经发现这是CCA的一个已知问题,即使没有发布也已修复!)
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:
无论如何,如果你在使用mobile-chrome-tools和Phonegap时遇到问题,请尝试在路由中添加两个可选的匹配组作为解决方法。例如,举个例子:
$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:
路由不会与添加到URL的额外位匹配,但您可以像这样处理它:
$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!
注意我添加的两个可选组。另请注意,基本路由是最后一个 - 否则,如果正确生成URL,它将匹配所有/大多数路由!