Структура папок Symfony 3 и Angular 2

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

Я не уверен, какой должна быть структура папок. Поместить ли я свои угловые файлы javascript / typcript в папки в корне проекта Symfony и использовать их структуру папок. Или у меня есть две связки в моей папке src. Один для бэк-энда / сайта. Еще один для переднего конца? Или на заднем торце должны быть представлены шаблоны веточек с вставленными угловыми компонентами?

***** Редактировать *****

@Tobias Xy Поправьте меня, если я ошибаюсь, но что будет создавать пакет в папке src и правильно ли сохранять файлы в папках ресурсов в нем?

Тогда я вижу следующее внизу:

Приложения на основе интерфейса

В последнее время такие технологии, как AngularJS, стали довольно привлекательными.
популярный для разработки веб-приложений, которые общаются с API.

Если вы разрабатываете подобное приложение, вы должны использовать
инструменты, рекомендованные технологией, такие как Bower и
GruntJS. Вы должны разрабатывать свое веб-приложение отдельно от
ваш бэкэнд Symfony (даже если вы хотите разделить репозитории).

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

Если так, как вы принимаете это? На двух разных сайтах?

1

Решение

Symfony — это бэкэнд-фреймворк, поэтому нет смысла добавлять пакет, содержащий только файлы внешнего интерфейса (css, javascript и т. Д.).

Смотрите также Веб-ресурсы (лучшие практики Symfony)

Там говорят:

Храните свои активы в сети / каталог.

Обновление 23.03.2016

В комментариях Cerad пишет: «Клиентские приложения angularjs и реагировать на них имеют свою собственную систему сборки, как и Symfony».
Это на самом деле другая тема, но статья, на которую я ссылался выше, также говорит об этом:

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

Если вы разрабатываете подобное приложение, вам следует использовать инструменты, рекомендованные этой технологией, такие как Bower и GruntJS. Вы должны разрабатывать свое веб-приложение отдельно от вашего бэкэнда Symfony (даже если вы хотите разделить репозитории).

7

Другие решения

Для 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 и т. Д.

2

Вы можете создать клиентскую сторону в качестве корневого документа, а серверную — в качестве местоположения псевдонима, но старайтесь не перезаписывать псевдоним.
Или вы можете изменить хост.

Пример 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>
0