AngularJS 和 PhoneGap：$location.path 导致后续 tempateUrl 查找失败

Posted 2023-02-19

【中文标题】AngularJS 和 PhoneGap：$location.path 导致后续 tempateUrl 查找失败

【英文标题】：AngularJS and PhoneGap: $location.path causes subsequent tempateUrl lookup to fail

【发布时间】：2013-11-27 06:05:03

【问题描述】：

我无法使用 AngularJS v1.2.0 和 PhoneGap/Cordova android 应用程序进行路径查找。通过在 index.html 中设置 <base href="."/> 然后将 $routeProvider.when('/') 更改为 $routeProvider.when('/android_asset/www/index.html')，我已经与 html5mode(true) 取得了相当大的进展。之后，我可以让redirectTo('login') 到达$routeProvider.when('/login') 并按预期呈现templateUrl: 'static/partials/login.html'。

我遇到的问题是，如果我尝试使用 $location.path('/login'); 从我的 javascript 代码重定向到登录页面，则会找到路由，但 templateUrl 加载失败并出现 insecurl 异常。

我已尝试使用新的 angular-sanitize 模块将访问 file:// 的权限列入白名单，但这无济于事。

如何让$location.path() 执行与redirectTo 相同的操作，以便加载部分内容？或者有没有其他方法可以解决这个问题？

更新：通过在路径函数之后添加对 replace() 的调用，我有点前进了，例如：

$location.path('/login').replace();

但这似乎是一种 hack，它仍然会导致其他路由中的 templateUrl 失败并出现相同的异常。

对可能出现的问题有任何想法吗？是不是 html5mode(true) 目前在 Phonegap 上不起作用，解决此问题的唯一方法是将其设置为 false 并向每个路径添加主题标签（就像在角度 phonegap seed project 中所做的那样）？

【参考方案1】：

为了将来参考，这是我设法解决问题的方法：

AngularJS 目前似乎不支持 Cordova 应用程序中的 html5mode(true)，因为我报告了 insecurl 问题。我要做的是添加

var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);

这使我可以使用全局变量在 PhoneGap index.html 中显式设置 html5Mode：

<script>
  var html5Mode = false;
</script>

所以现在$location.path('/login') 和redirectTo: 'login' 可以正常工作，但是html 文件中的链接不能。为了让那些在PhoneGap中工作的人禁用html5Mode，我必须在每个链接前面添加#/，例如<a href="#/login">login</a>。

这使得 PhoneGap 可以工作，但会破坏使用 History API 和 html5Mode(true) 的网页。难题的最后一块是将<base href="/"/> 添加到网页的 index.html 中（并将其从 PhoneGap 项目的 index.html 中删除。）所以现在即使我在网页，我访问了网址http://example.com/login，但在地址栏中没有看到任何哈希值。

**

所以最后我在我的网页中使用了 History API并且在 PhoneGap 项目中禁用了 History API（因为没有地址栏，所以真的不需要 History API）。唯一的缺点是我必须在每个模板 html 文件中添加额外的 #/，但与在 Web 和移动设备上使用所有相同的 html 和 javascript 文件的能力相比，这是一个小麻烦。

【讨论】：

天哪，这太棒了。非常感谢您提供此解决方案。

抱歉，我在任何地方都没有简单的工作示例。到底什么不适合你？

app.config(['$locationProvider', function ($locationProvider) $locationProvider.html5Mode(false); ]);

【参考方案2】：

我也遇到了同样的问题。我设法通过跳过路由配置中的前导斜杠来修复它：

 $routeProvider
        // route for the foo page
        .when('/foo', 
            templateUrl: 'foo.html', //previously: '/foo.html'
            controller: 'fooController'
        ) //etc.