in html5mode(true) views are not loading in page refresh in angular js

Question

When using html5mode(true) views are not loading on page refresh in angular.js

    <base href="/">
    <div ng-app="directives" >
        <a href="/home">Home</a>
        <a href="/about">about</a>
        <a href="/contact">contact</a>
        <div ng-view></div>
    </div>

in config

    directives.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
    $routeProvider.when("/",{
        templateUrl:"directives/home.html"
    }).when("/home",{
        templateUrl:"directives/about.html"
    }).when("/about",{
        templateUrl:"directives/contact.html"
    }).when("/contact",{
        templateUrl:"directives/about.html"
    }).otherwise({
        redirectTo : "/"
    })
    $locationProvider.html5Mode(true).hashPrefix("!")
}])

http://127.0.0.1:58552/about

not rendering the proper view.

Answer 1

That's one of the drawbacks of using html5Mode(true).

Basically you server can't find the resource as there is none under that URL. The address is controlled by Angular and at the point, Angular hasn't kicked in to control the pages and URLs and stuff.

The solution I found for this problem was to set up an URL rewrite (http://httpd.apache.org/docs/2.0/misc/rewriteguide.html) on my Apache server to clean up the URLs and remove the html5Mode(true).