Using Twig and AngularJS in the Same Template

Using Twig and Angular together causes problems with the rendering of variables. The variable definitions are the same in both languages, using a pair of curly braces {{ }} to define the variables to render.

When defining a variable with Angular, Twig will try and render that variable when the page is loading. This is bad, if you are not passing variables of the same name through to Twig and Angular.

So how to render these? I have two options. The first configure Angular, and the second nests Twig tags to display variables on the site.

Update Angular to Use Different Braces

Update Angular to use a different set of braces is straight forward. It is, by way of code, stating that the server-side template is the primary rendering device and that Angular is the secondary renderer.

Rendering Braces Differently In Twig

A second option is to render the braces inside Twig Braces. This eliminates the Angular configuration in the previous example, and allows direct display of the variables.

When learning development languages I apply an additional layer to what I know, in an effort to develop with speed and also build upon my knowledge. This was a simple solution so I could keep forward motion with understanding AngularJS.