Question

我有Spring + Angular + Rest webapp。我通过这种方式从url中删除了hashtage ..

if(window.history && window.history.pushState) {
    $locationProvider.html5Mode(true);
}

index.html中的

 <base href="/webapptest/">

现在，主页看起来很好，一切都很好。看起来像是：http://localhost:8080/webapptest/

问题是，当我删除主题标签后，当我转到第二页时... http://localhost:8080/webapptest/page2

第一次显示页面，但重新加载后...错误404。我读到这是服务器端的问题，因为我的问题...但我不知道要改变什么...... 这是Spring Controller：

@RestController
@RequestMapping(value="api/files")
public class FileController {

@RequestMapping( method = RequestMethod.GET)
public @ResponseBody() String getFile(HttpServletRequest request) throws      IOException  {
    String htmlString = "";
    try {....
 ...
return htmlString;
}

这是使用page2的控制器和方法，同样的控制器也使用主页而另一种方法。有人知道什么是问题以及如何在没有＃标签的情况下解决重装页面？

app.js：

uploadFile.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider
    .when('/', {
        templateUrl : 'resources/html/home.html',
        controller : 'uploadFileController'
    })
    .when('/page2', {
        templateUrl : 'resources/html/page2.html',
        controller : 'uploadFileControllerAdmin'
    })
    .otherwise({
        redirectTo: '/'
    });
if(window.history && window.history.pushState) {
    $locationProvider.html5Mode(true);
}
}])

Answer 1

当您最初请求/webapptest时，您的浏览器会向您的服务器发出请求（例如Spring App），并返回index.html。

一旦你加载了index.html和你的Angular app / module，它就会处理所有匹配它的路由相对于它的路径 - 这里是相关的Angular reference，特别是关于 html5mode

请注意，在此模式下，Angular会拦截所有链接（受制于 “Html链接重写”规则如下）并以某种方式更新网址从不执行整页重新加载

因此，从您的Angular应用中，对/webapptest/page2的任何请求都会与其路由匹配

.when('/page2', { templateUrl : 'resources/html/page2.html',

并由Angular专门处理，它会触发Angular请求相应的templateUrl - resources/html/page2.html。

此时网址将为/webapptest/page2，但您的浏览器从未实际从您的服务器请求过。但是当你点击刷新时，你的浏览器接管，看到它的历史/位置中的/webapptest/page2并从你的服务器请求，我假设你的服务器没有，所以你得到404.

要解决此问题，您需要配置服务器，让Angular处理/webapptest/**的所有请求，这基本上意味着您需要将所有/webapptest/**映射到index.html。

您可以拥有一个简单的视图控制器

@Controller public class SpaController { @RequestMapping(value={"/webapptest/**"}, method=RequestMethod.GET) public String app() { return "index"; } }

或者如果您已经在使用它，请将上述映射添加到Spring ViewControllerRegistry。

顺便说一句 - 这需要检查吗？

if(window.history && window.history.pushState) { $locationProvider.html5Mode(true); }

对于不支持html5mode的旧版浏览器，$ location是否会回退到Hashbang模式？

在Angular中没有主题标签的刷新页面不起作用

1 个答案: