作者:晞沂_364 | 来源:互联网 | 2023-05-27 19:38
我有一个angular.js应用程序,其基本设置如下:我index.html
渲染静态内容,如Top/Sidebar.在里面我必须
显示部分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
当我登录时如何以及为什么加载正常.这是我在LoginCtrl
SignIn过程完成后在我的工作:
$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);
});
从我的理解这个"应该"足够配置表达和角度一起工作.