Home -› Angular Js -› Remove hash from AngularJs url
19 Dec

Remove hash from AngularJs url

Remove hash from AngularJs url

Rewrite your AngularJs app url from http://domain.com/#/path/ to http://domain.com/path/

There are few things to set up for remove hash from AngularJs url. So your link in the browser will look like http://domain.com/path/ and these are your base href + angularjs config + .htaccess url rewrite.

1) Base href

Set the base href in HTML file.

<html>
  <head>
    <base href="/">
  </head>
</html>

2) Angularjs

Add html5Mode inside your angularjs config file.

app.config(function ($routeProvider,$locationProvider) {
$routeProvider
  .when('/', {
	templateUrl: 'home-page.html',
	controller : 'appController'
	});
$locationProvider.html5Mode(true);
});

3) .htaccess url rewrite

Put this inside your .htaccess file.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
Follow me

Sanju

I’m Sanjunath.S from Mumbai, India. I like web technologies, traveling & history. I have 6+ years experience in web technologies like HTML 5, CSS 3, JavaScript, Bootstrap and PHP.
Follow me

About Sanju

I’m Sanjunath.S from Mumbai, India. I like web technologies, traveling & history. I have 6+ years experience in web technologies like HTML 5, CSS 3, JavaScript, Bootstrap and PHP.




  • CeebLaj Thoj

    Hi, I followed your code it works very nice but I do have problem all of my script and css file said like this in console:

    Resource interpreted as Stylesheet but transferred with MIME type text/html: “http://domain.com/assets/plugins/bootstrap-3.3.2/css/bootstrap.min.css”.

    And my webpage won’t be display how to solve this?

    • w3sanju

      Hi, Please show me your code.