Angular javascript minification导致错误：$ injector：modulerr模块错误

Question

When I define angular like following, it will cause issue on using minification this javascript, which is Error: $injector:modulerr Module Error.

angular.module('myModule').controller('MyController', function ($scope) {

});

Now, if I write my angular as following, it'll be fine after minification.

angular.module('myModule').controller('MyController', ["$scope", function ($scope) {

}]);

During the minification, the first way will convert the $scope to other variable name, looks like that the issue. Is there a way I can avoid not writing code as the second case?

Answer 1

You can use $inject :

function MyController($scope) {
}

MyController.$inject = ['$scope'];
angular.module('myModule').controller('MyController', MyController);

Answer 2

If you have some kind of build-process (or you want to introduce a pretty small one), have a look at the ng-annotate project ( https://github.com/olov/ng-annotate ). It is a tool that processes your javascript code and helps you avoid repeating yourself. What it does is basically reading the first version of your code and generating an $inject property for you as shown in the answer of Pedro Nascimento.

There are several plugins for grunt, gulp, webpack and so on, but it's also pretty easy to just use this one module if you don't have a build process yet.

Answer 3

你有这个Grunt： https ：//www.npmjs.com/package/grunt-ng-annotate我很确定你可以找到webpack / gulp等相同的东西......