In my AngularJS application, I have various controllers, services, and directives spread across multiple JavaScript files. While in reality there are more than just three of them, let's consider them as controller.js, service.js, and directive.js. To reduce HTTP requests, I decided to combine all these files into one, which I'll refer to as app.js. Therefore, the structure of my index.html now looks like this:
<html lang="en">
<body>
<div data-ng-view></div>
<script src="app.js"></script>
</body>
</html>
However, during development, I prefer debugging individual files rather than the combined one. So, by modifying the index.html accordingly, I can achieve this setup:
<html lang="en">
<body>
<div data-ng-view></div>
<script src="controller.js"></script>
<script src="service.js"></script>
<script src="directive.js"></script>
</body>
</html>
The challenge here is that I don't want to make changes directly to index.html. Is there a way to introduce something like:
require('controller.js');
require('service.js');
require('directive.js');
inside my app.js? After some research, I found that it's possible to use AngularJS and RequireJS together for this purpose. However, adopting this solution would require me to redefine my controllers and services following the RequireJS format, which seems quite cumbersome. Moreover, dynamic loading is unnecessary since only one JavaScript file needs to be downloaded in the production environment.