Question

我的代码似乎没问题，但我无法使用angularjs查看html（在codecademy课程中练习“阅读器”）根据我的知识似乎工作，但我是初学者，所以我可能需要做一些调整这是我的代码

<!doctype html>
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,900' rel='stylesheet' type='text/css'>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>

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

</html>

服务

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

视图（路由）

<div class="bookshelf row">
    <!-- TODO: Loop through myBooks and display each one with this HTML -->
    <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"> {{ book.author }} </p>
        </a>
    </div>
</div>

控制器

app.controller('BookshelfController', ['$scope','books', function($scope, books) {

  books.success(function(data) {
    $scope.myBooks = data;
  });
}]);

以及创建应用程序的模块

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

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

    .otherwise({ 
      redirectTo: '/books' 
    }); 
});

感谢保罗

Answer 1

模块依赖关系数组中的错字。

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

                                               ^ remove this space!

Codecademy中的读者练习不起作用

1 个答案: