AngularJS: структурирование веб-приложения с помощью нескольких ng-приложений

В блогосфере есть ряд статей на тему руководств по структурированию приложений AngularJS, таких как эти (и другие):

• http://www.johnpapa.net/angular-app-structuring-guidelines/
• http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
• http://danorlando.com/angularjs-architecture-understanding-modules/
• http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html

Тем не менее, один сценарий, с которым мне еще предстоит столкнуться с рекомендациями и рекомендациями, - это случай, когда у вас есть большое веб-приложение, содержащее несколько приложений «мини-спа», и все приложения мини-спа имеют определенный объем кода.

Я не говорю о том, чтобы пытаться разместить несколько ng-appобъявлений на одной странице; скорее, я имею в виду различные разделы большого сайта, которые имеют свое собственное, уникальное ng-appобъявление.

Как пишет Скотт Аллен в своем блоге OdeToCode :

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

Есть ли какие-либо рекомендуемые подходы, подводные камни, которых следует избегать, или хорошие примеры структур этого сценария, на которые вы можете указать?

Обновление - 9/10/2015
Один проект с интересной организационной стратегией - MEAN.JS и его папка модулей.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Другой пример взят из примера ASP.NET Music Store SPA. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

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

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

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

• Сконфигурируйте веб-среду вашего сервера, чтобы находить, apps/app1/index.htmlкогда /app1поступает запрос . Используйте удобные URL-адреса (например, the-first-application/вместо того, чтобы app1/сопоставлять их с использованием технологии вашего сервера, если это необходимо).
• Ваша серверная технология должна включать global.htmlв себя, index.htmlпотому что она включает в себя поставщиков (см. Ниже).
• Включите ресурсы, необходимые для соответствующего приложения в index.html(см. Ниже).
• Положите ng-appи корень <div ui-view></div>в index.html.
• Каждое приложение и библиотека - это отдельный угловой модуль.
• Каждое приложение получает <app-name>.module.jsфайл, содержащий определение углового модуля и список зависимостей.
• Каждое приложение получает <app-name>.jsфайл, который содержит блоки конфигурации и запуска модулей, а также конфигурацию маршрутизации как его часть.
• Каждое приложение получает partsпапку, содержащую контроллеры, представления, службы и директивы приложений в структуре, которая имеет смысл для конкретного приложения . Я не считаю подпапки, такие как controllers/и views/т. Д. Полезными, потому что они не масштабируются, но YMMV.
• Libs следуют той же структуре, что и приложения, но оставляют вещи, которые им не нужны (очевидно).

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

активы

Я минимизирую как файлы JS, так и CSS для выпускаемых сборок, но работаю с незавершенными файлами во время разработки. Вот установка, которая поддерживает это:

• Управление поставщиком включает в себя глобально в global.html. Таким образом, тяжелые вещи могут быть загружены из кэша при навигации между SPA. Убедитесь, что кэширование работает надлежащим образом.
• Активы Per-SPA определены в index.html. Это должно включать только файлы, относящиеся к приложению, а также используемые библиотеки.

Приведенная выше структура папок позволяет легко найти нужные файлы для этапов сборки минификации.

Одностраничные приложения (SPA) на самом деле не предназначены для использования так, как вы предлагаете, с действительно большим приложением и несколькими мини-SPA в основном. Самой большой проблемой будет время загрузки страницы, так как все должно быть загружено заранее.

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

Использование этого подхода может создать некоторые проблемы с сохранением информации через SPA. Но мы говорим о том, что SPA не собирались делать. Существуют некоторые структуры, которые могут помочь с сохранением данных на стороне клиента. Бриз - первое, что приходит на ум, но есть и другие.

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

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

Если вашему приложению требуется несколько объявлений ng-app на одной странице, вам нужно вручную загрузить модуль AngularJS, введя имя модуля, как показано ниже:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

Этот плункер рассказывает о том, как мы могли бы вручную загрузить AngularJS.