当我刷新页面时，不是页面加载。 Angularjs + Nodejs

【问题标题】：when I refresh the page, not the page loads. Angularjs + Nodejs当我刷新页面时，不是页面加载。 Angularjs + Nodejs
【发布时间】：2016-11-21 17:07:51
【问题描述】：

当我按 F5 重新加载页面时，页面不会重新加载。 我正在使用 Node.js、Express Js 和 AngularJS。

index.html

    <!DOCTYPE html>
    <html lang="es-ar">
    <head>
        <title>My web</title>
        <meta charset="utf-8"/>

        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
        <script type="text/javascript" src="https://code.angularjs.org/1.4.7/angular-animate.min.js"></script>
        <script type="text/javascript" src="https://code.angularjs.org/1.4.7/angular-cookies.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
        <script type="text/javascript" src="https://code.angularjs.org/1.4.7/angular-resource.min.js"></script>
        <script type="text/javascript" src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="https://code.angularjs.org/1.4.7/angular-touch.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css' />
        <link href="stylesheets/main.css" rel="stylesheet" type="text/css"/>
        <!--Maps-->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBcKGv4lLvSO6F8dKq976CT_zQPiRVcDRQ&sensor=false"></script>
        <script type="text/javascript" src="js/vendors/leaflet.js"></script>
        <script type="text/javascript" src="js/vendors/angular-simple-logger.js"></script>
        <script type="text/javascript" src="js/vendors/ui-leaflet.min.js"></script>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />

        <base href="/">
    </head>
    <body class="backgroundGrayLight" ng-app="Index" ng-controller="indexController">
