AngularJS: Правильная структура папок веб-сайта который реализует нескольких задач?

Question

[Sergey]

Есть несколько задач, задачи разные, например:
- планирование отпусков;
- организационная структура предприятия;
- регистрация персонала;
Понятно что в подзадачах много общего: элементы интерфейса, функционал, верно и обратное. Как лучше отделить общую функциональность от индивидуальной?

Вот случай, как мне кажется для одной задачи, а если две, три

app/                
  css/
    app.css
  img/
  index.html
  index-async.html
  js/
    app.js
    controllers.js
    directives.js
    filters.js
    services.js
  lib/
    angular/
      angular.js
      angular.min.js
      angular-*.js
      version.txt
  partials/
    partial1.html
    partial2.html

Answer 1

[Mikhail Osher]

Я зачастую использую такую структуру, только перед релизом собираю js приложения через минификатор
uglifyjs -c -m
(важно собирать по порядку)

Декларации пишу так:

!(function() {
    'use strict';

    Ctrl.$inject = ['$scope', 'Auth'];
    function Ctrl($scope, Auth) {
        // some code...
    }

    angular.module('MyModule').controller('MyCtrl', Ctrl);
})();

Собственно, сама структура:

app/
  controllers/
    auth.js
  directives/
    inputmatch.js
    emailbusy.js
  models/
    auth.js
    user.js
  views/
    front.html
    auth/
      signup.html
      signin.html
  app.js
  states.js
js/
  angular.js
  angular-ui-router.js
  angular-resource.js

Answer 2

[Сергей Протько]

Пример приведенный вами годится только для приложения, состоящего из одного модуля. Вообще в докуметации указаны рекомендации по структуре проекта.

Разделите функционал на модули. Общие сервисы вынесите в отдельный модуль. Модуль приложения должен подключить ваши модули и возможно добавить какие-то свои настройки (например .otherwise для маршрутизации) и задать начальное состояние в .run.

Хороший пример организации проекта - ngBoilerplate. Хотя он может показаться слегка монструозным. Я к примеру использую свой вариант со схожей структурой.

Answer 3

[maxaon]

Разделение на общие компоненты и модули со своей структурой (шаблон, контроллер), как в ngBoilerplate является ниболее опттимальным вариантом.