Q: Why do I use Dependency Injection in Angular Controllers?

Question

Basically I'm wondering what is the difference between declaring my controller between this approach:

 myApp.controller('GreetingController', ['$scope', function($scope) {
     $scope.greeting = 'Hola!';   
 }]);

And this:

myApp.controller('GreetingController', function($scope) {
    $scope.greeting = 'Hola!';
}]);

I understand that the brackets in angular controller/directive/filter etc declarations are for dependency injections but the $scope that is in use of the Controller is for the controller only anyway. at least that's what I understand.

Please help me understand, I've been researching this matter quite a bit and not a lot of explanation regarding this matter are available online.

Thanks in advance.

I think what you are missing is that both examples are using dependency injection! The second example just defines the name of the service being injected (`$scope`) explicitly. — Ignitor, Jun 13 '16 at 09:46

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

In the second version, dependency injection will rely on $scope variable name only. As it will get renamed during minification, this will not work anymore.

More details on this question : Angularjs minify best practice

edited May 23 '17 at 11:52

Community

1
1

answered Jun 13 '16 at 09:17

mathieu

30,974
4
64
90

score 1 · Answer 2 · answered Jun 13 '16 at 09:23

Before to deploy code on server we use to build it, and in the process the codes get minify and uglify ,while processing the build angular's code get compressed in such a manner that it replaces long variables names in short. eg.

myApp.controller('GreetingController', ['$scope','myService', function($scope,m) {
     $scope.greeting = 'Hola!';   
 }]);

when code get minified, it may get changed to

 myApp.controller('GreetingController', ['$s', 'm', function($scope,m) {
     $scope.greeting = 'Hola!';   
 }]);

it denotes that $s as depedency is what the first param in funciton. amd m is for the second param of function.

Always remember to inject in the same sequence as you pass the param.

Hope this answer may give you some idea.

Your answer is nearly correct, but you have it the wrong way around - the parameter names get minified, but the strings in the array don't! It would look more like `['$scope', 'myService', function($s, m) {...}]`. — Joe Clay, Jun 13 '16 at 09:43

Q: Why do I use Dependency Injection in Angular Controllers?

2 Answers2