Remove #! from url in angularjs

Question

I am trying to understand how to remove #! from the url in angularjs using ng-route . Can please someone help me with the exact steps I need to follow in order to remove #!.

Here is the code

index.html

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

  <script src="a02.js"></script>

</head>

<body ng-app="testApp">
  Hello there
  <hr>
  <a href="#test">Click Me </a>
  <div ng-view></div>
</body>
</html>

a02.js

var app = angular.module("testApp", ['ngRoute']);

  app.config(["$routeProvider",function($routeProvider){
    $routeProvider.when('/test',{
        template:"<strong>It's routing template</strong>"
    })
}]);

My requirement is when click on click me link it should display

It's routing template.

But when browser loads index.html the url is coming as

http://localhost:3000/index.html#!/

and when I click on Click Me link the url is coming as

http://localhost:3000/index.html#!/#test

I want this url and link to be work without #!.

Yuval · Accepted Answer · 2017-09-19 10:59:39Z

3

in your js router file you need to add:

$locationProvider.hashPrefix(''); 
$locationProvider.html5Mode(true);

and in your index html file (head tag) you need to add:

<base href="/">

edited Sep 19, 2017 at 10:59

answered Sep 19, 2017 at 10:54

Yuval

5471 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mahesh nanayakkara Over a year ago

Why we need to add $locationProvider.hashPrefix(''); ?

Collectives™ on Stack Overflow

Remove #! from url in angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related