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:

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


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

$locationProvider.html5Mode(true);


but no luck.
Also, I used this tag inside my
<head>
tag:

<base href="/">


This line doesn't change anything as well.

My routing code and navigation code is given below:

app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "payment/MakePayment",
controller: "paymentController"
})
.when("/SearchPayment", {
templateUrl: "payment/SearchPayment",
controller: "paymentController"
})
.when("/Flush", {
templateUrl: "payment/InvalidateCacheForIndexAction",
controller: "paymentController"
});
$locationProvider.html5Mode(true).hashPrefix('!');
});


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>
</ul>
</div>


When site is launched I see
http://localhost:56810/
in browser. When I click on
Search Payment
link the URL in browser reads
http://localhost:56810/#!#SearchPayment
. Same thing happens for
Flush
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

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

and remove #

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

OR

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

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

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