Hide from app.js main module a plug-in inside a component

Question

This one it might be an oldy but anyway I guess there are a lot of front-end developers with the wisdom.

I'm trying not to declare a plug-in into the main module of my application.

Let's say I have the following modularization:

SUB-COMPONENT MODULE

(function () {
'use strict';

         angular.module('app.modules.table.detail', []);

})();

COMPONENT MODULE

(function () {
'use strict';

         angular.module('app.modules.table', [
                  'app.modules.table.detail'
         ]);

})();

MAIN APP MODULE

(function() {
'use strict';

     angular.module('app.modules', 
        [ 'app.modules.table' <----// inside here is the table.detail 
         ,'app.modules.other.component'
        ]);


     angular.module('app', ['app.modules',

                             'smoothScroll']) 

So, with this structure, can I hide the smoothScroll third-party away from the app module array? I just want to declare app.modules and that's it for the app.

I tried to include it as a dependency in the component array, but no luck. I've been reading about and I guess it has to be on the app for the $injector to know his $provider.

Anyone have nailed this?

Answer 1

I will answer myself because it was easier than I thougt.

I was not declaring the third-party in the sub-component / component modules.

CHILD module component

(function () {
'use strict';
angular.module('app.modules.table.detail', ['smoothScroll']); <-- HERE!
})();

PARENT module component

(function () {
'use strict';

angular.module('app.modules.table', ['app.modules.table.detail', 'smoothScroll' <--- ALSO HERE
]);
})();

So now I can bootstrap the app with no need of declaring the third-party on the main module. Therefore it is hidden from the main app module file