Por defecto en AngularJS incluye el caracter “#” en las rutas de las urls, por ejemplo:

  • https://www.bufa.es/
  • https://www.bufa.es/#/sobre-mi
  • https://www.bufa.es/#/contacto

Para poder eliminar la “almohadilla” de las urls hay que hacer 2 pasos:

1. Utilizamos el módulo $locationProvider y establecemos el parámetro “true” en html5Mode de la siguiente manera:

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

angularRoutingApp.config(function($routeProvider, $locationProvider) {

	$routeProvider
	.when('/', {
	    templateUrl : 'paginas/index.html',
	    controller : 'homeController'
	})
	.when('/acerca', {
	    templateUrl : 'paginas/sobre-mi.html',
	    controller : 'sobremiController'
	})
	.when('/contacto', {
	    templateUrl : 'paginas/contacto.html',
	    controller : 'contactoController'
	})
	.otherwise({
	    redirectTo: '/'
	});
	$locationProvider.html5Mode(true);

});

2. Añadimos <base> en el <head> con la url absoluta del proyecto:

 <base href="https://www.bufa.es/">

Y con esto las urls se convierten ya en:

  • https://www.bufa.es/
  • https://www.bufa.es/sobre-mi
  • https://www.bufa.es/contacto

Agradezco tu comentario 🤘