I started using Angular recently and immediately ran into such a problem when using routing: when I connect the angular-route.min.js library to the site, then all my routes of the type # / route turn into #% 2Froute , that is, because the character / is encoded in % 2F, everything stops working. How can this be fixed? Here is an example:

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>Angular Routes Test</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script> </head> <body> <a href="#/">Home</a> <a href="#/test">Test</a> <a href="#/route">MoreTest</a> <div ng-view></div> <script type="text/javascript"> var app = angular.module('myApp', ['ngRoute']); app.config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { template: '<h1>Home</h1>' }); $routeProvider.when('/test', { template: '<h2>Test</h2>' }); $routeProvider.when('/route', { template: '<h1>MoreTest</h1>' }); $routeProvider.otherwise({ redirectTo: '/' }); }); app.controller('testController', function($scope) {}); </script> </body> </html>

Before the example, I used angular version 1.6.0, in example 1.6.1

  • the error is not reproduced. The code provided is fully working. Look for a mistake somewhere else - Grundy
  • and add versions of used libraries - Grundy

1 answer 1

The problem is incorrect references. Instead of #/ you need to use #!/ . This is because the default hashPrefix value is ! .

Example:

 <!DOCTYPE html> <html ng-app="myApp"> <head> <title>Angular Routes Test</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script> </head> <body> <a href="#!/">Home</a> <a href="#!/test">Test</a> <a href="#!/route">MoreTest</a> <div ng-view></div> <script type="text/javascript"> var app = angular.module('myApp', ['ngRoute']); app.config(function($locationProvider, $routeProvider, $locationProvider) { console.log('hash prefix', $locationProvider.hashPrefix()); $routeProvider .when('/', { template: '<h1>Home</h1>' }); $routeProvider.when('/test', { template: '<h2>Test</h2>' }); $routeProvider.when('/route', { template: '<h1>MoreTest</h1>' }); $routeProvider.otherwise({ redirectTo: '/' }); }); app.controller('testController', function($scope) {}); </script> </body> </html>

What is interesting in earlier versions is the variant from the question, since in them, by default, hashPrefix is ​​an empty string. For some reason, this default value was changed from version 1.6.0:

 var app = angular.module('myApp', ['ngRoute']); app.config(function($locationProvider, $routeProvider, $locationProvider) { console.log('hash prefix:', $locationProvider.hashPrefix()) $routeProvider .when('/', { template: '<h1>Home</h1>' }); $routeProvider.when('/test', { template: '<h2>Test</h2>' }); $routeProvider.when('/route', { template: '<h1>MoreTest</h1>' }); $routeProvider.otherwise({ redirectTo: '/' }); }); app.controller('testController', function($scope) {}); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.min.js"></script> <div ng-app="myApp"> <a href="#/">Home</a> <a href="#/test">Test</a> <a href="#/route">MoreTest</a> <div ng-view></div> </div>

You can set your own hashPrefix using the function of the same name in $ locationProvider

  • Thank you, just by chance I discovered this and solved the problem) - Alexander Kolesavin