1

I have declared my module :

var module = angular.module("app", ["agGrid", "ngAnimate", "ngSanitize", "ui.bootstrap", "ngDialog"]);

Then my controller :

angular.module("app").controller("boxLadderCtrl", ["$scope", function ($scope) {

//stuff

}]);

The corresponding HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
     <script src="../Scripts/angular.js"></script>
     <script src="../assets/controller/applicationModule.js"></script>
     <script src="../assets/controller/Box_Ladder_controller.js">    </script>
    <script src="../node_modules/ag-grid-2.2.0/dist/ag-grid.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="boxLadderCtrl">
        </div>
</body>
</html>

I get the following error : 

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injector:nomod] Module 'ngAnimate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I don't understand why, when my controller is loaded, it is asking for all the dependencies in my module to be included along with it. This is not the case for my other controllers :

angular.module("app").controller("modalCtrl", ["$scope", "shareDataService", "ngDialog", "getDataService", function ($scope, shareDataService, ngDialog, getDataService) {
//stuff
}]);

for example.

The problem controller represents a popup window, could this be the issue? Or have I missed something glaringly obvious?

notAChance
  • 1,360
  • 4
  • 15
  • 47

1 Answers1

1

You did not include the ng-animate lib (change X.Y.Z to the version you'd like to use).

<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js">

If you don't need it, just remove the "ngAnimate" from the module definition.

laszlokiss88
  • 4,001
  • 3
  • 20
  • 26
  • I don't need it for this controller, I have included the script location in the one controller I do need it for. In the example I give you another controller `modalCtrl` which uses the same module, but does not use ngAnimate. Nor do I load it in the HTML for that controller, and nor do I have any problems with it. – notAChance Nov 16 '15 at 14:30
  • The module dependencies are set on module level, so even if you use it only in one controller, you have to load it. Otherwise your module cannot be instantiated. – laszlokiss88 Nov 16 '15 at 14:35
  • Are you sure this is correct? for my controller `modalCtrl` there are no issues, and, as you can see, I do not load `ngAnimate`, `ngSanitize`, or `ui.bootstrap`. – notAChance Nov 16 '15 at 14:39
  • The error message suggests that this is the problem: `Module 'ngAnimate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.` – laszlokiss88 Nov 16 '15 at 14:44
  • I'm aware of this. Why for my modal controller does it not need me to load the module's dependencies? It seems like a waste of time and space to load every single module dependency for every controller regardless of whether it is needed. – notAChance Nov 16 '15 at 14:50
  • If you are building an SPA, every dependency will be loaded only once. However, you can continue reading here if you wish: http://stackoverflow.com/questions/18591966/inject-module-dynamically-only-if-required – laszlokiss88 Nov 16 '15 at 14:58
  • OK thanks for the link, I'm still no clearer as to why my modal controller works without loading the dependencies! I've just seen that the HTML for my modal is actually in my main HTML and the modal controller is nested within the pages controller... could this be it? – notAChance Nov 16 '15 at 15:08
  • Ah, it just hit me. The modules are loaded in my main HTML, and so are loaded for my nested controller. Argh! Thanks for your help. – notAChance Nov 16 '15 at 15:32