Структура папок Symfony 3 и Angular 2
Я новичок как в Symfony, так и в Angular, и я пытаюсь выяснить, как части будут сочетаться друг с другом. Я хочу использовать Symfony для моего бэкенда и веб-API. Я хочу использовать Angular для внешнего вида рабочего стола.
Я не уверен, какой должна быть структура папок. Поместить ли я свои угловые файлы javascript / typcript в папки в корне проекта Symfony и использовать их структуру папок. Или у меня есть две связки в моей папке src. Один для бэк-энда / сайта. Еще один для переднего конца? Или на заднем торце должны быть представлены шаблоны веточек с вставленными угловыми компонентами?
***** Редактировать *****
@Tobias Xy Поправьте меня, если я ошибаюсь, но что будет создавать пакет в папке src и правильно ли сохранять файлы в папках ресурсов в нем?
Тогда я вижу следующее внизу:
Приложения на основе интерфейса
В последнее время такие технологии, как AngularJS, стали довольно привлекательными.
популярный для разработки веб-приложений, которые общаются с API.Если вы разрабатываете подобное приложение, вы должны использовать
инструменты, рекомендованные технологией, такие как Bower и
GruntJS. Вы должны разрабатывать свое веб-приложение отдельно от
ваш бэкэнд Symfony (даже если вы хотите разделить репозитории).
Таким образом, они говорят сделать два отдельных проекта и не использовать связку для внешнего интерфейса?
Если так, как вы принимаете это? На двух разных сайтах?
Решение
Symfony — это бэкэнд-фреймворк, поэтому нет смысла добавлять пакет, содержащий только файлы внешнего интерфейса (css, javascript и т. Д.).
Смотрите также Веб-ресурсы (лучшие практики Symfony)
Там говорят:
Храните свои активы в сети / каталог.
Обновление 23.03.2016
В комментариях Cerad пишет: «Клиентские приложения angularjs и реагировать на них имеют свою собственную систему сборки, как и Symfony».
Это на самом деле другая тема, но статья, на которую я ссылался выше, также говорит об этом:
В последнее время такие технологии веб-интерфейса, как AngularJS, стали довольно популярными для разработки веб-приложений, которые взаимодействуют с API.
Если вы разрабатываете подобное приложение, вам следует использовать инструменты, рекомендованные этой технологией, такие как Bower и GruntJS. Вы должны разрабатывать свое веб-приложение отдельно от вашего бэкэнда Symfony (даже если вы хотите разделить репозитории).
Другие решения
Для Angular 2 могут быть различия в системе сборки внешнего интерфейса, но структура должна быть аналогична той, которую я использую для Angular 1.x.
Структура папок, которую я использую, чтобы поместить свои внешние ресурсы в нечто, что мы могли бы описать как трехуровневый процесс. Давайте просто перечислим три уровня здесь:
Уровень 1 — src/AppBundle/Resources/Private папка
Внутри этой папки я размещаю любые внешние ресурсы, которые требуют какой-либо обработки, например, transile, autoprefix, uglify и т. Д. Это будет иметь место для большинства файлов JS, SCSS, LESS или HTML по вашему выбору. Вы можете определить структуру папок, которую вы предпочитаете.
Уровень 2 — The src/AppBundle/Resources/Public папка
Это будет папка, которая будет содержать все ресурсы после обработки И любые другие ресурсы, которые не нуждались в обработке, обычно изображения, шрифты и т. Д. Это будет структура папки, которая будет буквально скопирована в web / bundles / app папка на уровне 3.
Примечание: этот уровень действительно избыточен и может быть пропущен с осторожностью. В моем случае я сохранил это, чтобы избежать «несчастных случаев» с тем, как Symfony хочет установить ресурсы по умолчанию, который заменит ваш web/bundles/app папка с содержимым этого. Это будет иметь место, если вы используете любой другой пакет, который устанавливает ресурсы таким образом, как FOSJsRoutingBundle например.
Уровень 3 — The web/bundles/app папка
Это конечный публичный пункт назначения ваших ресурсов и путь, по которому вы будете ссылаться на них в своем коде. Это просто копия src/AppBundle/Resources/Public папка с уровня 2.
Система сборки
Вам понадобится система сборки внешнего интерфейса для переноса ваших файлов и копирования их в соответствующие папки на уровнях 2 и 3. В моем случае для Angular 1.x я использовал Gulp with Node. Это означает, что в вашем проекте есть файл gulpfile.js, файл package.json и папка node_modules. Мне было все равно, все работало нормально. Только не забудьте добавить папку node_modules в ваш репозиторий.
В производстве
Если по какой-то причине вам не нужно перестраивать продукт, вы можете пропустить папки уровня 1, уровня 2 и просмотреть связанные папки и файлы, такие как node_modules, gulpfile.js и т. Д.
Вы можете создать клиентскую сторону в качестве корневого документа, а серверную — в качестве местоположения псевдонима, но старайтесь не перезаписывать псевдоним.
Или вы можете изменить хост.
Пример 1:
[client] www.example.com/<client_root_dir>
[server] www.example.com/api/<server_root_dir>
или Пример 2:
[client] www.example.com/<client_root_dir>
[server] api.example.com/<server_root_dir>