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
– Larissa Leite, Commented Sep 10, 2014 at 1:19
@LarissaLeite Removing the html5More(true) will will write your urls with a # or #/ - simply using / instead of #/ fixed my issue. — Spade
– Spade, Commented Oct 25, 2015 at 3:43
Possible duplicate of How to generate url encoded anchor links with AngularJS? — Keith Beard
– Keith Beard, Commented Dec 24, 2015 at 17:15
Possible duplicate of URL hash-bang (#!/) prefix instead of simple hash (#/) — Mistalis
– Mistalis, Commented Mar 29, 2017 at 6:47

Abhishek Kulshrestha · Accepted Answer · 2017-01-19 15:51:47Z

13

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'
        });
 });

answered Jan 19, 2017 at 15:51

Abhishek Kulshrestha

1,4734 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cezar Over a year ago

Thanks! This works fine. The OP should have accepted this answer.

socket_var · Accepted Answer · 2017-08-22 13:51:46Z

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, 2017 at 13:51

answered Feb 7, 2017 at 11:05

socket_var

1,0932 gold badges11 silver badges18 bronze badges

1 Comment

aliopi Over a year ago

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)

Ankur Gupta · Accepted Answer · 2016-06-07 11:18:16Z

2

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
    });

answered Jun 7, 2016 at 11:18

Ankur Gupta

3014 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related