Javascript 图书赢得'；t显示阅读器应用程序练习_Javascript_Angularjs_Angularjs Ng Repeat_Reader

Javascript 图书赢得'；t显示阅读器应用程序练习

javascript angularjs

Javascript 图书赢得'；t显示阅读器应用程序练习,javascript,angularjs,angularjs-ng-repeat,reader,Javascript,Angularjs,Angularjs Ng Repeat,Reader,我正试图根据上面的内容来展示书籍，但我不知道我这辈子到底出了什么问题我构建了服务，修改了控制器和视图页面，我认为它们应该在视图中显示书籍，但我看到的只是一个空白页面我觉得我可能没有正确地检索数据并在view/html中访问它有什么想法吗 Index.html js/services/books.js js/控制器/书架控制器 js/views/bookshelf.html 我想我也遇到了同样的问题，我的问题出在路由器上。尝试在配置方法（app.js）中添加数组括号（[]）和“$rou

我正试图根据上面的内容来展示书籍，但我不知道我这辈子到底出了什么问题

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

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

有什么想法吗

Index.html

js/services/books.js

js/控制器/书架控制器

js/views/bookshelf.html

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

app.config（['$routeProvider'，函数（$routeProvider）{
//普通的路由器都在这里
}]);

来自Ember，语法有点奇怪，所以当我陷入困境时，我一直使用它作为参考。

请使用JSFIDLE重新发布。使用这个预先配置好的小提琴作为你的基础：谢谢你的提示。我用一个到JSFIDLE的链接更新了这个问题。

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

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

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

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

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

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