AngularJS和nodeJs Express：路由和刷新
我的应用程序“工作”很好，但是，当我在浏览器中按F5我的问题出现。
我的应用程序是这样组织的：
快递中的nodeJs + 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 /激活/ 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！ 有什么问题？ 任何解决scheme
编辑：
我的家：
<div> <section id="feature_slider" class=""> //... </section> <div id="showcase"> //... </div> <script type="text/javascript" src="/js/index-slider.js"></script> </div>
mi激活：
<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（在使用Angular的html5模式时必须执行的操作）的“catch-all”path时经常遇到的问题。
我不知道你的公用文件夹结构是什么样的，但是你的Angular正在请求与它的实际位置（由Express服务）不匹配的activate.html。 这可能是因为你的templateUrl中有一个斜杠：
{ templateUrl: '/page/activate.html'})
但这取决于你的公共文件夹的样子。 “/page/activate.html”假定“页面”文件夹位于公用文件夹的根目录下。 如果不是，那就是你的问题。 你应该有：
{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})
我猜你的情况是这样的：
{ templateUrl: 'views/page/activate.html'})
（看起来很可能在public /的根目录下有一个名为“page”的文件夹。）
您的快递中间件尝试处理请求
http://localhost:1234/page/activate.html
但是没有成功的处理它，所以你的catch-all路由只是返回index.html，它有多个根元素，导致Angular抛出一个合适的。 angular预期的activate.html，但它得到了index.html而不是。
只要客户端发出Express无法处理的请求，就会发生这种情况，因为catch-all路由器将返回index.html。 你可以让浏览器无限循环，因为它不断加载index.html，它加载了Angular，加载了Angular的index.html等等（错误地）。
查看浏览器为activate.html所做的请求，并使其与activate.html的实际位置（由Express服务）匹配。
尝试使用从视图root的绝对path指定templateUrl。
例如，假设您已configuration并且views位于公用文件夹中
app.set('views', __dirname + '/public');
然后将path更改为模板
/public/page/home.html