我在与ngView在PhoneGap的一个问题。
似乎一切都装得很好，我甚至可以得到使用NG-控制器工作基本控制器。 但是，当我尝试使用路由与ngView，什么都不会发生。
的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)每次我点击链接时，并试图未经#刚刚提出的路径无法找到一个错误。
从我准备在其他地方，这应该是工作。 任何帮助将不胜感激。
通过几个问题和论坛搜索后，我终于得到它工作可靠。 这就是它带我去得到它从一个干净的PhoneGap项目运行。
的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>
注意<html ng-app="App">标记。 该应用程序将不会加载不用于该指令的值，所以一定要包括一个。
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'事件。
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。 我个人并不需要这个，但有几个人似乎都遇到过这个问题，所以我把它。
controllers.js
function TestCtrl($scope) {
$scope.status = "It works!";
}
function ViewCtrl($scope) {
$scope.status = "Also totally works!";
}
最后，只是一些基本的控制器。
我创建了一个GitHub库有了这一切在这里 。
希望这可以帮助别人。
我的问题是域名白名单。
基本上，你的.config需要这个样子：
angular.module('App', []).config(function ($routeProvider, $compileProvider) {
$routeProvider.when('/test', {
controller: TestCtrl,
template: '<h1> {{ test }} </h1>'
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
FWIW - 这是我对这个问题2美分：
上述所有似乎工作，促进我推向一个工作程序，但我仍然不能得到$ routeprovider在页面之间导航...
我的最后一个问题是 - 我有一个包括jqueryMobile库的脚本标签内，它被劫持的URL请求之前得到了角其中持有。 当我删除它导航的请求终于来到了$ routeprovider和所有正在工作的罚款。
希望这可以帮助别人...
我可以通过禁用谷歌浏览器的本地访问策略标志来解决这个问题。
$ open -a Google\ Chrome --args --disable-web-security for Mac OS.
这里是链接到如何禁止本地访问文件的政策。
角1.2不提供方法
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/)
无论如何，现在看来似乎没有必要了。 我测试了我的手机和它的作品没有。
