2

我的应用程序“工作”正常，但是，当我在浏览器中按 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: '/' });
});

并且在我刷新页面之前一切正常

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>

4

2 回答 2

3

这是使用返回 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'})

（在 public/ 的根目录下似乎不可能有一个名为“page”的文件夹。）

您的快速中间件尝试处理请求

http://localhost:1234/page/activate.html

但没有成功处理它，所以你的包罗万象的路线只返回 index.html，它有多个根元素，导致 Angular 不合适。Angular 预期 activate.html 但它得到了 index.html。

每当客户端发出 Express 无法处理的请求时，就会发生这种情况，因为 catch-all 路由器将返回 index.html。你可以让你的浏览器进入一个无限循环，因为它不断加载 index.html，它加载 Angular，它（错误地）加载 index.html，它加载 Angular 等等。

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

于 2013-08-15T17:00:48.780 回答
0

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

例如，假设您已经配置并且views在public文件夹中

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

然后将模板的路径更改为

/public/page/home.html
于 2013-08-14T19:51:49.550 回答