Difference between & usage of JavaScript & AngularJs Modules

Question

The below code shows you a JavaScript Module (revealing pattern):

var module = (function(){

    var _privateMethod = function(){
      //code here
    }

    var publicMethod = function(){
      //code here
    }

    return {
       publicMethod: publicMethod
    }

})();

The above revealing module pattern has a lot of advantages such as:

Provides public & private methods (Encapsulation)
App functionality can be divided into multiple modules
Easier to scale and debug in future

So far I have been using the above Module Pattern within my apps and it has worked fine

Now I am trying to use AngularJs in my app. The thing thats confusing me is how to use the Angular Modules and JavaSscript Modules (see above) together?

A normal JavaScript Module (see above) provides encapsulation which is very important as JavaScript itself does not contain the private & public feature.

So my question is when working with angularJs modules is there any point of using JavaScript modules?

Should I divide my app functionality into angularJS modules?

Is there any difference between the angular modules we define & the JavaScript module pattern shown above?

I think the terminology "module" is confusing me. I apologise if this question seems too broad but even trying explain this question is hard for me.

I don't think there is even a point in using Angular modules. The community has moved on to build tools like Browserify, Webpack. — elclanrs, Jan 26 '16 at 22:35
@charlietfl thanks for your comment. This might provide you with more information to help answer the question. This is another one of my question related to the same issue http://programmers.stackexchange.com/questions/308399/javascript-angularjs-modules-implementation-technique-and-structure/308441?noredirect=1#comment648075_308441 — Skywalker, Jan 26 '16 at 23:03
if you are just starting up you definitely want to use `$http` instead of rolling your own ajax wrapper. And the comments made in other post about promises is the best way to work with async. Using callbacks doesn't give you any place to caatch errors like promises do since they get passed to the end of the promise chain — charlietfl, Jan 26 '16 at 23:12

score 0 · Answer 1 · answered Jan 27 '16 at 01:33

Both Angular services (not modules) and JS modules (ES6/CJS/AMD/whatever) provide modularity and encapsulation, so IIFE as Module pattern isn't in demand.

The most common use case for IIFE as Module pattern in Angular is to prevent variable leakage in constant service, due to the fact that it didn't get a factory function and isn't interchangeable with other service types.

app.constant('...', (() => {
    var _private = () => { ... };
    return { ... };
})());

Encapsulation via function scope in Angular (and JS in general) has a major downside. There is no reflection in JS for function scopes, and private method that wasn't exposed on the object can't be tested or mocked in tests.

Another concern is that Revealing Module private methods can't be patched or mocked (by means of decorator in Angular). The security can hardly benefit from that, because there is none in JS, but this results in WET code that re-implements public methods.

TL;DR: just expose underscored methods on objects, add defineProperty to taste.

Difference between & usage of JavaScript & AngularJs Modules

1 Answers1