Question

我有一个angular.js应用程序，其基本设置如下：我的index.html呈现静态内容，如Top / Sidebar。我在里面<div ng-view></div>显示部分html文件，例如my 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如何以及为什么加载正常。这就是我在SignIn之后在LoginCtrl中所做的事情流程已完成：

$location.path("/");

我在网上搜索了关于这个主题的一些详细解释，但不幸的是我还没有找到任何有用的东西。有人可以解释为什么这首先起作用，以及我如何使其适用于页面重新加载？谢谢！

编辑我在这里阅读（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以及如何使用它后，我很确定我的Bug是在后端，而不是在前端。

以下是我的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);
});

从我的理解中，“应该”足够配置表达和角度一起工作。

Answer 1

首先，在角度路线的模板网址中，在/开头添加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);
});

Answer 2

确保将所有客户端代码放在/ public文件夹中，并通过express.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

经过大量的工作，我创建了一个新项目，尝试了例如在上面的链接/答案，然后复制我的旧代码。不幸的是，我从未发现问题究竟是什么。一定是我在这个帖子中一直缺少的一小部分。

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

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

3 个答案: