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

Question

I have Spring+Angular+Rest webapp . I remove hashtage from url on this way ..

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

in index.html

 <base href="/webapptest/">

Now, home page look OK, and everything work great . Looks like : http://localhost:8080/webapptest/

Problem is when , after i remove hashtag, when I go to second page ... http://localhost:8080/webapptest/page2

First time page is show , but after reload ... error 404 . I read that is problem on server side, becose i chabge url... but I don't know what to change ... This is 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;
}

This is controller and method which use page2 , the same controller use also home page but another method . Have someone idea what is problem and how to solve reload page without hashtag ?

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

When you initially request /webapptest , your browser makes the request to your server (eg Spring App), which it returns the index.html .

Once you've loaded index.html and your Angular app/module, it will handle all request that matches it routing relative to it's path -- here's the relevant Angular reference , specifically concerning html5mode

Note that in this mode, Angular intercepts all links (subject to the "Html link rewriting" rules below) and updates the url in a way that never performs a full page reload

So from your Angular app, any request to /webapptest/page2 will match it's routing

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

and be handle exclusively by Angular, which triggers Angular to request the corresponding templateUrl -- resources/html/page2.html .

At this point the url will be /webapptest/page2 , but your browser never actually requested that from your server. But when you hit refresh, your browser takes over, sees the /webapptest/page2 in it's history/location and request that from your server, which I'm assuming your server doesn't have so you get a 404.

---

To fix this, you need to configure your server to let Angular handle all request to /webapptest/** , which basically means you need to map all /webapptest/** to index.html.

You can have a simple view controller

@Controller
public class SpaController {

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

or add the above mapping to Spring ViewControllerRegistry if you're already using it.

---

BTW - is this check needed?

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

Doesn't $location fallback to Hashbang mode for legacy browser that don't support html5mode?