Configure $locationProvider and set HTML5 mode true in AngularJS application
Remove trailing # from AngularJS URLs
While developing website using angularJS, you can see a trailing # in all the URLs. For example:
If your domain name is http://example.com and page is index.html then angularJS URL will be like:
http://example.com/#/index.html/
instead of:
http://example.com/index.html/
This trailing # has several disadvantages like, this kind of URLs can not be search engine optimize.
To remove this #, one need to follow below steps:
1. Enable the HTML5 mode with $locationProvider.
2. Setting base for relative links.
3. Server Side configuration.
Lets dive in details of this steps:
1. Enable the HTML5 mode with $locationProvider:
In AngularJS, $location service parses the URL given in address bar. Here we will use $locationProvider to set HTML5 mode true. For this:
- Pass the $locationProvider as an argument to .config function. This function is generally located in app/app.route.js file.
- By using this argument, set the value of HTML5 mode to true.
So you code will look like this:
...
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
...
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
...
2. Setting base for relative links:
To link your whole application using relative links, you need to specify base tag in head section of your main page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
3. Server Side configuration:
The URLs with # do not require any server side configuration for parsing. But after removing # for angular URLs, it requires server side configurations. Configurations are different according to different kind of servers. Here I am showing code for two types of web servers that is:
- Apache
- Nginx
Here is the configuration for Apache:
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
# Don't rewrite files or directories
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
For Nginx, code look like this:
server {
server_name my-app;
root /path/to/app;
location / {
try_files $uri $uri/ /index.html;
}
}
Now restart your server. And you are done. Pretty angular URLs are now serving your application.