routeprovider route componentes component javascript angularjs

javascript - route - AngularJS enrutamiento sin el hash ''#''



angularjs resolve (11)

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

Utilizo $routeProvider para declarar reglas de enrutamiento para 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 lugar de app/test .

Entonces, mi pregunta es ¿por qué AngularJS agrega este hash # a las URL? ¿Hay alguna posibilidad de evitarlo?

Permite escribir respuestas que parezcan simples y cortas.

En el enrutador al final, agregue html5Mode (verdadero) ;

app.config(function($routeProvider,$locationProvider) { $routeProvider.when(''/home'', { templateUrl:''/html/home.html'' }); $locationProvider.html5Mode(true); })

En la cabeza html añadir etiqueta base

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

gracias a @plus - por detallar la respuesta anterior

**

Se recomienda usar el estilo HTML 5 (PathLocationStrategy) como estrategia de ubicación en Angular

** Porque

  1. Produce las URL limpias y amigables con el SEO que son más fáciles de entender y recordar para los usuarios.
  2. Puede aprovechar la representación del lado del servidor, lo que hará que nuestra aplicación se cargue más rápido, representando las páginas en el servidor antes de entregarlo al cliente.

Use Hashlocationstrtegy solo si tiene que ser compatible con los navegadores más antiguos.

Haga clic aquí para saber más

Como se ha mencionado en las respuestas anteriores, los pasos son:

Agregue <base href="/"> a index.html
Habilite html5mode $ location.html5Mode (true) en app.js.

Con esto la aplicación funcionará bien. Pero solo en los escenarios cuando navegas desde index.html a otras páginas. Por ejemplo, mi página base es www.javainuse.com. Si hago clic en el enlace java, navegará correctamente a www.javainuse.com/java.

Sin embargo, si voy directamente a www.javainuse.com/java obtendré un error de página no encontrada.

Para resolver esto tenemos que utilizar la reescritura de url. Dot net requiere la reescritura de URL para IIS.

Si está utilizando Tomcat, la reescritura de URL deberá realizarse utilizando Tuckey. Puede obtener más información sobre la reescritura de URL here

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

De lo contrario, solo harán una llamada HTTP al servidor en el href mencionado. El # es un antiguo shortcircuit del navegador que no activa la solicitud, lo que permite que muchos frameworks js construyan su propio redireccionamiento en el lado del cliente además de eso.

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

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

En Angular 6, con tu enrutador puedes usar:

RouterModule.forRoot(routes, { useHash: false })

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

Es muy fácil obtener URL limpias y eliminar el hashtag de la URL en Angular.
De forma predeterminada, AngularJS enrutará las URL con un hashtag Por ejemplo:

Hay 2 cosas que deben hacerse.

  • Configurando $ locationProvider

  • Estableciendo nuestra base para enlaces relativos

  • $ servicio de ubicacion

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

Recomendaría leer los documentos oficiales 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 estableceremos html5Mode en true.

  • Haremos esto al definir su aplicación Angular y configurar sus 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 la historia de HTML5? Es una forma estandarizada de manipular el historial del navegador usando un script. Esto permite a Angular cambiar el enrutamiento y las URL de nuestras páginas sin actualizar la página. Para obtener más información sobre esto, aquí hay un buen artículo de API de historial de HTML5:

http://diveintohtml5.info/history.html

Configuración de enlaces relativos

  • Para enlazar alrededor de su aplicación usando enlaces relativos, deberá configurar <base> en el <head> de su documento. Esto puede estar en el archivo raíz index.html de su aplicación Angular. Busque la etiqueta <base> y configúrela en la URL raíz que desea para su aplicación.

Por ejemplo: <base href="/">

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

Fallback para navegadores antiguos

  • El servicio $ location automáticamente retrocederá al método hashbang para los navegadores que no son compatibles con la API de historial de HTML5.
  • Esto le sucede de manera transparente y no tendrá que configurar nada para que funcione. Desde los documentos de ubicación de Angular $, puede ver el método alternativo y cómo funciona.

En conclusión

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

