Issues with angular links

Question

hello I am have this issue with angular and I don't know how to resolve it,

<td><a href="#!/repo/{{searchValue}}/{{repo.name}}">{{repo.name}}</a></td>

I have this in my view and have the route defined here

(function(){
   var git = angular.module("main", ["ngRoute"]);
   git.config(function($routeProvider){
   $routeProvider
     .when("/main", {
        templateUrl: "main.html",
        controller: "MainCtrl"
      })
      .when("/user/:username", {
        templateUrl: "user.html",
        controller: "userController"
      })
      .when("/repo/:username/:reponame", {
        templateUrl: "repo.html",
        controller: "repoController"
      })
      .otherwise({redirectTo: "/main"});
  });
}());

but any time I follow a click the link the url that show is http://localhost/plunk/#!/main#%2Fuser%2Fangular, for some reasons the "/" is replaced with "%2F" and the url that is loaded is the otherwise url, but if I do, http://localhost/plunk/#!/user/angular it works fine, pls how can I resolve this

Answer 1

Generally, %2F is the percent-encoding for the forward-slash / character.Inorder to fix include $locationProvider.hashPrefix(''); in your config.

You could do,

git.config(['$locationProvider','$routeProvider', function($locationProvider,$routeProvider) {
  $locationProvider.hashPrefix('');
}]);