angular.js没有'无法在PhoneGap中处理视图标记
angular.js doesn't work ng-view tag in PhoneGap
我尝试将angular.js与PhoneGap一起使用。它在chrome浏览器上运行良好。但它不起作用
在ng视图标记处。当我在模拟器上运行时,角度模块不会调用。你知道吗?
我的代码是这样的。
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"});
}]);
尝试bootstrap api方法在deviceReady上手动启动应用程序。类似于:
function onDeviceReady() {
...
angular.bootstrap(document, ['ngView']);
...
}
document.addEventListener("deviceready", onDeviceReady, true);
http://docs.angularjs.org/api/angular.bootstrap
尝试从此服务器下载angularjs和zepto文件,然后将其放入应用程序中。
我刚刚花了大约5个小时试图解决类似的问题。事实证明,phone gap/cca是出于某种原因在URL的哈希部分预先添加了应用程序id。因此,路由不匹配,用户不断被$routeProvider.otherwise()
呼叫转发回来。
(我后来发现这是CCA的一个已知问题,甚至已经修复,只是没有发布!)
无论如何,如果你在使用移动chrome工具和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: '/' });
路由与添加到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: '/' });
注意我添加的两个可选组。还要注意,基本路由是最后一个-否则,如果URL生成正确,它将匹配所有/大多数路由!
相关文章:
- angular.js没有'无法在PhoneGap中处理视图标记
- 如何在phonegap应用程序中处理Ajax json响应
- 在 Javascript/Phonegap 上处理数据集
- 如何处理Phonegap + JQM应用程序中的链接
- jQuery Mobile 会干扰 PhoneGap 中脚本处理的顺序吗?
- 使用PhoneGap处理iOS内存警告
- 如何在JavaScript中使用Phonegap进行图像处理
- PhoneGap如何处理滚动
- 如何处理表单:<输入>并且<选择>在Cordova/Phonegap
- 通过phonegap处理应用程序时存储数据
- Phonegap:自定义URL处理冻结
- 在Phonegap中处理. ics文件
- 如何在phonegap应用程序中使用jquery处理1000条记录
- 如何处理PhoneGap sql存储结果
- Phonegap -一旦我离开了window.location.replace的索引范围,处理推送通知
- 处理Android的后退按钮在一个特定的地方- Cordova/Phonegap
- 如何在phonegap中处理jsonp的输出?
- 如何处理Android's后退按钮点击在一个单一的HTML页面webapp使用PhoneGap
- 如何在 iOS Phone PhoneGap 编程中处理拨出和呼入呼叫的应用程序
- 如何处理节点上来自phonegap的请求