Javascript $routeProvider未加载部分模板_Javascript_Html_Angularjs

Javascript $routeProvider未加载部分模板

javascript html angularjs

Javascript $routeProvider未加载部分模板,javascript,html,angularjs,Javascript,Html,Angularjs,我读过与同一问题相关的帖子，并交叉验证了我的代码，但问题依然存在下面是我的index.html文件 <!DOCTYPE html> <html ng-app="myModule"> <head> <title></title> <script src="Scripts/angular.js"></script> <script src="Scripts/angular-route.

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

下面是我的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>

我非常感谢任何帮助我解决问题并帮助我找出哪里出了问题的人

注意：Index.html在主目录中，部分模板在主目录的templates文件夹中。我正在使用angular.js和angular route.js的1.5.9版

您忘了添加主js文件。以及，尝试将代码更改为：

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

这可能会解决问题。

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

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

这可能会解决问题。

您尚未将模块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" />

您尚未将模块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" />

签出代码您似乎忘记在html代码中包含script.js。请包括那个文件

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

查看您的代码您似乎忘记在html代码中包含script.js。请包括那个文件

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

您的链接缺少哈希前缀“！”

此前缀出现在指向客户端路由的链接中，位于哈希（#）符号之后，实际路径（例如index.html#！/some/path）之前

给定将hashPrefix添加到链接的HTML：

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

它可以工作。

您的链接缺少哈希前缀“！”
此前缀出现在指向客户端路由的链接中，位于哈希（#）符号之后，实际路径（例如index.html#！/some/path）之前
给定将hashPrefix添加到链接的HTML：

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

它很管用。
我确实尝试过这样改变，但没有成功。我还将.when（“/home”）改为.when（“home”），并带有href=“#home”Keep when（“/home”）和href=“#home”。然后它会工作的。做了些改变。错误仍然存在。在使用缩小版后，我遇到了另一个错误[$injector:modulerr]将脚本标记src更改为缩小版文件。当我提到angular.js错误文档时，出现了一些关于各种版本的支持问题。林克：我确实试过这样改变，但没有成功。我还将.when（“/home”）改为.when（“home”），并带有href=“#home”Keep when（“/home”）和href=“#home”。然后它会工作的。做了些改变。错误仍然存在。在使用缩小版后，我遇到了另一个错误[$injector:modulerr]将脚本标记src更改为缩小版文件。当我提到angular.js错误文档时，出现了一些关于各种版本的支持问题。链接：我在html文件中添加了angular.js脚本路径，这是我忽略的一个愚蠢错误。谢谢你的帮助。现在我有了一个工作代码！：-）我在html文件中添加了angular.js脚本路径，这是我忽略的一个愚蠢错误。谢谢你的帮助。现在我有了一个工作代码！：-）@user3794853，如果答案解决了你的问题，你可以通过接受答案来感谢。@user3794853，如果答案解决了你的问题，你可以通过接受答案来感谢。
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'); });