Структура папки AngularJS

Ответ 1

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

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

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

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

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

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

Ответ 2

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

Это самая популярная и распространенная структура и лучше всего поддерживается.

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

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

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

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

И после сборки grunt (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)

Ответ 3

Мне нравится эта запись о структуре 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
    └── ...

Ответ 4

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

Ответ 5

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

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

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