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

186

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

Майкл Дж. Калкинс
источник
Предложение github.com/jofftiquez/angular-app-starter-pack
CENT1PEDE

Ответы:

251

введите описание изображения здесь

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

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

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

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

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

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

Майкл Дж. Калкинс
источник
22
Вы отвечаете на свой вопрос сразу после публикации?
Якуб
34
@Jakub При создании вопроса есть опция «ответить на свой вопрос, способствующий вики».
Майкл Дж. Калкинс
3
@MichaelCalkins, мне нравится идея. Я только что проверил некоторые из твоих роликов на youtube на угловой, хорошо
Ронни
5
@Ronnie Я просто помню, что это был один из самых сложных этапов обучения AngularJS, так что, надеюсь, он поможет людям. Я думаю, что я прошел через 10 различных макетов после чтения блогов, а что нет.
Майкл Дж. Калкинс
5
Вот страница с рекомендациями сообщества angularJS. Их структура файла представляет собой сочетание обеих ваших идей в двух примерах. Мне больше нравится второй пример, так как он больше стоит за идеей сортировки по признакам.
Джон
32

После создания нескольких приложений, некоторых в 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)
Urigo
источник
1
где должна быть конфигурация блока маршрутов кода? angular.module('myApp').config(function($routeProvider) { ... });
спортивные состязания
1
+1 Кроме того, вы можете настроить, где йомен помещает ваши вещи. ИМХО, сортировка по функциям / модулям в больших приложениях лучше, так как вы можете легче использовать функцию в других приложениях.
Тиви
30

Мне нравится эта запись о структуре 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
    └── ...
Крис
источник
1
Вопрос касается структуры папок, и хотя ссылка интересна в других отношениях, она не приносит ничего нового в таблицу по этому вопросу.
JohnC
Используется
йоменским
Итак, вы организовали папку по типу скриптов.
Тудор
4

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

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

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

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

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

Ронни
источник
У вас будут проблемы с поддержкой и внедрением новых функций позже. Рекомендуется всегда иметь структуру папок с элементами и компонентами, относящимися к этой функции, в своей папке.
Джасим Аббас
Правильно ли я считаю, что Angular JS не имеет стандартной структуры папок проекта или шаблона проекта, такого как веб-проект asp.net или настольное приложение Windows?
1
@dotNetBlackBelt, это правильно. Там нет стандарта, когда дело доходит до угловых. С момента публикации я внес изменения в порядок настройки своих папок. Мой последний проект, который я получил более или менее, как лучший ответ этого ОП
Ронни