Routing with angular and Symfony

So finally I made it work. I'm new to angularjs and Symfony so I'll write everything I did in order to make my routes work.

1st : When using routes in angular, don't put the /#/, start your route just after this. Angular routes start after this url. More details here (the first answer)

2nd: In your templateUrl in angular, write your full path starting from your project dir. For example, if you're working with wamp (my case) and your project name is 'Symfony', then the path is : WampInstall/Symfony\src\projectName\BundleName\Resources\views\BundleName\partials if you're using partial as dir name for your partial views.

3rd: Apache doesn't allow angularjs to do a GET request. So you have to configure it. I changed my .htaccess file the .src Symfony dir. Here is the link I followed. But I'm not sure this is safe for the web server security.

After this, everything should work.

In general mixing Symfony and Angular is not the best approach. Your app will be more maintainable if you separate completely your view and backend.

But still if you want to do that you can use some existing plugins to handle Symfony Routing in JavaSripts.

The most easy way to make Symfony and Angular work smoothly together is to envelop your Angular html in components (to avoid conflict with Twig). Than you can pass your baseUrl to those components like this :

<componentName baseurl="{{ app.request.scheme ~ '://' ~ app.request.httpHost ~ app.request.basePath }}"></componentName >

and then use it in your templateUrl function

    templateUrl: function($attrs) {                return $attrs.baseurl + 'templates/componentName.template.html';            }

Voila, not beautiful but working solution.