CODEWITHSUNDEEP
javascripthtmlangularjs
user3794853
user3794853

Reputation: 55

$routeProvider not loading partial templates

I have read posts related to the same issue and cross verified my code but the problem persists.

Following is my index.html file

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

/// <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" }];
            })
        })

I have defined home, courses and students html files. After initial loading, when I click on any of the links for eg. home, /#/home is getting appended to the url but the partial template is not loading.

At first, I did not get any console errors also. But now I am getting the following error even though the name of myModule is correctly used in both script.js and index.html files

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

I very much appreciate any assistance to resolve my issue and help me find out where I am going wrong.

P.S: Index.html is in main directory and partial templates are in templates folder in main directory. And I am using version 1.5.9 of both angular.js and angular-route.js

Upvotes: 0

Views: 198

Answers (4)

Susanna
Susanna

Reputation: 1

Your links are missing the hashPrefix '!'.

This prefix appears in the links to client-side routes, right after the hash (#) symbol and before the actual path (e.g. index.html#!/some/path).

Given your HTML where hashPrefix is added to the links: 

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

And your angular module:

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');
});

It works.

Upvotes: 0

rlcrews
rlcrews

Reputation: 3562

you haven't added the module js file to your html page. You are only loading the angular libraries you need to add the script.js file after your angular libraries. The error is stating it can't find the module because it hasn't been loaded.

In the header you need to add the following

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

Upvotes: 2

Yubaraj Shrestha
Yubaraj Shrestha

Reputation: 884

Checking out your code it looks like you forgot to include script.js in your html code. Please include that file 

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

after 

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

And yes another thing is you have got error in your script.js file too. Check out your code, all those controllers must be out of that config.

Example:

angular.module('module-name', [])
.config(function() {
//
})
.controller('controller-name', function() {
//
});

Upvotes: 1

Sai
Sai

Reputation: 2658

You forgot to add the main js file. And, Try change the code to this:

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

This might solve the problem.

Upvotes: 1

Related Questions