Рекомендуемая масштабируемая структура проекта AngularJS?

Ответ 1

Вы можете взглянуть на демонстрационное приложение, которое Pawel Kozlowski и я собираем вместе: https://github.com/angular-app/angular-app.

Он не предоставляет поддержки для загрузки файлов по требованию, но вы можете видеть, что мы вставляем модули в отдельные файлы и настраиваем тестирование как компонент первого класса. У нас есть процесс сборки (с использованием Grunt), который объединяет (и минимизирует при выпуске) файлы js и может запускать тесты на уровне и конца до конца.

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

Это упрощает работу с функциональной областью, так как все соответствующие элементы находятся в одном месте.

Проект опирается на простой узел nodeServer для доставки файлов (поддерживающих глубокую привязку режима HTML5), а также для предоставления услуг аутентификации и авторизации.

Ответ 2

Я бы сказал, что все ваши очки можно легко достичь, по крайней мере, без каких-либо изменений в Angular.

• возможность разделить контроллеры, директивы, фильтры и т.д. в своих собственных файлах;

это можно сделать, конечно, с помощью базового Angular, так как вы можете добавить столько тэгов script с контроллерами/услугами, сколько хотите. Конечно, он не масштабируемый вообще, поэтому лучшим вариантом будет использование модулей AMD, таких как RequireJS. Это один из семян, которые имеют такую ​​конфигурацию: https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

• возможность загружать эти файлы по требованию, а не загружать все браузеры;

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

• может иметь общие, кросс-проектные компоненты (например, общие директивы, фильтры или службы).

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

Мне было интересно, будет ли идея создания проекта agularjs-lazy-seed хорошей идеей? Есть ли спрос на это? Мы могли бы даже принять его дальше и перенести конфигурации маршрутов за пределы обычной конфигурации, скажем, у вас есть файл views.json(в идеале - служба, которая отвечает json) с представлениями, которые вы хотите включить в ваше приложение:

{
    "views" : {
        ....
        "account" : {             
             "path" : "/account" // route path
             "name" : "Account", // view name
             "partial" : "views/account/account.html", // partial file
             "controller" : "account/main" // RequireJS module
             "directives" : [ "directives/version", "directives/menu" ] // directives used in the view
        }
        ....
    }
}

Таким образом вы могли:

• Разработайте представления в разделе разделения и создайте приложение, основанное на этом json bootstrap
• имеют некоторые общие директивы и компоненты
• при загрузке после входа в систему вы можете фильтровать представления, которые пользователь может видеть
• все внутри ngView будет загружаться по требованию

Конечно, ваше приложение должно быть действительно большим, так что выполнение всей этой дополнительной работы имело бы смысл;)

Ответ 3

Вы должны попробовать ng-шаблон. Самый перспективный шаблон кикстарта для более крупных проектов AngularJS: http://joshdmiller.github.io/ng-boilerplate/#/home

Ответ 4

Я согласен с теми моментами, о которых говорили другие люди; его очень легко разделить вещи на отдельные модули и модули зависят друг от друга с обычным материалом AngularJS. Затем ваш JS-код можно разделить на любые файлы и деревья каталогов, которые вы предпочитаете.

Просто подумал, что я упомянул, что мы делаем в проекте hawtio, который основан на AngularJS. Мы немного изменили модульность:) hawtio использует plugins, который можно обнаружить во время выполнения на запущенном сервере (например, развернуть и undeploy функции пользовательского интерфейса во время выполнения). Таким образом, на основе некоторого запроса REST или обнаружения JMX мы можем динамически и/или удалять плагины.

например. вот все наши текущие плагины по умолчанию

В плане компоновки каждый плагин имеет свои собственные каталоги для кода (js), html partials (html) и всего остального (например, каталогов css/img), что упрощает сохранение хороших и модульных вещей. например здесь верблюдный плагин, который имеет свои собственные html, js и img папки.

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

Мы до сих пор не встречали ужасно много полезных соглашений об именах для исходных файлов:). Мы находим, что писать файл на контроллер кажутся простейшими; но кроме файла fooPlugin.ts и файла helpers.ts(для общих вспомогательных функций, относящихся к конкретному модулю), мы пока не нашли никаких других содержательных соглашений об именах.

Ответ 5

Этот проект звучит многообещающе http://vesparny.github.io/ng-kickstart

Это позволяет вам разделить свою кодовую базу по функциям и сохранить код повторно, а также выполнять загрузку по вертикали благодаря специальной задаче Grunt для этого.

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

Ответ 6

Предупреждение: Бесстыдный штекер.

Вы должны обязательно проверить generator-angular-xl.

Он нацелен, в частности, на создание приложений AngularJS с крупным масштабом, логически группируя код, тестируя модульные системы и автоматически вставляя ваши js и css файлы в index.html и т.д. Он также помогает, создавая макет для ваших данных, что делает его хорошим выбором при разработке прототипов, которые также могут стать полноценными приложениями. Он не генерирует никакого внутреннего кода, поэтому вы можете свободно выбирать любую требуемую технологию.