我试图根据上面的assignment来显示书籍,但无法弄清楚我的生活有什么不妥。
我构建了服务并修改了控制器并查看了页面,我认为它们应该在视图中显示书籍,但我只是看到一个空白页面。
我觉得我可能没有正确检索数据并在view / html中访问它。
有什么想法吗? Link to jsFiddle
<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>
答案 0 :(得分:0)
我认为我遇到了同样的麻烦,我的问题出在路由器上。尝试在配置方法中添加数组括号( [] )和&#39; $ routeProvider&#39; 字符串( app.js )像这样:
app.config(['$routeProvider', function($routeProvider) {
// Normal router stuff goes here
}]);
来自Ember,语法有点怪异,所以当我卡住时,我一直在使用this tutorial作为参考。