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: '/' });
});

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 アクティブ化:

<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 を返す「キャッチオール」ルートを使用する場合によく発生する問題です (Angular の html5 モードを使用する場合に行う必要があります)。

あなたのパブリック フォルダー構造がどのように見えるかはわかりませんが、あなたの Angular は、(Express によって提供される) 実際の場所と一致しない activate.html を要求しています。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」というフォルダがあるとは思えません。)

Express ミドルウェアは、次の要求を処理しようとします。

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

しかし、それを正常に処理するものは何もないため、キャッチオール ルートは複数のルート要素を持つ index.html を返すだけであり、Angular は適合をスローします。Angular は activate.html を想定していましたが、代わりに index.html を取得しました。

キャッチオール ルーターが index.html を返すため、クライアントが Express で処理できない要求を行うと、常にこれが発生します。Angular をロードする index.html を継続的にロードし、(誤って) Angular をロードする index.html をロードするため、ブラウザが無限ループに陥る可能性があります。

ブラウザーが activate.html に対して行っている要求を調べて、(Express によって提供される) activate.html の実際の場所と一致するようにします。

于 2013-08-15T17:00:48.780 に答える