AngularJS Route To Target Views

by Michael Hunziker

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<div ng:app="MyApp">
 <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">
   <a href="/Book/Moby">Moby</a> |
   <a href="/Book/Moby/ch/1">Configuration: Step 1</a> |
   <a href="/Book/Gatsby">Gatsby</a> |
   <a href="/Book/Gatsby/ch/4?key=test">Gatsby: Ch4</a> |
   <a href="/Book/Scarlet">Scarlet Letter</a><br/>
    <hr />

     <!-- somehow target this view with books -->
   <div ng-view></div>
   <hr />

     <!-- and target this view with chapters -->
   <div ng-view></div>

 </div>
</div>

JavaScript

angular.module('MyApp', [], function($routeProvider, $locationProvider) {
    $routeProvider.when('/Book/:bookId', {
        template: 'examples/book.html',
        controller: BookCntl,
        //view: somehow target the first ng-view
    });
    $routeProvider.when('/Book/:bookId/ch/:chapterId', {
        template: 'examples/chapter.html',
        controller: ChapterCntl,
        //view: somehow target the second ng-view
    });

    $locationProvider.html5Mode(true);
});

function MainCntl($scope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $scope.$location.path('/Book/Moby');
}

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

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