Question

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

以下是我的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版本

Answer 1

您尚未将模块js文件添加到您的html页面。您只需加载角度库后添加script.js文件所需的角度库。该错误表明它无法找到该模块，因为它尚未加载。

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

<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" />

Answer 2

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

lane :testios  do |options|
emulatorname = options[:emulatorname]

#Scan
scan(
    scheme: S_APP_SCHEME_TEST,
    clean: true,
    device: "#{emulatorname.to_s}",
)

end

这可能会解决问题。

Answer 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() {
//
});

Answer 4

您的链接缺少 hashPrefix ＆＃39;！＆＃39;。

此前缀出现在客户端路由的链接中，紧跟在哈希（＃）符号之后和实际路径之前（例如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');
});

有效。

$ routeProvider没有加载部分模板

4 个答案: