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

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,

Answer 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.

Answer 2

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