了解从角度路由中删除哈希#所需的内容

Question

在删除哈希标志之前,我有

mainApp.config(function ($locationProvider, $routeProvider) {
    $routeProvider
    .when('/page', {
        controller: 'Page',
        templateUrl: 'templates/page.html'
    })
    .when('/main', {
        controller: 'Main',
        templateUrl: 'templates/main.html'
    })
    .otherwise({ redirectTo: '/main'});

    //$locationProvider.html5Mode(true);
});

这些都很好

http://localhost:8080/index.html#/main
http://localhost:8080/index.html#/page

删除井号后,我添加到index.html

<base href="/">

<script src="/vendor/bootstrap-dist/js/bootstrap.min.js"></script>
<script src="/vendor/javascript/angular/angular.js"></script>
<script src="/vendor/javascript/angular/angular-route.js"></script>
<script src="/vendor/javascript/angular/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="/javascript/index.js"></script>
<script src="/javascript/controllers/main.js"></script>
<script src="/javascript/controllers/page.js"></script>

和index.js

$locationProvider.html5Mode(true);

现在点击http://localhost:8080重定向到http://localhost:8080/main

但http://localhost:8080/main直接在浏览器中返回404和其他页面

我该怎么做才能解决这个问题？

我的后端是java

Answer 1

这是预期的.这是html5未打开时发生的情况:

• 你http://localhost:8080/index.html#/main在地址栏输入网址
• 浏览器向localhost:8080/index.html发出http请求,并获取html页面作为响应
• html页面包含一个执行的角度应用程序.角度路由器在散列(/ main)之后解析路径,从而加载关联的视图和控制器

现在启用html5模式并加载index.hml会发生什么？

• 你http://localhost:8080/index.html在地址栏输入网址
• 浏览器向localhost:8080/index.html发出http请求,并获取html页面作为响应
• html页面包含一个执行的角度应用程序.角度路由器解析路径(/index.html),发现它与任何路由都不匹配,因此将地址栏中的位置更改为默认值:/ main,然后加载关联的视图和控制器.更改地址栏中的位置不会使浏览器执行除导航历史记录中添加新条目以外的任何操作.

现在,如果您点击刷新或直接输入http://localhost:8080/main地址栏会发生什么？那么在这种情况下,你说浏览器:"请在网址加载页面http://localhost:8080/main.这就是浏览器的作用:它发送一个HTTP请求http://localhost:8080/main.由于服务器在这个地址没有任何东西,它会发回一个404.

现在如何使它工作？它实际上非常简单:您需要配置服务器以在获取路径请求时/main(以及角度应用程序的所有其他路径)发送回index.html页面.这样,浏览器将加载HTML页面,它包含的角度应用程序将重新启动,角度路由器将从/mainURL 解析path(),因此它将加载视图和与该路径关联的控制器.