Angularjs on a symfony2 application

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 doctrine, use twig for templates and so on, but I would like to use Angularjs.

I know that angularjs an SF2 are 2 different framework with different approach, but I'm wondering what the best way to make this work is.

Is it even worth it?

If yes, what do you think is the cleaner and most efficient solution?

Maybe use php instead of twig for templates to use angularjs curly braces ?

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.

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.

I face the same situation, in my case, I've decided to split the client and server projects, I used symfony2 as server-side because it's simplicity and usability besides other advantages that brings to me. By other hand I created a simple HTML project with AngularJS, that is useful for me because I want to create a HTML5 Mobile App with the same client files.

In that case, I think that the core of the problem here is in the authentication and authorization process. You must implement a secure firewall for working in REST (for example WSSE: Symfony2: How to create a custom Authentication Provider) in the server side.

And then the corresponding implementation in the client side (AngularJS), the most useful resource that i found: Github:witoldsz/angular-http-auth.

If you want deeper implementation with your sf2 project, you can compile AngularJS using Assetic's filters, and gain performance in page loading.

I have used the following code to change the AngularJS delmiters

Coffeescript:

# Change the angular delimiters for twig compatability
# and load module with ngResource
WAFapp2 = angular.module("WAFapp2", ['ngResource'], ($interpolateProvider) ->
  $interpolateProvider.startSymbol "{[{"
  $interpolateProvider.endSymbol "}]}"
)    var WAFapp2;

or Javascript:

var WAFapp2;

WAFapp2 = angular.module("WAFapp2", ['ngResource'], function($interpolateProvider) {
  $interpolateProvider.startSymbol("{[{");
  return $interpolateProvider.endSymbol("}]}");
});

then at the top of my layouts:

<!DOCTYPE html>
<html lang="en" data-ng-app="WAFapp2">
  <head>

then later in the body tag section of the html I can use:

<ul>
{% for item in seq %}
    <li>{[{ item }]}</li>
{% endfor %}
</ul>

I think this keeps things cleaner, and allow easy mixing of twig and angular tags. This seems to work well for me.

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>

Keeping the angular app separate is more advisable. Just use Symfony as an api for data retrieval/persistence and as security provider.

This would allow greater separation of view and the data layer. As a result you can start working on the frontend side without thinking yet of the backend implementation. You just need to mock the api calls.

I've been trying to build a single page application using Symfony and angularjs. I used Symfony2 with the FOSRestBundle to build an Restful API and Angularjs to build the frontend.

By itself, AngularJs does not need Symfony2 framework to build a application as long as it has an API to talk with. However, I found Symfony2 useful in these area:

  1. Translation in the template. the data in the API payload does not need translation in most cases. Using Symfony I18N support for the template makes perfect sense.

  2. Loading of Option lists. Say you have a country list with 200+ options. You can build an API to populate a dynamic dropdown in angularjs, but as these options are static, you can simply build that list in twig.

  3. Preloading data/content. You can preload template or JSON data in the hosting page if you like

  4. Take advantage of the authentication feature of Symfony. You can used the same authenticated session to the API for the application, too. No need to use Oauth.

  5. The Assetic bundle is very useful to urglyfy and minify bunches of Javascript files used by AngularJs

However, I did find the following challenges:

  1. PHP session locking for multiple Ajax calls. Need a better way to free the php session by calling 'session_write_close()' or use a database for session. Where is the best place in Symfony to call that 'session_write_close' function so that we can free the session for more ajax calls as soon as possible ?

  2. Reloading/Syncing loaded data Say you have a list of items (like ebay items) showing in a browser, you want to update that list in client's browser when the list was updated on the server side. You might need to poll the list periodically or use something like Firebase. Firebase is an overkill in most cases, polling is not nice looking to me, but what is the best way to achieve this ?

Please add you comments. thanks

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

I use Symfony 2 for a similar case and it seems to work quite well, I've built a REST API that receives / sends JSON in the format I want. Use json_decode json_encode inside your controllers to handle the data and it should do exactly what you want.

Check Aisel! CMS based on Symfony2(backend) and AngularJS(frontend) https://github.com/ivanproskuryakov/Aisel

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:

&#123; name &#125;

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