I'm quite new to Angular, and I feel that the more nesting there needs to be, the more complex the code. I feel that I'm missing some fundamentals here.
Problem: In the chapter.html I see everything correctly, however, when clicking the next hyperlink, the URL gets updated, the view does not.
What am I missing, guys?
Here's my code:
ChapterController.js
app.controller('ChapterController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {
books.success(function(data) {
// Your code here
$scope.book = data[$routeParams.bookId];
$scope.chapter = data[$routeParams.chapterId];
// If there no more chapters left, go back to the bookshelf view
if($routeParams.chapterId >= $scope.book.chapters.length - 1) {
$scope.nextChapterIndex = "#";
}
});
// Using these properties to create the URLs in line 1 and line 11 of view/chapter.html
$scope.currentBookIndex = parseInt($routeParams.bookId);
$scope.currentChapterIndex = parseInt($routeParams.chapterId);
$scope.nextChapterIndex = $scope.currentChapterIndex + 1;
}]);
chapter.html
<a class="button back" href="#/books/{{ currentBook }}">Back</a>
<div class="chapter" ng-repeat="chapter in book.chapters">
<p><span class="title"> {{book.title}} </span> <span class="author"> {{book.author}} </span></p>
<h2 class="chapter-title"> {{chapter.title}} </h2>
<p ng-repeat="paragraph in chapter.paragraphs">{{ paragraph }}</p>
<a class="button next" href="#/books/{{ currentBookIndex }}/chapters/{{ nextChapterIndex }}">Next</a>
</div>
Route
.when('/books/:bookId/chapters/:chapterId', {
controller: 'ChapterController',
templateUrl: 'views/chapter.html'
})
