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

Як ви компонуєте структуру папок для великої та масштабованої програми AngularJS?

Сортувати за типом

Ліворуч у нас додаток організовано за типом. Не надто погано для менших додатків, але навіть тут ви можете почати бачити, що стає складніше знайти те, що ви шукаєте. Коли я хочу знайти певний вигляд та його контролер, вони знаходяться в різних папках. Тут може бути непогано почати, якщо ви не знаєте, як ще впорядкувати код, оскільки досить просто перейти на техніку праворуч: структура за особливостями.

Сортувати за ознаками (бажано)

Праворуч проект організований за допомогою функції. Усі види макетів та контролери переходять у папку макета, вміст адміністратора йде у папку адміністратора, а служби, які використовуються у всіх областях, переходять у папку служб. Ідея тут полягає в тому, що коли ви шукаєте код, який робить функцію роботи, він знаходиться в одному місці. Послуги дещо відрізняються, оскільки «обслуговують» багато функцій. Мені це подобається, як тільки моя програма починає формуватися, оскільки мені стає набагато легше керувати.

Добре написана публікація в блозі: http://www.johnpapa.net/angular-growth-structure/

Приклад програми: https://github.com/angular-app/angular-app

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

Це найпопулярніша та поширена структура та найкраще підтримується.

І найголовніше, зберігаючи цю структуру, вона допомагає вам відокремити код клієнтської сторони та зробити його агностичним щодо технології на стороні сервера (всілякі різні структури папок та різні двигуни шаблонів на стороні сервера).

Таким чином ви зможете легко дублювати та використовувати повторно свій та інший код.

Ось це перед тим, як будувати грунт: (але використовуйте генератор yoman, не просто створюйте його!)

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

А після грунтової збірки (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 / Express, яка ілюструє це, що називається angular-app .

Я перебуваю в третьому додатку angularjs, і структура папок щоразу вдосконалювалася. Я моє просте зараз.

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

Я вважаю це добре для одиночних додатків. У мене ще не було проекту, де мені потрібно було б декілька.