我创建了home.html，about.html，app.js和index.js。我想在index.html页面中显示about.html和home.html视图。但当我点击它关于它显示主页。网址发生了变化，但浏览器窗口中没有任何变化。下面是app.js的代码
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "AboutController"
})
.otherwise({
redirectTo: "/home"
});
});
app.controller("HomeController", function($scope) {
$scope.title = "I'm in home"
});
app.controller("AboutController", function($scope) {
$scope.title = "I'm in about"
});
}
这是index.html的代码
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href="#/home">Home</a></li>
<li><a href="#/about">About</a></li>
</ul>
</nav>
<div>
<ng-view>
</ng-view>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
这是home.html的代码
<div>
{{title}}
</div>
这是about.html的代码
<div>
{{title}}
</div>
我记得链接格式从角度1.6.0改变了。
您可以尝试以下链接。
<li><a href="#!/about">About</a></li>
代替
<li><a href="#/about">About</a></li>