In Angular, it's a good idea to use explicit dependency declaration so that the code can be minfied. Doing so, however, requires the developer to maintain boiler plate.
Enter ng-annotate:
ng-annotate is a program that will automatically add explicit dependency injection to your source code.
note: ng-annotate is the successor to ngmin
First, install ng-annotate:
npm install -g ng-annotate
Now take the following code sample:
function TestCtrl($scope, $log) {
$scope.$watch('random-event', function() {
$log.log('hello world')
})
}
angular.module('test').controller('TestCtrl', TestCtrl)
And run it throw ng-annotate:
ng-annotate -a TestCtrl.js > out.js
The resulting out.js
file will contain the explicit injection!
function TestCtrl($scope, $log) {
$scope.$watch('random-event', function() {
$log.log('hello world')
})
}
TestCtrl.$inject = ["$scope", "$log"];
angular.module('test').controller('TestCtrl', TestCtrl)
ng-annotate also supports source maps so you can get proper line/column numbers when debugging errors.
It's considered "best practice" to use ng-annotate rather than worry about maintaining the explicit injections yourself. There are many plugins that allo ng-annotate to work with all of the major JavaScript build systems including grunt, gulp, browserify, broccoli, and more