Question

以下index.html页面会导致无限循环。重现：

在（本地或远程）Web服务器上下载链接到下面的github项目（我在plunker上尝试了它并且没有发生无限循环）
从您的浏览器请求它。
点击页面上的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>

（我把html放在这里，即使模板是通过jade创建的也很容易）

我使用的服务器是node / express。完整的项目位于github here。

嵌入了模板的相同html页面是here。

Answer 1

'partials / template1'是相对于你所在的位置，因此当从'/ p1 / p2'调用时，浏览器假定你在目录'/ p1'并从那里构建路径。

如果添加前面的斜杠，如'/ partials / template1'，这将始终从Web服务器根目录构建路径。

AngularJs无限循环

1 个答案: