问题描述
PhoneGap 中的 ngView 有问题.
I'm having a problem with ngView in PhoneGap.
一切似乎都加载得很好，我什至可以使用 ng-controller 获得一个基本的控制器.但是当我尝试在 ngView 中使用路由时，没有任何反应.
Everything seems to be loading just fine and I can even get a basic controller working using ng-controller. But when I try to use routing with ngView, nothing happens.
index.html
<!doctype html>
<html ng-app>
<head>
<script type="text/javascript" src="lib/cordova-2.4.0.js"></script>
<script type="text/javascript" src="lib/angular-1.0.4.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<a href="#/test">Test</a>
<div ng-view></div>
</body>
</html>
app.js
angular.module('App', []).config(function ($routeProvider) {
$routeProvider.when('/test', {
controller: TestCtrl,
template: '<h1> {{ test }} </h1>'
});
});
function TestCtrl($scope) {
$scope.test = "Works!";
}
Eclipse 记录器每次单击链接时都会显示 onMessage(onPageFinished, fle:///android_asset/www/index.html#/test)，并在没有 # 的情况下尝试 只是引发无法找到路径的错误.
The Eclipse logger shows onMessage(onPageFinished, fle:///android_asset/www/index.html#/test) every time I click the link, and trying it without the # just raises an error that the path can't be found.
从我在其他地方准备好的东西来看，这应该可以工作.任何帮助将不胜感激.
From what I've ready everywhere else, this should be working. Any help would be greatly appreciated.
推荐答案
在搜索了几个问题和论坛后，我终于让它可靠地工作了.这就是我从一个干净的 PhoneGap 项目中运行它所花费的时间.
After searching through several questions and forums, I've finally got it working reliably. This is what it took me to get it running from a clean PhoneGap project.
index.html
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<a href="#/">Main View</a>
<a href="#/view">New View</a>
<div ng-view></div>
<!-- Libs -->
<script type="text/javascript" src="lib/cordova-2.5.0.js"></script>
<script type="text/javascript" src="lib/angular-1.0.5.js"></script>
<!-- App -->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/routers.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
注意 标签.如果没有该指令的值，应用将无法加载，因此请确保包含一个值.
Note the <html ng-app="App"> tag. The app won't load without a value for the directive, so make sure you include one.
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
在这个文件中，我们在 PhoneGap 触发 'ondeviceready' 事件时手动引导 Angular.
In this file, we're manually bootstrapping Angular when PhoneGap fires the 'ondeviceready' event.
routers.js
angular.module('App', [])
.config(function ($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: TestCtrl,
templateUrl: 'partials/main.html'
})
.when('/view', {
controller: ViewCtrl,
templateUrl: 'partials/view.html'
});
});
这个文件中有两个重要的东西.首先，我们使用之前在 <html np-app="App"> 中使用的相同名称创建模块.其次，我们需要将路由器配置为白名单文件 URI.我个人不需要这个，但似乎有几个人遇到了这个问题，所以我把它包括在内.
This file has two important things in it. First, we're creating the module with the same name we used before in <html np-app="App">. Second, we need to configure the router to whitelistfile URIs. I personally didn't need this, but several people seem to have encountered the issue, so I included it.
controllers.js
controllers.js
function TestCtrl($scope) {
$scope.status = "It works!";
}
function ViewCtrl($scope) {
$scope.status = "Also totally works!";
}
最后，只是一些基本的控制器.
Finally, just some basic controllers.
我在这里创建了一个 github 存储库.
I've created a github repo with all of this here.
希望这对其他人有所帮助.
Hope this helps someone else.
这篇关于Angular ng-view/routing 在 PhoneGap 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！