Готовая к производству структура Angular проекта

Готовая к производству структура Angular проекта

Сегодня мы рассмотрим различные подходы к семенным проектам и выберем лучшие из них, чтобы создать готовую к работе продвинутую исходную структуру проекта AngularJS.

Любой профессиональный разработчик AngularJS, прежде чем погрузиться в код, должен сначала подумать об основах приложения. Исходная структура проекта может быть неактуальной вначале, но после пары десятков коммитов плохие решения в этом вопросе ударит вам по голове. Это окажет большое влияние на модульность, возможность повторного использования и ясность проекта.

Сегодня мы рассмотрим различные подходы к структуре проекта.

Семенные проекты очень удобны, когда вы только начинаете, и могут оказаться полезными, когда вы просто возьмете те части, которые вам нужны, и откажетесь от остальных.

Угловой семенной проект

Angular seed project Вероятно, это ресурс, который вы нашли после поиска правильной структуры папок и каркаса проекта для приложения AngularJS. Со всеми комментариями он полезен для изучения, поэтому давайте взглянем на структуру папок:

app/ → all of the source files for the application
 |- app.css → default stylesheet
 |- components/ → all app specific modules
 |- version/ → version related components
 | |- version.js → version module declaration and basic “version” value service
 | |- version_test.js → “version” value service tests
 | |- version-directive.js → custom directive that returns the current app version
 | |- version-directive_test.js → version directive tests
 | |- interpolate-filter.js → custom interpolation filter
 | |- interpolate-filter_test.js → interpolate filter tests
 |- view1/ → the view1 view template and logic
 | |- view1.html → the partial template
 | |- view1.js → the controller logic
 | |- view1_test.js → tests of the controller
 |- view2/ → the view2 view template and logic
 | |- view2.html → the partial template
 | |- view2.js → the controller logic
 | |- view2_test.js → tests of the controller
 |- app.js → main application module
 |- index.html → app layout file (the main html template file of the app)
 |- index-async.html → just like index.html, but loads js files asynchronously

Плюсы:
+ простота для понимания
+ спецификации тестов размещены рядом с протестированными функциями.

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

НГПБ

Создатели ngBoilerplate утверждают, что он разработан, чтобы облегчить вашу жизнь, предоставляя базовый фреймворк для запуска проектов AngularJS.

 |- src/
 | |- app/
 | | |- ... → app logic
 | |- assets/
 | | |- ... → static files
 | |- common/
 | | |- ... → reusable code>
 | |- less/
 | | |- main.less
 |- vendor/
 | |- angular-bootstrap/
 | |- bootstrap/
 | |- placeholders/

Помимо структуры каталогов приложения в него входят:
- Twitter Bootstrap,
- Angular UI,
- Angular Bootstrap,
- Font Awesome, < br /> - МЕНЬШЕ,
- Хрюкать

Если это стек, который вы собираетесь использовать в своем следующем проекте, то чем Bingo! Все, что вам нужно сделать, это клонировать репо и начать кодирование!

Плюсы:
+ чистая структура каталогов с местами для сторонних библиотек, файлов препроцессора, статических файлов
+ четкое разделение компонентов, специфичных для приложения, и общих компонентов, используемых в нескольких проектах
+ перепакован со всеми необходимыми блоками для начала кодирования

Минусы:
- если вы хотите использовать другую технологию настройки, вы ожидаете много изменений.

Функциональное разделение - своими руками

Если вам нужно больше контроля над настройкой. Допустим, вы хотели бы использовать Gulp и Front-end framework и у вас есть немного времени, чтобы настроить все самостоятельно, вот решение, которое работает для меня:

 |- src/
 | |- app/
 | | |- simplePage → simple page component with it's own routing
 | | | |- controllers/
 | | | | |- simplePage.ctrl.js
 | | | |- directives/
 | | | | |- simpleDirective.js
 | | | |- less/
 | | | | |- simplePage.less
 | | | |- views/
 | | | | |- simplePage.html
 | | | |- simplePage.mdl.js → module declaration and routing definition
 | | | |- simplePage.spec.js
 | | |- advancedPage
 | | | |- headerPanel/
 | | | | |- controllers/
 | | | | | |- headerPanel.ctrl.js
 | | | | | |- mainForm.ctrl.js
 | | | | |- directives/
 | | | | | |- headerPanel.js
 | | | | | |- editForm.js
 | | | | |- less/
 | | | | | |- headerPanel.less
 | | | | |- resources/
 | | | | | |- httpHeader.js
 | | | | |- services/
 | | | | | |- headerTabs.js
 | | | | |- views/
 | | | | | |- headerPanel.html
 | | | | | |- editForm.html
 | | | | |- headerPage.mdl.js → module declaration and routing definition
 | | | | |- headerPage.spec.js → module declaration and routing definition
 | | | |- advancedPage.mdl.js → module declaration and routing definition
 | |- assets/
 | | |- ... → static files
 | |- common/
 | | |- ... → reusable components attached using git modules
 | |- less/
 | | |- main.less → includes all .less files from the src and common folders
 | | |- variable.less → contains all variables global to the project
 |- vendor/
 | |- ... → 3rd party libs included by bower

Плюсы:
+ четкое разделение понятий на основе фактической функциональности по сравнению с некоторым искусственным разделением
+ хорошая инкапсуляция функциональности со всеми необходимыми файлами, спецификациями, стилями и логикой в одном каталоге, действующем как контейнер компонентов
+ простое определение маршрутизации в файлах модуля (.mdl.js) на основе отличного ui-router
+ файлы спецификации, расположенные близко к фактической реализации

Минусы:
- Сделай сам.

Вы видите другие плюсы или минусы? Или, может быть, у вас есть вопросы по структуре проекта? Дай мне знать в комментариях.

Нужны профессиональные консультации по AngularJS? Напишите мне.