How to deal with AngularJS formatting forward slash in my URL to escape code %2F

Question

I am trying to implement a single page application with AngularJS 1.6.0-rc.2, and it keeps formatting a forward slash to its escape code %2F in my URL. Because of that it gets not detected by the route.

I have read about hashbangs and tried fixing it by setting the HTML5 mode on, but the url keeps getting converted.

Questions

1 - Why Angular has to do such a thing, what's the purpose of making this conversion?

2 - I noticed version 1.3 doesn't do that. Should I be using this version instead?

3 - How to fix it?

More Details

I have 3 pages and 1 javascript file

index.htm
home.htm
forecast.htm
app.js

Here's some part of app.js that I believe might be relevant:

$routeProvider
    .when('/', {
        templateUrl: 'pages/home.htm',
        controller: 'homeController'

    })
    .when('/forecast', {
        templateUrl: 'pages/forecast.htm',
        controller: 'forecastController'

    })

My index.htm has my ng-view

And part of home.htm:

 <a href="#/forecast" class="btn btn-primary">Get Forecast</a>

So when the link 'Get Forecast' is clicked, the URL I get is this:

http://127.0.0.1:65381/index.htm#!/#%2Fforecast

That means, that URL doesn't match the route then I still have my home.htm content instead of forecast.htm

Try removing the #, otherwise add a * to your routeProvider when to enable html5Mode — Sterling Archer, Dec 07 '16 at 04:08
http://stackoverflow.com/questions/16837704/angularjs-normal-links-with-html5mode this question should help you — Sterling Archer, Dec 07 '16 at 04:09
@SterlingArcher, removing **#** I get this _URL_: `http://127.0.0.1:65381/forecast`. If I just enable HTML5 my _home.htm_ content don't get displayed. I tried the adding the attribute _target=self_ in my link but nothing changed. Reading the $location documentation I also tried: `html5Mode({ enabled: false, requireBase: false, rewriteLinks: false });` but it still adds the escape code to the url — skinny_jones, Dec 07 '16 at 15:20

score 2 · Answer 1 · edited May 23 '17 at 12:08

I got some help from a friend and the solution is to add '!' on my link, so instead of:

<a href="#/forecast" class="btn btn-primary">Get Forecast</a>

it should be this:

<a href="#!/forecast" class="btn btn-primary">Get Forecast</a>

I know this is the hashbang mode, and it's deprecated, I just wanted to know how to play around with it properly, with Angular.

Ref: What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

So I will update my links now...

How to deal with AngularJS formatting forward slash in my URL to escape code %2F

1 Answers1