title: ng view Not Loading Partials in Angularjs
body: <p>I'm developing a web app with angularjs and have run into some problems with ng-view. I have configured the routes in app.js, but when I load the main page, the partials do not show up in the view. </p>
  
  <p>Here is my index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"&gt;
  &lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div id="headerwrap" ng-controller="headerCtrl"&gt;
  &lt;span class="logo pull-left"&gt;{{appDetails.title}}&lt;/span&gt;
  &lt;span class="tagline-pull"&gt;{{ appDetails.tagline}}&lt;/span&gt;
  &lt;div class="nav-wrap pull left"&gt;
  &lt;ul class="nav nav-pills"&gt;
  &lt;li class="active"&gt;&lt;a href="#/books"&gt;Books&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#/kart"&gt;Kart&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my app.js:</p>
  
  <pre><code>var myApp = angular.module("myApp", ["ngRoute"]);
  myApp.config(function($routeProvider){
  $routeProvider
      .when("/books", {
  templateURL: 'book-list.html',
  controller: "BookListCtrl",
  })
      .when("/kart", {
      templateURL: 'kart-list.html',
  })
  .otherwise({
  redirectTo: '/books'
  })
  });
  myApp.controller("headerCtrl", function($scope){
  $scope.appDetails = {};
  $scope.appDetails.title="Book Store";
  $scope.appDetails.tagline="Browse our books";
  });
  myApp.controller("BookListCtrl", function($scope){
  $scope.books = [
  {
  title:"Hunger Games",
  price:205,
  rating:5,
  col:"red"
  },
  {
  title:"Harry Potter",
  price:255,
  rating:4,
  col:"blue"
  }
  ];
  });
  </code></pre>
  
  <p>Here is my first partial, book-list.html:</p>
  
  <pre><code>&lt;div id="booklistwrapper"&gt;
  &lt;form role="form"&gt;
  &lt;div class="form-group"&gt;
  &lt;input type="text" class="form-control" placeholder="Search"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;div&gt;
  &lt;ul class="list-unstyled"&gt;
  &lt;li class="book" style="background: {{book.col}}" ng-repeat="book in books"&gt;
  &lt;div class="book-details clearfix"&gt;
  &lt;h3&gt;{{book.title}}&lt;/h3&gt;
  &lt;p&gt;{{book.price}}&lt;/p&gt;
  &lt;ul&gt;
  &lt;li&gt;{{'Rating: ' + book.rating}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my second partial, kart-list.html:</p>
  
  <pre><code>&lt;div&gt;
  This is the Kart 
  &lt;/div&gt;
  </code></pre>
  
  <p>Neither partial will load. Does anyone know what this might be due to?</p>