Eliminar el símbolo # de las URLs de AngularJS con IIS Server

Todos sabéis que Angular ayuda en la creación de aplicaciones de una sola página añadiendo facilmente un enrutamiento, utilizando un módulo angular llamado 'ngRoute', pero al aplicarlo, en las URLs se ante pondrá el caracter # o hash. Sin embargo, hay una manera de eliminar el carácter hash para hacer que tus URLs sean más fácil de utilizar. En este tutorial, te vamos a explicar paso a paso cómo quitar el # de las urls de AngularJS.

Antes de empezar, supongamos que tenemos una pequeña aplicación llamada myOffice.com en el que puedes gestionar las oficinas de los distintos departamentos y los respectivos empleados navegando por  las URLs myOffice.com/departments y myOffice.com/employees.

Configuración de la aplicación en AngularJS

Vamos a comenzar con la configuración del enrutamiento de la aplicación en AngularJS mediante la adición de un bloque de configuración:

var App = angular.module('DemoApp', ['ngRoute']);
    App.config(function ($routeProvider) {
        $routeProvider.when("/home", {
            templateUrl: "templates/index.html",
            controller: "MainController"
        }).when("/employees/", {
            templateUrl: "templates/employees.html",
            controller: "employeesController"
        }).when("/departments/", {
            templateUrl: "templates/departments.html",
            controller: "departmentsController"
        }).otherwise({redirectTo: "/home"});
    });

Paso 1: Borrar el hash

Una vez hecho esto, tenemos que activar el modo de enrutamiento de HTML5:

var App = angular.module('DemoApp', ['ngRoute']);
    App.config(function ($routeProvider,$locationProvider) {
        $routeProvider.when("/home", {
            templateUrl: "templates/index.html",
            controller: "MainController"
        }).when("/employees/", {
            templateUrl: "templates/employees.html",
            controller: "employeesController"
        }).when("/departments/", {
            templateUrl: "templates/departments.html",
            controller: "departmentsController"
        }).otherwise({redirectTo: "/home"});
        $locationProvider.html5Mode(true);
      });

Ahora, esto funcionará si navegas de una página a otra dentro de tu aplicación Angular. Esto es debido a que la solicitud se maneja mediante el enrutamiento de Angular, es decir, navegando por "departamentos" accederemos a un departamento específico, como el departamento de TI. Sin embargo, si intentas desplazarte a este enlace myOffice.com/departments desde tu navegador o actualizas la página, obtendrás un error 404 del servidor.

Esto sucede porque estamos indicando a nuestro servidor que vaya a la página de departamentos, y claro está, no hay ninguna página o directorio de departamentos en el servidor fisicamente. El servidor sólo cuenta con una página index.html y los "departamentos" son sólo una URL la cual solo funciona en AngularJS y el servidor no sabe nada al respecto, así que también tenemos que manejar esto en el lado del servidor.

Paso 2: Gestionar las rutas del servidor

Para lograr esto, necesitamos que el servidor sirva la página index.html en lugar de devolver un error 404 mediante la aplicación de estos sencillos pasos:

• Asegúrate de que está instalado el módulo de reescritura de URLs. Si no, instálalo.
• Abre el IIS Manager.
• Selecciona tu web.
• Añade una regla de reescritura de URLs con estos valores:
• Patrón: "* html | css / | img / | js / | datos / | lib / | templates / | favicon.ico.".
• URL solicitada: "No coincide con el patrón"
• Usar "expresiones regulares"
• Tipo de acción: "rewrite"
• URL Rewrite: "index.html"

Esta regla simplemente solicita al servidor redirigir la dirección URL a la página index.html si la URL solicitada no coincide con el patrón especificado.

Ahora, si pruebas otra vez el enlace myOffice.com/departments desde tu navegador, verás que la página index.html carga pero el contenido de la página departamentos no se muestra. No te asustes, esto es debido a que Angular da un error "Html 5 mode require base tag", así que tenemos que añadir el base tag en la cabecera de la página index.html.

Paso 3: Configurando el base tag

Sólo tenemos que establecer el base tag a la ruta relativa que le dice angular, cuando se parsee la URL, desde donde empezamos a parsear.

<!doctype html>
<html ng-app="DemoApp">
<head>
    <base href="/"/>
</head>
<body ng-cloak>

<h2>demo app</h2>
<div ng-view></div

Ahora que te has deshecho del caracter hash tus URLs serán más fáciles de utilizar, pero ten en cuenta que para los navegadores antiguos, que no admiten HTML5 como IE9, el carácter "#" seguirá apareciendo en sus barras de navegación.

Y este ha sido el artículo en el que trataba explicaros cómo eliminar el símbolo # de las URLs de AngularJS con IIS Server, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!