我正在尝试使用angularJS构建一个基本的SPA，问题是我无法使用angularJS加载模板，以下是我的代码
自定义角度.js
var app = angular.module("appModule", ["ngRoute"]);
app.config([function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "pages/main.html"
})
.when("/red", {
templateUrl: "pages/about.html"
})
.when("/green", {
templateUrl: "pages/blog.html"
}).otherwise({ redirectTo: '/' })
}]);
网页
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/angularJS/angular.min.js"></script>
<script src="~/angularJS/customAngular.js"></script>
</head>
<body ng-app="appModule">
<a href="/">main</a>
<a href="/green">Green</a>
<a href="/red">red</a>
<div ng-view></div>
</body>
</html>
谁能帮我理解错误
更新 1
已修改 bneen
更新 2
我已经根据要求更新了页面，我已将角度更改为未缩小的版本 1.6
<script src="~/angularJS/angular.v1.6.1.js"></script>
<script src="~/angularJS/angular-route.js"></script>
<script src="~/angularJS/customAngular.js"></script>
并像这样更改了我的自定义角度.js文件
var app = angular.module("appModule", ["ngRoute"]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "pages/main.html"
})
.when("/red", {
templateUrl: "pages/about.html"
})
.when("/green", {
templateUrl: "pages/blog.html"
}).otherwise({ redirectTo: '/' })
}]);
现在我能够像这样看到索引页面索引页但是当我将页面移动到/red 时，我收到这样的错误重定向时的错误页面
你以
错误的方式注入了你的$routeProvider：
app.config([function ($routeProvider) {
/* $routeProvider will be undefined */
...
}]);
问题是，你混合了两种角度注入方式：
app.config(function ($routeProvider) {
...
});
和
app.config(['$routeProvider', function ($routeProvider) {
...
}]);
你把[]放在函数周围，所以 Angular 希望在数组的头部看到一些组件标识符作为字符串。因此，只需删除方括号或添加组件标识符，如上面的两个示例所示。
更新
您仍然会看到错误，因为正如@Gayathri评论中指出的那样，您正在尝试访问服务器上的 URI /red......不存在。您的链接应如下所示：
<a href="#">main</a>
<a href="#green">Green</a>
<a href="#red">red</a>
请参阅此代码笔。
你缺少<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>