AngularJS: route provider changes "/" to% 2F

Question

I am creating an AngularJS application and I am having problems with the URL when creating 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 am in the browser, I have the correct suggested link, for example:

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

But when I click the link to go to a new page, the URL changes to

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

Changing "/" to% 2 makes the application fail and a blank page is displayed.

Do you know why this is and how to fix this problem?

I already read similar messages, but none of them seem to work, since I do not have access to the encoded URL before it reaches the browser, and there is an error there.

thanks

Raphael

Answer 1

May this help you.

enable $ locationProvider.hashPrefix (''); in your configuration.

  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" }); }); 

Answer 2

You have enabled HTML5Mode, which means that Angular is trying to use history.pushState , rather than using a hash for routing. Guess your server does not support pushState or the option is not enabled?

Api Docs: https://docs.angularjs.org/api/ng/provider/ $ locationProvider

Answer 3

I had the same issue working after adding locationProvider as below

 myApp.config(["$routeProvider","$locationProvider", function ($routeProvider,$locationProvider) { $routeProvider .when("/home", { templateUrl: "Templates/home.html" }) .when("/class", { templateUrl: "Templates/class.html" }).otherwise({ redirectTo: "/class" }); $locationProvider.hashPrefix(''); }]); 

HTML

  <ul> <li> <a href="#/home">Home</a> </li> <li> <a href="#/class">Class</a> </li> </ul> 

Answer 4

I answer the same question. Removing the "#" works for me. You can write it like this: <a asp-controller="Contact" asp-action="Details" ng-href="/details/{{contact.firstName}}" >{{ contact.firstName}}</a>