如何在 AngularJS 中正确使用 HTML5 url？

Question

我对 AngularJS 和服务器配置的东西还很陌生，这是一个我到目前为止还没有找到令人满意的解决方案的问题。

我希望能够在网站上使用 HTML5 url（没有 hashbang），这样我就可以使用“mydomain/contact”之类的地址进行导航（为简单起见，我将坚持使用“contact”示例） .

要做到这一点，正如我目前发现的那样，应该做两件事：

• 在客户端启用 HTML5

在 app/app.js 文件上启用 HTML5 格式（同时添加依赖）

$locationProvider.html5Mode(true);

可以点击链接并获取正确的网址。尽管如此，它仍然不允许某人直接访问 HTML5 url。要进入“联系人”页面，我仍然无法直接访问“mydomain/contact”（我们得到 404），我知道这是有道理的。为了解决这个问题，仍然需要在服务器端实现一些东西。

• 服务器端配置

配置服务器以正确的文件响应，即我应该配置服务器以使其在我请求“mydomain/#/contact”和“mydomain/contact”时以相同的方式响应。

最后一项是我卡住的地方。我找到了很多这样的答案：“你应该配置你的服务器”（他们假设读者已经知道如何做到这一点。我不知道），但我找不到一个完整的例子来说明如何做到这一点或在哪里放置任何需要的文件。

我正在使用 AngularJS 1.6.x 和 npm 3.10.9（npm 启动）。我的问题是：有没有关于如何在 AngularJS 中充分使用 HTML5 url 的完整示例？

Answer 1

唯一存在的问题是 Angular 无法处理它没有收到的请求。您需要一些包罗万象的方法，以便将所有路由（/contact 等）传递到您的主索引文件。

当你说.htaccess 时，我假设是 apache。即便如此，我仍然将 nginx 放在 apache 前面，因为它轻量级且易于配置（至少与 apache 庞然大物相比）。对不起，我知道这是一个非常自以为是的答案。无论如何，使用 nginx 整个配置可能如下所示：

# usually this file goes in /etc/nginx/conf.d/anyfilename.conf
# but it might vary with os/distro.
server {
  listen 80 
  root /var/www/myapp;

  location / {
    try_files $uri $uri/ index.html;
  }

  # And if you want to pass some route to apache:
  location /apache {
    proxy_pass http://127.0.0.1:81; # Apache listening on port 81.
  }
}

我确信单独使用 apache 也可以达到同样的效果，但我无法告诉你如何操作。但也许这会有所帮助：htaccess redirect for Angular routes

有很多愚蠢的工具包和实用程序在我的生活中浪费了时间学习，但 nginx 是我永远不会后悔的工具。