However this technique fails in real life scenarios, because for production we usually (or rather always) minify and uglify javascript files. Uglify proces renames our variables and due to the fact that dependencies are resolved by name, AngularJS is not able to find appropriate services, directives etc. To overcome this limitation, we can enclose our function definition into an array, and specify dependencies as a string literals. Our original code becomes then<\/p>\n
\r\n(function () {\r\n angular.module('app')\r\n .controller('shellCtrl', ['$scope', '$http', function ($scope, $http) {\r\n $scope.title = \"Title\";\r\n }]);\r\n})();\r\n<\/pre>\nAlthough this works fine even after minifying and uglifiyng js files, for me this code is hard to read. That is why I like to use yet another technique. This technique leverages variable hoisting and $inject<\/i> property<\/p>\n\r\n(function(){\r\n angular.module('app')\r\n .controller('shellCtrl',shellController);\r\n\r\n shellController.$inject=['$scope','$http'];\r\n\r\n function shellController($scope,$http){\r\n $scope.title='title';\r\n }\r\n})();\r\n<\/pre>\nAs You can see I extracted controller function into separate variable “shellController” and listed all necessary dependencies in $inject<\/i> array<\/p>\n\r\nshellController.$inject= ['$scope','$http']\r\n<\/pre>\nIt is even possible to enhance a bit this example and make it a little less error prone. With the current implementation we have to make sure that order of properties in $inject<\/i> array is the same as in function declaration. It is easy to keep track of that if we have just a couple of dependencies, but it might be a bit of a pain if we start to add, remove or edit them. Fortunately we can automate this task and basically autogenerate $inject<\/i> array. In order to do that I like to use Gulp (although it is also possible to use Grunt). First of all we have to install Gulp. There is great tutorial how to do that in here https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/getting-started.md Having Gulp on board we have to install additional packages: gulp-rename<\/i> and gulp-ng-annotate<\/i>. In order to do that type into command line<\/p>\n\r\nnpm install gulp-ng-annotate --save-dev\r\nnpm install gulp-rename --save-dev\r\n<\/pre>\nNow we can create gulp.js file which should look more or less like that<\/p>\n
\r\nvar rename = require('gulp-rename'),\r\n ngAnnotate = require('gulp-ng-annotate');\r\n\r\ngulp.task('annotate', function () { \/\/create new task 'annotate'\r\n return gulp.src('app\/layout\/controllers\/shellController.js') \/\/select files to process\r\n .pipe(ngAnnotate()) \/\/ add angularjs dependeny injection annotation\r\n .pipe(rename('app.all.js')) \/\/rename in-memory stream to app.all.js\r\n .pipe(gulp.dest('.build'));\/\/save stream to new location\r\n})\r\n<\/pre>\nWe can run this task typing into command line<\/p>\n
\r\ngulp annotate\r\n<\/pre>\n
![\"gulp](\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2015\/02\/angularjs-extending-existing-services-using-decorator\/gulp.png\")
<\/a>