Как в Angular уйти от включения JS-файлов в index.html?

Question

[neznaykink]

Если следовать туториалам по Angular, то даже самое простое приложение на нём уже "забивает" index.html примерно такими строками:

<!-- 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>

А ведь тут всего-то авторизация, главная страница и навигационное меню. И всё. И всё, Карл!

Теперь, чтобы добавить новый модуль (например, "Личный кабинет"), нужно будет проделать следующий квест:

1. Подредактировать app.js, чтобы Angular "подхватил" новый модуль
   
2. Подредактировать index.html, перечислив все файлы (контроллеры, сервисы и т. д.), используемые модулем
   

Боюсь даже представить, что будет с ростом приложения, и только попробуй потом забыть включить какой-то из файлов.

Собственно, основной вопрос:
Как сделать так, чтобы включение/отключение модуля достигалось только в том же app.js? Либо в index.html приходилось добавлять максимум одну строку (например, "modules/module1/main.js"), которая бы подхватывала все контроллеры и прочее (в идеале, конечно, разбросанных по разным файлам)?

Сейчас вижу только два решения:

1. Использовать RequireJS. Позволяет добиться желаемого эффекта, когда правятся только JS-файлы, но, как мне кажется, описывать зависимости модулей и в Angular, и в RequireJS как-то излишне что ли. Да и вообще, должны же быть в Angular свои родные решения?
   
2. Делать сборку в один JS-файл. Вроде очевидное решение, но для разработки не совсем удобное.
   

Отсюда и любопытствую, как решают проблему модульной разработки опытные разработчики? Может есть более очевидные решения, которых я не вижу?

Answer 1

[Nikolay Talanov]

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

Comments

[Евгений Куманин]

Как дополнение еще grunt
+1 за yeoman )))

[neznaykink]

Но ведь всё сводится к тому, что, в итоге, gulp и ему подобные решения собирают все JS-файлы в один? Либо, по желанию, настраиваются таким образом, чтобы каждый модуль собирался в отдельный файл, а уже эти файлы подключаются в index.html.

Собственно, 2-й пункт из того, что я предполагал. Хотя, учитывая, что есть source map-ы, ссылающиеся на исходные ts-файлы, то, думаю, проблем при отладке не возникнет

[Nikolay Talanov]

neznaykink: вариантов много. Я год назад пилил проект на ангуларе на основе одного из генераторов. Там весь жс объеденился в 2 файла (вендор и мейн) и весь html ангуларовских шаблонов забивался внутрь жса. В итоге билд версия работала как молния.

Answer 2

[Дмитрий Беляев]

https://www.google.ru/webhp?sourceid=chrome-instan...

Answer 3

[Алексей Ярков]

<!-- 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>

Вот это все в один файл конкатенируется и будет счастье

Comments

[neznaykink]

Я надеялся на то, что есть что-то вроде RequireJS "внутри" Angular-а, которое бы само "разруливало" все подключения. Видимо, буду собирать в один файл

Answer 4

[neznaykink]

В общем, видимо, буду собирать всё в один файл.

Не вижу особого смысла в использовании gulp и ему подобных, когда как в Visual Studio можно в файле tsdconfig.json задать параметр outFile.

Отсюда, включение/отключение модулей будет внутри app.js, без правки index.html и других файлов.