AngularJS Failing to Instantiate Module

StackOverflow https://stackoverflow.com/questions/23097168

Question

For some reason, my angularjs module isn't loading correctly. I am pretty new to this and I've read a lot of tutorials, but I can't seem to get this working.

[17:22:36.338] Error: [$injector:modulerr] Failed to instantiate module wc2013mongoMod due to: [$injector:nomod] Module 'wc2013mongoMod' 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 have found this question, which appears to be a very close description to my problem: AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?

It suggests re-arranging the order in which the scripts are included. I've tried to put the scripts at the end of the body, no luck. I've also tried to put them inside the <head> element, but still no luck. What am I doing wrong here?

I am using Jade, but the resulting HTML looks like this:

<!DOCTYPE html>
<html ng-app="wc2013mongoMod">
   <head>
      <title>World Cup 2014 MongoDB Experiment Project</title>
      <link rel="stylesheet" href="/stylesheets/style.css">
      <script src="js/angular/angular.js"></script><script src="js/main.js"></script>
   </head>
   <body>
      <h1>World Cup 2014 MongoDB Experiment Project</h1>
      <p>Welcome to World Cup 2014 MongoDB Experiment Project</p>
      <div ng-controller="teamCtrl">
         <p>Angular JS Controller</p>
      </div>
   </body>
</html>

The javascript looks like this:

console.log("loaded main.js");

var myApp = angular.module('wc2014mongoMod',[]);

myApp.service('teamService', function($http) {
        //delete $http.defaults.headers.common['X-Requested-With'];
        this.getData = function(callbackFunc) {
                $http({
                        method: 'GET',
                        url: '/api'
                        //params: 'limit=10, sort_by=created:desc',
                        //headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
                }).success(function(data){
                        // With the data succesfully returned, call our callback
                        //callbackFunc(data);
                        console.log("data received");
                        console.log(data);
                }).error(function(){
                        alert("error");
                });
        }
});

myApp.controller('teamCtrl', function($scope, teamService) {
        $scope.data = null;
        console.log("we're in the controller");
        teamService.getData(function(dataResponse) {
                $scope.data = dataResponse;
        });
});
Was it helpful?

Solution

Check the difference. 2013 vs 2014.

<html ng-app="wc2013mongoMod">

and 

var myApp = angular.module('wc2014mongoMod',[]);

OTHER TIPS

You should spot the error given these two lines:

<html ng-app="wc2013mongoMod">

..

var myApp = angular.module('wc2014mongoMod',[]);

wc2013mongoMod !== wc2014mongoMod

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top