Coding style in AngularJS

Question

While this thread sums up the following three code styles:

1)

angular.module('mainCtrl', []);
function MainCrl($scope, $rootScope) {}

2)

angular.module('mainCtrl',[])
.controller('MainCtrl', function($scope, $rootScope)) { ... });

3)

angular.module('mainCtrl',[])
.controller('MainCtrl', ['$scope', '$rootScope', function(scope, rootScope)) { ... }]);

there's a fourth way i've seen in this video that is very appealing for me

4)

var controllers = {}
controllers.mainCtrl = function($scope, $rootScope){ };
app.controller(controllers)

I am leaning towards continuing with 4), will it break if minified or are there any other drawbacks? Should i just go with 3) since it seems to be the standard way of doing it?

Yes, number 4 will break if minified.

Davin Tryon
– Davin Tryon

2013-11-28 14:50:20 +00:00
Commented Nov 28, 2013 at 14:50 — Davin Tryon
– Davin Tryon, Commented Nov 28, 2013 at 14:50

Stewie · Accepted Answer · 2013-12-22 23:04:13Z

5

Option 1 pollutes global namespace and hinders minification and does not respect modules.
Option 2 does not let you rename your injectables in controller signature.
Option 4 pollutes global namespace, but it is minification-safe if you do it properly¹.
Option 3 lets you rename your injectables², does respect modules, does not pollute global namespace, and does not require any extra work when minifying.

So my winner is option #3.

¹ Option 4 - minification-friendly version:

var controllers = {};
controllers.mainCtrl = ['$scope', '$rootScope', function($scope, $rootScope){ ... }];
app.controller(controllers);

² Renaming injectables:

app.controller('MyCtrl', ['$scope', 'UserService', function($scope, User){ ... }]);

edited Dec 22, 2013 at 23:04

answered Nov 28, 2013 at 15:14

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

Comments

Golo Roden · Accepted Answer · 2013-11-28 14:58:31Z

5

My recommendation: Go with option 3, for three reasons:

It is (IMHO) the most widely adopted one.
You have no problems with minification (and this is the only option where this is true).
It works best with modules.

edited Nov 28, 2013 at 14:58

answered Nov 28, 2013 at 14:40

Golo Roden

152k102 gold badges318 silver badges445 bronze badges

Collectives™ on Stack Overflow

Coding style in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related