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
user3373581
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
Born2Code
source
to share
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
bahadir
source
to share
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
ArtemKh
source
to share