Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 #?

like image 595
Tim Webster Avatar asked Feb 08 '13 11:02

Tim Webster


Video Answer


2 Answers

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);    }]); 
like image 78
Maxim Grach Avatar answered Sep 20 '22 15:09

Maxim Grach


Be sure to check browser support for the html5 history API:

  if(window.history && window.history.pushState){     $locationProvider.html5Mode(true);   } 
like image 42
SSaidi Avatar answered Sep 16 '22 15:09

SSaidi