Question

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

我希望能够在网站上使用HTML5网址（没有hashbangs），这样我就可以使用像“mydomain / contact”这样的地址进行导航（为了简单起见，我会坚持使用“联系人”示例）

要做到这一点，正如我迄今为止所发现的，应该做两件事：

在客户端启用HTML5

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

$locationProvider.html5Mode(true);

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

服务器端配置

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

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

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

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是我不会后悔的一个工具。

如何在AngularJS中正确使用HTML5网址？

1 个答案: