AngularJS应用程序中的资源脚本是相对的还是绝对的?

我正在构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