<nav class="navbar navbar-default startNav" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" ng-click="btnCollapseNavBar()">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse">

                <form class="navbar-form navbar-left formSearch" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control search" placeholder="Search">
                    </div>
                    <a class="btnSearch" href="" close-collapse><span class="glyphicon glyphicon-search"></span></a>
                </form>

                <ul class="nav navbar-nav navbar-right" id="btnSignRoot" ng-show="viewBtnEnter">

                    <li uib-dropdown role="presentation">
                        <a uib-dropdown-toggle ng-show="viewBtnEnter" id="formLogin"><span class="glyphicon glyphicon-log-in"></span> Iniciar sesión</a>
                        <!-- action="/login" method="post"  -->
                        <form class="form-horizontal uib-dropdown-menu loginForm" aria-labelledby="formLogin">
                            <div class="form-group">
                                <label for="inputEmail" class="col-sm-2 control-label">Email</label>
                                <div class="col-sm-10">
                                    <input name="email" type="email" class="form-control" id="inputEmail" ng-model="formData.email" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword" class="col-sm-2 control-label">Password</label>
                                <div class="col-sm-10">
                                    <input name="password" type="password" class="form-control" id="inputPassword" ng-model="formData.password" placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> Remember me
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <div class="recoveryPassword">
                                        <a class="text-center" href="/recoveryPassword" close-collapse>Olvidé mi contraseña</a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <div class="error">
                                        <p class="text-center" ng-show="msgErrorLogin" close-collapse>Nombre de usuario o contraseña incorrecta</p>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button class="btn btn-primary submitLogIn" ng-click="login()" close-collapse>Iniciar</button>
                                </div>
                            </div>
                        </form>
                    </li>

                    <li role="presentation"><a href="/signin" ng-show="viewBtnEnter" close-collapse><span class="glyphicon glyphicon-user"></span> Registrarse</a></li>

                </ul>
            </div>
        </div>
    </nav>

    <nav class="navbar navbar-inverse menu" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menu" aria-expanded="false" ng-click="btnCollapseMenu()">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <collapse-left></collapse-left>
            </div>

            <div class="collapse navbar-collapse menuNav" id="navbar-collapse-menu">

                <ul class="nav navbar-nav navbar-right menuRight">

                    <li role="presentation">
                        <a class="btn" href="/contact" close-collapse style="background-color: #000;">Contacto</a>
                    </li>
                    <li uib-dropdown role="presentation">
                        <a uib-dropdown-toggle class="btn" href="" style="background-color: #000;" id="idMyAccountDropdown">Mi cuenta</a>
                        <ul class="uib-dropdown-menu optionMyAccount" aria-labelledby="idMyAccountDropdown">
                            <li><a href="/manageAccount" close-collapse>Administrar mi cuenta</a></li>
                            <li class="divider"></li>
                            <li><a href="" ng-click="loadModalCreateShop()" close-collapse>Crear comercio</a></li>
                            <li><a href="/manageMyShops" close-collapse>Administrar mis negocios</a></li>
                            <li class="divider"></li>
                            <li><a href="/manageWeb" close-collapse>Administrar web</a></li>
                            <li><a href="/logout" close-collapse>Cerrar sesión</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </nav>

    <div class="backgroundGrayLight">
        <div ng-view></div>
    </div>

    <footer class="footer" ng-controller="yearCopyright">
        <div class="container-fluid">
            <p class="text-center">&copy; {{year}}</p>
        </div>
    </footer>

    <!-- Modules -->
    <script type="text/javascript" src="js/app.js"></script>

    <!-- Controllers -->
    <script type="text/javascript" src="js/controllers/indexController.js"></script>
    <script type="text/javascript" src="js/controllers/mainController.js"></script>
    <script type="text/javascript" src="js/controllers/formSignInController.js"></script>
    <script type="text/javascript" src="js/controllers/contactController.js"></script>
    <script type="text/javascript" src="js/controllers/recoveryPasswordController.js"></script>
    <script type="text/javascript" src="js/controllers/manageAccountController.js"></script>
    <script type="text/javascript" src="js/controllers/pModalMsgInstanceController.js"></script>
    <script type="text/javascript" src="js/controllers/homepageController.js"></script>
    <script type="text/javascript" src="js/controllers/shopsController.js"></script>
    <script type="text/javascript" src="js/controllers/shopSelectedController.js"></script>
    <script type="text/javascript" src="js/controllers/createShopController.js"></script>
    <script type="text/javascript" src="js/controllers/loadImagesController.js"></script>
    <script type="text/javascript" src="js/controllers/loadVideoController.js"></script>
    <script type="text/javascript" src="js/controllers/shopPaymentController.js"></script>
    <script type="text/javascript" src="js/controllers/manageMyShopsController.js"></script>
    <script type="text/javascript" src="js/controllers/editShopController.js"></script>
    <script type="text/javascript" src="js/controllers/manageWebController.js"></script>

    <!-- Directives -->
    <script type="text/javascript" src="js/directives/onErrorSrc.js"></script>
    <script type="text/javascript" src="js/directives/inputName.js"></script>
    <script type="text/javascript" src="js/directives/inputLastName.js"></script>
    <script type="text/javascript" src="js/directives/inputUserName.js"></script>
    <script type="text/javascript" src="js/directives/inputEmailWithRepeat.js"></script>
    <script type="text/javascript" src="js/directives/inputPassword.js"></script>
    <script type="text/javascript" src="js/directives/inputPasswordWithRepeat.js"></script>
    <script type="text/javascript" src="js/directives/inputEmail.js"></script>
    <script type="text/javascript" src="js/directives/inputSubject.js"></script>
    <script type="text/javascript" src="js/directives/inputComment.js"></script>
    <script type="text/javascript" src="js/directives/pModal.js"></script>
    <script type="text/javascript" src="js/directives/collapseLeft.js"></script>
    <script type="text/javascript" src="js/directives/closeCollapse.js"></script>
    <script type="text/javascript" src="js/directives/inputShopName.js"></script>
    <script type="text/javascript" src="js/directives/inputAddress.js"></script>
    <script type="text/javascript" src="js/directives/inputAddressNumber.js"></script>
    <script type="text/javascript" src="js/directives/inputProvinceCity.js"></script>
    <script type="text/javascript" src="js/directives/inputPhoneNumber.js"></script>
    <script type="text/javascript" src="js/directives/inputLinkWebsite.js"></script>
    <script type="text/javascript" src="js/directives/shopCommentaryMain.js"></script>
    <script type="text/javascript" src="js/directives/inputNewCommentaryShop.js"></script>

    <!-- Services -->
    <script type="text/javascript" src="js/services/serveCategories.js"></script>
    <script type="text/javascript" src="js/services/serveShopData.js"></script>

    <!-- Vendors -->
    <script type="text/javascript" src="js/vendors/ui-bootstrap-tpls-0.14.3.min.js"></script>
    <script type="text/javascript" src="js/vendors/ng-file-upload-shim.min.js"></script>
    <script type="text/javascript" src="js/vendors/ng-file-upload.min.js"></script>
    <script type="text/javascript" src="js/vendors/checklist-model.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

