10
votes

Angularjs - HTML5Mode - Impossible d'obtenir / se connecter

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é xxx pré>

voici la structure de l'application p> xxx pré>

voici mon app.js strong> routing p> xxx pré>

voici ma part de gruntfile.js p> xxx pré>

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)
            ];
          }
        }
      },


7 commentaires

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 . Je veux supprimer le # . 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


6 Réponses :


-2
votes

Avez-vous essayé d'utiliser des chemins absolus dans le $ routeProvider ? XXX


0 commentaires

0
votes

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.

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.

Si vous ne pouvez pas contrôler le serveur de cette manière, HTMLMode n'est probablement pas pour vous tristement.


1 commentaires

J'utilise GRUNT uniquement. Comment puis-je faire la règle de réécriture dans Gruntfile.js?



2
votes

À l'heure actuelle, cela doit être un problème commun avec angulaire à traiter pour router au travail.

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.

Mais surtout, je me souviens que c'est celui qui a fait l'affaire.

https://gist.github.com/leocaseiro/4305E06948AA97E77C93

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.


0 commentaires

0
votes

Ajouter 'Vues / Login.html' à côté de votre templateRL J'espère que cela fonctionnera


0 commentaires

4
votes

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é.

htack xxx L'ordre de fonctionnement de votre configuration Apache doit avoir activé Mod_rewrite et permettre également de remplacer tous. La réécriture fonctionnera également dans Apache Config.

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: xxx

nodejs xxx

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.

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.

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.


0 commentaires

0
votes

Ajouter ce code dans Server.js Après toutes les voies

app.use('/*',function(req, res) {
    res.sendfile(__dirname + '/public/index.html');
});


0 commentaires