angularjs - 重新加载 Angular 应用程序后没有 index.html

Question

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

在我登录我的应用程序后 index.html与它的 Controller 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("/");

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

编辑 我在这里 ( 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 一起使用之后，我很确定我的 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('/');
    });

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

---

编辑3:快速总结我当前的问题是什么:

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

在app.js ( Angular 配置)我已经配置:

$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

首先，在你的 Angular 路由的模板 url 中，在开头添加一个 /，例如 templateUrl: '/views/home.html'。因为在您的 Express 应用程序中，您正在寻找开头包含 / 的 /: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);
});