Removing the fragment identifier from AngularJS urls (# symbol)
Is it possible to remove the # symbol from angular.js URLs?
I still want to be able to use the browser's back button, etc, when I change the view and will update the URL with params, but I don't want the # symbol.
The tutorial routeProvider is declared as follows:
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
Can I edit this to have the same functionality without the #?
Solution 1:
Yes, you should configure $locationProvider
and set html5Mode
to true
:
angular.module('phonecat', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
$locationProvider.html5Mode(true);
}]);
Solution 2:
Be sure to check browser support for the html5 history API:
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}