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 PAGE

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

我已根据请求更新了页面，我已将角度更改为未分类版本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

您已经以错误的方式注入$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。

Answer 2

您缺少<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

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

2 个答案:

更新