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-appDocumentRoot /path/to/app<Directory /path/to/app># Don't rewrite files or directoriesRewriteEngine on RewriteCond %{REQUEST_FILENAME} -f [OR]RewriteCond %{REQUEST_FILENAME} -dRewriteRule ^ - [L]# Rewrite everything else to index.html to allow html5 state linksRewriteRule ^ 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.
Excellent post--I'm glad I found it.Thanks for sharing...
ReplyDeleteAngularjs Developer
This comment has been removed by the author.
ReplyDeleteThanks for sharing this informative post with us. This information is very useful for those who are searching best Angularjs Development Services, or Angularjs Development Company
ReplyDelete