重新加载angular度的应用程序后没有index.html
我有一个像下面这样的基本设置的angular.js应用程序：我的index.html呈现像Top / Sidebar这样的静态内容。 里面我有<div ng-view></div>来显示部分html文件，例如我的home.html
login到我的应用程序后， 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 。 但是，我怎样才能达到，当我login后正常进入页面时，我已经有了什么？
我目前的主要问题似乎是我目前不太清楚如何以及为什么index.html在我login时加载正常。以下是在SignIn过程完成后我在LoginCtrl执行的操作：
$location.path("/");
我在网上search了一些关于这个主题的详细解释，但不幸的是我没有find有用的东西。 有人可以解释为什么这个工作在第一个地方，我怎么能使它的页面重新加载以及？ 谢谢！
编辑我在这里阅读（ https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode ），我有改变我的快递configuration。 我试过了：
app.all('/*', function(req, res, next) { res.sendfile('public/index.html', { root: __dirname }); });
我使用$locationProvider.html5Mode(true);
但是当我现在login我的页面无情地刷新，直到它崩溃。
编辑2：好吧，阅读了很多关于html5mode和如何使用它expression我很确定，我的错误是在后端，而不是在前端。
这里是我的server.js （快速configuration）的一部分
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
我读过很多post在stackoverflow和其他网站，基本上都是这么说的
app.get('*', function(req, res) { res.redirect('/'); });
应该足以让这个工作，但对我来说似乎并没有工作。
edit3：快速总结我目前的问题是：
当我重新加载页面时，只有像home.html这样的部分html正在被加载。 不是整个index.html页面。 以下是我的代码的简要总结：
在app.js （angular度configuration）我已经configuration：
$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); });
从我的理解这个“应该”足够的configurationexpression和棱angular一起工作。
首先在你的angular度路线的模板URL添加一个/开始像templateUrl: '/views/home.html' / 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); });
确保将所有客户端代码放在/ public文件夹中，并通过express静态中间件访问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时要小心。
经过大量的工作，我创build了一个新的项目，试着在上面的链接/答案中解释路由，然后复制我的旧代码。 不幸的是，我从来没有发现问题究竟是什么。 一定是我在这个线程中提到的一小部分。
如果遇到这种问题的解决scheme：看看链接，并尝试创build一个工作示例项目。 至less这对我有效。