AngularJS和PhoneGap的：$ location.path导致后续tempateUrl查找失败 [英] AngularJS and PhoneGap: $location.path causes subsequent tempateUrl lookup to fail

问题描述

我遇到了麻烦路径查找与AngularJS V1.2.0和PhoneGap的/科尔多瓦Android应用程序的工作。我已经通过设置＆LT走到pretty与 html5mode（真）;基本href = /＆gt的帮助。 index.html中，然后改变 $ routeProvider.when（'/'）到 $ routeProvider.when（'/ android_asset / WWW /的index.html'）。在那之后，我能够获得 redirectTo（'登录'）来达到 $ routeProvider.when（'/登录'）有渲染 templateUrl：静态/谐音/ login.html的如预期

I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.

我的问题是，如果我不是尝试重定向到从我的Javascript code登录页面与 $ location.path（'/登录'）; ，该航线被发现，但templateUrl加载失败与 insecurl 例外。

The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.

我试过白名单访问文件：//使用新角的sanitize模块，但这并不能帮助

I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.

我怎样才能让 $ location.path（）做同样的事情 redirectTo ，使部分是装？或者是有一些其他的方式来解决这个问题？

How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?

更新：我有点期待通过添加一个调用路径功能后更换（），例如：

UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:

$ location.path（'/登录）替换（）;

但是，似乎是一个黑客，它仍然会导致templateUrl在其它途径失败，相同的异常。

but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.

这是什么任何想法可能是错误的？难道html5mode（真）只是没有在这一刻的PhoneGap的唯一途径合作，以解决这一问题是将其设置为false，并添加＃标签，每个路径（如在角的PhoneGap的seed项目）？

Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?

推荐答案

有关将来参考，这是我如何设法解决这个问题：

For future reference, this is how I managed to solve the problem:

1. AngularJS目前似乎不支持 html5mode（真）因为一个科尔多瓦应用程序内 insecurl 的问题，我的报道。我不得不做的就是添加

1. AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add

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

这给我的可能性，明确设置html5Mode在PhoneGap的 index.html的有一个全局变量：

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

所以现在 $ location.path（'/登录'）以及 redirectTo：登录的作品，但在HTML文件的链接，不要。为了让那些在PhoneGap的工作，与html5Mode禁用，我不得不添加＃/ 中的每一个环节，如前＆LT; A HREF =＃/登陆GT＆;登录和LT; / A＆GT; 。

So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. <a href="#/login">login</a>.

这使得PhoneGap的工作，而且打破了网页，使用历史与API html5Mode（真）。拼图的最后一块是添加＆LT;基本href =//＆GT; 来网页的index.html的（并使其保持了的index.html所以，现在即使我有一个链接，说的PhoneGap的项目）＃/登录网​​页中，我得到的网址 HTTP： //example.com/login 并没有看到在地址栏的哈希值。

That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.

**

所以，最后我有史API在我的网页工作和历史API中的PhoneGap项目（那里实在没有必要对历史API，因为没有地址栏）禁止。唯一的缺点是额外的＃/ 我必须把每个模板的html文件，但相比于使用所有相同的HTML和JavaScript的能力，这是一个小麻烦文件为网络和移动。

So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.

这篇关于AngularJS和PhoneGap的：$ location.path导致后续tempateUrl查找失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！