0

我正在尝试使用 构建基本 SPA angularJS，问题是我无法使用 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: '/' })
}]);

网页

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

现在我可以看到像这个 索引页这样的索引页 但是当我将我的页面移动到 /red 时，我在重定向时收到类似这个 错误页面的错误

4

2 回答 2

1

你注入$routeProvider了错误的方式：

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

问题是，您混合了两种 Angular 注入方式：

app.config(function ($routeProvider) {
    ...
});

和

app.config(['$routeProvider', function ($routeProvider) {
    ...
}]);

你把[]你的函数放在了周围，所以 Angular 期望在数组的头部看到一些组件标识符作为字符串。因此，只需删除方括号或添加组件标识符，如上面的两个示例所示。

更新

您仍然会看到一个错误，因为正如@Gayathri 在评论中指出的那样，您正在尝试访问/red服务器上的 URI……它不存在。你的链接应该是这样的：

<a href="#">main</a>
<a href="#green">Green</a>
<a href="#red">red</a>

请参阅此代码笔。

于 2017-01-09T08:47:01.827 回答
0

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

于 2017-01-09T08:31:54.530 回答