Si desea configurar esto localmente en OS X 10.8 para Angular con Apache, puede encontrar lo siguiente en su archivo .htaccess que le ayudará:

<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On RewriteBase /~yourusername/appname/public/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !.*/.(css|js|html|png|jpg|jpeg|gif|txt) RewriteRule (.*) index.html [L] </IfModule>

Las opciones + Seguir los enlaces, si no están configurados, pueden darte un error prohibido en los registros de esta manera:

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

La base de reescritura es obligatoria; de lo contrario, las solicitudes se resolverán en la raíz de su servidor, que localmente, de forma predeterminada, no es el directorio del proyecto, a menos que haya configurado específicamente los vhosts, por lo que debe establecer la ruta para que la solicitud encuentre el directorio raíz del proyecto. Por ejemplo, en mi máquina tengo un directorio / Users / me / Sites donde guardo todos mis proyectos. Al igual que el antiguo OS X configurado.

Las siguientes dos líneas indican efectivamente si la ruta no es un directorio o un archivo, por lo que debe asegurarse de que no haya archivos o directorios iguales a los de las rutas de ruta de su aplicación.

La siguiente condición dice que si la solicitud no termina con las extensiones de archivo especificadas, agregue lo que necesite allí

Y el último [L] está diciendo que sirva el archivo index.html: su aplicación para todas las demás solicitudes.

Si aún tiene problemas, verifique el registro de apache, probablemente le dará consejos útiles:

/private/var/log/apache2/error_log

Si habilitó html5mode como otros lo han dicho, y cree un archivo .htaccess con el siguiente contenido (ajuste según sus 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 su aplicación cuando ingresen a una ruta adecuada, y su aplicación leerá la ruta y los llevará a la "página" correcta dentro de ella.

EDITAR: Solo asegúrese de no tener ningún archivo o nombre de directorio en conflicto con sus rutas.

También puede usar el siguiente código para redirigir a la página principal (inicio):

{ path: '''', redirectTo: ''home'', pathMatch: ''full''}

Después de especificar su redirección como anteriormente, puede redirigir las otras páginas, por ejemplo:

{ path: ''add-new-registration'', component: AddNewRegistrationComponent}, { path: ''view-registration'', component: ViewRegistrationComponent}, { path: ''home'', component: HomeComponent}

El uso del modo HTML5 requiere la reescritura de URL en el servidor, básicamente, debe volver a escribir todos sus enlaces al punto de entrada de su aplicación (por ejemplo, index.html). Requerir una etiqueta <base> también es importante para este caso, ya que permite a AngularJS diferenciar entre la parte de la URL que es la base de la aplicación y la ruta que debe ser manejada por la aplicación. Para obtener más información, consulte la Guía del desarrollador de AngularJS - Uso de $ location Modo HTML5 del lado del servidor .

Actualizar

Cómo: Configurar su servidor para trabajar con html5Mode 1

Cuando tiene habilitado el modo html5, el carácter # ya no se utilizará en sus direcciones URL. El símbolo # es útil porque no requiere configuración del lado del servidor. Sin # , la url se ve mucho mejor, pero también requiere la reescritura del lado del servidor. Aquí hay unos ejemplos:

Reescrituras de apache

<VirtualHost *:80> ServerName my-app DocumentRoot /path/to/app <Directory /path/to/app> RewriteEngine on # Don''t rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L] </Directory> </VirtualHost>

Nginx Rewrites

server { server_name my-app; index index.html; root /path/to/app; location / { try_files $uri $uri/ /index.html; } }

Azure IIS Rewrites

<system.webServer> <rewrite> <rules> <rule name="Main Rule" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer>

Express Rewrites

var express = require(''express''); var app = express(); app.use(''/js'', express.static(__dirname + ''/js'')); app.use(''/dist'', express.static(__dirname + ''/../dist'')); app.use(''/css'', express.static(__dirname + ''/css'')); app.use(''/partials'', express.static(__dirname + ''/partials'')); app.all(''/*'', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile(''index.html'', { root: __dirname }); }); app.listen(3006); //the port you want to use