Question

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

我在HTML5mode中运行此应用程序，并且遇到了旧版浏览器的后备问题。每当我在IE8中浏览到类似$APPURL$/login的位置时，它都会正确地重写为$APPURL$/#!/login，但是当我执行嵌套的$APPURL$/locations/my/home时，它不执行任何操作（甚至不是引导程序），因为它可以找不到这条特定路径的scipts。我通过将refs设置为绝对的前缀（用/作为前缀）修复了这个问题，但我查看的Angular Apps的所有示例都使用了相对路径，就像在我的示例中一样。

我使用NGINX提供我的应用程序，并从众多示例中获得以下配置：

location / {
    try_files $uri $uri/ /index.html;
    root /home/web/appdir;
}

使用绝对路径有什么缺点吗？另外，为什么这有必要？我真的需要传统的浏览器支持，但想继续使用HTML5mode .....

Answer 1

IE8的问题在于<base href="/" /> - 标记，它是一个相对URI，因此被忽略。

基本上，每当您使用上面的NGINX配置浏览到http://my.app.io/where/does/this/go时，它都会重定向到http://my.app.io/index.html，原始URI会传送到index.html。然后，IE将尝试解析相对于原始URI的所有资源（脚本，图像和样式表），并且无法找到它们，从而破坏了应用程序。

现在，当我们使用类似base的绝对URI重新配置<base href="http://my.app.io/" /> - 标记时，此问题将不再存在，因为IE将找到与此基URI相关的所有资源。

感谢： https://github.com/yeoman/generator-angular/issues/433 和 https://stackoverflow.com/a/1889957/2818703

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

1 个答案: