Angular ng-view/routing 在PhoneGap 中不起作用
Posted
技术标签:
【中文标题】Angular ng-view/routing 在PhoneGap 中不起作用【英文标题】：Angular ng-view/routing not working in PhoneGap 【发布时间】：2013-02-12 21:29:09 【问题描述】：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)，而在没有# 的情况下尝试它只会引发找不到路径的错误。
根据我在其他地方准备的内容，这应该可以工作。任何帮助将不胜感激。
【问题讨论】：
你应该使用ng-href而不是普通的href，这样Angular就可以正确地重写url。
【参考方案1】：
在搜索了几个问题和论坛后，我终于让它可靠地工作了。这就是我从一个干净的 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。
路由器.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!";
最后，只是一些基本的控制器。
我已经创建了一个包含所有这些here 的 github 存储库。
希望这对其他人有所帮助。
【讨论】：
万一其他人遇到这种情况，urlSanitizationWhitelist 在较新版本的 Angular 中是 aHrefSanitizationWhitelist 一年后我们在这里：我注意到在 Cordova 中以这种方式引导 Angular 会产生以下错误：'''Error: ng:btstrpd App Already Bootstrapped with this Element 'document' ''' --表示 Angular 已经加载。 我遇到了类似的错误。如果您调用 angular.bootstrap，解决方案是不要将“ng-app”属性添加到 HTML。你可以做一个或另一个，但不能同时做。 是否可以将模块传递给 var appModule = angular.module('App',[]) 等变量？ 你会在哪里初始化 webSql 数据库？【参考方案2】：我的问题是域白名单。
您的 .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):/);
);
【讨论】：
【参考方案3】：FWIW - 这是我解决这个问题的 2 美分：
以上所有方法似乎都有效，并将我推向了一个工作应用程序，但我仍然无法让 $routeprovider 在页面之间导航...
我的最后一个问题是 - 我在 jqueryMobile 库的脚本标签中有一个包含，它在 Angular 获取 URL 请求之前劫持了它们。当我删除它时，导航请求最终到达了 $routeprovider，现在一切正常。
希望这对某人有所帮助...
【讨论】：
【参考方案4】：我能够通过禁用 Google Chrome 中的本地访问策略标志来解决此问题。
$ open -a Google\ Chrome --args --disable-web-security for Mac OS.
这里是link 如何禁用本地访问文件策略。
【讨论】：
【参考方案5】：Angular 1.2 没有提供方法
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/)
总之，好像没必要了。我在手机上进行了测试，没有它也能正常工作。
【讨论】：
尝试 aHrefSanitizationWhitelist以上是关于Angular ng-view/routing 在PhoneGap 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 Angular 中添加 @uirouter/angular-hybrid 时出错
如何在 Angular 6 中使用 angular-timelinejs3？