CODEWITHSUNDEEP
javascriptangularjsmodulecoding-styledependencies
NLuburić
NLuburić

Reputation: 922

How to organize angular module dependencies

I use the application component segmentation logic when creating my angular application, which is to say I have the following folder structure:

app.module.js
app.config.js
components
---- core
-------- core.module.js
-------- etc...
---- component1
-------- component1.module.js
-------- etc...
---- component2
-------- component2.module.js
-------- etc...
---- etc...
shared
---- sharedComponent1
-------- etc...
---- etc...
assets

Now, I group all my components into my app.module.js file and that's pretty much all that file is there for. My component1.module.js will list dependencies that module requires and so on. Now, I realize that it sort of doesn't matter where I define module dependencies and that I can put all my dependant module, regardless of component in the app.module.js file, but that's simply not clean nor does it offer good modularity.

That being said, I'm not sure what to do with modules that are used in every, or almost every other module, like modules for localization for example. The real problem here isn't that the whole app uses that module, it's that that universal module needs to be configured, so I was thinking about putting that dependency, and the required configuration, in the core.module.js and core.config.js file, respectively.

I've read a lot about angular best practices, but I wasn't able to find something concerning module dependency organization which, I suppose, is because angular puts all the modules in a "big box" anyway.

Another approach would be to create a shared component that focuses on incorporating that particular dependency, or group of dependencies into angular, and then have my other components depend on that component, but I'm not sure if this is too much.

Upvotes: 0

Views: 252

Answers (1)

abiwer
abiwer

Reputation: 121

I structure my modules as follows. The only real difference between my structure and yours is that all core/shared are basically the same thing. I have a component folder for each individual module of the application. Anything that isn't part of an individual component goes in core. The things that almost every single component use go in core too, as they are then a core piece of your application.

In my opinion, as long as you are breaking the application into components/angular.modules, keeping core code separate, and the organization is clear and easy to understand, its perfectly acceptable

core
----app
--------app.module.js
--------app.config.js

----util
--------util.module.js

components
----comp1
--------comp1.module.js
--------comp1.etc
----comp2
--------comp2.module.js

Upvotes: 1

Related Questions