Remove # from AngularJS URL

1 Enable html5mode routing
$locationProvider.html5Mode(true);

Example: 
myapp.config(function($routeProvider,$locationProvider){

  $routeProvider
    .when('/',{
        templateUrl : 'home.html',
        controller  : 'pagecontroller'
        })
    .when('/about',{
        templateUrl : about.html',
        controller  : 'pagecontroller'
        })
    .otherwise('/');
     $locationProvider.html5Mode(true);
    })

2 Remove # symbols from all the links in index.html

<a href="#/home">Home<a/>
<a href="#/courses">Courses<a/>
<a href="#/students">Students<a/>

Example: 

<a href="home">Home<a/>   /* use link without hash */
<a href="courses">Courses<a/>
<a href="students">Students<a/>


3 Include URL rewrite rule in .htaccess

RewriteEngine On
RewriteBase /folder Name/ 
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_METHOD} !OPTIONS
RewriteRule ^(.*)$ index.html [L]

Note : if you are using folder in wamp or xampp server  use folder name in RewriteBase line otherwise don't use the folder name

Example:  

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_METHOD} !OPTIONS
RewriteRule ^(.*)$ index.html [L]


4 Set the base href element of the location of you single page application

<base href="/folder Name/" />  or  <base href="/" />

Note:
1. if you are using folder in wamp or xampp server  use folder name otherwise don't use the folder name.
2. paste base href element in your main index file and top of all scripts.

Share on Google Plus

About Amit

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.