Clever Geek Handbook

How to use a single page app without # inside url using Angularjs?

I am trying to create a single page app with angular js. But I don't want # inside the url when including the template. I used

 $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 it didn't work when the page was reloaded. How can I solve this problem? Thanks to

+3


source to share


3 answers


You cannot make a compromise. The html5 mode only works if angular is loaded, so it won't work if the page is reloaded or if the bookmarks are checked. Stick with #, people are starting to get used to them.



0


source


you can use html5 mode in angular and rewrite every (non-api) request to the angular homepage on the server side. angular will pick up the url and navigate to the url location



0


source


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

0


source






More articles:


All Articles