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

【问题标题】：Not able to load template using ng-view in angularJs无法在angularJs中使用ng-view加载模板
【发布时间】：2017-05-23 11:12:51
【问题描述】：

我正在尝试使用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

我已根据请求更新了页面，我已将角度更改为未缩小的 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

【问题讨论】：

你能添加你的错误吗？
@AvneshShakya 我可以嵌入图片，但是有一个链接，您可以看到错误图片
我建议你使用ui-router
尝试将相对 url 更改为 '#/red' 而不是 '/red'

标签： angularjs ngroute angularjs-1.6

【解决方案1】：

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

【讨论】：

好吧，我刚刚包含了文件，但仍然无法正常工作
试试未压缩的版本；ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js

【解决方案2】：

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

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

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

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

和

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

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

更新

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

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

看到这个codepen。

【讨论】：

请看我的更新，我已经解决了主页上的错误，但我的其他页面得到了错误
这是一个全新的问题，我想你最好在另一个线程上问它。此外，请不要在看到答案后更新您的问题：保持原样，它也可能对其他人有所帮助。我建议您将问题恢复为原始问题，然后为您的新问题创建另一个问题。
为什么我要在问题没有解决时更改问题，我只是更改了角度版本文件
@LijinDurairaj：这解决了你的问题吗？如果是这样，请不要忘记接受答案。谢谢。