所以我正在使用ngroute来重定向到其他html页面。我从在线教程中得到了这个，但是当我尝试运行时，它没有显示消息或没有进入所需的页面。例如，如果我想单击导航栏上的主页，它应该重定向到主页。如果我想重定向到登录页面，它应该转到登录页面。我不确定出了什么问题。enter code here这就是我所拥有的：
索引.html
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title>Quiz HomePage</title>
<link rel="stylesheet" href="cs/homepage.css">
<script src="lib/angular.js"></script>
<script src="js/home.js"></script>
<!-- NG ROUTE -->
<script type="text/javascript" src="i"></script>
</head>
<body ng-controller="mainController">
<h1>Welcome To The Online Quiz Management</h1>
<div id="navigationBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float: right"><a href="#login">Login</a></li>
</ul>
</div>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
首页.js
// creating the module
var app = angular.module("homepageApp", ["ngRoute"]);
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the homepage
.when("/homepage", {
templateUrl: "homepage.html",
controller: "mainController"
})
// route for login
.when("/login", {
templateUrl: "login.html",
})
// route for about
.when("/about", {
templateUrl: "about.html",
controller: "aboutController"
})
// route for contact
.when("/contact", {
templateUrl: "contact.html",
controller: "contactController"
});
});
// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
$scope.message = 'Everyone come our homepage';
});
app.controller("loginController", function($scope) {
});
关于.html
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<h1>About Page</h1>
<p>{{ message }}</p>
</body>
</html>
正如@Barclick所说，您必须正确导入角度路由。 由于您使用的是本地的angularjs，因此不确定您使用的是哪个版本。从 1.6+ 版开始，库进行了一些更改。请看这里的详细答案： https://stackoverflow.com/a/41655831/6347317
我创建了一个角度为 1.6+ 的 plunker.请看下面：
http://plnkr.co/edit/xDOSh3OSdKcBFTPJN6qj?p=preview
注意：请参阅在 HTML "#！路线"。
HTML:
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<h1>Welcome To The Online Quiz Management</h1>
<div id="navigationBar">
<ul>
<li><a href="#!">Home</a></li>
<li><a href="#!about">About</a></li>
<li><a href="#!contact">Contact</a></li>
<li style="float: right"><a href="#!login">Login</a></li>
</ul>
</div>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
.JS：
// creating the module
var app = angular.module("homepageApp", ['ngRoute']);
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the homepage
.when('/', {
templateUrl: 'homepage.html',
controller: 'mainController'
})
// route for login
.when('/login', {
templateUrl: 'login.html',
})
// route for about
.when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
})
// route for contact
.when('/contact', {
templateUrl: 'contact.html',
// controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
$scope.message = 'Everyone come our homepage';
});
app.controller("aboutController", function($scope) {
$scope.message = 'Everyone come our about page';
});