AngularJS - dependency injection

Question

I would like to know if there is a difference between the two next lines and why to use one of those (the two work as expected)

phonecatApp.controller('PhoneListCtrl', function($scope, $http) {...});

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

I took it from the official AngularJS tutorial and I know there is an explanation about this modification but I don't understand it... http://docs.angularjs.org/tutorial/step_05

Thanks in advance!

Ciarán Tobin · Accepted Answer · 2014-02-17 09:30:51Z

3

If you minify your first line you get:

phonecatApp.controller("PhoneListCtrl",function(e,t){})

The dependency injection won't work then, because Angular has no idea what e and t are. Compare that to minifying the second version:

phonecatApp.controller("PhoneListCtrl",["$scope","$http",function(e,t){}])

The function parameters are still renamed, but $scope and $http are given in the array so the injection can go ahead as expected.

answered Feb 17, 2014 at 9:30

Ciarán Tobin

7,5661 gold badge31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

idursun · Accepted Answer · 2014-02-17 09:24:58Z

1

There is no difference in terms of functionality. The first one may get messed up if your code is minified because angular resolves from the argument names. The latter has some kind of protection against minification because you are already passing dependencies in array.

answered Feb 17, 2014 at 9:24

idursun♦

6,3701 gold badge40 silver badges51 bronze badges

Comments

georgeawg · Accepted Answer · 2019-01-15 22:57:08Z

0

AngularJS invokes certain functions (like service factories and controllers) via the injector. You need to annotate these functions so that the injector knows what services to inject into the function. There are three ways of annotating your code with service name information:

Using the inline array annotation (preferred)
Using the $inject property annotation
Implicitly from the function parameter names (has caveats)

For more information, see AngularJS Developer Guide - Dependency Injection

answered Jan 15, 2019 at 22:57

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

AngularJS - dependency injection

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related