Структура файла приложения AngularJS

В большом приложении AngularJS, имеющем все мои контроллеры в одном файле "controllers.js", кажется мне немного неудобным. Есть ли лучший способ сделать это, например:

\js\controllers\myController.js
\js\controllers\yourController.js
\js\controllers\ourController.js

и это также относится к фильтрам, службам, директивам и т.д.

Ответы

Ответ 1

Существует много способов организовать ваш код. Вы можете посмотреть в следующих ссылках

Вы можете следовать их стандарту, или вы можете сделать свой собственный.

Попробуйте выполнить следующие рекомендации:

  • Контоллеры не должны быть слишком длинными, если они слишком длинные, тогда они обрабатывают несколько обязанностей.
  • Попробуйте использовать директивы и службы в своей системе для повторного использования кода/логики
  • Директивы - самые сильные вещи в Angualrjs, постарайтесь максимально использовать их.
  • Записывать тесты; еще лучше вы можете попробовать практиковать TDD с помощью AngularJS

Ответ 2

Вы можете управлять им, как модуль мудрым!

Например, возьмите пользовательский вид, вы создадите один каталог, вот его имя - пользователь!

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

Надеюсь, это поможет вам!

Ответ 4

Возможно, вы захотите посмотреть это руководство, основанное на сообществах.

В руководстве описаны лучшие методы организации структуры каталогов большого приложения AngularJS.

Он также дает рекомендации по именованию и структурированию модулей, контроллеров, директив, фильтров и сервисов AngularJS.

Также стоит проверить инструмент, например Lineman.js с Шаблон приложения AngularJS.

Для корпоративных проектов AngularJS вы можете посмотреть этот kickstarter, который основан на ng-boilerplate.

Ответ 5

Там есть хороший документ из собственной команды Google, который поддерживает пример Shivali: 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...