我的应用程序“工作”正常，但是，当我在浏览器中按 F5 时，我的问题出现了。
我的应用程序是这样组织的:
nodeJs + Express，在 Express 中:
app.use(express.static('public'));
app.use( app.router );
app.use(function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
我的 Angular 路线:
app.config(function($locationProvider, $routeProvider) {
$locationProvider
.html5Mode(true)
.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/page/home.html'})
.when('/activate/:token', { templateUrl: '/page/activate.html'})
.otherwise({ redirectTo: '/' });
});
一切都工作正常，直到我刷新页面， 如果我在本地主机:1234/activate/999 页面看起来刷新良好，但它在控制台中标记了此错误
Error: Template must have exactly one root element. was:<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
bla
bla
bla
我所有的index.html!
可能存在什么问题？
有什么解决办法吗？
编辑:
我的家:
<div>
<section id="feature_slider" class="">
//...
</section>
<div id="showcase">
//...
</div>
<script type="text/javascript" src="/js/index-slider.js"></script>
</div>
我激活:
<div>
test
</div>
我的index.html
<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>tite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/css/bootstrap-overrides.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/theme.css">
<link rel="stylesheet" href="/css/index.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/lib/animate.css" media="screen, projection">
<link rel="stylesheet" href="/css/sign-in.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/myCss.css" type="text/css"/>
</head>
<body class="pull_top">
<navbar>
//...
</navbar>
<ng-view> Loading...
</ng-view>
<!-- starts footer -->
<footer id="footer">
//...
</footer>
<!--Preload-->
<script src="/js/jquery-1.10.1.min.js"></script>
<!-- Scripts -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/theme.js"></script>
<!--Angular-->
<script type="text/javascript" src="/js/angular.min.js"></script>
<!--<script type="text/javascript" src="/js/angular-ui.min.js"></script>-->
<script type="text/javascript" src="/js/ui-bootstrap-0.5.0.min.js"></script>
<script type="text/javascript" src="/angular/app.js"></script>
<!--Angular Controller-->
<script type="text/javascript" src="/angular/login/loginController.js"></script>
<script type="text/javascript" src="/angular/menuNavBar/menuController.js"></script>
<script type="text/javascript" src="/angular/login/logOutController.js"></script>
<script type="text/javascript" src="/angular/login/registerController.js"></script>
<!--Angular Services-->
<script type="text/javascript" src="/angular/alertBox/messageBoxController.js"></script>
<!--Router-->
<script type="text/javascript" src="/angular/router/router.js"></script>
</body>
最佳答案
这是使用返回index.html的“catch-all”路由时经常遇到的问题(在使用Angular的html5模式时必须这样做)。
我不知道你的公用文件夹结构是什么样的，但你的 Angular 正在发出与实际位置(由 Express 提供的)不匹配的 activate.html 请求。这可能是因为您的 templateUrl 中有一个前导斜杠:
{ templateUrl: '/page/activate.html'})
但这取决于您的公用文件夹的外观。 “/page/activate.html”假定“page”文件夹位于公用文件夹的根目录下。如果不是，那就是你的问题了。你应该有:
{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})
我猜在你的情况下会是这样的:
{ templateUrl: 'views/page/activate.html'})
(public/的根目录下似乎不太可能有一个名为“page”的文件夹。)
您的快速中间件尝试处理请求
http://localhost:1234/page/activate.html
但没有任何东西可以成功处理它，所以你的包罗万象的路由只返回index.html，它有多个根元素，导致 Angular 抛出异常。 Angular 期望 activate.html 但它得到的是 index.html。
每当客户端发出 Express 无法处理的请求时，就会发生这种情况，因为包罗万象的路由器将返回 index.html。你可以让你的浏览器陷入无限循环，因为它不断加载index.html，它加载Angular，它(错误地)加载index.html，它加载Angular，等等。
查看浏览器对 activate.html 发出的请求，并使其与 activate.html 的实际位置(由 Express 提供)匹配。
关于javascript - AngularJS 和 NodeJs Express : routes and refresh，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18240288/