What is the best practice to organise angular(1.5) components/modules when working with webpack and ES6?
Should every component, directives and services be exported as a separate module or a function and then in the main app registered as the main app module dependencies, directives or services?
So far its the only approach I saw in webpack tutorials. But in pure js angular examples every component, directive or service registers by itself to the main app module (from their own file where they are defined)
I wonder what is the most common approach to organise all the services components and other bits of application.
With Webpack (app.js would have a very long list of components)
//app.js import myDirective from './myDirective.js'; angular.module('app').directive('myDirective', myDirective) //myDirective.js export default function myDirective(){}Without webpack (but not used in any of examples with webpack)
//app.js angular.module('app', []); //myDirective.js angular.module('app').directive('myDirective', function myDirective(){ })
appmodule smells bad and also bad for testing. In the example above it will throw an exception anyway, becauseangular.module('app', [])wasn't defined beforehand.angular.module('app.myService', function(){})do you whenever you use a dependency injection you use a module dependency for 'app.myService' as well? If it is a separate module per each file I would expect you want to have all services as dependencies as well? Isn't it a bit too much?apploadsapp.foomodule, andapp.foomodule loadsapp.foo.componentandapp.foo.servicemodule. Depending on the design some levels of nesting can be flattened. But in some cases they may be kept, e.g.app.foomay haverunorconfigblocks which you may want to avoid when testing nested modules. It is a bit cumbersome but it pays off in the large scale. There's no such thing as 'best practice' but this one can be considered a good one.