title: Views in AngularJS - How to make them work?
body: <p>I am unable to make angularjs views work. They have a working demo at <a href="http://docs.angularjs.org/api/ng.directive%3angView" rel="nofollow">AngularJS: ngView</a>, but the jsfiddle they provide there doesn't work. I'm trying to play with it a little but still I got nothing.
  Suggestions? Any links to a really working example?</p>
  
  <p>Here's my code: (actually, theirs)</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;angular&lt;/title&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div ng-app="ngView"&gt;
    &lt;div ng-controller="MainCntl"&gt;
      Choose:
      &lt;a href="Book/Moby"&gt;Moby&lt;/a&gt; |
      &lt;a href="Book/Moby/ch/1"&gt;Moby: Ch1&lt;/a&gt; |
      &lt;a href="Book/Gatsby"&gt;Gatsby&lt;/a&gt; |
      &lt;a href="Book/Gatsby/ch/4?key=value"&gt;Gatsby: Ch4&lt;/a&gt; |
      &lt;a href="Book/Scarlet"&gt;Scarlet Letter&lt;/a&gt;&lt;br/&gt;
  
      &lt;div ng-view&gt;&lt;/div&gt;
      &lt;hr /&gt;
  
      &lt;pre&gt;$location.path() = {{$location.path()}}&lt;/pre&gt;
      &lt;pre&gt;$route.current.template = {{$route.current.template}}&lt;/pre&gt;
      &lt;pre&gt;$route.current.params = {{$route.current.params}}&lt;/pre&gt;
      &lt;pre&gt;$route.current.scope.name = {{$route.current.scope.name}}&lt;/pre&gt;
      &lt;pre&gt;$routeParams = {{$routeParams}}&lt;/pre&gt;
    &lt;/div&gt;
  
    &lt;!-- book.html --&gt;
    &lt;script type="text/ng-template" id="book.html"&gt;
      controller: {{name}}&lt;br /&gt;
      Book Id: {{params.bookId}}&lt;br /&gt;
    &lt;/script&gt;
  
    &lt;!-- chapter.html --&gt;
    &lt;script type="text/ng-template" id="chapter.html"&gt;
      controller: {{name}}&lt;br /&gt;
      Book Id: {{params.bookId}}&lt;br /&gt;
      Chapter Id: {{params.chapterId}}
    &lt;/script&gt;
  &lt;/div&gt;​
  ​&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>script.js</p>
  
  <pre><code>angular.module('ngView', [], function($routeProvider, $locationProvider) {
    console.log($routeProvider, $locationProvider);
    $routeProvider.when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: BookCntl
    }).when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: ChapterCntl
    });
  
    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
  });
  
  function MainCntl($scope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
  }
  
  function BookCntl($scope, $routeParams) {
    console.log($scope, $routeParams);
    $scope.name = "BookCntl";
    $scope.params = $routeParams;
  }
  
  function ChapterCntl($scope, $routeParams) {
    console.log($scope, $routeParams);
    $scope.name = "ChapterCntl";
    $scope.params = $routeParams;
  }
  </code></pre>
  
  <p>What am I missing...?</p>