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