Angular.js Error: $injector:modulerr

Question

我正在尝试做一个简单的项目，我想用 ng-view 指令填充该部分，但我不断收到以下错误：我还在 index.html 中包含了 angular 文件： 1-angular 分钟 js 2-angular-路由最小 js 3-angular-资源最小 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

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

由于您在应用程序中指定了 'booksInventoryApp.bsm','booksInventoryApp.allBooks' 的依赖项 angular 无法找到这些模块，因此您会收到该错误。

您还需要在依赖项中包含 angular 路由脚本参考和 ngRoute，因为您在应用程序中使用 angular 路由。

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

Answer 2

您需要在您的应用程序中添加 ngRoute 模块以及 angular-route.min.js 的脚本引用写在 angular.js 之后，您还需要添加 bsm.js 和allBooks.js 在您的 html 中加载上述两个文件后。

代码

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

备注

Both the version of angular.js & angular.route.js should be the same otherwise it will show some wierd issue. Preferred version is 1.3.15

Angular.js Error: $injector:modulerr

Angular.js Error: $injector:modulerr

angularjs

angular-routing