3

I need some help setting up an Angular application into a Symfony 3 webapp.

What I want to achieve is a bit tricky, and I don't even know if it is realizable.

I have a web application built on Symfony 3, that's pretty classic. But in one route of the app, I would like to run an angular app (inside the main template so I keep my header, menus, footer, etc...). I need this because the page at /configurator is very user-interactive, and I think it would be a lot easier to develop (and more user-friendly) with angular than doing stuff with jquery for example.

So every path ( /home , /route1 , etc...) & /configurator would work the Symfony way (symfony controllers rendering twig templates), but inside the /configurator twig template, the main content would be the angular app (with some json requests to the symfony app as a backend).

The template of the /configurator page would looks something like :

{% extends 'base.html.twig' %}

{% block content %}

<div class="row">
    <app-root>Loading...</app-root> 
</div>

{% endblock %}

I need some advice on how to setup & achieve that (is that possible ?) : how to setup angular with symfony (angular src in AppBundle/Resources ?)

Thanks for your help !

klu00
  • 317
  • 1
  • 3
  • 15
  • Are you having any problems already? The only possible problem that comes to my mind is [angularjs vs twig curly braces conflict](http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces) – Marcin Tarka Mar 23 '17 at 13:01
  • Thx for your help. I'm not certain about how to setup the template, how to load the js ? Should I develop the angular part directly inside a folder in /public (and then how to include it in the symfony template) ? – klu00 Mar 23 '17 at 13:13
  • 1
    I don't have any complete anwser for you, but this link http://stackoverflow.com/questions/26930327/symfony-include-static-html-in-template might be helpful. Try including index.html of your Angular project into desired twig template. It will give you nice separation between Symfony and Angular code. – Marcin Tarka Mar 23 '17 at 14:19
  • Thx for your help, I will try some code... – klu00 Mar 23 '17 at 14:40
  • you load the js by creating a block scripts and put it underneath content or in the header. or you just create a _partial.twig and include it – B. Dionys Mar 24 '17 at 09:12
  • Could you achieve this? Do you have any update? – Guillaume Renoult Oct 11 '17 at 06:31
  • I finally switched from Angular to Vue.js : Angular was too complex for what I really needed, and Vue.js much more simple : only 1 js file, loaded in the twig template via the twig "script" block. In the HTML, I only had to be carefull with curly braces, so when I needed some vue.js code, I put some {%verbatim%}{%endverbatim%} tags so Twig didn't interpret unwanted blocks of code. That's it ! – klu00 Oct 11 '17 at 16:03
  • React is also good and clean solution for this kind of problem. I added just one div with id to twig template and required js files. All other .js, .jsx files are outside in separate React project. –  Jan 27 '20 at 10:09

0 Answers0