了解如何从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

这是预料之中的。 以下是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关联的控制器加载。