Angular Reader: 4.5: What's Wrong Here?


#1



https://www.codecademy.com/courses/learn-angularjs/projects/angularjs_reader


My index just comes out pretty much blank (only the "Reader" header is visible).

Here is all my code: please tell me what's wrong. Thanks in advance!

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="http://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>

THE VIEWS:
book.html:

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

<div class="book-detail" ng-repeat="book in myBooks">
 <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>

bookshelf.html

<div class="bookshelf row">

 
  <div class="book col-md-3" ng-repeat="book in myBooks">
    <a href="#/books/{{$index}}">
			<img ng-src="{{ book.cover }}">
      <h3 class="title"> {{ book.title }} </h3>
      <p class="author">  {{ book.author }} </p>
    </a>
  </div>
 

</div>

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>

  <!-- 
  TODO: Loop through chapter.paragraphs and display each one with this HTML   -->
  <p ng-repeat="paragraph in chapter.paragraphs">{{ paragraph }}</p>

  
  <a class="button next" href="#/books/{{ currentBookIndex }}/chapters/{{ nextChapterIndex }}">Next</a>
</div>

THE CONTROLLERS:
BookController.js

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

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

BookshelfController.js

app.controller('BookshelfController', ['$scope', 'books', function($scope, books) {
	books.success(function(data) {
    $scope.myBooks = data;
  });
}]);

ChapterController.js

app.controller('ChapterController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {
  books.success(function(data) {
    // Your code here
$cope.book = data[$routeParams.boodId];
$scope.chapter = $scope.book.chapters[$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;
}]);

SERVICES
books.js

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

#2

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