阅读器应用程序练习不会显示书籍答案

【问题标题】：Books Won't Display for Reader App Exercise阅读器应用程序练习不会显示书籍
【发布时间】：2015-05-03 16:07:26
【问题描述】：

我正在尝试根据上面的 assignment 显示书籍，但无法弄清楚我的生活出了什么问题。

我构建了服务并将控制器和视图页面修改到我认为它们应该在视图中显示书籍的程度，但我看到的只是一个空白页面。

我觉得我可能没有正确检索数据并在视图/html 中访问它。

索引.html

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

js/apps.js

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

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

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

js/controllers/BookshelfController

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

js/views/bookshelf.html

<div class="bookshelf row">
  <!-- 
  TODO: Loop through myBooks and display each one with this HTML
  <div class="book col-md-3">
    <a href="#/books/{{$index}}">
      TODO: Add the book's cover here
      <h3 class="title">  </h3>
      <p class="author">  </p>
    </a>
  </div>
  -->
  <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">by {{ book.author }}</p>
      </a>
  </div>

</div>

【问题讨论】：

请使用 jsFiddle 重新发布。使用这个预配置的小提琴作为你的基础：jsfiddle.net/joshdmiller/HB7LU
感谢您的提示。我用 jsfiddle 的链接更新了问题。

标签： javascript angularjs angularjs-ng-repeat reader

【解决方案1】：

我想我遇到了同样的问题，我的问题出在路由器上。尝试在配置方法 (app.js) 中添加数组括号 ( [ ] ) 和 '$routeProvider' 字符串，如下所示：

app.config(['$routeProvider', function($routeProvider) {
  // Normal router stuff goes here
}]);

来自 Ember，语法有点奇怪，所以当我遇到困难时，我一直使用 this tutorial 作为参考。

【讨论】：