Is there any advantage of using module pattern or objects to define Angular components?

Question

I wonder if it is worth writing angular stuff this way:

(function(angular, module) {

  'use strict';

  module.controller('MyCtrl', function($scope) {
    // possibly use helperFunction here
  });

  function helperFunction() {
    ...
  }

})(angular, angular.module('myModule'));

or this way (using App object and putting app stuff into it:

App = App || {};

App.myModule = App.myModule || angular.module('myModule', []);

App.myModule.controller('MyCtrl', function($scope) {

  'use strict'

  // possibly use helperFunction here

  function helperFunction() {
    ...
  }

});

than using regular way like this

angular.module('myModule').controller('MyCtrl', function($scope) {

  'use strict'

  // possibly use helperFunction here

  function helperFunction() {
    ...
  }

});

Those are three possible ways (not counting requirejs) of structuring app code that come to my mind. I'm using "regular" one (the last) as seen in most places, but I wonder if there are any benefits of using those two former approaches. Maybe there are special cases when those are useful, I'm not aware of.

ooxi · Accepted Answer · 2013-10-14 07:55:17Z

1

The first approach has the benefit of not polluting the global namespace thus reducing the risk of name clash. This is especially important if you extend an existing project or if your module will be used in multiple context (for example a public library).

I personally prefer the third style over the second for no particular reason. One could argue that optimizers are better at optimizing non global code.

answered Oct 14, 2013 at 7:55

ooxi

3,3792 gold badges31 silver badges44 bronze badges

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

Comments

tennisgent · Accepted Answer · 2013-10-14 16:47:48Z

0

The answer is pretty simple. Its the idea behind "Dependency Injection" (see angular docs for more info). By using Angular's built in modules, you can declare dependencies on those modules later on when you use them. This is critically important to being able to do easy unit testing. Not being in the global namespace is part of the issue, but the larger issue is that (in each subsequent module) you can declare which other modules your current module relies on.

Here's a decent article that explains more on this topic: http://joelhooks.com/blog/2013/08/18/configuring-dependency-injection-in-angularjs/

answered Oct 14, 2013 at 16:47

tennisgent

14.2k9 gold badges52 silver badges48 bronze badges

1 Comment

grafthez Over a year ago

But I guess none of those approaches kills dependency injection idea. All Angular DI stuff is still working fine.

Collectives™ on Stack Overflow

Is there any advantage of using module pattern or objects to define Angular components?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related