AngularJs 무한 루프

다음 index.html 페이지는 무한 루프를 발생시킵니다. 재현하려면AngularJs 무한 루프

A (로컬 또는 원격) 웹 서버에 아래 링크 GitHub의 프로젝트 다운로드 (plunker에 나는 그것을 시도하고 무한 루프가 발생하지 않았다) 브라우저에서
요청을.
페이지의 p1p2 링크를 클릭하십시오.

무한 루프가 시작됩니다. 서버 측에서 로그를 생성합니다

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

참고 여기 /partials/template1 앞에 /p1. 그게 어디서 온거야? 이것은 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을 넣어). 전체 프로젝트는 github here에 있습니다.

그리고 템플릿이 포함 된 동일한 HTML 페이지는 here입니다.

출처

2013-04-28 woz

이러한 종류의 문제를 피하려면 항상 전체 URL을 지정해야합니다. 그런 다음 상대방으로 해석 될지 여부와 상대적인 것으로 해석 될지 여부를 생각할 필요가 없습니다. 내 Angular.js 앱에는 항상 모든 URL의 접두어로 사용되는 "baseUrl"변수 (주입 됨)가 있습니다. –

기본 href 값이 범인 인 것처럼 보입니다. 절대 값 (document.location)을 '/'로 바꾸면 문제가 해결되었습니다. 다른 문제는 templateURL 값 앞에 '/'접두사가 붙는 것이 었습니다. 수정은 무한 루프 문제를 해결하지만, 적절하고 견고한 라우팅을 위해 둘 다 수정해야합니다. – woz

'partials/template1'은 상대방과의 상대 위치이므로 '/ p1/p2'에서 호출하면 브라우저는 사용자가 '/ p1'디렉토리에 있다고 가정하고 거기에서 경로를 만듭니다.

앞의 슬래시를 '/ partials/template1'과 같이 추가하면 웹 서버 루트 디렉토리의 경로가 항상 생성됩니다.

출처

2013-04-28 10:55:48 Joc

예, 무한 루프 문제가 해결되었습니다. 위의 내 의견을 참조하십시오. – woz

동일한 문제가 있었지만 각도 시나리오로 e2e 테스트를 실행할 때만 나타났습니다. 이 문제가 해결되었습니다. – Lathejockey81

AngularJs 무한 루프

답변

관련 문제