How to avoid including JS files in index.html in Angular?

Question

JavaScript

If you follow the tutorials on Angular, then even the simplest application on it already "hammers" index.html with lines like this:

<!-- library scripts -->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="lib/angular-loading-bar/build/loading-bar.min.js"></script>

<!-- app scripts -->
<script src="app/app.js"></script>

<!-- services -->
<script src="app/components/auth/AuthService.js"></script>

<!-- controllers -->
<script src="app/components/home/HomeController.js"></script>
<script src="app/components/auth/LoginController.js"></script>
<script src="app/components/navigation/NavigationController.js"></script>

But here it’s just authorization, the main page and the navigation menu. And that's it. And that's it, Carl!
Now, to add a new module (for example, "Personal Account"), you will need to complete the following quest:

1. Edit app.js so Angular picks up the new module
   
2. Edit index.html listing all files (controllers, services, etc.) used by the module
   

I'm even afraid to imagine what will happen with the growth of the application, and just try to forget to include some of the files later.
Actually, the main question is:
How to make sure that enabling / disabling a module is only achieved in the same app.js? Or did you have to add at most one line in index.html (for example, "modules/module1/main.js"), which would pick up all the controllers and so on (ideally, of course, scattered across different files)?
Right now I see only two solutions:

1. Use RequireJS . It allows you to achieve the desired effect when only JS files are edited, but it seems to me that describing module dependencies in both Angular and RequireJS is somehow redundant or something. And in general, should Angular have its own native solutions?
   
2. Do assembly in one JS file . It seems like an obvious solution, but not very convenient for development.
   

Hence I'm curious, how do experienced developers solve the problem of modular development? Maybe there are more obvious solutions that I don't see?

Answer 1

На нормальном проекте должна быть инфраструктура с галпом/вебпаком. Если вам самим лень в таком копаться, погуглите готовые генераторы yeoman с angular+webpack/gulp. Жизнь сразу станет проще и веселее.