AngularJS navigation path failure

Issue

I’m trying to build an example app with AngularJS in which I consume some Spotify services via REST interfaces. To switch between home and search page I use the ngRoute service. This is my index.html:

<html lang="en" data-ng-app="spotifinder">
<head>...</head>

<body>
    <!-- Navigation -->
    <nav id="main-navbar" class="navbar navbar-default navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collect" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="to-home" class="navbar-brand" href="#/">Search anything in Spotify</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="main-navbar-collect" class="collapse navbar-collapse">
                <div class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" data-ng-model="searchText">
                        <a id="to-search" href="#/search" class="btn btn-primary">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </a>
                    </div>

                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <!-- Results -->
    <div class="container">
        <div data-ng-view></div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- Angular JS -->
    <script src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.4/angular-resource.min.js"></script>
    <script src="https://code.angularjs.org/1.6.4/angular-route.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

and then my app.js (fragment):

// MAIN MODULE
var spotifinder = angular.module('spotifinder', ['ngRoute', 'ngResource']);


// ROUTES
spotifinder.config(['$routeProvider', function(routeProvider) {

    routeProvider

    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'homeController'
    })

    .when('/search', {
        templateUrl: 'pages/search.html',
        controller: 'searchController'
    })
}]);

The controllers are defined properly in app.js below this code. When I open the app (I show it in Brackets but it’s the same when I open the files locally) I get the following URL in the address bar

http://127.0.0.1:57612/spotifinder/index.html#!/

(note the #! before the last slash). When I navigate to the search page or the home back again I got the following URL

Search page (using the a#to-search link)

http://127.0.0.1:57612/spotifinder/index.html#!/#%2Fsearch

Home page (using the a#to-home link)

http://127.0.0.1:57612/spotifinder/index.html#!/#%2F

The question is: why does the app adds #%2F (%2F correspond to / character, by the way) in the URL? What am I missing?

Thanks in advance for your answers.

Solution

%2F is the percent-encoding for the forward-slash / character. You can see here
https://en.wikipedia.org/wiki/Percent-encoding

This problem is because AngularJS 1.6 has changed the default for hash-bang urls in the $location service.

To revert to the previous behavior:

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

Answered By – Akashii

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Issue

Solution

Leave a Reply Cancel reply