/// <reference path="Scripts/angular.js" />
var myApp = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "homeHTML.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "coursesHTML.html",
controller: "coursesController"
})
.when("/student", {
templateUrl: "studentHTML.html",
controller: "studentController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home";
})
.controller("coursesController", function ($scope) {
$scope.message = "Courses";
})
.controller("studentController", function ($scope) {
$scope.message = "Student";
});<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Script.js"></script>
<title></title>
</head>
<body>
<table>
<tr>
<td colspan="2" style="width:600px; height:100px; background-color:#b4b4b4; text-align:center">
This is the header area
</td>
</tr>
<tr>
<td style="width:200px; height:400px; background-color:#ff0000">
<ul>
<li><a href="#/home">Home</a></li>
<li><a href="#/courses">Courses</a></li>
<li><a href="#/student">Student</a></li>
</ul>
</td>
<td style="width:400px; height:400px; background-color:#ff6a00">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" style="width:500px; height:100px; background-color:#b4b4b4; text-align:center">
This is a Footer Area
</td>
</tr>
</table>
</body>
</html>homeHTML, studentHTML, coursesHTML all contain the same content as shown below.
<h1>{{message}}</h1>
<div>
<p>Hi this is home partial view</p>
</div>
In the snippet section, there was an error:
Error:{
"message": "Uncaught ReferenceError: angular is not defined",
"filename": "http://stacksnippets.net/js",
"lineno": 51,
"colno": 13
}
The issue here is that I am seeing the view in the snippet without any errors appearing in the browser. However, when clicking on the links for Home, Courses, and Student, nothing is displayed. Please assist in identifying what went wrong in this code.