gliese 581 g gliese 581 g - 4 years ago 111
AngularJS Question

Unable to remove !# from angular routes while using ASP.NET MVC

I am using AngularJS in my MVC application. I am facing the very common routing issue where

appears in the URLs. I have looked out for solution and found this solution almost in every accepted answer which fails miserably in my case.
I have used this line of code inside my routing:


This line doesn't change anything. I tried this one as well:


but no luck.
Also, I used this tag inside my

<base href="/">

This line doesn't change anything as well.

My routing code and navigation code is given below:

app.config(function ($routeProvider, $locationProvider) {
.when("/", {
templateUrl: "payment/MakePayment",
controller: "paymentController"
.when("/SearchPayment", {
templateUrl: "payment/SearchPayment",
controller: "paymentController"
.when("/Flush", {
templateUrl: "payment/InvalidateCacheForIndexAction",
controller: "paymentController"

Navigation code-

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Make Payment</a></li>
<li><a href="#SearchPayment">Search Payment</a></li>
<li><a href="#Flush">Flush</a></li>

When site is launched I see
in browser. When I click on
Search Payment
link the URL in browser reads
. Same thing happens for
as well. Also the navigation doesn't take place. That means the change in URLs doesn't get handled by given routeProvider routes.

Answer Source

Just use


and remove #

<li><a href="SearchPayment">Search Payment</a></li>
<li><a href="Flush">Flush</a></li>  


Just use following so that you dont have to configure your server side for only handling "/"


and remove #

<li><a href="SearchPayment">Search Payment</a></li>
<li><a href="Flush">Flush</a></li>  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download