В блогосфере есть ряд статей на тему руководств по структурированию приложений 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
источник
Ответы:
Вот дизайн, с которым я работаю. Я нашел это полезным в двух больших проектах, которые я построил, и до сих пор не сталкивался с какими-либо препятствиями.
Структура папок
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.Начните с сервисов и директив в приложении, где они используются. Как только вам понадобится что-то в другом приложении, выполните рефакторинг в библиотеку. Старайтесь создавать функционально согласованные библиотеки, а не только библиотеки всех директив или всех служб.
активы
Я минимизирую как файлы JS, так и CSS для выпускаемых сборок, но работаю с незавершенными файлами во время разработки. Вот установка, которая поддерживает это:
global.html
. Таким образом, тяжелые вещи могут быть загружены из кэша при навигации между SPA. Убедитесь, что кэширование работает надлежащим образом.index.html
. Это должно включать только файлы, относящиеся к приложению, а также используемые библиотеки.Приведенная выше структура папок позволяет легко найти нужные файлы для этапов сборки минификации.
источник
Одностраничные приложения (SPA) на самом деле не предназначены для использования так, как вы предлагаете, с действительно большим приложением и несколькими мини-SPA в основном. Самой большой проблемой будет время загрузки страницы, так как все должно быть загружено заранее.
Одним из способов решения этой проблемы является использование навигационной страницы, которая приведет вас к отдельным SPA. Страница навигации будет достаточно легкой, и тогда вы будете загружать только один SPA за один раз в зависимости от того, что было выбрано. Вы можете предоставить панель ссылок с навигационными ссылками в каждом из ваших SPA, чтобы пользователям не всегда приходилось возвращаться на страницу навигации, когда им нужно перейти в другую область.
Использование этого подхода может создать некоторые проблемы с сохранением информации через SPA. Но мы говорим о том, что SPA не собирались делать. Существуют некоторые структуры, которые могут помочь с сохранением данных на стороне клиента. Бриз - первое, что приходит на ум, но есть и другие.
Что касается макета - несколько вопросов для программистов касаются макета большого проекта, в зависимости от ваших конкретных потребностей. Я сталкивался с этим и этим . В SPA нет ничего волшебного, что могло бы повлиять на макет вашего приложения, кроме того, что уже было дано в ответах на эти вопросы.
Тем не менее, существуют разные подходы, которые лучше всего подходят для разных проектов. Я бы порекомендовал придерживаться базовой компоновки, как это предусмотрено проектом угловых семян. Создайте отдельные папки из предоставленных для ваших пользовательских пакетов и исходного кода. А в вашей исходной папке используйте макет проекта, который имеет смысл для ваших нужд.
источник
Если вашему приложению требуется несколько объявлений ng-app на одной странице, вам нужно вручную загрузить модуль AngularJS, введя имя модуля, как показано ниже:
Этот плункер рассказывает о том, как мы могли бы вручную загрузить AngularJS.
источник