Angular - define modules in multiple files

Question

I have the following in app.js

config = angular.module('config', [])
.constant('Constants', {
 Car: 'BMW', 
 Phone: 'G4'
});
services = angular.module('services', ['config']);
controllers = angular.module('controllers', ['config', 'services']);
app = angular.module('myApp', ['config', 'controllers']);

I want to move the "config" module definition to a separate file as I'm expecting it to grow bigger.

Is it possible to move the below portion to a separate file:

config = angular.module('config', [])
.constant('Constants', {
 Car: 'BMW', 
 Phone: 'G4'
});

• Ramesh Rajendran: You can't change constant values....
• charlietfl: Can have numerous files..not clear what the exact problem is or what you are asking. Should however be grouping modules as features not components
• saravana_pc: I've edited the question for clarity.
• charlietfl: Is it possible ... shouldn't you just try it first? If you did what problems arose?
• saravana_pc: @charlietfl because we cannot "include" other files in javascript.

Answer 1

There is no problem with doing that.

You just need to make sure the config module will be loaded before the app module

Answer 2

You've chosen very bad structure for your angular app. Please check this url https://scotch.io/tutorials/angularjs-best-practices-directory-structure

And about your question. Instead of using caching variables just do next thing:

file0: angular.module('config',[]);
file1: angular.module('config').constant('Constants', {Car: 'BMW', Phone: 'G4'});
file2: angular.module('config').constant('Constants2', {Car: 'BMW', Phone: 'G4'});

• saravana_pc: I've not mentioned anything about my directory structure. It exactly matches the best practices.
• Joe Lloyd: We can see your structure from the way everything has been declared, vlad is tottaly correct imo. the link he provided is very good aswell.