Angularjs error - Uncaught Error: [$injector:modulerr]

Question

I am a AngularJS beginner and I am using Angular 1.3.15 and I am facing the below error when I try to execute a simple script

Uncaught Error: [$injector:modulerr]

Html

<title>AngularJS data binding</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="myscript.js"></script>

<div data-ng-controller="SimpleController">

    Name :
    <br/>
    <input type="text" ng-model="name"/>{{name |uppercase}}
    <div>
        <ul>
            <li ng-repeat="personName in names">{{personName}}</li>
        </ul>

    </div>

</div>

JS file -

(function(){
var app = angular.module('myApp',[]);
app.controller('SimpleController', function($scope) {
    $scope.names = ['test1','test2'];


});
})();

Does the code in the file myscript.js has to be in the (function()}) ?

Thanks,

(function () {})() is an Immediately Invoked Function. This means that any variables declared inside will be scoped to just that execution rather than the entire javascript environment. — Callum Linington
– Callum Linington, Commented Jun 15, 2015 at 12:06
Yes, coming from the jquery background I was thinking the same, but is this approach useful in large projects as AngularJS provided 2 way data binding. — Tarun Sapra
– Tarun Sapra, Commented Jun 15, 2015 at 12:18

Kalhan · Accepted Answer · 2015-06-15 12:07:02Z

1

If you are minifying the js files then

app.controller('SimpleController', function($scope) {
    $scope.names = ['test1','test2'];
});

this becomes something like

x.controller('SimpleController', function(a) {
    a.a = ['test1','test2'];
});

then there is no $scope in the controller so use like,

app.controller('SimpleController', ['$scope', function($scope) {
    $scope.names = ['test1','test2'];
}]);

then angular will solve the arguments you pass to functions,

for example:

 app.controller('SimpleController', ['$scope', function(a) {
    a.names = ['test1','test2'];
}]);

angular will match the a to the $scope property.

answered Jun 15, 2015 at 12:07

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

3 Comments

Tarun Sapra Over a year ago

To get a complete error I used non-minified version of the angularJS and now it says " Module 'myapp' 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." . Whereas the HTMl tag contains - <html ng-app="myapp">

Kalhan Over a year ago

nope not the angular.js file, check your custom JS files

Kalhan Over a year ago

Ok great glad to help you. :)

Ajay Narain Mathur · Accepted Answer · 2015-06-15 13:05:13Z

1

Error is coming due to minification. Try this

JS:

(function(){
var app = angular.module('myApp',[]);
app.controller('SimpleController',['$scope', function($scope) {
    $scope.names = ['test1','test2'];


}]);
})();

The way you try is minification proof, read here

edited Jun 15, 2015 at 13:05

answered Jun 15, 2015 at 12:07

Ajay Narain Mathur

5,5063 gold badges24 silver badges34 bronze badges

1 Comment

Tarun Sapra Over a year ago

You mean Minification and not magnification? :)

Collectives™ on Stack Overflow

Angularjs error - Uncaught Error: [$injector:modulerr]

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related