NG视图使页面崩溃

试图复制一个简单的路由示例W3Schools，但在访问index.html时，它在控制台中不断崩溃。

我尝试添加/删除代码的部分以隔离问题，并且崩溃似乎在<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

是的，索引是其他视图的容器。您应该放置部分视图而不是索引。问题在这里：

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

该模板URL将在ng-view中加载完整的index.html，它将在无限和scula sculorum上加载另一个index.html。

。

简单的修复：创建一个新视图（就像您拥有的其他路线一样），然后将其放入TemplateUrl

中

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

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

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

相关内容

最新更新

热门标签：