Quitar el ‘#’ de las urls de Angular.js

Guía paso a paso para usar urls convencionales con AngularJS sin morir en el intento

jueves, 30 de junio de 2016
Categorías: JavaScript
Text_2

Buscando por internet sobre el tema de eliminar el símbolo ‘#’ de las urls de Angular me he dado cuenta de que ninguna página de las que encontré daba la información completa para conseguirlo. ¿Era algo tan fácil y tan lógico que no necesitaba explicación? Es posible…

Paso 1: Activar el modo HTML5

Lo primero que debemos hacer es activar el modo html5 en nuestra configuración de rutas:


function setRutas($routeProvider, $locationProvider){
    $routeProvider.when(
        '/',
        {
            [...]
        }
    ).when(
        '/contacto',
        {
            [...]
        }
    );
    $locationProvider.html5Mode(true); //activamos el modo HTML5
}

Pero… ¿Qué pasa si el navegador no soporta HTML5? Tranquilo automáticamente pasará a usar las urls con el #

Paso 2: Definir la url base

Esto es tan fácil como colocar la siguiente etiqueta en el head de nuestro html principal:


<base href="/" /> <!-- cuando trabajamos sobre la raíz del servidor -->
<base href="/subdirectorio/" /> <!-- cuando trabajamos en un subdirectorio (como pasa cuando trabajamos en local) -->

Paso 3: definir un .htaccess

Esta es la parte en la que yo no estaba cayendo y la que me complicó la vida. La verdad es que es bastante lógico. Tenemos que decirle a nuestro servidor que las peticiones que recibe las pase a través de nuestro index.html para que AngularJS se encargue del resto.

Debo confesar que que no soy muy mañoso en estos temas de servidores así que he adaptado un .htaccess de un aplicación hecha con Slim y me funciona a la perfección. Aunque estoy abierto a sugerencias ;)


RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

Una vez que cambiemos los enlaces de nuestra aplicación para que apunten a las nuevas direcciones todo debería funcionar correctamente.

TAGS

Compartir

Comentarios