无法在 angularJs 中使用 ng-view 加载模板

Question

我正在尝试使用 angularJS 构建一个基本的 SPA，问题是我无法使用 angularJS 加载模板，以下是我的代码

customAngular.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: '/' })
}]);

HTML 页数

<!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

已修改

更新 2

我已根据要求更新了页面，我已将 angular 更改为 unminified 版本 1.6

  <script src="~/angularJS/angular.v1.6.1.js"></script>
    <script src="~/angularJS/angular-route.js"></script>
    <script src="~/angularJS/customAngular.js"></script>

并像这样更改了我的 customAngular.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: '/' })
}]);

现在我可以看到这样的索引页 index page 但是当我将我的页面移动到 /red 时，我收到这样的错误 error page on redirection

Answer 1

你不见了<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

Answer 2

您以错误的方式注射了 $routeProvider：

app.config([function ($routeProvider) {
    /* $routeProvider will be undefined */
    ...
}]);

事实是，您混合了两种 Angular 注入方式：

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>

看到这个codepen。

无法在 angularJs 中使用 ng-view 加载模板

Not able to load template using ng-view in angularJs

angularjs

ngroute

angularjs-1.6

更新