Файловая структура приложения AngularJS
В большом приложении AngularJS, в котором все мои контроллеры находятся в одном файле "controllers.js", мне кажется, что это не поддается обслуживанию. Есть ли лучший способ сделать это, например:
\js\controllers\myController.js
\js\controllers\yourController.js
\js\controllers\ourController.js
и это также относится к фильтрам, услугам, директивам и т.д...
6 ответов
Есть много способов организовать ваш код. Вы можете посмотреть в следующих ссылках
- Создание приложений Huuuuuge с AngularJS
- Организация кода в больших приложениях AngularJS и JavaScript
- AngularJS Best Practices: Структура каталогов
Вы можете следовать их стандарту или можете сделать свой собственный.
Попробуйте следовать следующим правилам:
- Контроллеры не должны быть слишком длинными, если они слишком длинные, то они выполняют несколько обязанностей
- Попробуйте использовать Директивы и Сервисы в вашей системе, чтобы повторно использовать ваш код / логику
- Директивы - самые сильные вещи в Angualrjs, постарайтесь извлечь из этого максимум пользы.
- Написать тесты; еще лучше вы можете попробовать попрактиковаться в TDD с AngularJS
Вы можете управлять этим как модуль мудрый!!
Например, возьмите вид пользователя, вы делаете один каталог, здесь его имя - пользователь!!
user // directory , now put all controller ,service and directive file into it !!
-- userController.js // controller file
-- userService.js // service file
-- userDirective.js // directive file
-- views // make directory, and put all html file regarding that module into this
--users.html // html file
Надеюсь, что это поможет вам!!
Посмотрите, как эти два начальных проекта организовывают файлы для более крупного приложения:
Возможно, вы захотите взглянуть на это руководство для сообщества.
В руководстве описываются рекомендации по организации структуры каталогов большого приложения AngularJS.
Он также дает рекомендации по именованию и структурированию модулей, контроллеров, директив, фильтров и сервисов AngularJS.
Также стоит попробовать такой инструмент, как Lineman.js, с шаблоном приложения AngularJS.
Для корпоративных проектов AngularJS вы можете посмотреть на этот кикстартер, основанный на ng-шаблоне.
Есть хороший документ от собственной команды Google, который поддерживает пример Шивали: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
Что-то вроде этого:
sampleapp/
app.css
app.js top-level configuration, route def’ns for the app
app-controller.js
app-controller_test.js
components/
adminlogin/
adminlogin.css styles only used by this component
adminlogin.js optional file for module definition
adminlogin-directive.js
adminlogin-directive_test.js
private-export-filter/
private-export-filter.js
private-export-filter_test.js
userlogin/
somefilter.js
somefilter_test.js
userlogin.js
userlogin.css
userlogin.html
userlogin-directive.js
userlogin-directive_test.js
userlogin-service.js
userlogin-service_test.js
index.html
subsection1/
subsection1.js
subsection1-controller.js
subsection1-controller_test.js
subsection1_test.js
subsection1-1/
subsection1-1.css
subsection1-1.html
subsection1-1.js
subsection1-1-controller.js
subsection1-1-controller_test.js
subsection1-2/
subsection2/
subsection2.css
subsection2.html
subsection2.js
subsection2-controller.js
subsection2-controller_test.js
subsection3/
subsection3-1/
etc...
Проверьте это, создайте свое угловое приложение с CoffeeScript, SCSS.