$ routeProviderが部分テンプレートをロードしていません

私は同じ問題に関連する投稿を読んでいますが、問題は解決しています。続き

は

<!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ファイルをファイル私のindex.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

htmlページにモジュールjsファイルを追加していません。角度ライブラリの後にscript.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

私はそれを変えようとしましたが、成功しませんでした。 href = "＃home"を使って.when（ "home"）に変更しました – user3794853

http：// localhost：63028 /＃courses – user3794853

ここでは、（ '/ home' ）とhref = "＃home"となります。その後、それは動作します。 – SaiUnique

はあなたのコードをチェックアウト追加する必要がヘッダーで

。

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

た後、そのファイル

<script src="your-path/script.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）。

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>

そして、あなたの角度モジュール：それは作品

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が部分テンプレートをロードしていません

答えて

関連する問題