title: Angular Routing partial views in miniSPA
body: <p>I've flipped through tons of the posts, and can't seem to figure out what i'm doing wrong. I have a main Layout page for Bootstrap navigation. and am trying to create a Student miniSPA.  </p>
  
  <p>I have a Index.cshtml page nested in the Layout, and am trying to load my List.html partial view. It's loading up to the Index.cshtml just fine, but refuses to load the partial ng-view.  I feel like i'm just missing something simple, but can't figure it out.</p>
  
  <p>I'm using a _Layout.cshtml:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Dashboard&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      &lt;script type="text/javascript" src="~/Scripts/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/Scripts/angular-route.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="/"&gt;Home&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Students", "Index", "Students")&lt;/li&gt;    
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;        
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my Index.cshtml</p>
  
  <pre><code>@{ViewBag.Title = "Index";}
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="~/Scripts/app/app.js"&gt;&lt;/script&gt;
          &lt;script src="~/Scripts/app/StudentFactory.js"&gt;&lt;/script&gt;
          &lt;script src="~/Scripts/app/StudentCrudController.js"&gt;&lt;/script&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
  &lt;body ng-app="StudentDashboardModule"&gt;
          &lt;div ng-view=""&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My app.js:</p>
  
  <pre><code>var app = angular.module("StudentDashboardModule", ["ngRoute"]);
  
  app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {        
      $routeProvider
          .when("/Student", { templateUrl: "/List", controller: 'StudentCrudController' });        
      $routeProvider.otherwise({redirectTo: '/'});
      $locationProvider.html5Mode(true);
  }]);
  </code></pre>
  
  <p>and finally, my StudentController:</p>
  
  <pre><code>public class StudentController : Controller
  {
      // GET: Index
      public ActionResult Index()
      {
          return View();
      }
      public PartialViewResult List()
      {
          return PartialView("List");
      }
  }
  </code></pre>