了解如何从angularpath中移除散列号

去除散列符号之前，我有

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:8080redirect到http://localhost:8080/main

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

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

我的后端是java

Answer 1

这是预料之中的。 以下是html5未打开时会发生的情况：

• 您在地址栏中inputurlhttp://localhost:8080/index.html#/main
• 浏览器向localhost：8080 / index.html发起一个http请求并获取html页面作为响应
• 该html页面包含一个执行的angular度应用程序。 angular度路由器在散列（/ main）之后分析path，从而加载关联的视图和控制器

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

• 您在地址栏中inputurlhttp://localhost:8080/index.html
• 浏览器向localhost：8080 / index.html发起一个http请求并获取html页面作为响应
• 该html页面包含一个执行的angular度应用程序。 angular路由器parsingpath（/index.html），看到它不匹配任何路由，从而将地址栏中的位置更改为默认值：/ main，然后加载相关的视图和控制器。 在地址栏中更改位置不会使浏览器执行任何操作，除了在其导航历史logging中添加新条目之外。

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

现在如何使它工作？ 其实很简单：你需要configuration服务器，当它得到path/main （和angular度应用程序的所有其他path）的请求时发回index.html页面。 这样，浏览器将加载HTML页面，它所包含的angular度应用程序将被重新启动，angular度路由器将从URLparsingpath（ /main ），并因此将视图和与该path关联的控制器加载。