2

次の index.html ページでは、無限ループが発生します。再現するには：

  1. 以下にリンクされているgithubプロジェクトを（ローカルまたはリモート）Webサーバーにダウンロードします（plunkerで試しましたが、無限ループは発生しませんでした）
  2. ブラウザからリクエストしてください。
  3. ページの p1p2 リンクをクリックします。

無限ループが始まります。サーバー側では、ログは次のように生成されます。

server request for * handled
GET /p1/p2 304 8ms
server request for * handled
GET /p1/partials/template1 304 4ms

/p1ここの前に注意して/partials/template1ください。それはどこから来ましたか？AngularJS がこの URL でテンプレートを見つけることができず、結果としてループに入るため、無限ループが発生しています。/p1/p2このAngularJS ルートを短く/p1すると、何とか問題が解消されます。 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script>document.write('<base href="' + document.location + '" />');</script>
  </head>
  <body ng-app="minimalApp">
    <p>Index Page That Contains ng-view below..</p>
    <div ng-view></div>
    <p><a ng-href="p1/p2">p1p2</p>
    <p><a ng-href="#">#</p>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script>
      'use strict';
      var minimalApp = angular.module('minimalApp', []).
        config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
          $routeProvider.
            when('/', {
              templateUrl: 'partials/template1',
              controller: IndexCtrl
            }).
            when('/p1/p2', {
              templateUrl: 'partials/template2',
               controller: T2Ctrl
            }).
            otherwise({
              redirectTo: '/'
            });

          $locationProvider.html5Mode(true);
        }]);

      function IndexCtrl($scope) {
      }

      function T2Ctrl($scope) {
      }    
    </script>
  </body>
</html>

(テンプレートは jade 経由で作成されますが、簡単にするためにここに html を配置します)

使用したサーバーは node/express です。完全なプロジェクトは github hereにあります。

そして、テンプレートが埋め込まれて動作する同じ html ページはhereです。

4

1 に答える 1

3

'partials/template1' は現在の場所に相対的であるため、'/p1/p2' から呼び出されると、ブラウザはディレクトリ '/p1' にいると想定し、そこからパスを作成します。

「/partials/template1」のように前にスラッシュを追加すると、常に Web サーバーのルート ディレクトリからパスが作成されます。

于 2013-04-28T10:55:48.943 に答える