Angular html5 模式和 Spring 路由答案

【问题标题】：Angular html5 mode and Spring routingAngular html5 模式和 Spring 路由
【发布时间】：2015-08-28 13:48:22
【问题描述】：

我在使用 Angular html5 模式通过 Spring Boot 后端进行路由时遇到问题。当我使用 ui 路由器的 $state.go() 导航到不同的 url 时，应用程序工作正常，但是当我尝试输入不同状态的 url 并直接转到它时，它无法正确加载。

我们使用了类似于此处详述的解决方案 (https://spring.io/guides/tutorials/spring-security-and-angular-js/)，本质上是使用弹簧控制器将某些页面转发到基本 url，“/”。与我们的不同之处在于，我们使用基本 url，“step”，放在除主页之外的每个页面之前。但是，当我们直接导航到网站中的不同页面时，加载的每个资源都会变成我们的 index.html 文件（js、css 等）。当我们查看网络请求时，出于某种原因，它会在每个请求的前面附加“step”url（所以不是 css/style.css，而是 step/css/style.css）。

这是我们的弹簧控制器的一个例子：

@Controller
public class ViewController {
    @RequestMapping(value="/step/**")
    public String forward() {
        return "forward:/";
    }
}

我们将不胜感激，但请记住，我们已经研究了各种解决方案，例如提到的链接和其他几个具有类似解决方案的解决方案。

【问题讨论】：

标签： angularjs spring spring-boot angular-ui-router

【解决方案1】：

结合线程和this source，我们终于让它工作了。在我们的例子中，没有任何子页面。也许它可以帮助某人：

@RequestMapping(value = "/**/{id:[^\\.]*}")
public String html5Forwarding() {
    return "forward:/index.html";
}

开头的/**/ 有助于将嵌套资源映射到此方法。

【讨论】：

【解决方案2】：

尝试返回您想要映射到的位置而不是转发：

@Controller
public class MainViewController {

    @RequestMapping("/")
    public String indexPage() {
        return "index";
    }

    @RequestMapping("/application/**")
    public String apppplicationContext() {
        return "index";
    }
}

【讨论】：

你能详细说明一下吗？我尝试过使用“/**/”，但最终陷入无限循环，返回“index”，然后使用“/WEB-INF/views/index.html”再次调用控制器，它只是不断得到一遍又一遍地调用。有什么方法可以让我拥有一个带有“/**”的控制器，它排除以“/WEB-INF”开头的任何内容？我必须将所有内容都粘贴在“/application”中吗？

【解决方案3】：

迟到的答案，无论如何，我在与您完全相同的上下文中偶然发现了同样的问题，当在映射到 Spring 控制器中某个前缀的 URL 上重新加载页面时，资源文件的 url 错误：

@RequestMapping(value = "/hello/{id:[\\w-]+}")
public String forwardHello() {
    return "forward:/index.html";
}

我的问题是在 index.html 文件中我有：

<head>    
<link rel='stylesheet' href='webjars/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='webjars/bootstrap/3.3.4/css/bootstrap.min.css'>
...
<base href="/my-app/" />
</head>

只要我在加载索引页面后导航，一切正常，但是当从 hello 上下文刷新页面时，例如：

http://example.com/my-app/hello/john

浏览器试图加载资源文件，路径中带有额外的hello，例如

http://example.com/my-app/hello/webjars/...

解决办法是把<base href="/my-app/" />first放在header中，保证所有链接的资源都是从这个base加载的。

引用W3Schools:

提示：将标签作为元素内部的第一个元素，以便head部分的其他元素使用来自该元素的信息。

【讨论】：