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

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

Have you read this http://stackoverflow.com/questions/24814472/angularjs-converting-my-ng-href-url-slash-into-2f? — MMhunter, Aug 12 '16 at 08:35
@MMhunter: Yes I read it and I tried it in my solution but it did not work. — Rafael Munoz, Aug 12 '16 at 09:00
@tsadkanyitbarek: it does not work with or without # I have tested both solution without success — Rafael Munoz, Aug 12 '16 at 09:01
@RafaelMunoz You can decode the parameters of URL or entire URL at back end code. using HttpUtility.UrlEncode("URL") . — PTank, Sep 12 '20 at 13:24

score 9 · Answer 1 · answered Jan 25 '17 at 10:18

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"

                        });


    });

score 4 · Answer 2 · answered Jun 18 '17 at 20:40

I had the same issue, working after adding locationProvider like 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>

score 1 · Answer 3 · answered Aug 12 '16 at 08:37

1

You enabled HTML5Mode, which means Angular tries to us history.pushState rather than using the hash to do routing. Guess your server does not support pushState or the option is not enabled?

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

answered Aug 12 '16 at 08:37

Sebastian Sebald

16,130
5
62
66

1

Thanks for the help, I have read the link and added rewriteLinks: true into the HTML5 section and it works, with an small issue: I land in the correct URL, it shows the view correctly, but If I refresh the page it is all gone -> blank page :-( – Rafael Munoz Aug 12 '16 at 09:13
Sounds like you need to properly configure your server. This seems not to be an issue wie Angular. Plus, "blank page" is not really a stack trace ;) – Sebastian Sebald Aug 12 '16 at 09:14
1

I am working locally in my computer (localhost) still in development. Anyway, thanks for the help, at least I am moving on after two days. Greetings from neighboring Karlsruhe – Rafael Munoz Aug 12 '16 at 09:18
Well, even if your using "localhost" you have a local server that you may be able to configure! Greetings to you too :) – Sebastian Sebald Aug 12 '16 at 09:20

score 0 · Answer 4 · answered Dec 12 '16 at 12:19

0

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

answered Dec 12 '16 at 12:19

Clarence

11
1
3

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

4 Answers4

Linked

Related