title: AngularJS: route provider changes "/" into %2F
body: <p>I am building an AngularJS appplication and I have problems with the URL when building the second view:</p>
  
  <p>My appContact.js looks like this:</p>
  
  <pre><code>(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
              });
  
          });
  })();
  </code></pre>
  
  <p>In my HTML I have this link:</p>
  
  <pre><code>&lt;a asp-controller="Contact" asp-action="Details" ng-href="#/details/{{contact.firstName}}" &gt;{{ contact.firstName}}&lt;/a&gt;
  </code></pre>
  
  <p>When I hover in the Browser I have the correct proposed link like:</p>
  
  <pre><code> **http://localhost:8000/#/details/Matthew**
  </code></pre>
  
  <p>But when I click the link to navigate to the new page the URL changes to </p>
  
  <pre><code> **http://localhost:8000/#%2Fdetails%2FMatthew** 
  </code></pre>
  
  <p>Changing the "/" by %2 make the app fail and a blank page is shown.</p>
  
  <p>Do you know why is this and how to correct this issue?</p>
  
  <p>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.</p>
  
  <p>Thanks</p>
  
  <p>Rafael</p>