Búsqueda de sitios web

javascript - Enrutamiento de AngularJS sin el símbolo '#'

Estoy aprendiendo AngularJS y hay una cosa que realmente me molesta.

Uso $routeProvider para declarar las reglas de enrutamiento de mi aplicación:

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

pero cuando navego a mi aplicación en el navegador veo app/#/test en lugar de app/test.

Entonces mi pregunta es, ¿por qué AngularJS añade este símbolo # a las URLs? ¿Existe alguna posibilidad de evitarlo?

Respuesta #1

De hecho, necesitas el # (hashtag) para navegadores que no sean HTML5.

De lo contrario, simplemente harán una llamada HTTP al servidor en el href mencionado. El # es un atajo antiguo del navegador que no dispara la solicitud, lo que permite a muchos frameworks de js construir su propio redireccionamiento del lado del cliente sobre eso.

Puedes usar $locationProvider.html5Mode(true) para indicar a Angular que use la estrategia HTML5 si está disponible.

Aquí está la lista de navegadores que soportan la estrategia HTML5: http://caniuse.com/#feat=history

Respuesta #2

Si activaste html5mode como otros han dicho, y creas un archivo .htaccess con el siguiente contenido (ajústalo según tus necesidades):

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

Los usuarios serán dirigidos a tu aplicación cuando ingresen una ruta adecuada, y tu aplicación leerá la ruta y los llevará a la "página" correcta dentro de ella.

EDITAR: Solo asegúrate de que ningún nombre de archivo o directorio entre en conflicto con tus rutas.

Respuesta #3

Escribamos una respuesta que se vea simple y corta

En el Router al final agrega html5Mode(true);

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

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

En el head de HTML, añade la etiqueta base

<html>
<head>
    <meta charset="utf-8">    
    <base href="/">
</head>

gracias a @plus por detallar la respuesta anterior

Respuesta #4

intentar

$locationProvider.html5Mode(true)

Más información en $locationProvider
Usando $location

Respuesta #5

La siguiente información es de:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

Es muy fácil obtener URLs limpias y eliminar el símbolo de almohadilla de la URL en Angular.
Por defecto, AngularJS enruta las URLs con un símbolo de almohadilla. Por ejemplo:

  • http://www.example.com

  • http://www.example.com/#/about

  • http://www.example.com/#/contact

Hay 2 cosas que necesitan hacerse.

  • Configurando $locationProvider

  • Estableciendo nuestra base para enlaces relativos

  • Servicio de ubicación

En Angular, el servicio $location analiza la URL en la barra de direcciones y realiza cambios en tu aplicación y viceversa.

Recomendaría encarecidamente leer la documentación oficial de Angular $location para familiarizarse con el servicio de ubicación y lo que ofrece.

https://docs.angularjs.org/api/ng/service/$location

$locationProvider y html5Mode

  • Usaremos el módulo $locationProvider y configuraremos html5Mode en true.

  • Haremos esto al definir tu aplicación Angular y configurar tus rutas.

    angular.module('noHash', [])

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

   $routeProvider
       .when('/', {
           templateUrl : 'partials/home.html',
           controller : mainController
       })
       .when('/about', {
           templateUrl : 'partials/about.html',
           controller : mainController
       })
       .when('/contact', {
           templateUrl : 'partials/contact.html',
           controller : mainController
       });

   // use the HTML5 History API
   $locationProvider.html5Mode(true); });

¿Qué es la API de historial de HTML5? Es una forma estandarizada de manipular el historial del navegador usando un script. Esto permite a Angular cambiar el enrutamiento y las URLs de nuestras páginas sin refrescar la página. Para más información sobre esto, aquí hay un buen artículo sobre la API de historial de HTML5:

http://diveintohtml5.info/history.html

Configuración para enlaces relativos

  • Para enlazar por tu aplicación usando enlaces relativos, necesitarás configurar el <base> en el <head> de tu documento. Esto puede estar en el archivo index.html raíz de tu aplicación Angular. Encuentra la etiqueta <base> y configúrala a la URL raíz que desees para tu aplicación.

Por ejemplo: <base href="/">

  • Hay muchas otras formas de configurar esto, y el modo HTML5 configurado como verdadero debería resolver automáticamente los enlaces relativos. Si la raíz de tu aplicación es diferente a la URL (por ejemplo /mi-base), entonces usa eso como tu base.

Alternativa para navegadores antiguos

  • El servicio de ubicación $ recurrirá automáticamente al método hashbang para los navegadores que no admitan la API de Historial de HTML5.
  • Esto sucede de manera transparente para usted y no tendrá que configurar nada para que funcione. Según la documentación de Angular $location, puede ver el método de respaldo y cómo funciona.

En conclusión

  • Esta es una manera sencilla de obtener URL bonitas y eliminar el hashtag en tu aplicación Angular. ¡Diviértete haciendo esas aplicaciones Angular súper limpias y súper rápidas!

Artículos relacionados