Deep Linking
Deep linking is the usage of the URL, which will take to specific page (content) directly without traversing application from home page [1]. It helps in getting indexed so that these links can be easily searchable by search engines like Google, Yahoo.. etc.
Deep Linking in Angular
With ‘#’:
Angular by default supports deep linking using ‘#’.
Ex: https://www.deeplinking.com#/deep/linking
It has following drawbacks
- Search engines (SEO) don’t recognise the url after ‘#’, so the page full path does not get indexed.
- Google analytics also don’t capture the url after ‘#’, so we may not get accurate results.
- Readability of the url will not be that good.
Examples for deep linking urls:
http://www.divami.com/blog/deep-linking-angular/
https://www.linkedin.com/groups/4314060/profile
https://www.facebook.com/pages/JavaScript/113124472034820
Removing ‘#’:
We have to do following changes in angular application code to get rid of ‘#’ in url.
- Enable html5Mode:
We have to enable$locationProvider.html5Mode(true).hashPrefix(‘!’)
in angular config function. Some browsers don’t support html5Mode, so we need to add hashPrefix(‘!’).angular.module('appModule').config(['$localStorageProvider', function($localStorageProvider) { $locationProvider.html5Mode(true).hashPrefix(‘!’); }]);
- Loading files: Generally in HTML header we include files as
<script src="vendor/angular.js"></script>
. After enabling html5Mode, these files will not be loaded correctly. To fix this we have to set<base href="/">
or<script src="/vendor/angular.js"></script>
Note: If you mention href value as ‘/’, it will refer to server base url. If you want to point to other domain path for example in local host, it will not work with ‘/’, so we need to mention it as<base href="http://localhost/appFolder/" />
- Enabling Redirection: Reload & Refresh will not work after html5Mode is enabled, because browser will check for folders and it leads to
404 Page Not Found
error. To get it worked we need to redirect toindex.html
file, for that we have to add the following in.htaccess
file (or in sever configuration)[2]: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.html [L]
Note: If you are using
debug.html
for development andindex.html
for production, then you have to redirect to debug.html in development phase and index.html in production phase. - You need to remove ‘#’s before urls if you use any. For example we use like
<a href="#deep/linking">Deep Linking</a>
when we use $routeProvider. In such href links we need to remove “#”
References: