my angular routes have a '#%2F' before the actual URL I have defined in the app.js

Question

I am setting up my angular routes in the app.js as so:

.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/characters', {
        templateUrl: 'views/characters.html',
        controller: 'AboutCtrl',
        controllerAs: 'characters'
      })
      .when('/framedata', {
          templateUrl: 'views/framedata.html',
          controller: 'FrameDataCtrl',
          controllerAs: 'frame'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

These URLs do work because when I type in localhost:9000/framedata or /characters it displays the view I expect. When I used the navigation bar that defines the links as expected there is a '#%2F' that is added like so: http://localhost:9000/#!/#%2Fcharacters

 <ul class="nav navbar-nav">
          <li class="active"><a href="#/">tekkenMitzu?</a></li>
          <li><a ng-href="#/characters">Characters</a></li>
          <li><a ng-href="#/framedata">Frame Data</a></li>
        </ul>

I hope this gives sufficient information, please let me know if I should give you some more information, if it is necessary I can upload this to a domain so you can see the 'live' version.

score 2 · Accepted Answer · edited May 23 '17 at 11:46

Try this below code

.config(function ($routeProvider,$locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/characters', {
        templateUrl: 'views/characters.html',
        controller: 'AboutCtrl',
        controllerAs: 'characters'
      })
      .when('/framedata', {
          templateUrl: 'views/framedata.html',
          controller: 'FrameDataCtrl',
          controllerAs: 'frame'
      })
      .otherwise({
        redirectTo: '/'
      });
        // use the HTML5 History API
        $locationProvider.html5Mode(true);// it will remove the #
  });

And your URL having some white space if you remove the space then the %2F will clear

More details, please checkout it

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

if we enable html5 mode, we need to modify the server too, and also set the base tag, without those two changes the `#` won't go — Syed Faizan, Dec 16 '16 at 11:12

my angular routes have a '#%2F' before the actual URL I have defined in the app.js

1 Answers1