What is the difference between these two angularjs controller definition

Question

I don't understand the difference between these two types of angularjs controller definition, i have tried following codes and found both working

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

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

Answer 1

First one cares about minification.

In this controller:

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

arguments will be minimized to some short values and dependency injection will not work.

Please look at:

• https://docs.angularjs.org/guide/di#dependency-annotation
• https://docs.angularjs.org/tutorial/step_05
• What are the differences in angular controller notation?

Answer 2

The second one won't work anymore once minified, because the minifier will rename the parameters to spare as much bandwidth as possible:

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

Since angular uses the names of the arguments to know what to inject to the controller, that will fail.

The first syntax is a way to circumvent this problem.

I use ngAnnotate in order to automatically transform the second syntax to the first one, as part of the build process, before minifying