Question

我正在使用Brackets编辑器在我的第一个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>

的script.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'
})
});

Answer 1

只需将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>

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

1 个答案: