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?

Answer 1

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

Answer 2

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 !!

Answer 3

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