AngularJS和防爆的NodeJS preSS：路线和刷新 [英] AngularJS and nodeJs Express: routes and refresh
问题描述
我的应用程序正在工作很好，但是，当我美元的浏览器出现在我的问题P $ PSS F5。
我的应用程序的组织是这样的：
+的NodeJS前preSS，在Ex preSS：
app.use（如press.static（'公共'））;
app.use（app.router）;
app.use（功能（REQ，RES）{
res.sendfile（__目录名称+'/public/index.html'）;
}）;
我的角度路线：
的app.config（函数（$ locationProvider，$ routeProvider）{
$ locationProvider
.html5Mode（真）
.hash preFIX（！）;
$ routeProvider
。当（'/'，{templateUrl：/page/home.html'}）
。当（'/激活/：令牌'，{templateUrl：/page/activate.html'}）
不然的话（{redirectTo：'/'}）;
}）;
和一切工作正常，直到我刷新页面，
如果我在localhost：1234 /激活/ 999
看起来不错刷新页面，但它在控制台杜绝这种错误
错误：模板必须有一个根元素。是：＆LT; DOCTYPE HTML＆GT;
＆LT; HTML NG应用程序= =的xmlnshttp://www.w3.org/1999/html＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;标题＆LT; /标题＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
BLA
BLA
BLA
我所有的index.html！
还有什么能问题？
任何解决方案？结果
编辑：结果
我的家：
＆LT; DIV＆GT;
＆lt;节ID =feature_slider级=＆GT;
// ...
＆LT; /节＆gt; ＆LT; DIV ID =橱窗＆GT;
// ...
＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/ JS /索引slider.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; / DIV＆GT;
MI启动：
＆LT; DIV＆GT;
测试
＆LT; / DIV＆GT;
我的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG应用程序= =的xmlnshttp://www.w3.org/1999/html＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;泰特＆LT; /标题＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0＆GT; ＆LT;！ - 风格 - ＆GT;
＆LT;链接HREF =/ CSS / bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT;链接HREF =/ CSS /引导-responsive.min.css的rel =stylesheet属性＆GT;
＆LT;链接HREF =/ CSS /引导-overrides.css的rel =stylesheet属性＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =/ CSS / theme.css＆GT;
＆LT;链接rel =stylesheet属性HREF =/ CSS / index.css类型=文/ CSS媒体=屏幕/＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =/ CSS / lib目录/ animate.css媒体=屏幕投影＆GT;
＆LT;链接rel =stylesheet属性HREF =/ CSS /登录in.css类型=文/ CSS媒体=屏幕/＆GT;
＆LT;链接rel =stylesheet属性HREF =/ CSS / myCss.css类型=文/ CSS/＆GT;
＆LT; /头＆GT;
＆LT;车身类=pull_top＆GT;
＆LT;＆导航栏中GT;
// ...
＆LT; /导航栏＆GT; ＆LT; NG-视图＆gt;载入中...
＆LT; / NG-视图＆gt;
＆LT; - ！开始页脚 - ＆GT;
＆LT;页脚ID =页脚＆GT;
// ...
＆LT; /页脚＆GT; ＆LT;！ - preLOAD - ＆GT;
＆LT;脚本的src =/ JS / jQuery的-1.10.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 脚本 - ＆GT;
＆LT;脚本的src =/ JS / bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/ JS / theme.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;！ - 角 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/ JS / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - ＆LT;脚本类型=文/ JavaScript的SRC =/ JS /角ui.min.js＆GT;＆LT; / SCRIPT＆GT; - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/ JS / UI的引导-0.5.0.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/角/ app.js＆GT;＆LT; / SCRIPT＆GT; ＆所述;！ - 角控制器 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/角/登录/ loginController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/角/ menuNavBar / menuController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/角/登录/ logOutController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/角/登录/ registerController.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;！ - 角服务 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/角/ alertBox / messageBoxController.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;！ - 路由器 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/角/路由器/ router.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
这是用包罗万象的路线，返回的index.html（你有采用了棱角分明的HTML5模式的时候做）时经常遇到的一个问题。
我不知道你的公共文件夹结构看起来像什么，但你的角度正在为activate.html不匹配其实际位置（如前preSS服务）的请求。这可能是因为你在templateUrl有一个前导斜杠：
{templateUrl：/page/activate.html'}）
但是这取决于公共文件夹的样子。 /page/activate.html假定的页面文件夹在您的公共文件夹的根。如果不是，那么这就是你的问题。你应该有：
{templateUrl：路径/亲戚/到/公/文件夹/页/ activate.html'}）
这是我在你的情况我猜会是这样的：
{templateUrl：意见/页/ activate.html'}）
（这似乎并不可能会出现一个文件夹名为页在公共/.)
您的前preSS中间件尝试办理
请求 的http：//本地主机：1234 /页/ activate.html
但没有成功地处理它，所以你的包罗万象的路线只是返回的index.html，其中有多个根元素，造成角度抛出一个合适的。角预期activate.html但它得到的index.html来代替。
每当客户端发出前preSS不能处理一个请求会发生这种情况，因为包罗万象的路由器将返回的index.html。你可以让你的浏览器在一个无限循环，因为它不断加载的index.html，它加载角，这（错误地）负载的index.html，它加载角等。
查看请求您的浏览器正在为activate.html，使之符合实际位置activate.html（由前preSS作为服务）。
My app is "working" fine, but, when I press F5 in browser my problem appears.
My app is organized this way:
nodeJs + express, in Express :
app.use(express.static('public'));
app.use( app.router );
app.use(function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
my angular routes:
app.config(function($locationProvider, $routeProvider) {
$locationProvider
.html5Mode(true)
.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/page/home.html'})
.when('/activate/:token', { templateUrl: '/page/activate.html'})
.otherwise({ redirectTo: '/' });
});
and everything is working fine until i refresh the page, if i'm on localhost:1234/activate/999 it appear refreshing good the page, but it stamp in console this error
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
all my index.html!
what can be the problems?
any solutions?
edit:
my home:
<div>
<section id="feature_slider" class="">
//...
</section>
<div id="showcase">
//...
</div>
<script type="text/javascript" src="/js/index-slider.js"></script>
</div>
mi activate:
<div>
test
</div>
my 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>
This is a problem commonly encountered when using a "catch-all" route that returns index.html (which you have to do when using Angular's html5 mode).
I don't know what your public folder structure looks like, but your Angular is making a request for activate.html that doesn't match its actual location (as served by Express). It may be because you have a leading slash in your templateUrl:
{ templateUrl: '/page/activate.html'})
but that depends on what your public folder looks like. "/page/activate.html" assumes that the "page" folder is at the root of your public folder. If it isn't, then that's your problem. You should have:
{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})
which I'm guessing in your case would be something like:
{ templateUrl: 'views/page/activate.html'})
(It doesn't seem likely there would be a folder called "page" at the root of public/.)
Your express middleware attempts to handle the request for
http://localhost:1234/page/activate.html
but nothing successfully handles it, so your catch-all route just returns index.html, which has multiple root elements, causing Angular to throw a fit. Angular expected activate.html but it got index.html instead.
This will happen whenever the client makes a request that Express can't handle, because the catch-all router will return index.html. You can get your browser in an infinite loop as it continuously loads index.html, which loads Angular, which (erroneously) loads index.html, which loads Angular, etc.
Look at the request your browser is making for activate.html and make it match the actual location (as served by Express) of activate.html.
这篇关于AngularJS和防爆的NodeJS preSS：路线和刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
