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

Question

我有一个angular.js应用程序,其基本设置如下:我index.html渲染静态内容,如Top/Sidebar.在里面我必须<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当我登录时如何以及为什么加载正常.这是我在LoginCtrlSignIn过程完成后在我的工作:

$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我已配置的(angular config)中:

$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

首先，在 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);
});