How to integrate Angular with Symfony

Question

So I've been tasked to build an API and a frontend for a project. The only real requirement that I've been given is that I have to use PHP to build the API.

I developed in raw PHP once, and it was a small two month personal project, and it was seven years ago. So I looked at the frameworks available and went ahead with Symfony.

On the front end I was hoping to move ahead with Angular.

I've got the API mostly built out, but my problem now is serving the angular files inside of the Symfony process. It seems that for every path I need I'll need to write an action in the controller for that route, which I'm for the most part ok with. But the big problem that I just ran into is that it's always assuming I want Twig as my engine. So I'm not able to use the braces that Angular uses.

Is this at all possible or have I gotten myself tied in to this incorrectly?

EDIT: For now I'm going to move ahead with wrapping my angular in the verbatim tag

{% verbatim %}
  {{ angular code }}
{% endverbatim %}

Answer 1

You said :

It seems that for every path I need I'll need to write an action in the controller for that route

but angular2 is used for Single Page Application (SPA), so you need only one page to serve it: 1 route > 1 action > 1 twig template.

For this template, you can change the start and end interpolation tags: https://docs.angularjs.org/api/ng/provider/$interpolateProvider

Or use verbatim twig keyword to let interpolate characters for angular: http://twig.sensiolabs.org/doc/tags/verbatim.html

But for your angular2 templates, you don't have to use twig, no need to mix two templating languages. Your API gives data to angular which reflects it inside templates.

And an other good practice is to precompile all your angular templates inside $templateCache using things like that: https://www.npmjs.com/package/gulp-ng-template

Answer 2

i have also worked in symfony and angular2

how do i started

don't merge two projects as we can do it for angular 1.4 version.

as angular2 is frontend and it support cli .

symfony is backend so try to use as service

i would suggest you should use symfony2 as service

where you can you do add/edit/delete and create frontend routing.

i have made demo angular2 with symfony2

Github url

https://github.com/afeef1915/Angular2

if finally you

integrate angular2 with symfony then would have face routing problem as symfony2 would not understand angular2 routing.

and twig syntax much similar to angular component.html files

Answer 3

I would prefer to develop the frontend and API independently. That would be the point of an API for me.

It seems that for every path I need I'll need to write an action in the controller for that route, which I'm for the most part ok with.

-> really worse.

For the twig angular syntax conflict, you can change the start and end interpolation tags using interpolateProvider service:

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

see the docs.

Answer 4

We are moving the UI of a large Symfony app to Angular as well, and have decided to use API Platform (https://api-platform.com/). Previously, we used FOSRestBundle, but are dropping that for this new version.

So far we've been pleased with this approach.

You asked about serving Angular files from within Symfony. We opted to keep them in a separate repo, so they could even be deployed on a different server. That would be my recommendation, although of course you could put the Angular files in the /web directory. Doing that, though, complicates deployment.