the*_*lum 27 routing angularjs cordova angular-routing
我在PhoneGap中遇到了ngView的问题.
一切似乎都装得很好,我甚至可以使用ng-controller来使用基本的控制器.但是当我尝试使用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)每次单击链接时都会显示,并且在没有#引发错误的情况下尝试它而无法找到路径.
从我在其他地方做好准备,这应该是有效的.任何帮助将不胜感激.
the*_*lum 43
在搜索了几个问题和论坛后,我终于让它可靠地工作了.这就是我从一个干净的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'事件时手动引导Angular .
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):/);
});