AngularJS navigation path failure


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

    <!-- 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>
                <a id="to-home" class="navbar-brand" href="#/">Search anything in Spotify</a>

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

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

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

    <!-- jQuery -->
    <script src="" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <!-- Bootstrap JavaScript -->
    <script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- Angular JS -->
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="app.js"></script>

and then my app.js (fragment):

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

spotifinder.config(['$routeProvider', function(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!/

(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)!/#%2Fsearch

Home page (using the a#to-home link)!/#%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.


%2F is the percent-encoding for the forward-slash / character. You can see here

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) {

Answered By – Akashii

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.