I don't have a book index in link


#1

When I type a book form a list (view bookshelf.html) in link I don't have an index of book, just https://localhost/#/books in every book. In book I cannot go to the chapter.

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>

BookshelfController.js

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

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;
  });
}]);

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>

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

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