Eliminando el identificador de fragmento de las URL de AngularJS(símbolo#)
ng-href angularjs (14)
¿Es posible eliminar el símbolo # de las URL de angular.js?
Todavía quiero poder usar el botón de retroceso del navegador, etc., cuando cambio la vista y actualizaré la URL con parámetros, 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 #?
Asegúrese de verificar el soporte del navegador para la API del historial html5:
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
Comience desde index.html elimine todo # de <a href="#/aboutus">About Us</a> por lo que debe verse como <a href="/aboutus">About Us</a> . Ahora en la etiqueta de cabecera de index.html escribe <base href="/"> 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("/home", {
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/aboutus",{templateUrl:"Templates/aboutus.html"})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentsController"
})
$locationProvider.html5Mode(true);
});
Para más detalles, vea este video https://www.youtube.com/watch?v=XsRugDQaGOo
Como se ha mencionado 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 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
Escribo una regla en web.config después de que $locationProvider.html5Mode(true) esté configurado en app.js
Esperanza, ayuda a alguien.
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
En mi index.html agregué esto a <head>
<base href="/">
No olvide instalar el rewriter 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 a la API. Entonces agregue la tercera entrada (tercera línea de condición) y proporcione un patrón que excluya las llamadas de www.yourdomain.com/api
Esta respuesta asume que está utilizando nginx como proxy inverso y que ya estableció $ locationProvider.html5mode en true.
-> Para las personas que todavía podrían estar luchando con todas las cosas geniales arriba.
Seguramente, la solución de @maxim grach funciona bien, pero para la solución de cómo responder a las solicitudes que no quieren que se incluya el hashtag, lo que se puede hacer es verificar si php está enviando 404 y luego reescribir la URL. A continuación se muestra el código para nginx,
En la ubicación php, detecte el error 404 php y redirija a otra ubicación,
location ~ /.php${
...
fastcgi_intercept_errors on;
error_page 404 = /redirect/$request_uri ;
}
Luego, vuelva a escribir la url en la ubicación de redireccionamiento y proxy_pass los datos, por supuesto, coloque la url de su sitio web en el lugar de la url de mi blog. (Solicitud: Cuestione esto solo después de haberlo probado)
location /redirect {
rewrite ^/redirect/(.*) /$1;
proxy_pass http://www.techromance.com;
}
Y ver la magia.
Y definitivamente funciona, al menos para mí.
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]
Para eliminar la etiqueta Hash para 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: <head> <base href="/">
// to know more 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
});
}
}]);
Paso 1: inyecte el servicio $ locationProvider en el constructor de configuración de la aplicación
Paso 2: Agregue la línea de código $ locationProvider.html5Mode (true) al constructor de la configuración de la aplicación.
Paso 3: en la página del contenedor (landing, master o layout), agregue una etiqueta html como <base href="/"> dentro de la etiqueta.
Paso 4: elimine todos ''# "para enrutar la configuración de todas las etiquetas de anclaje. Por ejemplo, href =" # home "se convierte en href =" home "; href =" # about "se convierte en herf =" about "; href =" # contact "se convierte en href =" contacto "
<ul class="nav navbar-nav">
<li><a href="home">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="contact">Contact us</a></li>
</ul>
Puede modificar 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 de CURL dará lugar a un error de página no encontrada, independientemente de html5mode:
$ curl http://foo.bar/phones
aunque lo siguiente devolverá la raíz / página de inicio:
$ curl http://foo.bar/#/phones
La razón de esto es que cualquier cosa después de que el hashtag se elimine antes de que la solicitud llegue al servidor. Entonces, una solicitud para http://foo.bar/#/portfolio llega al servidor como una solicitud para http://foo.bar . El servidor responderá con una respuesta 200 OK (probablemente) para http://foo.bar y el agente / cliente procesará el resto.
Por lo tanto, en los casos en que desee compartir una url con otros, no tiene más opción que incluir el hashtag.
Sí, debe configurar $locationProvider y establecer $locationProvider 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);
}]);
Sólo agregue $locationProvider In
.config(function ($routeProvider,$locationProvider)
y luego agregue $locationProvider.hashPrefix(''''); después
.otherwise({
redirectTo: ''/''
});
Eso es.
Según la documentación. Puedes usar:
$locationProvider.html5Mode(true).hashPrefix(''!'');
NB: si su navegador no es compatible con HTML 5. No se preocupe: D tiene un retroceso al modo hashbang. Por lo tanto, no es necesario verificar con
if(window.history && window.history.pushState){ ... }manualmente
Por ejemplo: si hace clic en: <a href="/other">Some URL</a>
En el navegador HTML5 : angular se redireccionará automáticamente a example.com/other
En el navegador No HTML5 : angular se redireccionará automáticamente a example.com/#!/other
Si está en la pila .NET con MVC con AngularJS, esto es lo que debe hacer para eliminar el ''#'' de la url:
Configure su base href en su página _Disposición:
<head> <base href="/"> </head>Luego, agregue lo siguiente en la configuración de la aplicación angular:
$locationProvider.html5Mode(true)Anteriormente eliminará ''#'' de la URL, pero la actualización de la página no funcionará, por ejemplo, si está en la página "yoursite.com/about", refreash le dará un 404. Esto se debe a que MVC no conoce el enrutamiento angular y, según el patrón de MVC buscará una página de MVC para ''about'' que no existe en la ruta de enrutamiento de MVC. La solución para esto es enviar todas las solicitudes de página de MVC a una sola vista de MVC y puede hacerlo agregando una ruta que capture todos
url
routes.MapRoute(
name: "App",
url: "{*url}",
defaults: new {
controller = "Home", action = "Index"
}
);
Sigue 2 pasos-
1. Primero establezca $ locationProvider.html5Mode (true) en su archivo de configuración de la aplicación.
Por ejemplo:
angular.module(''test'', [''ui.router'']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise(''/''); });
2.Segundo establece la <base> dentro de tu página principal.
Por ejemplo ->
<base href="/">
El servicio $ location automáticamente retrocederá al método de la parte hash para los navegadores que no admiten la API de historial de HTML5.