Can't see the books in localhost/#/books


#1

I followed every step until Task 7 but nothing shows in the url http://localhost/#/books. My code is the following, and sorry for the bad indentation, I don't understand how to use Blockquote and Preformatted Text:

Index.html head, main and services:

<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="js/vendor/angular-route.js"></script>
<div class="main">
      <div class="container">

        <div ng-view></div>

      </div>
    </div>


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

The app.js module:

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

app.config(function ($routeProvider) {
  $routeProvider
	  .when('/books', {
   		controller: "BookshelfController",
    	templateUrl: "views/bookshelf.html"
    })
  	.otherwise({
    	redirectTo: '/books'
    });
});

The books.js service:

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(data) {
    		return data;
  });
}]);

The bookshelf.html view:

<div class="bookshelf row">

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

</div>

The BookshelfController.js:

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

I can't find the mistake, can someone help me? :slightly_smiling:


#2

From reviewing your code it looks like your function is off in js/services/books.js, you're .error function is returning data instead of 'err' along with the parameter in the function as well. Also when you're using ng-repeat you're supposed to loop through 'myBooks' instead 'books'. I hope this helps. :slightly_smiling:

Another thing, to show proper indentation when posting your code just type "`" three times before your code and three times afterwards. Example below!

```

Feel free to use the code I have as a reference!!!

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'
  })
  	.otherwise({
    	redirectTo: '/books'
  });
});

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

controllers/BookshelfContoller.js

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

views/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>