Eliminar el identificador de fragmento de las URL de AngularJS (símbolo #)

¿Es posible eliminar el símbolo # de las URL de angular.js?

Todavía quiero poder usar el botón Atrás del navegador, etc., cuando cambie la vista y actualizaré la URL con params, pero no quiero el símbolo #.

El tutorial routeProvider se declara de la siguiente manera:

angular.module('phonecat', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}). otherwise({redirectTo: '/phones'}); }]); 

¿Puedo editar esto para tener la misma funcionalidad sin el #?

Sí, debe configurar $locationProvider y establecer html5Mode en true :

 angular.module('phonecat', []). config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $routeProvider. when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}). otherwise({redirectTo: '/phones'}); $locationProvider.html5Mode(true); }]); 

Asegúrese de verificar el soporte del navegador para la API de historial html5:

  if(window.history && window.history.pushState){ $locationProvider.html5Mode(true); } 

Para eliminar la etiqueta Hash de una URL bonita y también para que su código funcione después de la minificación , debe estructurar su código como en el siguiente ejemplo:

 jobApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) { $routeProvider. when('/', { templateUrl: 'views/job-list.html', controller: 'JobListController' }). when('/menus', { templateUrl: 'views/job-list.html', controller: 'JobListController' }). when('/menus/:id', { templateUrl: 'views/job-detail.html', controller: 'JobDetailController' }); //you can include a fallback by including .otherwise({ //redirectTo: '/jobs' //}); //check browser support if(window.history && window.history.pushState){ //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so:   // to know more https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about setting base URL visit: https://docs.angularjs.org/error/$location/nobase // if you don't wish to set base URL then use this $locationProvider.html5Mode({ enabled: true, requireBase: false }); } }]); 

Escribo una regla en web.config después de que $locationProvider.html5Mode(true) se establece en app.js

Hope, ayuda a alguien.

                 

En mi index.html agregué esto a

  

No olvides instalar la reescritura de url para iis en el servidor.

Además, si utiliza Web Api e IIS, esta url de coincidencia no funcionará, ya que cambiará sus llamadas de API. Así que agregue la tercera entrada (tercera línea de condición) y brinde un patrón que excluirá las llamadas de www.yourdomain.com/api

Si está en la stack de .NET con MVC con AngularJS, esto es lo que debe hacer para eliminar el ‘#’ de la url:

  1. Configure su href base en su página _Layout:

  2. A continuación, agregue los siguientes en su configuración de aplicación angular: $locationProvider.html5Mode(true)

  3. Arriba eliminará ‘#’ de la url, pero la actualización de la página no funcionará; por ejemplo, si está en la página “yoursite.com/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about”, refreash le dará una 404. Esto se debe a que MVC no conoce el enrutamiento angular y por el patrón MVC buscará una página MVC para ‘https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about’ que no existe en la ruta de enrutamiento MVC. La solución para esto es enviar toda la solicitud de página de MVC a una única vista de MVC y puede hacerlo agregando una ruta que atrape todo

url:

 routes.MapRoute( name: "App", url: "{*url}", defaults: new { controller = "Home", action = "Index" } ); 

Puede ajustar el modo html5 pero eso solo es funcional para los enlaces incluidos en los anclajes html de su página y cómo se ve la url en la barra de direcciones del navegador. Intentar solicitar una subpágina sin el hashtag (con o sin html5mode) desde cualquier lugar fuera de la página dará como resultado un error 404. Por ejemplo, la siguiente solicitud CURL dará como resultado un error de página no encontrada, independientemente del modo html5:

 $ curl http://foo.bar/phones 

aunque lo siguiente devolverá la página de inicio / raíz:

 $ curl http://foo.bar/#/phones 

La razón de esto es que cualquier cosa después del hashtag se elimina antes de que la solicitud llegue al servidor. Entonces, una solicitud para http://foo.bar/#/portfolio llega al servidor como una solicitud de http://foo.bar . El servidor responderá con una respuesta 200 OK (presumiblemente) para http://foo.bar y el agente / cliente procesará el rest.

Por lo tanto, en los casos en que desee compartir una url con otras personas, no tiene más opción que incluir la etiqueta.

Sigue 2 pasos-
1. Primero configure $ locationProvider.html5Mode (true) en el archivo de configuración de su aplicación.
Por ejemplo,
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2. Segundo, configure la dentro de su página principal.
Por ejemplo, ->

El servicio $ location se volverá automáticamente al método de parte hash para los navegadores que no son compatibles con la API de historial de HTML5.

Mi solución es crear .htaccess y usar el código #Sorian … sin .htaccess No pude eliminar #

 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] 

