angularjs - Understanding what it takes to remove the hash # from angular routes -

before removing hash sign, had

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); }); 

and these worked fine

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

after removing pound sign, added 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> 

and index.js

$locationprovider.html5mode(true); 

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

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

what should fix problem?

my backend java

that's expected. here's happens when html5 not turned on:

• you enter url http://localhost:8080/index.html#/main in address bar
• the browser makes http request localhost:8080/index.html , gets html page response
• the html page contains angular application executed. angular router parses path after hash (/main), , loads associated view , controller

now happens when enable html5 mode , load index.hml?

• you enter url http://localhost:8080/index.html in address bar
• the browser makes http request localhost:8080/index.html , gets html page response
• the html page contains angular application executed. angular router parses path (/index.html), sees doesn't match route, , changes location in address bar default: /main, , loads associated view , controller. changing location in address bar doesn't make browser other adding new entry in navigation history.

now, happens if hit refresh, or directly enter http://localhost:8080/main in address bar? in case, you're saying browser: "please load page @ url http://localhost:8080/main. that's browser does: sends http request http://localhost:8080/main. since server doesn't have @ address, sends 404.

now how make work? it's quite simple: need configure server send index.html page when gets request path /main (and other paths of angular application). way, browser load html page, angular application contains restarted, angular router parse path (/main) url, , load view , controller associated path.