How to wrap multiple Angular Modules under one injected Module

Question

I'm working on an Angular project that will require modularisation and I will be creating many small modules for it. Example: myApp.core, myApp.components.component1 myApp.components.component2 etc. each being its own file compiled into one with gulp. When I inject myApp into another project, I want to be able to consume all modules in one myApp injection, like so:

angular.module('project2', ['myApp'])

instead of:

angular.module('project2', [
    'myApp.core', 
    'myApp.components.component1', 
    'myApp.components.component2'
])

Much like the Angular team have done with Material. Everything is its own module, but in order to use Angular Material, you only have to add ngMaterial as a dependency.

Answer 1

  angular.module('project2', ['myApp']);

  angular.module('myApp', ['components']);

  angular.module('components', ['component1','component2','component3']);

  angular.module('component1', []);
  angular.module('component2', []);
  angular.module('component3', []);