$ routeProvider不加載部分模板

我已閱讀與同一問題相關的帖子並交叉驗證了我的代碼，但問題仍然存在。

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

來源

2016-12-17 user3794853

您還沒有將模塊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" />

來源

2016-12-17 15:02:59 rlcrews

我已將angular.js腳本路徑添加到html文件 – user3794853

已更新的答案顯示您需要添加的內容 – rlcrews

這是我忽略的愚蠢錯誤。謝謝您的幫助。現在我有一個工作代碼！ :-) – user3794853

你忘了添加主js文件。而且，嘗試代碼改成這樣：

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

這可能會解決這個問題。

來源

2016-12-17 14:59:45 SaiUnique

我確實嘗試過改變，但沒有成功。（「/ home」）改爲.when（「home」）時使用href =「＃home」 – user3794853

這裏是鏈接：http：// localhost：63028 /＃courses – user3794853

當（'/ home' ）和href =「＃home」。然後它會工作。 – SaiUnique

檢查你的代碼看起來你忘了，包括的script.js在HTML代碼中。請包括文件

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

來源

2016-12-17 15:14:37

問題解決了。謝謝你:-) – user3794853

@ user3794853，你可以通過接受答案來解答你的問題。 – SaiUnique

您的鏈接缺少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'); 
});

它的工作原理。

來源

2016-12-17 15:45:29 Susanna

$ routeProvider不加載部分模板

回答

相關問題