How to have single page application without # inside the URL using Angularjs?

Question

I am trying to build an single page application with angular js. But i don't want # inside the url when the template is included. I have used the

 $locationProvider.html5Mode(true) 

app.config(['$routeProvider', '$locationProvider',
  function ($routeProvider, $locationProvider) {
        $routeProvider.
      when('/dashboardnew', {
                templateUrl: './dashboard_tmp',
                controller: 'CategoryCtrl'
            }).
      otherwise({
                redirectTo: '/dashboardnew'
            });
        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    }]);

but this didn't work when the page is reloaded. How should I solve this problem? Thanks

Answer 1

You cannot, that's the compromise. The html5 mode only works if angular is loaded, which is why it will not work if the page is reloaded or if paths are bookmarked. Stick with the #, people are starting to get used to seeing them

Answer 2

ofcourse you can, use html5 mode in angular and rewrite every (non-api) request to your angular home page on server side. angular will pick up url and go to url location

Answer 3

You need to edit your .htaccess file

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.php [L]

RewriteRule: index.php or index.html