角NG画面/路由中的PhoneGap不工作 [英] Angular ng-view/routing not working in PhoneGap
问题描述
我有在用的PhoneGap一个ngView问题。
I'm having a problem with ngView in PhoneGap.
似乎一切都装就好了，我甚至可以用NG-控制器工作的一个基本的控制器。但是，当我尝试使用路由与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的
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
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.
从我准备在其他地方，这应该是工作。任何帮助将大大AP preciated。
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的
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>
请注意在＆LT; HTML NG-应用=应用程序＆GT; 标记。该应用程序将不会加载没有对指令的值，所以一定要包括一个。
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 事件。
In this file, we're manually bootstrapping Angular when PhoneGap fires the 'ondeviceready' event.
routers.js
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'
});
});
该文件中有两个重要的事情。首先，我们正在创造与我们在＆LT之前使用的名称相同的模块; HTML NP-应用=应用程序＆GT; 。其次，我们需要将路由器配置为白名单
文件的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 whitelist
file 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.
这篇关于角NG画面/路由中的PhoneGap不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
