Symfony2 And Single Webpage Applications using a framework like AngularJS Symfony2 And Single Webpage Applications using a framework like AngularJS angularjs angularjs

Symfony2 And Single Webpage Applications using a framework like AngularJS


Some words about JSON, Serialization and Models

Simon, I faced exactly the same questions and problems. First like ken already mentioned. You don't need to rebuild any model. Better use FosRestBundle and/or JMS Serializer. It turns you entities with relations into JSON objects. This objects are transferred via api to your frontend and you can work with them just like in twig, when you use angular.js like this

{[{ user.username }]}

is as same as in twig. But remember that you have to set custom brackets for angular because by default it uses the same as twig.

Routing

You talk of a single page application, so symfony's routing is kept on a low level to have few page refresh. Instead you have to use routing of your frontend framework, because I am only familiar with angular.js, I give an angular example:

app.config(function($routeProvider, $interpolateProvider) {    //here you go, custom brackets    $interpolateProvider.startSymbol('{[{');    $interpolateProvider.endSymbol('}]}');    $routeProvider.when('/user', {        controller: UserController,         templateUrl: Routing.generate('suser_list')    }).when('/ticket', {        controller: TicketController,         templateUrl: Routing.generate('ticket_list')    });});

When you hit a link like

<a href="#/ticket">Go to tickets</a>

AngularJs will know which frontend controller to trigger. Pretty great stuff, without page reload. Also have a look at FosJSRoutingBundle. It allows you to generate symfony routes in javascript, I use them to link js controllers with html templates where data is pushed in.

FormTypes, Form handling, Validation

Well, when you use a frontend framework like angularjs, your symfony form types are pretty useless. But I am not sure. Remember data is pushed and pulled via api as json, I think this would be a hard job for form types to handle this kind of compexity.

For validation you can use angular's live validation or have you symfony's validation in the backend, no problem. It might be a good thing to use both, client and server side validation.

Twig

Twig is out of the race. All data is rendered on the client side, and not pre rendered on server side like with twig. But that is only the case if your application is really a single page application. Of course you can use twig, but it will only refresh if you reload the entire page.

Integration with Doctrine

You can still use doctrine in the backend. Do you have a specific question regarding doctrine and SPA?


You don't need to rebuild the model in client. I normally just create a service in angularjs that provides json data. Data manipulation still happens server side using ajax.

For forms that requires csrf, I normally just send the html rendered by twig via json. Or you can serialize $form->createView() with jms serializer. However you will need some client script to transform the json data to actual form controls.