lorsque j’actualise la page, pas la charge de la page. Angularjs + Nodejs

Lorsque je recharge la page en appuyant sur F5, la page ne se recharge pas. J’utilise Node.js, Express Js et AngularJS.

index.html

   My web                          

indexController.js

 app.config(['$httpProvider', '$routeProvider', '$locationProvider', function ($httpProvider, $routeProvider, $locationProvider) { $routeProvider .when('/main', { templateUrl: 'views/main.html', controller: 'carouselImg' }) .when('https://stackoverflow.com/signin', { templateUrl: 'views/signIn.html', controller: 'formSignInController' }) .when('https://stackoverflow.com/contact', { templateUrl: 'viewshttps://stackoverflow.com/contact.html', controller: 'contactController' }) .when('https://stackoverflow.com/recoveryPassword', { templateUrl: 'viewshttps://stackoverflow.com/recoveryPassword.html', controller: 'recoveryPasswordController' }) .when('https://stackoverflow.com/manageAccount', { templateUrl: 'viewshttps://stackoverflow.com/manageAccount.html', controller: 'manageAccountController' }) .when('/homepage', { templateUrl: 'views/homepage.html', controller: 'homepageController' }) .when('/shop/:itemId/cat/:categoryId', { templateUrl: 'views/shops.html', controller: 'shopsController' }) .when('/shop/:shopName', { templateUrl: 'views/shopSelected.html', controller: 'shopSelectedController' }) .when('https://stackoverflow.com/manageMyShops', { templateUrl: 'viewshttps://stackoverflow.com/manageMyShops.html', controller: 'manageMyShopsController' }) .when('https://stackoverflow.com/manageMyShops/id/:shopId', { templateUrl: 'views/editShop.html', controller: 'editShopController' }) .when('https://stackoverflow.com/manageWeb', { templateUrl: 'viewshttps://stackoverflow.com/manageWeb.html', controller: 'manageWebController' }) .otherwise({ redirectTo: '/main' }); $locationProvider.html5Mode(true); }]); 

express.js

 var express = require('express'); var session = require('express-session'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var morgan = require('morgan'); var passport = require('passport'); var flash = require('connect-flash'); var path = require('path'); var favicon = require('serve-favicon'); var router = express.Router(); module.exports = function(io) { var app = express(); /** * Connect to our database */ require(__dirname + '/passport')(passport); /** * Set up our express application */ // uncomment after placing your favicon in /public //app.use(favicon(__dirname + '/public/favicon.ico')); app.use(morgan('dev')); app.use(cookieParser()); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); /* * Required for passport */ app.use(session({ secret: 'vidyapathaisalwaysrunning', resave: true, saveUninitialized: true })); // session secret app.use(passport.initialize()); app.use(passport.session()); // persistent login sessions app.use(flash()); // use connect-flash for flash messages stored in session /* * Routes */ require('../app/routes/index.server.routes')(app, passport, router, io); // load our routes and pass in our app and fully configured passport /** * Development Settings */ if ('development' == app.get('env')) { // This covers serving up the index page app.use(express.static(path.join('./public'))); app.use(function (err, req, res, next) { console.error(err.stack); res.send(500, 'Something broke!'); }); } /** * Production Settings */ if ('production' == app.get('env')) { app.use(express.static(path.join('./public'))); } //module.exports = app; return app; } 

index.server.routes.js

  app.get(['/homepage', 'https://stackoverflow.com/recoveryPassword', 'https://stackoverflow.com/manageAccount', '/shop/:itemId/cat/:categoryId', '/shop/:shopName', 'https://stackoverflow.com/manageMyShops', 'https://stackoverflow.com/manageMyShops/id/:shopId', 'https://stackoverflow.com/manageWeb'], isLoggedIn, function (req, res) { //res.redirect(here req.path) -> Infinite loop res.end(); }); function isLoggedIn(req, res, next) { // if user is authenticated in the session, carry on if (req.isAuthenticated()) { return next(); } // if they aren't redirect them to the home page res.redirect('/'); } 
  • app (côté serveur)
    • contrôleurs
    • itinéraires
  • Publique
    • /images
    • / js
    • / feuilles de style
    • / vues
    • index.html

L’erreur se produit avec toutes les pages. Je souhaite que l’utilisateur contrôle certaines sections du site. Lorsque j’appuie sur f5, si l’utilisateur est connecté, vous devez être redirigé vers la page à laquelle vous souhaitez accéder. exemple: / homepage + f5 -> isLoggedIn (…)? / homepage: /index.html

Merci.

Puisqu’il n’y a pas grand-chose à faire, je vais commencer par résoudre le problème évident.

Votre routage n’est pas configuré pour gérer une application à une seule page.

Le routeur d’Angular échange des vues dans et hors de la page d’index lorsque vous y naviguez, mais vous ne quittez jamais cette première page. C’est le comportement souhaité pour une application à une seule page.

Si vous actualisez une page telle que index.com/go/to/path, vous indiquez à votre navigateur d’accéder au chemin correspondant à index.com/go/to/path.

Angular n’a aucune idée à ce sujet et son routage ne gère que les chemins jeté sur index.com.

si vous utilisez nginx, ajoutez ceci à votre emplacement:

 try_files $uri $uri/ /index.html; 

La solution serait similaire, sinon identique, dans Apache (je ne sais pas par coeur).

Qu’est-ce qu’il fait est qu’il redirige tous ces app.com/paths/more/paths à app.com/

Là, angular lira les / chemins / plus / chemins et chargera la vue appropriée.

essaye ça

 res.sendFile(path.join(__dirname, '/public', 'index.html')); 

il sera redirigé vers index.html lorsque vous appuierez sur f5.

Essaye ça

 var express = require('express'); var app = express(); app.use(express.static(__dirname + '/www')); app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('www/index.html', { root: __dirname }); });