Jul 21, 2015

How to use AngularJS in Latte templates

In default Latte uses “single” curly braces for its macros:

{$user->name}

and Angular “double” curly braces like this:

{{user.name}}

Unfortunately this will throw an error at Latte because everything right after first opening curly brace is considered to be a Latte macro. Of course, there isn’t any macro named {user.name}.

Luckily the solution is pretty simple. The only thing you need to keep in mind, is to put a space after opening curly braces. There is no need to change Latte syntax.

{{ user.name }}

This is how your Latte template can look like with Angular:

<div n:if="$user->hasTasks()" ng-controller="TasksController as tasks">
	<strong>{$user->getName()}: </strong> {{ "{{ tasks.items.length " }}}} tasks
</div>