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

问题

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

回答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"

                        });


    });

回答2:

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>

回答3:

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

回答4:

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>

来源：https://stackoverflow.com/questions/38913371/angularjs-route-provider-changes-into-2f

标签

javascript

ASP.NET

angularjs

routing