Структура папки AngularJS [закрыто]

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

Сортировать по типу

Слева у нас есть приложение, организованное по типу. Не так уж плохо для небольших приложений, но даже здесь вы можете начать видеть, что становится все труднее найти то, что вы ищете. Когда я хочу найти конкретный вид и его контроллер, они находятся в разных папках. Было бы неплохо начать здесь, если вы не уверены, как еще организовать код, поскольку довольно легко перейти к методике справа: структура за функцией.

Сортировать по функции (предпочтительно)

Справа проект организован по функциям. Все виды макетов и контроллеры находятся в папке макетов, содержимое администратора - в папке администратора, а службы, используемые всеми областями, - в папке служб. Идея заключается в том, что когда вы ищете код, который заставляет функцию работать, она находится в одном месте. Услуги немного отличаются, поскольку они «обслуживают» многие функции. Мне нравится это, как только мое приложение начинает обретать форму, поскольку им становится намного легче управлять.

Хорошо написанное сообщение в блоге: http://www.johnpapa.net/angular-growth-structure/

Пример приложения: https://github.com/angular-app/angular-app

После создания нескольких приложений, некоторых в Symfony-PHP, некоторых .NET MVC, некоторых ROR, я обнаружил, что лучший способ для меня - использовать Yeoman.io с генератором AngularJS.

Это самая популярная и распространенная структура.

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

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

Вот это до grunt build: (но используйте генератор yeoman, не просто создавайте его!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

И после grunt build (concat, uglify, rev и т.д ...):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Мне нравится эта запись о структуре angularjs

Он написан одним из разработчиков angularjs, поэтому должен дать вам хорошее представление

Вот выдержка:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

Существует также подход организации папок не по структуре фреймворка, а по структуре функции приложения. Есть приложение github для запуска Angular / Express, которое иллюстрирует это приложение angular-app .

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

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

Я считаю, что это хорошо для отдельных приложений. У меня еще не было проекта, в котором мне нужно было бы многократное использование.