Angular html5 模式下的服务器端更改答案

【问题标题】：Server side changes in Angular html5 modeAngular html5 模式下的服务器端更改
【发布时间】：2013-05-30 15:25:11
【问题描述】：

我想知道是否有人可以告诉我在 Angular js 中将模式更改为 html5 时需要进行哪些服务器端更改。因为当我尝试将其更改为 html 5 模式时，我无法进入我的内部 html 页面。在 Angular API 中，它说用户也需要进行服务器端更改。

服务器端有哪些变化
我们还需要进行其他更改吗？

【问题讨论】：

我自己还没有这样做，但我相信您需要重写您的 URL，以便它们指向您的 index.html（即，当您请求类似的内容时，服务器将输出 /index.html /contact/london-office)。如果您使用的是 apache，请查看 mod_rewrite。

标签： html angularjs

【解决方案1】：

你应该区分两种类型的调用：

来自浏览器的 HTML 调用。这些都应该重新映射以服务于您的索引或其他内容。
JSON API 请求。这些应该传递到您的应用服务器。

如何区分这两种类型的调用，以及如何重新映射前者，很大程度上取决于您的设置。

如果您使用的是 nginx，例如，检查 $http_accept 为 application/json（请参阅 http://en.wikipedia.org/wiki/List_of_HTTP_header_fields#Requests 和 http://wiki.nginx.org/HttpCoreModule#.24http_HEADER）并重写（http://wiki.nginx.org/HttpRewriteModule#rewrite）的组合，您可以实现您想要的。

【讨论】：

【解决方案2】：

您需要设置您的服务器以将所有内容重写为 index.html：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode ...

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

我的应用程序已将参数传递给控制器（通过 ui-router），因此在 html5mode 之前我会转到 www.blah.com/angapp/#/myUIrouterController?param_x=1&param_y=2 猜测浏览器知道 /#/ 文件夹路径部分应该服务于 index.html。

现在 # 将与 html5mode 一起消失，默认情况下服务器不知道为该文件夹提供 index.html，因为 url 只是： www.blah.com/angapp/myUIrouterController?param_x=1&param_y=2 myUIRouterController 不是一个真正的文件，所以服务器只会提供 404，因此我认为需要重写以便它知道将所有内容发送到 index.html （所以上面与标记的组合应该可以工作......注意：requireBase 是可选的，但听说它可能有助于像 IE9 这样的旧浏览器）。

【讨论】：