Question

我正在尝试创建一个简单的项目，我想用ng-view指令填充该部分，并且我不断收到以下错误：我还在index.html中包含了angular文件： 1角min js 2-angular-route min js 3-angular-resource min js

 Error: $injector:modulerr Module Error Failed to instantiate module
 booksInventoryApp due to: Error: [$injector:modulerr]

我该如何解决这个问题？

我的代码是：

的index.html

<!DOCTYPE html>
<html ng-app="booksInventoryApp">
<body>
    <section ng-view></section>
<script src="js/index.js"></script>
</body>
</html>

index.js

var app = angular.module('booksInventoryApp', ['booksInventoryApp.bsm','booksInventoryApp.allBooks']);

//route provider
app.config(['$routeProvider', function($routeProvider){
$routeProvider

    // route for the index page
    .when('/', {
        templateUrl : '../allBooks.html',
        controller  : 'booksCtrl'
    })

    // route for the best selling month page
    .when('/bsm/:id', {
        templateUrl : 'bsm.html',
        controller  : 'bsmCtrl'
    })

    // route for the root
    .otherwise({
            redirectTo : '/'
        });

}]);

bsm.js

 var app = angular.module('booksInventoryApp.bsm', []);

 app.controller('bsmCtrl', function($scope) {
   $scope.book = "Bla Bla";
});

bsm.html

<section class="container">
{{book}}
</section>

allBooks.js

var app = angular.module('booksInventoryApp.allBooks', []);

// controllers
app.controller('booksCtrl', function($scope, $http) {
    $http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
    .success(function(data) {
      $scope.data = data;          
     });
});

allBooks.html

        <section class="row">
          <section class="col-sm-6 col-md-2" ng-repeat="book in data.books">
            <section class="thumbnail">
              <img ng-src="{{book.url}}">
              <section class="caption">
                <h3>{{book.name}}</h3>
                <p>Author: {{book.author}}</p>
                <p>ID: <span class="badge">{{book.id}}</span></p>
                <p>Available: <span class="badge">{{book.amount}}</span></p>
                <p>Price: <span class="badge">${{book.price}}</span></p>
                <p><a ng-src="#/bsm/{{book.id}}"><button class="btn btn-info">Best selling month</button></a></p>
              </section>
            </section>
          </section>
        </section>

Answer 1

您需要在应用中添加ngRoute模块，并在angular-route.min.js之后添加angular.js写入的脚本参考，还需要添加bsm.js和{{在上面提到的两个文件已加载之后，你的html中有1}}。

<强>代码

allBooks.js

注意

版本var app = angular.module('booksInventoryApp', [ 'booksInventoryApp.bsm', 'booksInventoryApp.allBooks', 'ngRoute' ]);＆amp; angular.js应该是。{ 否则它会显示一些奇怪的问题。首选版本为 1.3.15

Answer 2

在index.html页面中，您未包含bsm.js和allBooks.js个文件，其中包含您应用所需的依赖项。

由于您已在应用中指定了'booksInventoryApp.bsm','booksInventoryApp.allBooks'的依赖关系，因此无法找到这些模块，因此您将收到该错误。

此外，您需要在依赖项中包含角度路由脚本引用和ngRoute，因为您在应用中使用了角度路由。

var app = angular.module('booksInventoryApp', ['ngRoute', 'booksInventoryApp.bsm', 'booksInventoryApp.allBooks']);

Angular.js错误：$ injector：modulerr

2 个答案: