AngularJS: route provider changes "/" into %2F [duplicate]

Question

I am building an AngularJS appplication and I have problems with the URL when building the second view:

My appContact.js looks like this:

(function () {

    "use strict";

    var app = angular.module("appContacts", ["simpleControls", "ngRoute"])
        .config(function ($routeProvider, $locationProvider) {

            $routeProvider.when("/", {
                controller: "contactsController",
                controllerAs: "vm",
                templateUrl: "/views/contactsView.html"
            });

            $routeProvider.when("/details/:firstName", {
                controller: "contactsDetailsController",
                controllerAs: "vm",
                templateUrl: "/views/detailsView.html"
            });

            $routeProvider.otherwise({ redirectTo: "/"});

            $locationProvider.html5Mode({
                enabled: true,
                requireBase: false
            });

        });
})();

In my HTML I have this link:

<a asp-controller="Contact" asp-action="Details" ng-href="#/details/{{contact.firstName}}" >{{ contact.firstName}}</a>

When I hover in the Browser I have the correct proposed link like:

 **http://localhost:8000/#/details/Matthew**

But when I click the link to navigate to the new page the URL changes to

 **http://localhost:8000/#%2Fdetails%2FMatthew** 

Changing the "/" by %2 make the app fail and a blank page is shown.

Do you know why is this and how to correct this issue?

I have already read similar posts her but none of them seems to work since I have not access to the encoded URL before it reaches the Browser and the error is there.

Thanks

Rafael

Answer 1

May this one will help you.

include $locationProvider.hashPrefix(''); in your config.

           Example.
         <div>
            <a href ="#/table">table</a>
            <a href ="#/addPage">addForm</a>
        </div>

        app.config(function($routeProvider, $locationProvider) {
            $locationProvider.hashPrefix('');
         $routeProvider.when("/addPage", {

                           templateUrl :"partials/add.html",
                           controller : "ngRepeatTableCtrl"

                         })
                      .when("/tablePage", {

                           templateUrl :"partials/table.html",
                           controller : "ngRepeatTableCtrl"
                     })
                      .otherwise({
                             templateUrl :"partials/table.html",
                             controller : "ngRepeatTableCtrl"

                        });


    });