title: How to use "data-ng-view" in AngularJS [Best Practice]
body: <p>Here is my index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="BookApp" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;script src="Scripts/jquery-2.1.0.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/angular.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/app.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="Content/bootstrap.css"/&gt;
      &lt;title&gt;My Book&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div data-ng-view=""&gt;&lt;/div&gt;// I suspect this line is wrong
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is my app.js</p>
  
  <pre><code>var NoteApp = angular.module("BookApp", ["ngResource"]).
  config(function($routeProvider) {
      $routeProvider.
          when('/', { controller: ListCtrl, templateUrl: 'book.html' }).
          otherwise({ redirectTo: '/' });
  });
  
  var ListCtrl = function($scope, $location) {
  $scope.book = "test pass";
  };
  </code></pre>
  
  <p>Here is my book.html</p>
  
  <pre><code>&lt;h1&gt;Hello: {{book}}&lt;/h1&gt;
  </code></pre>
  
  <p>When U run the application nothing is displayed. How can debug this? what may be wrong?
  I even trued ng-view, but VS Studio says "Attribute must be followed by = sign" ... but what i have to assign by using = sign?</p>
  
  <p>Here is exception</p>
  
  <p>Uncaught Error: [$injector:modulerr] Failed to instantiate module BookApp due to:
  Error: [$injector:unpr] Unknown provider: $routeProvider</p>
  
  <p>I made following changes by adding ngRoute</p>
  
  <pre><code>var TodoApp = angular.module("TodoApp", ["ngResource","ngRoute"])
  </code></pre>
  
  <p>Issue resolved, but what is the best practice?</p>