如何重新加载有角度的单页子页面，不丢失内容

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”/＆gt;

此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”，然后转到子页面网址看起来很完美http://localhost:8080/contact没有哈希，页面看起来像这样。



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



从http://localhost:8080/开始，点击指向/联系的链接，一切正常，尝试输入网址http://localhost:8080/contact目前的原始html，没有css，js等。没有加载userIndex.html是否可以加载它到子页面如/ contact？

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



这里的任何人都可以帮我解决这个重装问题吗？也许我的spring boot模板配置有问题？

Answer 1

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

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

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

总而言之，使用PathLocationStrategy / html5Mode并不方便，即使你以后想要也可以进行服务器端渲染也是必不可少的。

Answer 2

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