Как связать AnularJs Route и Symfony Routing?

Question

[Quber]

Есть адрес страницы: test.ru/post/153245
Загрузка страницы по маршруту angular

$routeProvider.when("/post/153245", {
            templateUrl: "/post/153245",
            controller: 'MainController',
            controllerAs: 'main'
        });

Всё работает. Но что если пользователь попадает на сайт напрямую по этому адресу? Загрузится шаблон и потом загрузит его angular второй раз. Как этого избежать?

Маршрут симфони:

post:
    path: /post/{id}
    defaults: { _controller: AcmeCoreBundle:Post:index }

Шаблон twig

{% extends '::layoute.html.twig' %}

{% block content %}
    MAIN
{% endblock %}

Comments

[Sergey Romanov]

Зачем вообще роутинк в симфонии. Ангуляр это SPA. Вам не нужен роутинг в симфонии вообще. Ангуляр сам загрузит все что надо.

[Quber]

@Serhioromano Я так полагаю, что роутинг нужен для того, чтобы ангуляр загружал с него шаблоны html, которые генерируется в twig. Или есть какой то другой вариант получения сгенерированных Twig шаблонов?

[Sergey Romanov]

Какой в этом смысл? Если шаблон генерится на сервере, то просто его покажите и все. Зачем огород городить? Это не то для чего Англяр был спроетирован. Ни кто не планировал такого сценария, по этому такой подход можно назвать "через зад". Агуляр был спроектирован как раз для того что бы генерить шаблоны. А сервер должен только данные оправлять.

Если вы используете это не так, то вы просто используете стиральную машнику, что бы печь пирожки.

[Quber]

@Serhioromano понятно. На самом деле я хотел динамически подгружать уже сгенерированные на сервере body. Получается шаблон, каркас один, а body постоянно менялось бы в зависимости от URL. Я думал angular такие задачи решает, поэтому хотел использовать его.
Буду тогда генерировать шаблон на стороне клиента.

[Quber]

"Если шаблон генерится на сервере, то просто его покажите и все."

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

[Sergey Romanov]

@Quber Так и есть. Ангуляр такие задачи и решает. Но не просто генерить шаблоны надо для него. Шаблон должен быть статичный и просто указать путь к файлу. А вот с сервера просто получить данные в JSON и шаблон уже динамически будет менятся в браузере. В этом идя Ангуляр.

[Quber]

@Serhioromano @Fesor а есть ли смысл обрабатывать запрос перед выдачей шаблона ангуляру? или напрямую грузить html файл?
Ну например, для того чтобы проверить права пользователя на запрашиваемый шаблон. Или лучше проверять права когда будет запрашиваться json?

[Sergey Romanov]

@Quber обычно так и делают. Получают данные. Если ошибка то показвают ошибку. А ошибка может быть такая что вы не авторизованы просматривать эти данные.

[Quber]

@Serhioromano понял

Answer 1

[agladkov]

Несмотря на то, что в первом вопросе всё решили, оставлю своё решение первоначального вопроса.

Во-первых, мы просим ангуляр при запросах на сервер отправлять заголовок 'X-Requested-With':

$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Соответственно теперь на серверной стороне мы всегда знаем это первичная загрузка шаблона, либо запрос от ангуляра:
if ($request->isXmlHttpRequest())
Если первичная загрузка, то отдаем базовый шаблон, например '::layoute.html.twig', в котором область под шаблон конкретной страницы обернута в ngView.
Если запрос от ангуляра, то обрабатываем запрос и отдаем подготовленный шаблон для втсавки в ngView.

Мы делаем так, потому что мы генерим шаблон на основании прав пользователя.
Данные для шаблона отдаем через ngInit.

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

Comments

[Quber]

Интересно. Большое спасибо.
Пытался самостоятельно связать данную конструкцию ($request->isXmlHttpRequest()) с ангуляром, но ничего не вышло. Попробую как вы описали.
Интересно как это будет работать с формами, еще не пробовал. Думаю ничего сложного.

[agladkov]

Ангуляр по-умолчанию не шлет заголовок "X-Requested-With", поэтому в конфиге и надо его об этом просить.

Answer 2

[apasen]

Однажды у меня уже была такая идея, но после долгих размышлений на эту тему я понял, что этого не стоит делать вообще. А лучше разделить бекенд от фронтенда. Создавайте REST приложение. Т.е. фронтент это отдельное приложение на angular со своим роутингом, а бекенд, в данном случае написанный на symfony, реализация API. Но уже если будет крайняя необходимость использовать роут symfony в angualr есть FOSjsRoutingBundle

Comments

[Quber]

@apasen я правильно понял, что нужно отказаться от twig шаблонов как таковых и использовать простые html?

[apasen]

А за чем они если есть angular шаблоны

[Сергей Протько]

@apasen маленькое но, тогда надо отказаться от html5mode и всеравно на сервере надо будет все дублировать для поисковиков. Либо разворачивать phantomjs для генерации page fragments.

[Сергей Протько]

@apasen fostjsrouting не поможет толком...

[Сергей Протько]

@apasen это надо придумывать свои извращения

[Quber]

@Fesor почему прийдётся отказаться от html5mode?
Для моего приложения не нужно дублирование для поисковиков.

[apasen]

@Fesor Fos на тот случай если тебе нужно из ангуляра сделать ссылку на страницу отрендеренную симфони

[apasen]

@Fesor На счет хтмл5 согласен, но не понятно за чем дублировать?

[Quber]

@apasen возможно вы правы. просто не укладывается в голове, что прийдётся отказаться от серверного шаблонизатора.

[Сергей Протько]

@Quber если поисковики не нужны то тогда у вас развязаны руки и вы можете делать как захотите и не дублировать ничего на сервере.

@apasen а, ну да, в этом случае поможет. Но именно совместить маршрутизацию врят-ли.

[Quber]

@Fesor почему прийдётся отказаться от html5mode?

[Сергей Протько]

@Quber если отказываться от дублирования маршрутизации на сервере, то придется переделывать все под page fragments. А это через хэштаг. Но это если нам нужно что бы контент индексировался. В противном случае пофигу.

[Quber]

@Fesor понял, принял! Спасибо!