了解从角度路由中删除哈希 # 需要什么 [英] Understanding what it takes to remove the hash # from angular routes

问题描述

在删除井号之前，我有

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

After removing the pound sign, I added to 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

now hitting http://localhost:8080 redirects to http://localhost:8080/main

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

but going to http://localhost:8080/main directly in the browser returns 404 and the other pages too

我应该怎么做才能解决问题?

What should I do to fix the problem?

我的后端是 java

推荐答案

这是意料之中的.以下是未打开 html5 时发生的情况:

That's expected. Here's what happens when html5 is not turned on:

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

现在当您启用 html5 模式并加载 index.hml 时会发生什么?

Now what happens when you enable html5 mode and load index.hml?

• 在地址栏中输入 url http://localhost:8080/index.html
• 浏览器向 localhost:8080/index.html 发出 http 请求并获取 html 页面作为响应
• html 页面包含一个执行的 angular 应用程序.angular router解析路径(/index.html)，发现没有匹配到任何路由，于是将地址栏中的位置改为默认:/main，然后加载关联的view和controller.更改地址栏中的位置不会使浏览器执行任何操作，只会在其导航历史记录中添加新条目.

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

Now, what happens if you hit refresh, or directly enter http://localhost:8080/main in the address bar? Well in that case, you're saying the browser: "please load the page at the url http://localhost:8080/main. So that's what the browser does: it sends an HTTP request to http://localhost:8080/main. Since the server doesn't have anything at this address, it sends back a 404.

现在如何使它工作?它实际上非常简单:您需要将服务器配置为在收到对路径 /main(以及 angular 应用程序的所有其他路径)的请求时将 index.html 页面发回.这样，浏览器将加载 HTML 页面，它包含的 Angular 应用程序将重新启动，Angular 路由器将从 URL 解析路径 (/main)，从而加载视图和与该路径关联的控制器.

Now how to make it work? It's actually quite simple: you need to configure the server to send back the index.html page when it gets a request for the path /main (and for all the other paths of the angular application). That way, the browser will load the HTML page, the angular application it contains will be restarted, the angular router will parse the path (/main) from the URL, and it will thus load the view and the controller associated to that path.

这篇关于了解从角度路由中删除哈希 # 需要什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！