AngularJS Live Using 'route' simple form

by dandoyon

HTML

<div ng:app="route">
 <script type="text/ng-template" id="examples/book.html">
   controller: {{name}}<br />
 </script>
 
 <script type="text/ng-template" id="examples/chapter.html">
   controller: {{name}}<br />
 </script>
 
 <div ng-controller="MainCntl">
   Choose:
   <a href="/Book/Moby">Moby</a> |
   <a href="/Book/Moby/ch/1">Moby: Ch1</a> |
   <a href="/Book/Gatsby">Gatsby</a> |
   <a href="/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
   <a href="/Book/Scarlet">Scarlet Letter</a><br/>
 
   <div ng-view></div>
   <hr />
 
 </div>
</div>

CSS

</style>
<script src="http://localhost:8888/angular.js/build/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }

JavaScript

angular.module('route', [], function($routeProvider, $locationProvider) {
  $routeProvider.when('/Book/:bookId', {template: 'examples/book.html', controller: BookCntl});
  $routeProvider.when('/Book/:bookId/ch/:chapterId', {template: 'examples/chapter.html', controller: ChapterCntl});

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

function MainCntl($scope) {
 
}

function BookCntl($scope, $routeParams) {
  $scope.name = "BookCntl";
}

function ChapterCntl($scope, $routeParams) {
  $scope.name = "ChapterCntl";
}