</body>
</html>

indexController.js

app.config(['$httpProvider', '$routeProvider', '$locationProvider', function ($httpProvider, $routeProvider, $locationProvider) {    
    $routeProvider
        .when('/main', {
            templateUrl: 'views/main.html',
            controller: 'carouselImg'
        })

        .when('/signin', {
            templateUrl: 'views/signIn.html',
            controller: 'formSignInController'
        })

        .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'contactController'
        })

        .when('/recoveryPassword', {
            templateUrl: 'views/recoveryPassword.html',
            controller: 'recoveryPasswordController'
        })

        .when('/manageAccount', {
            templateUrl: 'views/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('/manageMyShops', {
            templateUrl: 'views/manageMyShops.html',
            controller: 'manageMyShopsController'
        })

        .when('/manageMyShops/id/:shopId', {
            templateUrl: 'views/editShop.html',
            controller: 'editShopController'
        })

        .when('/manageWeb', {
            templateUrl: 'views/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', '/recoveryPassword', '/manageAccount', '/shop/:itemId/cat/:categoryId', '/shop/:shopName', '/manageMyShops', '/manageMyShops/id/:shopId', '/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('/');
    }
  • 应用程序（服务器端）
    • 控制器
    • 路线
  • 公开
    • /图片
    • /js
    • /样式表
    • /查看次数
    • index.html

所有页面都会出现该错误。 我想让用户控制网站的某些部分。 当我按 f5 时，如果用户已登录，您应该被重定向到您要访问的页面。例如：/homepage + f5 -> isLoggedIn(...)? /主页：/index.html

谢谢。

【问题讨论】：

  • 更多信息。你去索引，它工作正常吗？
  • 你能说得更具体点吗？当您说“页面未重新加载”时，是哪个页面？所有页面？
  • @Dreamlines 任何想法。谢谢。
  • @BowenLi 任何想法。谢谢

标签： html angularjs node.js express


【解决方案1】：

由于没有什么可做的，我会先抛出明显的解决方法。

您的路由未设置为处理单页应用。

当您在索引页面中进行路由时，Angular 的路由器会在索引页面内外交换视图，但您实际上从未离开第一页。这是单页应用所期望的行为。

如果您在 index.com/go/to/path 之类的页面上刷新，您是在告诉您的浏览器实际转到该路径 index.com/go/to/path。

Angular 对此一无所知，它的路由只处理 index.com 上的路径。

如果您使用 nginx，请将其添加到您的位置：

try_files $uri $uri/ /index.html;

解决方案在 apache 中会是相似的，如果不一样的话（我不知道）。

它的作用是将所有这些 app.com/paths/more/paths 重定向到 app.com/

在那里，angular 将读取 /paths/more/paths 并加载正确的视图。

【讨论】：

  • 是否可以配置为单页应用程序？而且，我必须在哪里配置 try_files $uri $uri/ /index.html;?
【解决方案2】：

试试这个

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

当你按下 f5 时它会重定向到 index.html。

【讨论】：

  • > 错误：ENOENT：没有这样的文件或目录，stat 'C:\...\Visual Studio 2015\Projects\Website\App\app\routes\public\views\path.html'路线应该是 'C:\...\Visual Studio 2015\Projects\Website\App\public\views\path.html'
  • 如果你想上移一个目录。试试这个'./public'
  • @chirag 我终于解决了如下： 我的网站 index.server.routes.js app.get(['/homepage', '/recoveryPassword', '/manageAccount', '/shop/:itemId/cat/:categoryId', '/shop/:shopName ', '/manageMyShops', '/manageMyShops/id/:shopId', '/manageWeb'], isLoggedIn, function (req, res) { res.redirect('index.html#/' + req.path); } );其余的，都一样。
【解决方案3】：

试试这个

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

【讨论】：

    猜你喜欢
    • 2020-04-03
    • 1970-01-01
    • 1970-01-01
    • 2012-09-21
    • 1970-01-01
    • 2017-09-04
    • 2012-11-14
    • 2023-03-11
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode