Using Symfony and AngularJS in one project you will be soon facing particularry problems.
In this article we especially want to relate on the most basic but common problems, which could be solved quite fast.

Angular expressions colliding with TWIG

For accessing data AngularJS is using a two-way databinding in double braces.

1
2
<input type="text" ng-model="user.name" />
Hello {{user.name}}!

If we now try this example inside a Symfony project, Symfony will try to parse {{user.name}} using TWIG-Engine and will result in an error.
To face this problem and to get a comfortable solution we are using the ability of Symfony to parse strings. So we interlace our AngularJS syntax in another pair of double braces and put it into some single-quotes. Now TWIG is parsing our code like it would be a simple String:

1
2
<input type="text" ng-model="user.name" />
Hello {{'{{user.name}}'}}!

Now our AngularJS example works like expected without any error.

Hide AngularJS content on page load

During loading the site it could sometimes happen, that you see content that should be hidden by your controller for quite a second. The reason for this problem is that at this moment Angular is not influencing the DOM. It only starts after the complete loading proccess on client-side. With this problem it could be a problem that users see contents which they should not.
With a simple trick you could avoid this problem!

With the directive ngCloak Angular templates are hidden until the page and also AngularJS is completely loaded.
Trying this you could avoid the creepy flikkering-effect on your site. In this example you could see the usage as a class or an attribute:

1
2
<div id="Message1" ng-cloak>Message 1: attribute</div>
<div id="Message2" class="ng-cloak">Message 2: class</div>

Ads: