What is the purpose of square bracket usage in Angular?

Question

I would like to understand the difference between the declaration of MyOtherService and MyOtherComplexService. Especially what is the purpose of square bracket part? When to use them and when not?

var myapp = angular.module('myapp', []);  myapp.factory('MyService', function($rootScope, $timeout) {     return {         foo: function() {             return "MyService";         }     } });  myapp.factory('MyOtherService', function($rootScope, $timeout, MyService) {     return {         foo: function() {             return "MyOtherService";         }     } });  myapp.factory('MyOtherComplexService', ['$rootScope', '$timeout', 'MyService', function($rootScope, $timeout, MyService) {     return {         foo: function() {             return "MyOtherComplexService";         }     }  }]);  myapp.controller('MyController', function($scope, MyOtherService, MyOtherComplexService) {      $scope.x = MyOtherService.foo();     $scope.y = MyOtherComplexService.foo();  }); 

Answer 1

It enables AngularJS code to be minified. AngularJS uses parameter names to inject the values to your controller function. In JavaScript minification process, these parameters are renamed to shorter strings. By telling which parameters are injected to the function with a string array, AngularJS can still inject the right values when the parameters are renamed.

Answer 2

To add to Ufuk's answer:

ngmin - compiles your standard modules to min-safe modules

Angular's min-safe square bracket notation is cleary less convenient, because you have to type every dependency twice and argument order matters. There is a tool called ngmin which compiles your standard modules to min-safe modules, so you don't have to manage all those things by hand.

Angular + CoffeeScript

If you're using CoffeeScript the situation is even worse. You may choose between ngmin, which will destroy your source map, or if you want to write it out all by yourself you'll have to wrap your entire code with square brackets, which is super ugly.

angular.module('whatever').controller 'MyCtrl', ['$scope', '$http' , ($scope, $http) ->   # wrapped code ] 

In my opinion this is not a CoffeeScript flaw, but a poor design decision of the Angular team, because it's against all JS/CoffeeScript conventions not to have the function as the last argument. Enough ranting, here is a little helper function to work around it:

deps = (deps, fn) ->   deps.push fn   deps 

This is a very simple function that accepts two arguments. The first one is an array of strings containing your dependencies, the second one is your module's function. You may use it like this:

angular.module('whatever').controller 'MyCtrl', deps ['$scope', '$http'] , ($scope, $http) ->   # unwrapped code \o/