Angularjs on a symfony2 application

Question

I\'m working on a SF2 application that uses a lot of javascript on the front end.

SF2 provides me a good way of building a nice REST app, manage my database with doc

Answer 1

I think Symfony2 can perfectly work well with AngularJS. Proof is I'm making an API on one side using Symfony, and a web app on the other side with AnglularJS.

Moreover, for some reasons I generate my views in my web app with Twig. I simply embed angular's curly braces in a twig {% verbatim %} {% endverbatim %} statement each time I need to use Angular in my views.

Answer 2

Use {@ variable @} in templates. After template generated just replace {@ with {{ and @} with }} with simple str_replace function. This way is clean and much faster then strings concatination and so on.

Answer 3

You can use this template or you can study this template and you can based in it.

Is a template application with secured communication via a RestFul API between the client part with AngularJS and the server part with Symfony2.

Another project that you should check is Aisel is open-source CMS for highload projects based on Symfony2 and AngularJS

Answer 4

You can simply escaped curly brackets like:

Hello {{ '{{' }} name {{ '}}' }}

and it will be parsed to the next HTML code:

Hello {{ name }}

You also can try to use left and right curly braces HTML coded character set, for example:

{ name }

But I don't sure that it will be understand by AngularJS lib :).

Answer 5

As of Twig 1.12 the raw tag was renamed to verbatim:

{% verbatim %}
    <ul>
    {% for item in seq %}
        <li>{{ item }}</li>
    {% endfor %}
    </ul>
{% endverbatim %}

Everything in-between won't be parsed by the Twig Engine and can be used by AngularJS.

Though I'd recommend changing the AngularJS delimiters. Otherwise it can be hard to distinguish between Twig and AngularJS code when looking at your templates.

Answer 6

A good solution for the two mustaches to avoid the confusion is the attribute-based directive called ng-bind: <p ng-bind="yourText"></p> is the same as <p>{{yourText}}</p>