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