$ 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 находится в основном каталоге, а частичные шаблоны находятся в папке шаблонов в основном каталоге. И я использую версию 1.5.9 как angular.js, так и angular-route.js

источник

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

Я попытался изменить это, но без успеха. Я также изменил .when («/ home») на .when («home») с href = «# home» – user3794853

Вот ссылка: http: // localhost: 63028/# курсы – 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 не загружать частичные шаблоны

ответ

Смежные вопросы