CODEWITHSUNDEEP
angularjsasp.net-mvcangular-routing
gliese 581 g
gliese 581 g

Reputation: 379

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.

Upvotes: 0

Views: 1206

Answers (1)

Salih Şenol &#199;akarcı
Salih Şenol &#199;akarcı

Reputation: 2330

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>

Upvotes: 1

Related Questions