Angularjs on a symfony2 application

Question

I\'m working on a SF2 application that uses a lot of javascript on the front end.

SF2 provides me a good way of building a nice REST app, manage my database with doc

Answer 1

Keeping the angular app separate is more advisable. Just use Symfony as an api for data retrieval/persistence and as security provider.

This would allow greater separation of view and the data layer. As a result you can start working on the frontend side without thinking yet of the backend implementation. You just need to mock the api calls.

Answer 2

In theory, you would have only your index page being rendered from symfony, so you don't have to use twig at all. you only need to render first page and then angular framework takes over. Angularjs has its own template syntax and capabilities. I don't think there is a need to mix those two, as you can completely separate both frameworks.Perhaps, make your server respond with file index.html (your angular app) on yourdomain.com, and everything from symfony comes from /api prefix, or something like that. Just imagine your WebApi project is one server and angularjs project on the other. they would only talk through api calls, no need to mix templates at all, in my opinion.

Answer 3

I have been facing a lot of issues myself trying to make Symfony and AngularJS work together. However while working on it I learned a few things which may help you:

1. To separate the AngularJS expressions {{ variable }} from twig curly braces you have three alternatives :

a). Use the quotes around the AngularJS expressions {{ '{{ variable }}' }}

b). Surround your AngularJS code with {% verbatim %} your code {% endverbatim %}

c). Use AngularJS interpolateProvider service

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

2. In the js file, twig can’t generate the URL for you. For this you can use "friendsofsymfony/jsrouting-bundle". After installing it you can use it as: $http.get(Routing.generate('route_name', {'id':id}));

This may not work for you for submission, why? One thing you should know about the $http.post is that it dosen’t send the data as “Form Data” but as “Request Payload”, which is the normal way to transmit data via HTTP POST. The problem is that this “normal way” is not equivalent to a form submission, which causes problem in interpreting data with the Symfony Request object.

use this instead:

$http.put(url, $.param({foo: 'bar'}), {
     headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 });

3. When you want to know if a request is an AJAX request within the controller, we usually use the isXMLHttpRequest() method. The problem is that Angular don’t identify its requests as an XMLHttpRequest requests. Use this:

   var app = angular.module('myModule', []); app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }]);

4. While creating forms you can choose to display the form through AngularJS and let Symfony Form to handle the request. For that you need to disable the CSRF protection:

   public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( 'data_class' => '...', 'csrf_protection' => false )); }

Now your symfony Form can receive data from a custom Angular request.

All the things aside, I am still not sure about one thing, whether to display your form using Symfony or AngularJS.

Hope this helps.