Angular.js Error: $injector:modulerr

Question

I am trying to make a simple project where i want to populate the section with ng-view directive and i keep getting the following error: I also included in index.html the angular files: 1-angular 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]

How can i fix this?

My code is:

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>

You have not included the other scripts in your html, bsm.js and allBooks.js.load them then load index.js. Also where is angularjs scripts loaded (error suggests you are loading it but not shown in the code the question)? — PSL
– PSL, Commented Jun 4, 2015 at 20:06
@PSL omg if that works im so stupid EDIT: that was not the reaseon. maybe something else is wrong — Vandervidi
– Vandervidi, Commented Jun 4, 2015 at 20:07
@user4440845 Click on the error link, that will give you the clue... You must be missing some module that you are using. eg: where do you think you will get the router? — PSL
– PSL, Commented Jun 4, 2015 at 20:12

Pankaj Parkar · Accepted Answer · 2015-06-04 20:18:10Z

2

You need to add ngRoute module in your app and also the script reference of the angular-route.min.js write after the angular.js, Also you need to add bsm.js and allBooks.js in your html after above two mentioned file has loaded.

Code

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

Note

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

edited Jun 4, 2015 at 20:18

answered Jun 4, 2015 at 20:09

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vandervidi Over a year ago

That is what i have missed. Thank you

ShankarSangoli · Accepted Answer · 2015-06-04 20:13:07Z

1

In your index.html page you not included bsm.js and allBooks.js files which contains the required dependencies of your app.

Since you have specified the dependency of 'booksInventoryApp.bsm','booksInventoryApp.allBooks' in your app angular is not able to find those modules and hence you are getting that error.

Also you need to include angular route script reference and ngRoute in your dependencies because you are using angular routing in your app.

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

edited Jun 4, 2015 at 20:13

answered Jun 4, 2015 at 20:07

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

2 Comments

Pankaj Parkar Over a year ago

main ng-route thing is missing here dude

ShankarSangoli Over a year ago

Yes was editing my answer before that your down voted :(

Collectives™ on Stack Overflow

Angular.js Error: $injector:modulerr

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related