阅读器应用练习不会显示书籍

时间:2015-03-03 05:04:09

标签: javascript angularjs angularjs-ng-repeat reader

我试图根据上面的assignment来显示书籍,但无法弄清楚我的生活有什么不妥。

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

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

有什么想法吗? Link to jsFiddle

的index.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 /服务/ 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 /控制器/ BookshelfController

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

JS /视图/ 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>

1 个答案:

答案 0 :(得分:0)

我认为我遇到了同样的麻烦,我的问题出在路由器上。尝试在配置方法中添加数组括号( [] )和&#39; $ routeProvider&#39; 字符串( app.js )像这样:

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

来自Ember,语法有点怪异,所以当我卡住时,我一直在使用this tutorial作为参考。