Recargar la página genera una solicitud GET incorrecta con el modo AngularJS HTML5
Quiero habilitar el modo HTML5 para mi aplicación. He puesto el siguiente código para la configuración, como se muestra aquí :
return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
$routeProvider.when('/', {
templateUrl: '/views/index.html',
controller: 'indexCtrl'
});
$routeProvider.when('/about',{
templateUrl: '/views/about.html',
controller: 'AboutCtrl'
});
Como puede ver, utilicé $locationProvider.html5modey cambié todos mis enlaces en ng-hrefpara excluir el/#/ .
El problema
Por el momento, puedo ir localhost:9000/y ver la página de índice y navegar a otras páginas comolocalhost:9000/about .
Sin embargo, el problema ocurre cuando actualizo la localhost:9000/aboutpágina. Obtengo el siguiente resultado:Cannot GET /about
Si miro las llamadas de la red:
Request URL:localhost:9000/about
Request Method:GET
Mientras que si primero voy localhost:9000/y luego hago clic en un botón que navega hacia allí, /aboutobtengo:
Request URL:http://localhost:9000/views/about.html
Lo que representa la página perfectamente.
¿Cómo puedo habilitar angular para obtener la página correcta cuando actualizo?
De los documentos angulares
Lado del servidor
El uso de este modo requiere reescribir la URL en el lado del servidor, básicamente debe reescribir todos los enlaces al punto de entrada de su aplicación (por ejemplo, index.html).
La razón de esto es que cuando visita la página por primera vez ( /about), por ejemplo, después de una actualización, el navegador no tiene forma de saber que no es una URL real, por lo que continúa y la carga. Sin embargo, si primero cargó la página raíz y todo el código javascript, cuando navegue a /aboutAngular podrá ingresar allí antes de que el navegador intente acceder al servidor y manejarlo en consecuencia.
Hay algunas cosas que configurar para que se vea su enlace en el navegador http://yourdomain.com/pathy estas son su configuración angular + lado del servidor
1) AngularJS
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true);
2) del lado del servidor, simplemente colóquelo .htaccessdentro de su carpeta raíz y pegue esto
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
Más cosas interesantes para leer sobre el modo html5 en angularjs y la configuración requerida por entorno diferente https://github.com/angular-ui/ui-router/wiki/Frequency-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode También esta pregunta podría ayudarte $ubicación/cambio entre el modo html5 y hashbang/reescritura de enlaces
Tuve un problema similar y lo resolví mediante:
Usando
<base href="/index.html">en la página de índiceUsando un middleware para capturar todas las rutas en mi nodo/servidor Express de la siguiente manera (colocarlo después del enrutador):
app.use(function(req, res) {
res.sendfile(__dirname + '/Public/index.html');
});
Creo que eso debería ponerte en marcha.
Si utiliza un servidor Apache, es posible que desee mod_reescribir sus enlaces. No es difícil de hacer. Sólo algunos cambios en los archivos de configuración.
Todo esto supone que tienes el modo html5 habilitado en angularjs. Ahora. tenga en cuenta que en angular 1.2, en realidad ya no se recomienda declarar una URL base.
Solución para BrowserSync y Gulp.
Desde https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643
Primera instalación connect-history-api-fallback:
npm --save-dev install connect-history-api-fallback
Luego agréguelo a su gulpfile.js:
var historyApiFallback = require('connect-history-api-fallback');
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: "app",
middleware: [ historyApiFallback() ]
}
});
});
