我正在构build一个AngularJS单页面JavaScript应用程序,所以index.html看起来像这样:
<html> <head> <base href="/" /> ... </head> <body id="ng-app" ng-app="myAngularApp"> <div class="holder"> //templates from app.js are rendered here </div> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="scripts/app.js"></script> </body> </html>
我以HTML5模式运行这个应用程序,并且遇到了遗留浏览器回退的麻烦。 每当我在IE8中浏览到像$APPURL$/login
这样的位置,它正确地重写为$APPURL$/#!/login
,但是当我像$APPURL$/locations/my/home
一样嵌套时,它什么也不做甚至没有bootstrap),因为它无法在这个特定的path中findscipts。 我解决了这个问题,通过使我的脚本的绝对参考(前缀与/
),但我看的所有Angular应用程序的例子使用相对path,而不是我的例子。
我用NGINX服务我的应用程序,并从众多的例子中得到如下configuration:
location / { try_files $uri $uri/ /index.html; root /home/web/appdir; }
使用绝对path有什么缺点吗? 另外,为什么这是必要的? 我真的需要传统的浏览器支持,但要继续使用HTML5模式…..
IE8的问题在于<base href="/" />
-tag,它是一个相对的URI,因此被 IE 忽略 。
所以基本上,只要你使用上面的NGINX配置浏览到http://my.app.io/where/does/this/go
,它将会重定向到http://my.app.io/index.html
, URI提供给index.html
。 然后,IE将尝试解析所有资源(脚本,图像和样式表)相对于原始URI,并将无法找到它们,打破了应用程序。
现在,当我们用一个绝对的URI(比如<base href="http://my.app.io/" />
重新配置base
-tag时,这个问题将不再存在,因为IE将会找到所有与这个基本URI相关的资源。
感谢: https : //github.com/yeoman/generator-angular/issues/433和https://stackoverflow.com/a/1889957/2818703