如何重新加载角度单页子页面并且不丢失内容

Question

我正在使用 Spring Boot 1.4.0.M2、Angular 1.5.8、Angular UI Router 0.3.1 和 Thymeleaf 模板。

我想要做的是从我的网址中删除哈希 # 我想要这样的东西：

http://localhost:8080/#/contact

看起来像这样

http://localhost:8080/contact

我做了什么：

1. 添加到我的 angular configuration.js 文件中，如下所示：

   $locationProvider.html5Mode(true);
   $locationProvider.hashPrefix('!');
   

2. 添加到我的 userIndex.html 头

   base href="/userIndex.html"/>

这个 userIndex.html 包含所有 js 库，这是我的单页索引页面，它包含这样的导入：

<script type="text/javascript" th:src="@{/js/lib/jquery.min.js}" />

和 UI 路由器：

<div ui-view="" class="ui-container"></div>

在这个哈希 # 从 URL 中消失之后，但是！

我打开我的网页http://localhost:8080/，然后单击链接到例如“/contact”，然后转到子页面 URL 看起来很完美http://localhost:8080/contact 没有哈希，页面看起来像这样。

当我按 F5 重新加载网页 http://localhost:8080/contact 时，内容看起来像这样：

从http://localhost:8080/ 开始并单击链接到 /contact 使一切正常，尝试输入 URL http://localhost:8080/contact 呈现没有 css、js 等的原始 html。未加载 userIndex.html 是否可以将其加载到子页面，如/联系方式？

这就是我的项目和模板配置的样子

这里有没有人可以帮我解决这个重载问题？也许是我的 Spring Boot 模板配置有问题？

Answer 1

这两种方式的区别在于，在第一种情况下，您下载 userIndex.html 文件，然后 Angular 在客户端拦截您的 location 更改以呈现 contact 状态。

在第二种情况下，您直接从服务器请求contact 路径。这是您的 viewController 配置发挥作用并返回可能不需要的 html 而不是运行 Angular 应用程序所需的索引页面的地方。

对于 node.js 有一个名为 historyApiFallback 的概念，它注册一个 404 错误处理程序以返回 index.html 页面（例如这个 express 模块：https://github.com/bripkens/connect-history-api-fallback）。在您的情况下，您需要避免注册的viewControllers 与 Angular 应用程序中使用的路由名称之间的冲突。类似情况见此问题：How can I use Angular2 PathLocationStrategy in a Spring Boot application?

总而言之，使用 PathLocationStrategy / html5Mode 并不是那么方便，即使它是必不可少的，如果您以后还想有可能进行服务器端渲染。

Answer 2

您需要配置服务器端路由。因此，当您删除哈希并且您可以转到联系人并且它可以工作时，但是当您刷新它时它会丢失内容，因为在刷新页面后您的服务器试图找到 contact.html 如果它在您的情况下找到它，它只会提供没有CSS和其他东西。取决于您的服务器，您可以将服务器配置为始终回退到 index.html，以便在找不到请求的页面时。并将 base 设置为 / 否则服务器将转到目录的根目录并找到 contact.html 并将其提供给您，它将是原始的，没有 css。我希望我能给你解释一下。您可以为您的服务器搜索 url-re-writer。