ng-view를 사용하여 anglejs에서 호출 스택의 최대 크기가 초과되었습니다.

Question

저는 코드에 각도가 있고 새로운 라우팅을 사용합니다. 색인 파일에서 내가 라우팅의 개념을 사용하는 메뉴 막대가 있습니다.

나는 4 개의 다른 html 페이지로 라우팅되지만, 홈 페이지에서는 중첩 된 라우팅을 원한다. home.html에 대한 코드는 다음과 같습니다 :

<div> 
     <section class="section1"> 
      <div class="section1Element" 
       style="border-bottom: 2px solid rgba(0, 0, 0, 0.16);"> 
       <a href="#!london" class="link">London</a><br> 
      </div> 
      <div class="section1Element"> 
       <a href="#!paris" class="link">Paris</a> 
      </div> 
     </section> 
     <section class="section2" ng-view></section> 
    </div> 
</div> 


<script> 
    var app = angular.module("myHome", [ "ngRoute" ]); 
    app.config(function($routeProvider) { 
     $routeProvider.when("/london", { 
      templateUrl : "london.html" 
     }).when("/paris", { 
      templateUrl : "paris.html" 
     }); 
    }); 
</script> 

여기 섹션 요소에서 ng-view를 사용하면 최대 호출 스택 초과 오류가 표시됩니다. 나는 그것을 고치는 법을 모른다. 누구든지 이걸 좀 도와 주실 래요?

Answer 1

var myApp = angular.module("myApp", ['ui.router']); 

myApp.config(['$stateProvider', '$urlRouterProvider',function 
($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.when("", "/Home/London"); 

$stateProvider 
.state("Home", { 
    url: "/Home", 
    templateUrl: "Home.html" 
}) 
.state("Home.Paris", { 
    url: "/Paris", 
    templateUrl: "Paris.html" 
}) 
.state("Home.London", { 
    url: "/London", 
    templateUrl: "London.html" 
}) 
.state("About", { 
    url: "/About", 
    templateUrl: "About.html" 
}) 
.state("services", { 
    url: "/services", 
    templateUrl: "services.html" 
}) 
.state("contactus", { 
    url: "/contactus", 
    templateUrl: "contactus.html" 
}); 
}]); 

이것은 필요한 js 파일입니다.

Answer 2

이 방법을 다소 잘못하고 있습니다. 2 개의 경로를 정의하지 않아야합니다. 위의 예에서 추측 할 수있는 범위 내에서 중첩 된 경로를 사용해야합니다. 코드는 다음과 같이 수정해야합니다.

<script> 
     var app = angular.module("myApp", [ "ngRoute" ]); 
     app.config(function($routeProvider) { 
      $routeProvider.when("/home", { 
       templateUrl : "home.html" 
      }).when("/home/london", { 
       templateUrl : "london.html" 
      }).when("/home/paris", { 
       templateUrl : "paris.html" 
      }).when("/about", { 
       templateUrl : "about.html" 
      }).when("/services", { 
       templateUrl : "services.html" 
      }).when("/contact", { 
       templateUrl : "contactus.html" 
      }); 
     }); 
    </script> 

그런 다음 예상대로 작동합니다.