Nothing shows up when a book is clicked


#1

Hi I am stuck on step 8- I completed all of the steps, but when I click on a book from the home page the page empties out. Any advice? I am going to put up the code for the book.html steps

book.html

<a class="button back" href="#/books">Back</a>

<div class="book-detail">
<img ng-src="{{book.cover}}">
  <h3 class="title">{{book.title}}  </h3>
  <p class="author">{{book.author}}  </p>
  <p class="description">{{book.description}}  </p>

  <a class="button" href="#/books/{{ currentBookIndex }}/chapters/0">Read</a>
</div>

index.html

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,900' rel='stylesheet' type='text/css'>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
  </head>
  <body ng-app="ReaderApp">
    <div class="header">
      <div class="container">
        Reader
      </div>
    </div>

    <div class="main">
      <div class="container">
        <div ng-view>
        </div>
      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/BookshelfController.js"></script>
    <script src="js/controllers/BookController.js"></script>
    <script src="js/controllers/ChapterController.js"></script>

    <!-- Services -->
    <script src="js/services/books.js"></script>

  </body>
</html>

BookController.js

app.controller('ChapterController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {
  books.success(function(data) {
		$scope.book = data[$routeParams.bookId];

  });
  

  // Using this property to create the URL in line 9 of views/book.html
  $scope.currentBookIndex = parseInt($routeParams.bookId);
  
}]);

books.js

app.factory('books', ['$http', function($http) {
  return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
  	.success(function(data) {
    	return data;
  	})
  	.error(function(err) {
    	return err;
  });
}]);

app.js

var app = angular.module('ReaderApp', ['ngRoute']);

app.config(function ($routeProvider) {
  $routeProvider
  	.when('/books', {
    	controller: 'BookshelfController',
    	templateUrl: 'views/bookshelf.html'
  })
  	.when('/books/:bookId', {
    	controller: 'BookController',
    	templateURL: 'views/book.html'
  })
  	.when('/books/:bookId/chapters/:chapterId',  {
    	controller: 'ChapterController',
    	templateURL: 'views/chapter.html'
  })
  	.otherwise({
    	redirectTo: '/books'
  });
});

#2

I believe the problem is in your initial function in the bookController.js, after the dependencies it should be this:

app.controller('BookController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {

you have to add the service name in the function between scope and $routeParams


#3

Looks like you are missing ng-repeat.


#4

He doesn't need ng-repeat when it comes to showing a single book.


#5

i tried updating the bookcontroller.js with this

app.controller('BookController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {

But still no success


#6

Indeed :slight_smile: Sorry @megdollar, I was too hasty with my reply.


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.