0

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

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

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

有任何想法吗？链接到 jsFiddle。

索引.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/控制器/书架控制器

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

1 回答 1

0

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

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

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

于 2015-08-15T04:22:27.753 回答