When you are developing a ‘Single Page AngularJS application’ and you use ‘ngRoute’ for routing by default, AngularJS routes URLs with a hashtag.
It’s easy to remove that # from the URL and make them pretty. Behind this, I have spent 3 days making functionality work.
You just need to do four things in order to achieve this.
Configure $locationProvider
Set base for relative links
Replace href=”#” with href=”/”
Server-side changes in the apache file.
1. We will use $locationProvider and set html5Mode to true. You can do this while configuring your angular application.
2. Setting Relative links
$location in HTML5 mode requires a <base> tag to be present!
If you configure $location to use html5Mode, you need to specify the base URL for the application with a <base href=’/’>.
3. Remove # as from all the href routing
4. Server-side apache file configurations.
<VirtualHost *:80>
#ServerName www.example.com
DocumentRoot /var/www/html
<Directory /var/www/html>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
RewriteEngine on
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
LogLevel warn
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
In this way to get pretty URLs and remove the # in your Angularjs application. The above configuration is for the APACHE server, for Nginx contact us.