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 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.

Answer 2

Searching through the web, I came across different solutions. You can, for example as said before, change the angular symbols. However, I preferred to keep it the most simple as possible by simply telling twig to output the angular symbols:

{{ '{{entity.property}}' }}

http://louisracicot.com/blog/angularjs-and-symfony2/

Answer 3

I have come across the same situation where I had to develop a single page application using AngularJS on top of Symfony2.

If you can separate the two apps, perfect!!! It would create a great separation of the Model and View layer. If not, as was the case with my application, you can surely use AngularJS with Symfony2 and TWIG perfectly fine.

I used quotes around the AngularJS expressions like -

{{ '{{someAngularJsExpression}}' }}

It just takes some time to get used to it but when you do, you're not going to face many problems. Symfony also allows you to use other templating engines but I'd prefer not to.

So my advice is to either have two different applications for AngularJS and Symfony. If you don't have the resources to do so, you can do the way I did. Don't worry, you'll get used to it.

Answer 4

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

Answer 5

Today everyone want symfony backend with api and angular/vue frontend - it's nice but this way we're loosing all symfony ability in frontned.

I'm sucessfully using angular with my symfony apps. Maybe it's not high performance thing , but it works.

Some tips for you :

1

read about $interpolateProvider

angular.module('myApp', [], function($interpolateProvider) {
            $interpolateProvider.startSymbol('{[{');
            $interpolateProvider.endSymbol('}]}');
  });

This way you can change {{ }} in angular for something else. I'm using {[{ and }]} , so it wont interfere with twig

2

second best thing here is https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

This connect symfony routing with js , so all your angular views / or ajax calls in js can be generated by symfony - this gives you a huge possibilities

Answer 6

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.