AngularJS Live Example

by danielzen

HTML

<div ng:app="route">
 <script type="text/ng-template" id="examples/book.html">
   controller: {{name}}<br />
   Book Id: {{params.bookId}}<br />
 </script>
 
 <script type="text/ng-template" id="examples/chapter.html">
   controller: {{name}}<br />
   Book Id: {{params.bookId}}<br />
   Chapter Id: {{params.chapterId}}
 </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> |
   <div ng-click="scarletNav()">Scarlet Letter</div><br/>
 
   <div ng-view></div>
   <hr />
 
   <pre>$location.path() = {{$location.path()}}</pre>
   <pre>$route.current.template = {{$route.current.template}}</pre>
   <pre>$route.current.params = {{$route.current.params}}</pre>
   <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
   <pre>$routeParams = {{$routeParams}}</pre>
 </div>
</div>

CSS

</style>
<script src="http://code.angularjs.org/angular-1.0.0rc4.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, $route, $routeParams, $location) {
  $scope.$route = $route;
  $scope.$location = $location;
  $scope.$routeParams = $routeParams;
  $scope.scarletNav = function () {
    $location.path('/Book/Scarlet');
  }
        
}

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

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