angularjs – 重新加载角度app后没有index.html

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

在我登录我的应用程序之后,带有它的Controller MainCtrl的index.html以及我的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以及如何使用它的表达后我很确定我的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('/',res) {
    res.render('index');
});
app.get('/views/:name',function (req,res) {
    var name = req.params.name;
    res.render('views/' + name);
});
app.get('*',res) {
    res.redirect('/');
});

我的文件夹结构：

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

我已经在stackoverflow和其他网站上阅读了很多帖子,基本上都是这么说的

app.get('*',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',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',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('*',res) {
    res.redirect('/#' + req.originalUrl);
});

从我的理解这个“应该”足够配置表达和角度一起工作.

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

app.get('/*',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',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,res) {
    res.redirect('/#' + req.originalUrl);
});