Question

我的应用是＆＃34;工作＆＃34;很好，但是，当我在浏览器中按F5时，我的问题出现了。

我的应用以这种方式组织：

nodeJs + express，在Express中：

app.use(express.static('public'));
app.use( app.router );
app.use(function(req, res) {
    res.sendfile(__dirname + '/public/index.html');
});

我的角度路线：

app.config(function($locationProvider, $routeProvider) {
    $locationProvider
        .html5Mode(true)
        .hashPrefix('!');
    $routeProvider
        .when('/', { templateUrl: '/page/home.html'})
        .when('/activate/:token', { templateUrl: '/page/activate.html'})
        .otherwise({ redirectTo: '/' });
});

一切正常，直到刷新页面，如果我在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

我所有的index.html！可能是什么问题？任何解决方案？
编辑：
我的家：

<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>

我的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

这是使用返回index.html的“catch-all”路由时常遇到的问题（使用Angular的html5模式时必须执行此操作）。

我不知道你的公共文件夹结构是什么样的，但你的Angular正在发出一个与其实际位置不匹配的activate.html请求（由Express提供）。可能是因为你的templateUrl中有一个前导斜杠：

{ templateUrl: '/page/activate.html'})

但这取决于您的公用文件夹的外观。 “/page/activate.html”假定“page”文件夹位于公用文件夹的根目录下。如果不是，那那就是你的问题。你应该：

{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})

我猜你的情况会是这样的：

{ templateUrl: 'views/page/activate.html'})

（似乎不太可能在公共的根目录中有一个名为“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，它会（错误地）加载index.html，它会加载Angular等。

查看您的浏览器为activate.html发出的请求，并使其与activate.html的实际位置（由Express提供）匹配。

Answer 2

尝试使用指定templateUrl和视图的root的绝对路径。

例如，假设您已配置且views位于public文件夹

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

然后将模板的路径更改为

/public/page/home.html

AngularJS和nodeJs Express：路由和刷新

2 个答案: