AngularJS converting my ng-href url "slash" into "%2f"

Question

I have an angularJS application that is a gallery. For each picture, associated with it is an ng-href with #/{{files.id}}.

<a ng-href="#/{{files.id}}"...

However, when I click it, the URL that is ultimately displayed is

http://localhost:3000/gallery#%2F0

which destroys my angular routing of

when('/gallery/:imageID', { templateUrl: 'load_image.html' }).

Can someone explain to me how to encode the URL's correctly? Or just use something that doesn't encode the forward slash?

In my case, I had to remove $locationProvider.html5Mode(true); — Larissa Leite, Sep 10 '14 at 01:19
@LarissaLeite Removing the html5More(true) will will write your urls with a # or #/ - simply using / instead of #/ fixed my issue. — Spade, Oct 25 '15 at 03:43
Possible duplicate of [How to generate url encoded anchor links with AngularJS?](http://stackoverflow.com/questions/14512583/how-to-generate-url-encoded-anchor-links-with-angularjs) — Keith Beard, Dec 24 '15 at 17:15
Possible duplicate of [URL hash-bang (#!/) prefix instead of simple hash (#/)](http://stackoverflow.com/questions/41226122/url-hash-bang-prefix-instead-of-simple-hash) — Mistalis, Mar 29 '17 at 06:47

score 13 · Answer 1 · answered Jan 19 '17 at 15:51

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').

You should try this.

index.html

<li class="active"><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>

app.js

angular.module('appRoutes',['ngRoute'])
.config(function($routeProvider, $locationProvider){   

    $locationProvider.hashPrefix('');

    $routeProvider
        .when('/',{
            templateUrl:'app/views/pages/home.html'
        })
        .when('/about',{
            templateUrl:'app/views/pages/about.html'
        });
 });

Thanks! This works fine. The OP should have accepted this answer. — cezar, Nov 22 '17 at 10:42

socket_var · Answer 2 · 2017-08-22T13:51:46.160

6

There are two solutions:

Not recommended: Add ! in your anchors:

the default hash bang has been changed from "" to "!" in angular and since it will not likely change you could simply make a habit of adding "#!" in your anchor tags instead of "#".

Recommended: Use $locationProvider:

Use

$location.hashPrefix("")

in your module config to use empty string as a hash bang just like old times !!

edited Aug 22 '17 at 13:51

answered Feb 07 '17 at 11:05

socket_var

1,063
2
11
18

Adding `!#` is deprecated now isn't it? I just use standard html `/my-url` without any hash or bangs and it works with 1.6.4 (_html5 mode enabled_) – aliopi Aug 08 '17 at 09:11

score 2 · Answer 3 · answered Jun 07 '16 at 11:18

Yo need not to encode anything here. Just add * in your path Param as mentioned below and enable html5Mode

  app.config(function ($routeProvider) {
     $routeProvider
    .when('/home', {templateUrl: 'home.html', controller: 'HomeCtrl'})
    .when('/base/:path*', {templateUrl: 'path.html', controller: 'pathCtrl'})
    .otherwise({redirectTo: '/home'});
 });

 $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });

AngularJS converting my ng-href url "slash" into "%2f"

3 Answers3

Linked