ng-viewを使用しているanglejsで呼び出しスタックの最大サイズを超えました

Question

私のコードでは角度をつけてルーティングを使用しています。インデックスファイルでは、私はルーティングの概念を使用しているメニューバーがあります。

jp

これから私は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> 

それから物事は期待通りに動作します。