使用 ng-view 加载页面不起作用

我正在使用括号编辑器在我的第一个AngularJS路由器上工作，以便在本地主机上对其进行测试(我知道它无法在本地计算机上工作(。包含文件工作正常，但它不会加载所有 5 个 HTML 文件。请查看Plunker上的所有代码。我不明白缺少什么。

.HTML

<head>
<title>Welcome!</title>
<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="script.js"></script>
</head>
<body ng-app="myApp">
<!-- header section -->
<div ng-include="'header.html'"></div>
<br><br>
<!-- views section -->
<div ng-view>View pages here...</div>
<br><br>
<!-- footer section -->
<div ng-include="'footer.html'"></div>
</body>

脚本.js

var app = angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/1', {
    templateUrl: '1.html'
})
$routeProvider.when('/2', {
   templateUrl: '2.html'
})
$routeProvider.when('/3', {
    templateUrl: '3.html'
})
$routeProvider.when('/4', {
   templateUrl: '4.html'
})
$routeProvider.when('/5', {
    templateUrl: '5.html'
})
});

只需将href="#/1"更改为href="#!1"

<div>
    <a href="#!1">One</a>
    <a href="#!2">Two</a>
    <a href="#!3">Three</a>
    <a href="#!4">Four</a>
    <a href="#!5">Five</a>
</div>

相关内容

最新更新

热门标签：