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 to index.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 and index.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 “#”