CleverStack/angular-seed

Modularity

Closed this issue · 2 comments

Apps should be able to be designed using small modules that provide certain functionality. Like a polls module, or a user module. Some modules will be common modules, some will have very specific functionality. This layout comes to mind:

app
app/index.html
app/components
app/styles
#…more app related folders

# The scrips app, bootstrapping and such
app/scripts

# This is where the common stuff will be.
app/scripts/common
app/scripts/common/controllers
app/scripts/common/services
app/scripts/common/directives
app/scripts/common/filters

# A polls module
app/scripts/polls
app/scripts/polls/controllers
app/scripts/polls/services
app/scripts/polls/directives
app/scripts/polls/filters

# The users module
app/scripts/users
app/scripts/users/controllers
app/scripts/users/services
app/scripts/users/directives
app/scripts/users/filters

This way all the scripts are separated nicely. An even better approach in my opinion would be to have each module include all it's necessary elements:

# Main files
app/index.html
app/bootstrap.js

# Main module
app/common/components
app/common/scripts/{controllers|services|directives|filters|config}
app/common/views/{partials}
app/common/styles/{less}
app/common/images

# Users module
app/users/components
app/users/scripts/{controllers|services|directives|filters|config}
app/users/views/{partials}
app/users/styles/{less}
app/users/images

This way adding a module to a project would be a matter of copy-paste and could even be easily automated when cleverstack-cli is available. The build process would have to change, same as the bootstrapping. Perhaps this could be the chance to reconsider a leaner dependency management tool.

Any thoughts team? @danielyoung @pilsy @nailgun @simonwjackson

@adnan-i what do you think about this?

I agree about the second, more modularised approach, where all dependant files are contained inside the module.
I guess the module-specific routes should/could also be defined in each module's routes file, because, from my experience, routes config grows pretty quickly.

Also, it looks like a simple module generator/scaffolding grunt command could come in handy.

Also, I don't know if requireJS plays nice with modularised config, but I believe it does. Currently, main.js file for the unit tests and for the app has lots of duplicated configuration. This would need to be optimised in the process.

Also, Karma would need to be adjusted to pick up all the tests, across the modules.

Either way, I think this is proper way to structuring mid-size to large CleverStack applications.