Como se mencionó en las respuestas anteriores, los pasos son-

Agregar a index.html Habilitar html5mode $ location.html5Mode (true) en app.js.

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

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

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

Si está utilizando tomcat, la reescritura de URL tendrá que hacerse con Tuckey. Puede obtener más información sobre la reescritura de URL aquí

De acuerdo con la documentación. Puedes usar:

 $locationProvider.html5Mode(true).hashPrefix('!'); 

NB: si su navegador no es compatible con HTML 5. No se preocupe: D tiene una alternativa al modo hashbang. Por lo tanto, no necesita verificar con if(window.history && window.history.pushState){ ... } manualmente

Por ejemplo: si hace clic en: Some URL

En el navegador HTML5 : angular redirigirá automáticamente a example.comhttps://stackoverflow.com/other

En el navegador Not HTML5 : angular redirigirá automáticamente a example.com/#!https://stackoverflow.com/other

Esta respuesta asume que está usando nginx como proxy inverso y ya estableció $ locationProvider.html5mode en verdadero.

-> Para las personas que aún podrían estar luchando con todas las cosas geniales de arriba.

Seguramente, la solución @maxim grach funciona bien, pero para la solución de cómo responder a las solicitudes que no quieren incluir el hashtag en primer lugar, lo que se puede hacer es verificar si php está enviando 404 y luego reescribir la url. A continuación está el código para nginx,

En la ubicación php, detecta el error 404 php y redirige a otra ubicación,

 location ~ \.php${ ... fastcgi_intercept_errors on; error_page 404 = /redirect/$request_uri ; } 

Luego reescriba la url en la ubicación de redireccionamiento y proxy_pass los datos, por supuesto, ponga la URL de su sitio web en el lugar de la URL de mi blog. (Solicitud: pregunta esto solo después de haberlo probado)

 location /redirect { rewrite ^/redirect/(.*) /$1; proxy_pass http://www.techromance.com; } 

Y mira la magia.

Y definitivamente funciona, al menos para mí.

Paso 1: Inyectar el servicio $ locationProvider en el constructor de la configuración de la aplicación

Paso 2: Agregue el código de la línea $ locationProvider.html5Mode (true) al constructor de la configuración de la aplicación.

Paso 3: en la página contenedor (landing, master o layout), agregue tags html como dentro de la etiqueta.

Paso 4: eliminar todo ‘#’ para la configuración de enrutamiento de todas las tags de anclaje. Por ejemplo, href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home” se convierte en href = “https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home”; href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about” se convierte en herf = “https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about”; href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/contact “se convierte en href =” https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/contacto

   

Comience desde index.html elimine todo # de About Us por lo que debe parecerse a About Us . Ahora en la etiqueta principal de index.html write justo después de la última etiqueta meta .

Ahora en su enrutamiento js inyecte $locationProvider y escriba $locatonProvider.html5Mode(true); Algo como esto:-

 app.config(function ($routeProvider, $locationProvider) { $routeProvider .when("/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home", { templateUrl: "Templates/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home.html", controller: "https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/homeController" }) .when("/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/aboutus",{templateUrl:"Templates/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/aboutus.html"}) .when("/courses", { templateUrl: "Templates/courses.html", controller: "coursesController" }) .when("/students", { templateUrl: "Templates/students.html", controller: "studentsController" }) $locationProvider.html5Mode(true); }); 

Para obtener más detalles, mire este video https://www.youtube.com/watch?v=XsRugDQaGOo

Solo agrega $locationProvider In

 .config(function ($routeProvider,$locationProvider) 

y luego agregue $locationProvider.hashPrefix(''); después

 .otherwise({ redirectTo: '/' }); 

Eso es.