From b162a91eebe3d7e69b7a99c1cde6e2006763c2df Mon Sep 17 00:00:00 2001
From: Fabien Potencier <fabien.potencier@gmail.com>
Date: Sat, 24 Sep 2016 09:15:34 -0700
Subject: [PATCH] added a recipe about how to use Twig and AngularJS together

---
 doc/recipes.rst | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/doc/recipes.rst b/doc/recipes.rst
index b035adb8b2..fd39550e11 100644
--- a/doc/recipes.rst
+++ b/doc/recipes.rst
@@ -515,4 +515,40 @@ From PHP, it's also possible to load a template stored in a string via
 
     Never use the ``Twig_Loader_String`` loader, which has severe limitations.
 
+Using Twig and AngularJS in the same Templates
+----------------------------------------------
+
+Mixing different template syntaxes in the same file is not a recommended
+practice as both AngularJS and Twig use the same delimiters in their syntax:
+``{{`` and ``}}``.
+
+Still, if you want to use AngularJS and Twig in the same template, there are
+two ways to make it work depending on the amount of AngularJS you need to
+include in your templates:
+
+* Escaping the AngularJS delimiters by wrapping AngularJS sections with the
+  ``{% verbatim %}`` tag or by escaping each delimiter via ``{{ '{{' }}`` and
+  ``{{ '}}' }}``;
+
+* Changing the delimiters of one of the template engines (depending on which
+  engine you introduced last):
+
+  * For AngularJS, change the interpolation tags using the
+    ``interpolateProvider`` service, for instance at the module initialization
+    time:
+
+    ```js
+    angular.module('myApp', []).config(function($interpolateProvider) {
+        $interpolateProvider.startSymbol('{[').endSymbol(']}');
+    });
+    ```
+
+  * For Twig, change the delimiters via the ``tag_variable`` Lexer option:
+
+    ```php
+    $env->setLexer(new Twig_Lexer($env, array(
+        'tag_variable' => array('{[', ']}'),
+    )));
+    ```
+
 .. _callback: http://www.php.net/manual/en/function.is-callable.php