title: Partial Layout in Angular JS with new latest routes
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/// &lt;reference path="Scripts/angular.js" /&gt;
  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";
                      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule"&gt;
  &lt;head&gt;
      &lt;script src="Scripts/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="Script.js"&gt;&lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td colspan="2" style="width:600px; height:100px; background-color:#b4b4b4; text-align:center"&gt;
                  This is the header area
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="width:200px; height:400px; background-color:#ff0000"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#/home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/courses"&gt;Courses&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/student"&gt;Student&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  
              &lt;/td&gt;
              &lt;td style="width:400px; height:400px; background-color:#ff6a00"&gt;
                  &lt;ng-view&gt;&lt;/ng-view&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2" style="width:500px; height:100px; background-color:#b4b4b4; text-align:center"&gt;
                  This is a Footer Area
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>homeHTML, studentHTML, coursesHTML all are same as below.</p>
  
  <pre><code>&lt;h1&gt;{{message}}&lt;/h1&gt;
  &lt;div&gt;
      &lt;p&gt;Hi this is home partial view&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I found this error in the snippet part</p>
  
  <pre><code>Error:{
    "message": "Uncaught ReferenceError: angular is not defined",
    "filename": "http://stacksnippets.net/js",
    "lineno": 51,
    "colno": 13
  }
  </code></pre>
  
  <p>What happened here is I get the view as shown in snippet with no errors in the browser and also when i click links home, courses, student nothing appears.
  Please point out what went wrong here.</p>