$routeProvider 不加载部分模板答案

【问题标题】：$routeProvider not loading partial templates$routeProvider 不加载部分模板
【发布时间】：2016-12-17 23:45:29
【问题描述】：

我已阅读与同一问题相关的帖子并交叉验证了我的代码，但问题仍然存在。

以下是我的 index.html 文件

<!DOCTYPE html>
<html ng-app="myModule">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <link href="Scripts/styles.css" rel="stylesheet" />
    <meta charset="utf-8" />
</head>
<body>
<table style="font-family:Arial">
    <tr>
        <td class="header" colspan="2" style="text-align:center">Website Header</td>
    </tr>
    <tr>
        <td class="leftMenu">
            <a href="#/home">Home</a><br/>
            <a href="#/courses">Courses</a><br />
            <a href="#/students">Students</a><br />
        </td>
        <td class="mainContent">
           <div><ng-view></ng-view></div>
        </td>
    </tr>
</table>
</body>
</html>

script.js 文件

/// <reference path="angular-route.js" />
/// <reference path="angular.js" />

var myModule = angular.module("myModule", ["ngRoute"])
        .config(function ($routeProvider) {
            $routeProvider
            .when("/home", {

                templateUrl: "Templates/home.html",
                controller: "homecontroller",

            })
            .when("/courses", {

                templateUrl: "Templates/courses.html",
                controller: "coursescontroller",

            })
            .when("/students", {

                templateUrl: "Templates/students.html",
                controller: "studentscontroller",

            })
            .controller("homeController", function ($scope) {
                $scope.message = "HomePage";
            })
            .controller("coursesController", function ($scope) {
                $scope.courses = ["c","c++","c#"];
            })
            .controller("studentsController", function ($scope) {
                $scope.students = [{ name: "Chandu", id: 1, gender: "female" }, { name: "Suma", id: 2, gender: "female" }, { name: "Arin", id: 3, gender: "male" }];
            })
        })

我已经定义了家庭、课程和学生的 html 文件。初始加载后，当我单击任何链接时，例如。 home, /#/home 被附加到 url 但部分模板没有加载。

起初，我也没有收到任何控制台错误。但是现在我收到以下错误，即使 myModule 的名称在 script.js 和 index.html 文件中都正确使用了

Uncaught Error: [$injector:modulerr] Failed to instantiate module myModule due to:
Error: [$injector:nomod] Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.9/$injector/nomod?p0=myModule

非常感谢任何帮助我解决问题并帮助我找出问题所在。

P.S: Index.html 位于主目录，部分模板位于主目录的模板文件夹中。我正在使用 angular.js 和 angular-route.js 的 1.5.9 版本

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您尚未将模块 js 文件添加到您的 html 页面。您只加载需要在 Angular 库之后添加 script.js 文件的 Angular 库。错误表明它找不到模块，因为它尚未加载。

在标题中你需要添加以下内容

<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>

<script src="Scripts/script.js"></script><!-- loading your module -->

<link href="Scripts/styles.css" rel="stylesheet" />
<meta charset="utf-8" />

【讨论】：

我已将 angular.js 脚本路径添加到 html 文件
这是我忽略的一个愚蠢的错误。谢谢您的帮助。现在我有一个工作代码！ :-)

【解决方案2】：

您忘记添加主 js 文件。和，尝试将代码更改为：

<td class="leftMenu">
    <a href="#home">Home</a><br/>
    <a href="#courses">Courses</a><br />
    <a href="#students">Students</a><br />
</td>

这可能会解决问题。

【讨论】：

我确实尝试过这样的更改，但没有成功。我还使用 href="#home" 将 .when("/home") 更改为 .when("home")
保留 when('/home') 和 href="#home"。然后它会工作。
进行了更改。错误仍然存在。使用缩小版后，我得到另一个错误 [$injector:modulerr]
将脚本标签 src 更改为缩小文件。
当我提到 angular.js 错误文档时，有一些关于各种版本的支持问题。链接：docs.angularjs.org/error/$injector/modulerr

【解决方案3】：

检查您的代码，您似乎忘记在 html 代码中包含 script.js。请包含该文件

<script src="your-path/script.js"></script>

之后

<script src="Scripts/angular-route.js"></script>

是的，另一件事是您的 script.js 文件中也有错误。检查您的代码，所有这些控制器都必须不在该配置中。

例子：

angular.module('module-name', [])
.config(function() {
//
})
.controller('controller-name', function() {
//
});

【讨论】：

@user3794853，如果它解决了您的问题，您可以通过接受答案来表示感谢。

【解决方案4】：

您的链接缺少 hashPrefix '!'。

此前缀出现在客户端路由的链接中，位于井号 (#) 符号之后和实际路径之前（例如 index.html#!/some/path）。

鉴于您的 HTML 中已将 hashPrefix 添加到链接中：

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-route.js"></script>
  <script src="script.js"></script>
  <meta charset="utf-8" />
</head>
<body>
  <table style="font-family:Arial">
    <tr>
      <td class="header" colspan="2" style="text-align:center">Website Header</td>
  </tr>
  <tr>
    <td class="leftMenu">
      <a href="#!/home">Home</a><br/>
      <a href="#!/students">Students</a><br />
    </td>
    <td class="mainContent">
        <div>
            <ng-view></ng-view>
        </div>
    </td>
  </tr>
</table>
<script type="text/ng-template" id="home.html">
    Content of HOME template.
</script>
<script type="text/ng-template" id="students.html">
  Content of STUDENTS template.
</script>
</body>
</html>

还有你的角度模块：

var myModule = angular.module("myModule", ["ngRoute"])
.config(function ($locationProvider, $routeProvider) {

    $routeProvider
        .when("/home", {
            templateUrl: "home.html",
            controller: "homeController"
        })
        .when("/students", {
            templateUrl: "students.html",
            controller: "studentsController"
        })
})
.controller("homeController", function ($scope) {
    console.log('This is home controller');
})
.controller("studentsController", function ($scope) {
    console.log('This is students controller');
});

有效。

【讨论】：