Skip to content

Commit

Permalink
minor #2140 added a recipe about how to use Twig and AngularJS togeth…
Browse files Browse the repository at this point in the history
…er (fabpot)

This PR was merged into the 1.x branch.

Discussion
----------

added a recipe about how to use Twig and AngularJS together

Commits
-------

b162a91 added a recipe about how to use Twig and AngularJS together
  • Loading branch information
fabpot committed Sep 26, 2016
2 parents 9ee6fe3 + b162a91 commit 86e4c0d
Showing 1 changed file with 36 additions and 0 deletions.
36 changes: 36 additions & 0 deletions doc/recipes.rst
Expand Up @@ -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

0 comments on commit 86e4c0d

Please sign in to comment.