Symfony and angularjs are two frameworks widely used on the web, also together.

Today we'll discuss how to solve problems when they are used together, ie when angularjs is 

used inside of the templating engine of symfony2, twig.

Both twig and angularjs use ` `to recall variables. 

So which are the possible solutions?

Twig behavior could be modified to use different symbols, but this is not a good idea, as you 

need to modify the base templates of the frameworks, the ones of form themes and installed 


You could also modify the behavior of angularjs at module stratup, using the service 


angular.module("myApp", []).config(function($interpolateProvider){

This solution is not advisable too.

The best solution is usage of verbatim tag, provided by twig:

{% verbatim %}
        { { variabileAngularjs } }
    {% endverbatim %}

As twig does not process text inside the verbatim tag, seeing it as raw text, angularjs can 

process such code.

Another element to be considered is assetic. If it is used for javascript file minification, you must 

pay attention to the definition of services to be injected in controllers.

As angluarjs injects services based upon names of variables passed to the constructor of 

controller, if such variables are renamed, the services will not be injected anymore.

The following definition has this problem: 

function myController($http, $scope) {
    	... code ...

To avoid it, you need to state the entire names of injected services:

myApp.controller("myController", [
	    "$http", "$scope", function($http, $scope) {
    	... code ...

So the minification will be OK and services will be injected properly.

Happy coding!

Alessandro Nuzzo

Senior Web Developer , Website , Git home page , @aleinside , Linkedin profile
I am a developer since 2006. I am a basket and whisky lover, interests that i follow separately for obvious reasons. I am also the Milan PHP User Group founder and coordinator.

All articles by Alessandro Nuzzo


comments powered by Disqus


Follow Us