AngularJS和nodeJs Express：路由和刷新

Question

My app is "working" fine, but, when I press F5 in browser my problem appears. 我的应用程序运行正常，但是，当我在浏览器中按F5时，出现了我的问题。

My app is organized this way: 我的应用程序是这样组织的：

nodeJs + express, in Express : nodeJs + express，在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 一切正常，直到我刷新页面，如果我在localhost：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

all my index.html! 我所有的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: mi激活：

<div>
    test
</div>

my index.html 我的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>

Answer 1

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). 这是使用返回index.html的“包罗万象”路由时经常遇到的问题（使用Angular的html5模式时必须这样做）。

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). 我不知道您的公用文件夹结构是什么样子，但是您的Angular正在请求一个与其实际位置不符（由Express提供）的activate.html。 It may be because you have a leading slash in your templateUrl: 可能是因为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. “ /page/activate.html”假定“ page”文件夹位于公用文件夹的根目录下。 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/.) （似乎不太可能在public /的根目录下有一个名为“ page”的文件夹。）

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. 但没有任何方法可以成功处理它，因此您的全部路由仅返回index.html，该索引具有多个根元素，从而导致Angular拟合。 Angular expected activate.html but it got index.html instead. Angular期望使用activate.html，但改为使用index.html。

This will happen whenever the client makes a request that Express can't handle, because the catch-all router will return index.html. 每当客户端发出Express无法处理的请求时，都会发生这种情况，因为包罗万象的路由器将返回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. 当浏览器连续加载index.html，加载Angular，（错误地）加载index.html，加载Angular等时，您可以使浏览器陷入无限循环。

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. 查看您的浏览器对activate.html发出的请求，并使其与activate.html的实际位置（由Express提供）相匹配。

Answer 2

Try use the specify the templateUrl with the absolute path from the root of the views. 尝试使用指定的templateUrl以及从视图root的绝对路径。

For example, suppose you have configured and views is in the public folder 例如，假设你已经配置和views是在public文件夹

app.set('views', __dirname + '/public');

then change the path to the template to 然后将模板的路径更改为

/public/page/home.html

AngularJS和nodeJs Express：路由和刷新

问题描述

2 个解决方案

解决方案1
3 2013-08-15 17:00:48

解决方案2
0 2013-08-14 19:51:49

AngularJS和nodeJs Express：路由和刷新

问题描述

2 个解决方案

解决方案1 3 2013-08-15 17:00:48

解决方案2 0 2013-08-14 19:51:49

解决方案1
3 2013-08-15 17:00:48

解决方案2
0 2013-08-14 19:51:49