Understanding coding style in Angularjs

Question

I came across different coding style using Angularjs and it made me think what the advantage and disadvantage of each coding style.

eg. Declaring of controllers:

Answer 1

All of them are valid, but exposing global functions is usually not a good idea (names can clash), sot it is better to have the functions encapsulated in angular's own domain.

This makes style #2.

AngularJS uses dependency injection to provide other services, filters, controllers etc. This is done by peeking the function parameters, getting them via regex and providing them as necessary.

But, what happens when you minify? To get rid of extra bytes, the minifiers rename the variables and parameters within the function, since it not change anything and everything would work if we were not peeking to get the parameters of the function.

When minified, e.g. $rootScope becomes a, and it will throw an error like there is no aProvider, yeah that's right.

So, angular has another syntax, it is the array notation; instead of defining a function, you can define an array which has the dependency names followed by the implementing function.

So,

angular.controller("MainCtrl", ["$scope", "$routeParams", function (a,b) {
    // a == $scope
    // b == $routeParams
}]);

There are also other ways to do it, instead of defining an array. You can set the function's $inject property to an array.

function MainCtrl(a,b) {
    // a == $scope
    // b == $routeParams        
}
MainCtrl.$inject = ["$scope", "$routeParams"];

For further info: http://docs.angularjs.org/guide/di