Reputation: 198328
In one of our angular project, we defined some modules, like:
angular.module("services", [])....
angular.module("controllers", ['services'])....
angular.module("factories", [])....
Then make a main module depending on them:
angular.module("app", ['services', 'controllers', 'factories'])
Some colleague thinks this way is not good, he prefers to group modules by business features, like:
angular.module("login", [])....
angular.module("user-admin", [])....
angular.module("post-admin", [])....
Then combine them together:
angular.module("app", ['login', 'user-admin', 'post-admin'])
I think his approach is making sense, but I'm not sure the best practice to define modules.
What rules we should follow when defining modules?
Upvotes: 0
Views: 36
Reputation: 4611
Sometimes when we start to play with AngularJS we think is a good idea to create different modules, for example, for our controllers, services, directives, etc…but this may not be the best option. For example: let’s say we create a controller inside a module named ‘myapp.controllers’ and this component depends on a service that is inside the module ‘myapp.services’. When we want to use that controller in another application we will have to not only require the controller module but the service one too and any other module that is as a dependency. However, if we have a login module and we create controllers, services, directives, etc under the module ‘myapp.login’, then later on when we want to use that module we will have everything we need to use to it without needing other dependencies.
another way
Another method we can use to break up our app is to divide our modules by route. This breakdown allows us to write isolated tests that focus on the functionality per route. Modularizing by route can make more sense, depending upon the project; it allows us to divide our functionality efficiently when we’re dealing with a lot of independent routes.
angular.module('myApp.home', []);
angular.module('myApp.login', []);
angular.module('myApp.account', []);
angular.module('myApp', [
'myApp.home',
'myApp.login',
'myApp.account'
]);
This modularization makes sense specifically when we’re dealing with large numbers of routes and/or when we don’t have too much cross-over between routes.
Upvotes: 1