ng-view 导致页面崩溃

Question

尝试复制一个简单的路由示例 w3schools，但在访问 index.html 时，控制台中的 "RangeError: Maximum call stack size exceeded" 一直崩溃。

我尝试 add/remove 部分代码来隔离问题，崩溃似乎发生在 <div ng-view></div>。这是为什么？我对原始示例所做的更改并没有那么剧烈。

这是代码

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="app.js"></script>

</head>

<body ng-app="myApp">

<a href="#!red">Red</a>
<a href="#!green">Green</a>

<div ng-view></div>

</body>
</html>

app.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "index.html"
    })
    .when("/red", {
        templateUrl : "red.html"
    })
    .when("/green", {
        templateUrl : "green.html"
    });
});

red.html

This is red

green.html

This is green

Answer 1

是的，索引是其他视图的容器。你应该放一个局部视图而不是索引。问题在这里：

$routeProvider
    .when("/", {
        templateUrl : "index.html"
    })

该模板 url 将在 ng-view 中加载完整的 index.html，这将加载另一个 index.html 具有无限和 Secula Seculorum 的新 ng-view。

简单的解决方法：创建一个新视图（就像您拥有的其他路由一样）并将其放入 templateUrl

Answer 2

您正在使用此语句循环应用程序。

$routeProvider
.when("/", {
    templateUrl : "index.html"
})

您应该使用另一个单独的模板作为您的主模板，而不是 index.html

ng-view 导致页面崩溃

ng-view causes page to crash

html

javascript

angularjs

angular-routing