Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error: [$injector:modulerr]

I am a newbie. Just learning/trying to integrate Angular with my webapp (Java + jQuery+ requireJS). I am not using any router and below is my script. From other stackoverflow I learned that this error is due to missing inclusion of ngRoute module. Since version 1.1.6 it's a separate part. But in my below code I am not at all using any ngRouter. When I am not referencing it why am I getting this error ?

Error: [$injector:modulerr] Failed to instantiate module counter due to: [$injector:nomod] Module 'counter' 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. http://errors.angularjs.org/1.2.11/$injector/nomod?p0=counter

Template:

<ul ng-app="counter" ng-controller="counterController">
<li>
   <span class="ui-button-text" ng-bind="critical"></span>
</li>
<li>
   <span class="ui-button-text" ng-bind="error"></span>
</li>
<li>
   <span class="ui-button-text" ng-bind="warn"></span>
</li>
<li>
   <span class="ui-button-text" ng-bind="note"></span>
</li>
</ul>

JS

requirejs.config({
  paths : {  angular: "/js/lib/angular/angular.min" },
  shim : {  "angular": {  deps: [ "jquery"],  exports: "angular" } }
});

require(["angular", "jquery"],function() {

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

module.controller('CounterController', function ($scope, $http, $timeout) {
    $scope.critical = 0;
    $scope.error = 0;
    $scope.warn = 0;
    $scope.note = 0;

    function setData(d){
        $scope.critical = d.critical;
        $scope.error = d.error;
        $scope.warn = d.warn;
        $scope.note = d.note;
    }

    var getCounters = function() {
        var config = {headers: {
                'X-MY-Request': (new Date()).getMilliseconds()
            }
        };

        $http.get('xxxxxxx', config)
                .success(function(data, status, headers, config) {
            setData(data);
            $timeout(getCounters, 60000);
        }).error(function(data, status, headers, config) {
            // Handle the error
        });

    }


    $timeout(getCounters, 500);
});
like image 280
user2300875 Avatar asked Feb 03 '14 22:02

user2300875


1 Answers

In your template your controller name has a lowercase beginning letter counterController. Your js has it with an uppercase CounterController. Could this be the issue?

Any injected module that isn't found will throw an error. Not just ngRoute.

Edit:

I just threw a quick plunker together and without the 'require' stuff all your code is correct. So no you aren't missing anything in your angular code. All modules are working.

So the problem must be with your 'require' setup. I have literally never used it so couldn't really assist you. Look here for more Angular + Requirejs - Loading in the wrong order.

For now, if I were you, I would learn one technology at a time. Just load your angular and jquery resources and then learn how to use them. Then when you are getting a little more comfortable add 'require'.

like image 111
mattl Avatar answered Oct 09 '22 19:10

mattl