CODEWITHSUNDEEP
angularjs
Tarun Sapra
Tarun Sapra

Reputation: 1901

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

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,

Upvotes: 1

Views: 109

Answers (2)

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

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

Upvotes: 1

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

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.

Upvotes: 1

Related Questions