重新加载角度应用程序后没有 index.html

Question

我有一个 angular.js 应用程序，其基本设置如下：我的 index.html 呈现静态内容，如顶部/侧边栏。在里面我有<div ng-view></div> 来显示部分html文件，例如我的home.html

登录到我的应用程序后，index.html 及其控制器 MainCtrl 以及我的 home.html 与相应的 HomeCtrl 一起加载。所以一切都应该是。

在我实施修复后（这样重新加载不会“忘记”用户并且我不会退出 - 我基于来自 http://www.sitepoint.com/implementing-authentication-angular-applications/ 的示例）我尝试重新加载我的页面。但现在只有我的 home.html 加载。

注意：我在下面编辑了我的发现

有道理，这是我app.js的一部分：

$routeProvider.when('/', {
    templateUrl: 'views/home.html',
    controller: 'HomeCtrl',
    resolve: {
        auth: function ($q, authenticationSvc) {
            var userInfo = authenticationSvc.getUserInfo();
            if (userInfo) {
                return $q.when(userInfo);
            } else {
                return $q.reject({ authenticated: false });
            }
        }
    }
})
.when('/login', {
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl',
    login: true
})

很明显，当我加载/ 时，应用程序只显示我的home.html。但是如何实现，登录后正常进入页面时已经拥有的东西呢？

目前我的主要问题似乎是我不太确定登录时index.html 如何以及为什么加载正常。这是登录过程完成后我在LoginCtrl 中所做的事情：

$location.path("/");

我在网上搜索了有关此主题的一些详细说明，但遗憾的是我还没有找到任何有用的信息。有人可以向我解释为什么这首先有效，以及我如何使它也适用于页面重新加载？谢谢！

edit 我在这里 (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode) 读到我必须更改我的快速配置。我试过了：

app.all('/*', function(req, res, next) {
    res.sendfile('public/index.html', { root: __dirname });
});

我用$locationProvider.html5Mode(true);

但是当我现在登录时，我的页面会无限刷新直到崩溃。

edit2：好的，在阅读了很多关于 html5mode 以及如何将它与 express 一起使用之后，我很确定我的错误在后端，而不是在前端。

这是我的server.js（快速配置）的一部分

app.use(require('less-middleware')(path.join(__dirname, 'public')));
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'html');
app.set('views', __dirname + '/public/views/');

require('./routes')(app); // contains my other routes

app.get('/', function(req, res) {
    res.render('index');
});
app.get('/views/:name', function (req, res) {
    var name = req.params.name;
    res.render('views/' + name);
});
app.get('*', function(req, res) {
    res.redirect('/');
});

我的文件夹结构：

/server.js
/routes
/public/app.js
/public/index.html
/public/views/home.html
/public/controllers/xxxCtrl.js

我在 stackoverflow 和其他网站上读过很多帖子，基本上都这么说

app.get('*', function(req, res) {
        res.redirect('/');
    });

应该足以让这个工作，但对我来说似乎不起作用。

---

edit3： 快速总结一下我目前的问题是什么：

当我重新加载页面时，只有部分 html，例如home.html 正在加载中。不是index.html 的完整页面。这是我当前代码的快速摘要：

在我配置的app.js（角度配置）中：

$locationProvider.html5Mode(true); 
// I tried my app without html5mode, but then everything breaks - but I need the html5mode anyway
$routeProvider.when('/', {
            templateUrl: 'views/home.html',
            controller: 'HomeCtrl',
            resolve: {
                auth: function ($q, authenticationSvc) {
                    var userInfo = authenticationSvc.getUserInfo();
                    if (userInfo) { return $q.when(userInfo); } 
                    else { return $q.reject({ authenticated: false });}
                }
            }
        })

我的authenticationSvc:

.factory("authenticationSvc", ["$http", "$q", "$route", "$window", "$location", function ($http, $q, $route, $window, $location) {
// login, logout
function init() {
        console.log("init");
        if ($window.sessionStorage["userInfo"]) {
            userInfo = JSON.parse($window.sessionStorage["userInfo"]);
        }
    }

    init();

在服务器端，server.js:

app.get('/:name', function (req, res) {
    var name = req.params.name;
    res.sendFile('views/' + name);
    // res.sendFile(__dirname + '/public/index.html'); // uncommented, since it didn't work
});


require('./routes')(app);

// this is my last route:
app.get('*', function (req, res) {
    res.redirect('/#' + req.originalUrl);
});

据我了解，这“应该”足以让 express 和 angular 协同工作。

Answer 1

经过大量工作，我创建了一个新项目，尝试了例如上面的链接/答案，然后复制我的旧代码。不幸的是，我从来没有发现真正的问题是什么。一定是我在这个帖子中遗漏的一些小部分。

解决方案如果您遇到此类问题：查看链接并尝试创建一个有效的示例项目。至少这对我有用。

Answer 2

确保将所有客户端代码放在 /public 文件夹中，并通过快速静态中间件在 server.js 中访问它

app.use(express.static(__dirname+'/public')));

然后添加 , 定义完所有路由后

app.route('/*') // this is the last route
.get(function(req, res) {
  res.sendfile(__dirname+ '/public/index.html');
});

在旁注中，__dirname 是您所在文件的本地文件，并且它始终指向包含文件夹。因此在子文件夹中的文件中使用 __dirname 时要小心。

Answer 3

首先在您的角度路由的模板 url 中添加一个 / 在开头，如 templateUrl: '/views/home.html'。因为在您的快递应用程序中，您正在寻找 /:name，它在开头包含 /。

下一个

// ------
// try adding this

app.get('/*', function (req, res) {
    res.sendFile(__dirname + '/public/index.html'); // uncommented, since it didn't work
});

// Now what this does is that everytime a request is made it will send the index file
// The asterisk will allow anything after it to pass through
// Once it reaches the front end, Angular will process whats after "/"
// It then will make an asynchronous request to the server depending on what
// path is present after "/"
// That is when app.get('/:name'... is called


//------

app.get('/:name', function (req, res) { // This route will be called by angular from the front end after the above route has been processed

    var name = req.params.name;

    // since your template url is /views/home.html in the angular route, req.params.name will be equal to 'views/home.html'. So you will not need to add yet another 'views/' before the variable name
    res.sendFile(name);
    // res.sendFile('views/' + name);
    // res.sendFile(__dirname + '/public/index.html'); // uncommented, since it didn't work
});


require('./routes')(app);

// this is my last route:
app.get('*', function (req, res) {
    res.redirect('/#' + req.originalUrl);
});