HI a créé une application angularjs avec Yeoman, Grund and Bower.
J'ai activé le HTML5Mode pour l'application. Et son travail. Mais, quand je rafraîchis une page (localhost: 9000 / Connexion), il est indiqué voici la structure de l'application p> voici mon app.js strong> routing p> voici ma part de gruntfile.js p> i ont parcouru Cette question à la question . Et basé sur le réponse acceptée , j'ai changé mon grognile.js en ci-dessous. P> 'use strict';
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
var urlRewrite = require('grunt-connect-rewrite');
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
try {
yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app;
} catch (e) {}
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
coffee: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
tasks: ['coffee:dist']
},
coffeeTest: {
files: ['test/spec/{,*/}*.coffee'],
tasks: ['coffee:test']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
autoprefixer: {
options: ['last 1 version'],
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
base: 'app',
middleware: function(connect, options) {
// Return array of whatever middlewares you want
return [
// redirect all urls to index.html in build folder
urlRewrite('app', 'index.html'),
// Serve static files.
connect.static(options.base),
// Make empty directories browsable.
connect.directory(options.base)
];
}
},
proxies: [
{
context: '/serverApp',
host: 'localhost',
port: '8080',
https: false,
changeOrigin: false
}
],
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet,
proxySnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
6 Réponses :
Avez-vous essayé d'utiliser des chemins absolus dans le $ routeProvider code>?
Ceci se produit car lorsque vous appuyez sur Actualiser, votre navigateur essaiera de récupérer / se connecter au serveur, non via votre fournisseur d'itinéraire côté client. J'assume / la connexion retourne un 404 dans votre cas. P>
Vous devez obtenir le serveur qui servait réellement vos fichiers pour servir /index.html même si la demande a été faite pour / connecter. Comment cela dépendez-vous de votre configuration du côté serveur. Vous pouvez le faire avec des scripts dynamiques ou une règle de réécriture. P>
Si vous ne pouvez pas contrôler le serveur de cette manière, HTMLMode n'est probablement pas pour vous tristement. P>
J'utilise GRUNT uniquement. Comment puis-je faire la règle de réécriture dans Gruntfile.js?
À l'heure actuelle, cela doit être un problème commun avec angulaire à traiter pour router au travail. P>
J'ai trouvé des problèmes similaires à ce sujet, ce qui suggère la même config HTML5 de contourner la méthode HASHBANG - voir Angularjs: Comment activer $ EmplacementProvider.html5Mode avec Devilleux Aussi un tutoriel à scotch.io HTTPS: // Scotch .io / conseils rapides / jolies-urls-in-angularjs-supprimer-the-hashtag peut être un début. P>
Mais surtout, je me souviens que c'est celui qui a fait l'affaire. p>
https://gist.github.com/leocaseiro/4305E06948AA97E77C93 P>
i Exécutez un serveur Web Apache. Je ne me souviens pas à quel niveau (globalement ou par application), j'ai fait la configuration, mais il serait préférable de consulter les documents du serveur Web, Apache était bon. p>
Ajouter 'Vues / Login.html' à côté de votre templateRL J'espère que cela fonctionnera p>
Vous devez avoir une solution latérale de serveur pour rediriger tout trafic non résolvant vers index.html
Je partagera une version hACCESS de cette version et une version nœud.js. J'ai également mis en place cela dans le démontage, mais c'était un peu plus impliqué. P>
htack strong> p> Il existe également une condition qui vous permet de retourner 404 sur demande Ajax. Pour que cela fonctionne, vous devez enregistrer un en-tête de pré-vol vers une requête HTTP $ HTTP indiquant qu'ils sont des demandes XMLHTTP. quelque chose comme: p> nodejs strong> p> C'est la saleté simple, et pourrait être amélioré . À savoir avec un chèque sur les en-têtes REQ pour l'en-tête XMLHTTPP, de la même manière que l'exemple Htaccess fait. P> Ceux-ci obtiennent l'idée générale. Fondamentalement, tout trafic qui aboutirait à un index de 404 est servi.html à la place. Cela vous permet de continuer à servir de contenu statique, mais de vos itinéraires (tant qu'ils n'existent pas réellement sur le disque à cet endroit) retourneront index.html. P> AVERTISSEMENT! Sans solution comme l'en-tête de pré-feu sur toutes les demandes Ajax, toute demande de modèle non résolue entraînera une boucle infinie et verrouillez probablement votre navigateur. P> P>
Ajouter ce code dans Server.js Après toutes les voies
app.use('/*',function(req, res) { res.sendfile(__dirname + '/public/index.html'); });
Localhost: 9000 / #! / Login?
Désolé je ne te comprends pas
En mode HTML5 pur, vous ne pouvez pas appeler directement les URL. Vous devez d'abord appeler localhost: 9000, de sorte que le navigateur puisse configurer ce mode. Après cela, un klick sur href = "login" inclura votre modèle souhaité.
J'appelle de cette façon seulement.
avez-vous essayé supprimer $ emplacementprovider.html5mode (vrai); ? Je suppose que c'est ce que tu veux ...
Pour l'instant, j'ai commenté cette ligne afin que mon application fonctionne. Ensuite, l'URL sera comme
localhost: 9000 / # / Login code>. Je veux supprimer le
# code>. C'est pourquoi j'utilise cette ligne. Avez-vous une autre idée de supprimer cela et de fonctionner l'application lorsque je rafraîchit également?
Voici un exemple de la documentation angulaire: docs.angularjs.org/api/ngroute. $ Itinéraire # Exemple Veuillez défiler vers le bas et cliquez sur le lien "Lettre Scarlet". Maintenant, faites un rechargement de page - vous verrez ce que vous obtenez jusqu'à présent - le site ne sera pas chargé. Vous devez d'abord charger le site Web, configurer le modèle HTML5 - alors vous pouvez utiliser cette fonctionnalité HTML5